Javascript模块化编程require.js

AMD、CMD、CommonJS的异同

前言先说下其三则的区别吧！
AMD,CMD,CommonJS都是用于处理模块间依赖关系的规范

CommonJS

NodeJS就采用了CommonJS;因为其实采用同步加载模块，所以其比较使用使用在服务器端，因为在服务器读取模块都是在本地磁盘，加载速度很快。但是如果在客户端，加载模块的时候有可能出现“假死”状况。

AMD

require.js就是使用AMD规范，其是异步加载模块机制，避免出现浏览器假死，但是开始就把所有依赖写出来是不符合书写的逻辑顺序的。

CMD

seajs就是使用CMD规范。CMD也是采用异步加载模块机制，但是CMD采用是按需加载，依赖就近

AMD和CMD最大的区别是对依赖模块的执行时机处理不同，而不是加载的时机或者方式不同，二者皆为异步加载模块。AMD依赖前置，js可以方便知道依赖模块是谁，立即加载；而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略。

 
 

为什么要使用require.js？

require.js的诞生之前，所有的代码都是写在一个文件里面，只要加载一个文件即可，但代码多了一个文件可不好管理，便分成多个文件依次加载。这种写法最大的缺点是，
①首次加载时，浏览器会停止渲染响应很长的一段时间，
②其次由于js文件之间存在着依赖关系，因此要严格保证加载的顺序。

所以require.js的诞生，就是为了解决这两个问题
（1）实现js文件的异步加载，避免网页失去响应；
（2）管理模块之间的依赖性，便于代码的编写和维护。

 

怎样使用require.js？

①首先我们需要下载require.js的版本，可通过官网网站下载
https://requirejs.org/docs/download.html
②当我们加载require.js这个文件的时候也可能会导致页面失去响应，所以我们可以通过script标签添加defer 或async处理（IE不支持async）

<script src="js/require.js" defer async="true" ></script>

③require.js有一个data-main属性，这个属性是指程序加载的主模块，js后缀可以省略

<script src="js/require.js" data-main="js/main"></script>

 

require.js语法讲解

 
require(array,funcion(arg1,arg2…){})

require.js的第一个参数是一个数组，代表的是所要依赖的模块，第二个参数是一个回调函数，表示加载依赖后所要执行的程序。
在主模块main.js同级下添加jquery.js源码文件，可以通过下列方式应用jquery模块。

//main.js
require(['jquery'],function($){
    $('#btn').click(function(){
         alert("加载jquery！")
    })
})

require.config
当然我们可以require.config来对模块进行自定义加载例如

//main.js
require.config({
       baseUrl:"js/bin",
　　　　paths: {
　　　　　　"jquery": "lib/jquery.min",
　　　　　　"backbone": "backbone.min"
　　　　}

　　});
require(['jquery','backbone'],function($,backbone){
    $('#btn').click(function(){
         alert("加载jquery！")
    })
})

其中paths表示模块的自定义名字和模块路径，baseUrl是其模块的公共路径.既jquery模块的路径为./js/bin/lib/jquery.min.js

AMD模块的写法

require.js就是采用AMD规范。
而AMD规范的特点就是采用defer函数，直接上例子

define(['myLib'], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

其中define看上去代码形式有点类似require的写法对吧，其实是require写法像他罢了！其第一参数是一个数组，指明该模块的依赖，
第二参数是一个回调函数，在执行前必定会先加载完所需依赖，其中return便是向外暴露的接口。非常简单明了。

再看下面例子大家便懂了

　// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});


// main.js
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

以上这些只是为了学习做的总结，有部分摘自大牛原话，本人只是为了学习方便做的笔记，如有侵权，联系必删，致敬大牛！