理解javascript模块化

1、这篇文章主要帮助大家深入理解javascript 模块化，感兴趣的小伙伴们可以参考一下模块化是一个通用的编程最佳实践。程序的模块化使我们可以更方便地使用别人的代码，想要什么功能，就加载什么模块，从而提高代码的利用效率，增加开发速度。模块就像积木， 有了它， 我们可以搭出各种各种功能样式的程序。积木有什么特点？小而简单。 同样的， 我们程序中的模块也要做到这一点，确保自己创建的函数一次只完成一个工作，这样其他开发者可以简单地调试与修改你的代码，而不需浏览所有代码才能弄清每一个代码块执行了什么功能。只有做到像这样地小而简单，才能实现其通用功能。一、 javascript 模块化的方法1、函数封装J

2、avaScript 的作用域就是基于函数的，所以我们可以把函数作为模块。function fn1()  /codefunction fn2()  /code缺点： 污染 了全局变量，无法保证不与其他模块发生变量名冲突2、对象var myModule1 =   fn1: function()    /code  ,  fn2: function()    /code  缺点：会暴露所有模块成员，内部状态可以被外部改写立即自执行函数推荐var myModule = (function() 

3、 function fn1()    /code  ,  function fn2()    /code  ,  return     fn1: fn1,    fn2: fn2  ;)();二、小而简单关于小而简单， 我们看一个例子，比如我们现在想编写一个创建新链接的函数，并且为类型是 mailto 超链接添加一个class。可以这样做：function addLink(text, url, parentElement)   var newLink =

4、document.createElement(a);/ 创建 a 标签   newLink.setAttribute(href, url);/ 为 a 标签设置 href 属性  newLink.appendChild(document.createTextNode(text);/为 a 标签添加文本  if(url.indexOf(mailto:)=-1)    newLink.className = mail;    parentElement.appendChild(newLink);/将 a 标签添加到页面这样写能够

5、工作， 但你或许会发现自己又不得进行其他的功能添加， 于是，这个函数又不适用了。所以，函数越特殊，越难以适用于不同情形。这里的函数写法没有达到模块化的要求一个函数只干一件事。我们将函数改编下：function createLink(text,url)   var newLink = document.createElement(a);  newLink.setAttribute(href, url);  newLink.appendChild(document.createTextNode(text);   return newLink;这里 creat

6、eLink 函数只做一件事创建并返回要添加到页面中的a 标签（小而简单），这样我们就可以在任何需要创建超链接的情况下调用这样函数。三、 CommonJS在浏览器环境下，没有模块也不是特别大的问题，毕竟网页程序的复杂性有限；但是在服务器端，一定要有模块与操作系统和其他应用程序互动，否则根本没法编程。虽然JavaScript 在 web 端发展这么多年， 但是第一个流行的模块化规范却由服务器端的JavaScript应用带来， CommonJS 规范是由NodeJS 发扬光大，这标志着JavaScript 模块化编程正式登上舞台。node.js 的模块系统，就是依据CommonJS规范实现的。在Co

7、mmonJS 中，有一个全局性方法 require() ，用于加载模块。加载模块：var math = require(math);调用模块：math.add(2,3)CommonJS 规范不适用于浏览器环境，因为它存在一个重大的局限，上例中第二行math.add(2, 3)必须要在math.js 加载完成后才能运行，而模块都放在服务器端，所以可能要等很长时间，等待时间取决于网速的快慢。CommonJS 规范适用于服务器端， 因为对于服务端来说，所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间四、模块应该怎么定义和怎么加载?AMDAsynchronous Module

8、Definition异步模块定义 ,主要代表： require.js目的：（ 1）实现 js 文件的异步加载，避免网页失去响应；（ 2）管理模块之间的依赖性，便于代码的编写和维护。1、定义模块define(./cart, ./inventory, function(cart, inventory)   / 通过 引入依赖  return     color: blue,    size: large,    addToCart: function()       inventory.d

9、ecrement(this);      cart.add(this);      );2、加载模块require( some/module, my/module, a.js, b.js,function(someModule,  myModule)   /This function will be called when all the dependencies   /listed above are loaded. Note that this function could   /be ca

10、lled before the page is loaded.  /This callback is optional. );CMDCommon Module Definition 通用模块定义，CMD 规范是国内发展出来的。主要代表：sea.js1、定义模块define(function(require, exports, module)  /通过require 引入依赖 var $ = require(jquery); var Spinning = require(./spinning); /通过exports 对外提供接口 exports.doSomething = . /或者通过module.exports 提供整个接口 module.exports = .);2、加载模块seajs.use(./static/h