现代模块化

本节目标：理解“现代模块化”的核心思路，并能把它用于实际开发或面试表达。 ==先来说说== CommonJS ==规范，在== Node ==发布之后，==CommonJS ==模块化规范就被用在了项目开发中，它有几个概念给大家解释一下。==

==每个文件都是一个模块，它都有属于自己的作用域，内部定义的变量、函数都是私有的，对外是不可见的；==
==每个模块内部的== module ==变量代表当前模块，这个变量是一个对象；==
module ==的== exports ==属性是对外的接口，加载某个模块其实就是在加载模块的== module.exports ==属性；==
==使用== require ==关键字加载对应的模块；==require ==的基本功能就是读入并执行一个== JavaScript ==文件，然后返回该模块的== exports ==对象，如果没有的话会报错的；==

==说到这里，我们就将上面提到过的代码通过== CommonJS ==模块化：==

// utils.jsmodule.exports = {  show: function (id) {    document.getElementById(id).setAttribute('style', "display: block")  },  hide: function (id) {    document.getElementById(id).setAttribute('style', "display: none")  }}//

==也可以输出单个方法==

module.exports.show = function (id) {  document.getElementById(id).setAttribute('style', "display: block")}
//

==引入的方式==

var utils = require('./utils')//

==使用它==

utils.show("body")

==除了== CommonJS ==规范外，还有几个现在只能在老项目里才能看到的模块化模式，比如以== require.js ==为代表的== AMD==（==Asynchronous Module Definition==）== ==规范== ==和== ==玉伯团队写的== sea.js ==为代表的== CMD==（==Common Module Definition==）== ==规范。== AMD ==的特点是一步加载模块，但是前提是一开始就要将所有的依赖项加载完全。== CMD ==的特点是。依赖延迟，在需要的时候才去加载。== ==显然我更喜欢== CMD ==这种方式去加载模块，这样避免了一开始就把一些用不上的模块加载进来，提高了首屏加载速度。== AMD（异步模块定义） ==简单来看看如何通过== AMD ==规范的== require.js ==书写上述模块化：== // ==定义模块==

 utils.jsdefine(['home'], function(){  function show(id) {    document.getElementById(id).setAttribute('style', "display: block")  }    function hide(id) {    document.getElementById(id).setAttribute('style', "display: none")  }  return {    show: show,    hide: hide  };});
//

==加载模块==

require(['utils'], function (cart){cart.show('body');});
require.js

==定义了一个函数== define==，它是全局变量，用来定义模块，它的语法是这样的==

:
define(id, dependencies, factory)

id==：它是可选参数，用于标识模块；==
dependencies==：当前模块所依赖的模块名称数组，如上述模块依赖== home ==模块，这就解决了之前说的模块之间依赖关系换乱的问题，通过这个参数可以将前置依赖模块加载进来；==
factory==：模块初始化要执行的函数或对象。==

require([dependencies], function(){}) ==通过== require ==进行引入，第一个参数为需要依赖的模块数组，第二个参数为一个回调函数，当前面的依赖模块被加载成功之后，回调函数会被执行，加载进来的模块将会以参数的形式传入函数内，以便使用。== CMD（通用模块定义）sea.js ==和== require.js ==解决的问题其实是一样的，只是运行的机制不同，遵循的是就近依赖，同样来看看它的写法：== // ==定义模块==

  utils.jsdefine(function(require, exports, module) {  function show(id) {    document.getElementById(id).setAttribute('style', "display: block")  }  exports.show = show});
<script type="text/javascript" src="sea.js"></script><script type="text/javascript">  //

==引入模块通过==seajs.use==，然后可以在回调函数内使用上面模块导出的方法==

  seajs.use('./utils.js',function (show) {        show('#box');  }); </script>

==首先是引入== sea.js ==库，定义和导出模块分别是== define() ==和== exports==，可以在定义模块的时候通过== require ==参数手动引入需要依赖的模块，使用模块通过== seajs.use==。==

现代模块化 ​

现代模块化