模块化学习

作者: 世玮 | 来源:发表于2021-04-28 10:39 被阅读0次

模块化

概念：

模块化其实是一个挺抽象的概念，我觉得在于它的实用性；可以是一个独立的文件，可以是一个函数，把当前模块相关的变量和方法统一维护起来，并暴露相应的接口与外界进行交互，降低各模块之间的污染影响。

为什么要用模块化？

把复杂问题分解成多个子问题

关注分离大型软件开发的技术基础
更优雅的代码管理
替换、复用、拓展
内聚（变量，行为内聚在模块内，对外暴露接口进行通信）开发方式的革新
方便多人协同，面向过程开发

模块化的历史

其实实际开发过程中，我们或多或少都会写一些模块化的功能或者想着去进行模块化；但是模块化的规范是什么，模块化的思维是什么呢，我觉得可以从其发展史中对比学习到很多。

早期“假”模块化时代;

- 借助函数作用域来模拟，俗称函数模式。就像常见的service中实现方法。

function test1(){
}
function test2(){
}

缺点：只是从代码编写上，拆成了一些细小单元而已；但是各个函数直接相互调用，命名冲突等问题。

- 利用对象，实现命名空间的问题，俗称对象模式。

const m1 = {
   value: "",
   fn1: function(){},
   fn2: function(){},
}
const m2 = {
   value: "",
   fn1: function(){},
   fn2: function(){},
}

缺点：数据很不安全，容易被修改影响。

- 利用闭包结合自执行函数(IIFE),俗称IIFE模式。

const module = (function(){
    var value = "11";
    var fn1 = function(){};
    var fn2 = function(){};
    return {
       fn1: fn1,
       fn2: fn2
    }
})()
module.fn1();
module.value //undefined

//如何结合window对象暴露其接口，和引入其他模块
(function(window, $) {
    var data = 'data'
    function fn1() {
        console.log('fn1', $)
    }
    function fn2() {
        data = 'modified data'
        console.log(`fn2 ${data} `)
    }
    window.module1 = { fn1, fn2 }
})(window, jQuery)

CommonJS
其实就是实现 module.exports 和 require 方法。

根据 require 的文件路径，加载文件内容并执行，同时将对外接口进行缓存。

// a.js
var name = 'morrain'
var age = 18
exports.name = name
exports.getAge = function(){
    return age
}
// b.js
var a = require('a.js')
console.log(a.name) // 'morrain'
a.name = 'rename'
var b = require('a.js')
console.log(b.name) // 'rename'

CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require)

特点：
- 文件即模块，文件内所有代码都运行在独立的作用域；不污染全局空间；
- 模块可以被多次引用、加载。所以在第一次被加载时，会被缓存，之后直接都从缓存中直接读取结果；
- 加载某个模块，就是引入该模块的module.exports属性；
- module.exports属性输出的是值的拷贝，一旦这个值被输出，模块内再发生变化不会影响到输出的值；
- 模块加载顺序按照代码引入的顺序；
- module.exports与exports的区别：
- - 1、exports是module.exports的一个引用，exports指向的是module.exports
- - 2、exports 返回的是模块函数
- - 3、module.exports 返回的是模块对象本身，返回的是一个类

//c.js
var lodash = require('lodash');
const safeGet = (target, path, defaultValue) => {
  return lodash.get(target, path, defaultValue) || defaultValue;
};
exports.safeGet = safeGet;

var module = require('./c.js');
module.safeGet({}, 'a.b.c');

简单实现：

const cache = {}

(function(modules) {
  //定义require方法
  const require = (mn) => {
    //模块可以被多次引用、加载。所以在第一次被加载时，会被缓存，之后直接都从缓存中直接读取结果；
    //module.exports属性
    if (cache[mn]) return cache[mn].exports;
    let module = cache[mn] = {
      name: mn,
      exports: {}
    }
    //模块标识(module)、模块定义(exports) 、模块引用(require)
    modules[mn](module, exports, require)
    //module.exports属性
    return module.exports
  }

  return require('index.js')

})({
  'a.js': function(module, exports, require) {
     // ...
  }
})

AMD 规范，全称为：Asynchronous Module Definition, 是异步的，完全贴合浏览器的。代表库：requireJs

require.js 实现很简单：通过 define 方法，将代码定义为模块；通过 require 方法，实现代码的模块加载。define 和 require 就是 require.js 在全局注入的函数。

//全局配置
require.config({ paths: {
  'jquery': 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
} });

//定义模块a
define('a', function () {
  console.log('a load')
  return {
    run: function () { console.log('a run') }
  }
})
//定义模块b
define('b', function () {
  console.log('b load')
  return {
    run: function () { console.log('b run') }
  }
})
//引入模块，并且把模块按照顺序，作为参数引入执行
require(['a', 'b'], function (a, b) {
  console.log('main run') // 🔥
  a.run()
  b.run()
})

按照示例实现一个简单的实现：

const def = new Map();

// AMD mini impl
const defaultOptions = {
  paths: ''
}

// From CDN
const __import = (url) => {
  return new Promise((resove, reject) => {
    System.import(url).then(resove, reject)
  })
}

// normal script
const __load = (url) => {
  return new Promise((resolve, reject) => {
    const head = document.getElementsByTagName('head')[0];
    const node = document.createElement('script');
    node.type = 'text/javascript';
    node.src = url;
    node.async = true;
    node.onload = resolve;
    node.onerror = reject;
    head.appendChild(node)
  })
}

// 为啥没写 let const var
// 千万不要在实际使用这种比较 low 的方式 🔥
rj = {};

rj.config = (options) => Object.assign(defaultOptions, options);

// 定义模块，触发的时机其实是在 require 的时候，所以 -> 收集
define = (name, deps, factory) => {
  // todo 参数的判断，互换
  def.set(name, { name, deps, factory });
}

// dep -> a -> a.js -> 'http:xxxx/xx/xx/a.js';
const __getUrl = (dep) => {
  const p = location.pathname;
  return p.slice(0, p.lastIndexOf('/')) + '/' + dep + '.js';
}

// 其实才是触发加载依赖的地方
require = (deps, factory) => {
  return new Promise((resolve, reject) => {
    Promise.all(deps.map(dep => {
      // 走 CDN
      if (defaultOptions.paths[dep]) return __import(defaultOptions.paths[dep]);

      return __load(__getUrl(dep)).then(() => {
        const { deps, factory } = def.get(dep);
        if (deps.length === 0) return factory(null);
        return require(deps, factory)
      })
    })).then(resolve, reject)
  })
  .then(instances => factory(...instances))
}

CMD 规范整合了 CommonJS 和 AMD 规范的特点。它的全称为：Common Module Definition，类似 require.js，CMD 规范的实现为 sea.js。

// sea.js
define('a', function (require, exports, module) {
  console.log('a load')
  exports.run = function () { console.log('a run') }
})

define('b', function (require, exports, module) {
  console.log('b load')
  exports.run = function () { console.log('b run') }
})

define('main', function (require, exports, module) {
  console.log('main run')
  var a = require('a')
  a.run()
  var b = require('b')
  b.run()
})
seajs.use('main')
// main run
// a load
// a run
// b load
// b run

其实可以发现，seaJs是按需加载的；那么按照示例实现一个简单的实现：

//缓存模块
const modules = {};
const exports = {};
sj = {};

const toUrl = (dep) => {
  const p = location.pathname;
  return p.slice(0, p.lastIndexOf('/')) + '/' + dep + '.js';
}

const getDepsFromFn = (fn) => {
  let matches = [];
  // require('a ')
  //1. (?:require\() -> require(  -> (?:) 非捕获性分组
  //2. (?:['"]) -> require('
  //3. ([^'"]+) -> a -> 避免回溯 -> 回溯 状态机
  let reg = /(?:require\()(?:['"])([^'"]+)/g; // todo
  let r = null;
  while((r = reg.exec(fn.toString())) !== null) {
    reg.lastIndex
    matches.push(r[1])
  }

  return matches
}

const __load = (url) => {
  return new Promise((resolve, reject) => {
    const head = document.getElementsByTagName('head')[0];
    const node = document.createElement('script');
    node.type = 'text/javascript';
    node.src = url;
    node.async = true;
    node.onload = resolve;
    node.onerror = reject;
    head.appendChild(node)
  })
}

// 依赖呢？
// 提取依赖： 1. 正则表达式 2. 状态机
define = (id, factory) => {
  const url = toUrl(id);
  const deps = getDepsFromFn(factory);
  if (!modules[id]) {
    modules[id] = { url, id, factory, deps }
  }
}

const __exports = (id) => exports[id] || (exports[id] = {});
const __module = this;
// 这里面才是加载模块的地方
const __require = (id) => {
  return __load(toUrl(id)).then(() => {
    // 加载之后
    const { factory, deps } = modules[id];
    if (!deps || deps.length === 0) {
      factory(__require, __exports(id), __module);
      return __exports(id);
    }

    return sj.use(deps, factory);
  })
}

sj.use = (mods, callback) => {
  mods = Array.isArray(mods) ? mods : [mods];
  return new Promise((resolve, reject) => {
    Promise.all(mods.map(mod => {
      return __load(toUrl(mod)).then(() => {
        const { factory } = modules[mod];
        return factory(__require, __exports(mod), __module)
      })
    })).then(resolve, reject)
  }).then(instances => callback && callback(...instances))
}

export 和 export default

1、export与export default均可用于导出常量、函数、文件、模块等
2、在一个文件或模块中，export、import可以有多个，export default仅有一个
3、通过export方式导出，在导入时要加{ }，export default则不需要
4、export能直接导出变量表达式，export default不行。

模块化学习

概念：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读