image.png

什么是模块化? 网上的
什么是模块化（一）
当我们在多个 JavaScript 文件之间进行通讯时,
所以如何解决命名冲突和文件依赖的问题呢？
解决方法就是：限制作用域，并且移除全局变量。
而解决以上两个问题的做法就是模块化
这个博客里写conmmonJS的时候,

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

// main.js
var counter = require('./lib').counter;
var incCounter = require('./lib').incCounter;

console.log(counter);  // 3
incCounter();
console.log(counter); // 3

据此得出结论:一旦输出一个值，模块内部的变化就影响不到这个值。
这个结论是有问题的. 之所以影响不到是因为 counter 是个原始值.
如果改成 counter.num++ counter变成引用值,则还是有效果的.
(吓我一跳,如果影响不到,那各种变量岂不是都用不了?)

什么是模块化，模块化开发如何实现？;
模块化就是讲js文件按照功能分离，根据需求引入不同的文件中。源于服务器端。

模块化实现（好处，原因）
什么是模块化呢？《 Java 应用架构设计：模块化模式与 OSGi 》一书中对它的定义是：模块化是一种处理复杂系统分解为更好的可管理模块的方式。

image.png
image.png
image.png

common.js

main.js

var m1 = require("./m1.js");
var m2 = require("./m2.js");
var m3 = require("./m3.js");
 m1.fn();
 m2();
 m3.fn();

m1.js

module.exports = {
  name : "m1",
  fn : function () {
    console.log(this.name);
  }
}

m2.js

module.exports = function () {
    console.log("m2");
}

m3.js

exports.fn = function () {
    console.log("m3");
}

用git 执行 node main.js

image.png
image.png
image.png
image.png

我让main.js 依赖 m3, m3 依赖 m2 和 m1
index.html 注意要用 data-main 指定主要的js文件.

         <script src="https://cdn.bootcss.com/require.js/2.3.6/require.js" data-main= "main.js"></script>

main.js

(function () {
  require.config({
    paths : {
      m3 : "./m3",
      m2 : "./m2",
      m1 : "./test/m1",
      jquery : "http://libs.baidu.com/jquery/2.0.0/jquery.min"
      // 这里末尾添加 .js 会报错
      // 可以引入cdn
    }
  })
  require(["m3"],function (num) {
    console.log(num.num);
  });
    
    require(["jquery"],function ($) {
        $("body").css({"background":"red"});
    })
    
})();

test/m1.js

define(function () {
  var num = 1;
  
    return {
      num:num
    }
})

m2.js

define(function () {
    var num = 2;
    
    return {
      num : num
    }
})

m3.js

define(["m1","m2"],function (num1,num2) {
    var num = num1.num + num2.num;
    
    return {
      num : num
    }
})

image.png
image.png

cmd
index.html

<script src="https://cdn.bootcss.com/seajs/3.0.3/sea.js"></script>
        <script type="text/javascript">
            // 指定主要js
            seajs.use("http://127.0.0.1:8020/server/commonjstest/main.js");
            // 这里我的sea.js不是跟main.js同目录下的,所以要填绝对路径,,尼玛
            // 后面的都要改成绝对路径, 否则默认从 sea.js所在文件夹中去找.
        </script>

m1.js

define(function (require,exports,module) {
  var num = 1;
  
    exports.num = num;
})

m2.js

define(function (require,exports,module) {
  var num = 2;
  
  exports.num = num;
})

m3.js

define(function (require,exports,module) {
  var num = 3;
  // 这是异步加载, 加载完之后执行 回调函数里的语句.模块参数放在回调函数中的参数
// 类似amd规范
  require.async("http://127.0.0.1:8020/server/commonjstest/m2.js",function (m2) {
    console.log(m2.num);
  })
  // 这是同步加载, 阻塞进程,控制执行顺序, 类似 cmd规范
  var m1 = require("http://127.0.0.1:8020/server/commonjstest/test/m1");
  console.log(m1.num);
  
  module.exports = {
    num
  }
  
})

main.js

(function () {
  define(function (require,exports,module) {
    var m3 = require("http://127.0.0.1:8020/server/commonjstest/m3");
    console.log(m3.num);
    require.async("http://libs.baidu.com/jquery/2.0.0/jquery.min.js",function ($) {
        $("body").css({"background":"red"});// 报错, $ is not defined
    })
  })
  
    
})();

image.png

执行顺序就不说了,先执行同步的主线程的,然后再执行事件里的.
这里发现jq无法引入, 表明 jq 是不支持sea.js的. 呵呵,看来用的人是不是不多啊?
jq源码是支持 amd的

    if ( typeof define === "function" && define.amd ) {
        define( "jquery", [], function () { return jQuery; } );
    }

seajs如何引入jquery?

define(function(){
    //jquery源代码
    return $.noConflict();
});

测试有效果. 这表明 return 可以替代exports
这cmd 还真是都支持啊.

image.png