node.js 模块化

Posted 2020-08-17 type_Y

1.模块化有助于生产效率,方便以后维护的

2.非模块化带来的问题在于命名冲突和文件依赖,不能设置似有成员

3.seajs(懒加载)

• 导入seajs
• define() 定义一个模块，define的回调的三个参数名字不可更改

define(function (require, exports, module) {});

• exports或者module.exports将模块中的成员暴露出来
• seajs.use 使用一个模块
• config() 配置一些基本信息（别名、路径）

 

define(function (require, exports, module) {
    module.exports={
        add:function(a,b){
        return parseInt(a) + parseInt(b)
    },
        mul:function(a,b){
            return parseInt(a) - parseInt(b)
        }
    }
});


<script src="scripts/sea-debug.js"></script>
<script>
    seajs.use("seajs.js", function (obj) {
        console.log(obj.add(5,6));

        console.log(obj.mul(5,6));
    });
</script>

require引入另一个模块(基于seajs.js的位置)
exports输出单个
module.exports输出时对象

html页面中的config作用是为了简化调用模块

seajs.config({
        //设置路径
        base: "modules/demo4",
        //设置别名
        alias: {
            c: "calc",
            p: "power"
        }
    });

　　

• seajs原理

    function loadJS(path, callback) {
              var head = document.getElementsByTagName("head")[0];
              var node = document.createElement("script");
              node.src = path;
              head.appendChild(node);
              //浏览器兼容处理
              var supportOnload = "onload" in node;
              if(supportOnload) {
                  node.onload = function () {
                      callback();
                  }
              }else{
                  node.onreadystatechange = function () {
                      if(node.readyState == "loaded" || node.readyState == "complete") {
                          callback();
                      }
                  }
              }
          }
  
          //调用
          loadJS("js/test.js", function () {
              test();
          })
  

  　　

• 模块化框架requireJS(预加载)

• seajs遵守CMD规范
• CMD规范的地址 https://github.com/seajs/seajs
• CMD规范的特点 所有的require()都是懒加载模式，用到的时候才去加载，提升初始化时加载的性能

• requirejs遵守AMD规范 requirejs官网 http://www.requirejs.org/
• AMD规范的地址
• AMD规范的特点 所有的require()都是一个预加载模式