JS中的模块化开发

摘引自:

http://www.ruanyifeng.com/blog/2012/10/javascript_module.html

http://developer.51cto.com/art/201305/392668.htm

/***
///1.全局函数写法
function m1(){

}
function m2(){

}
缺点:污染全局变量 无法保证不与其它模块的变量名冲突 模块成员之间没有关系


///2.对象写法
var module = {
_count:1,
m1 : function(){

},
m2: function(){

},
}
缺点:暴露所有模块成员 内部状态可以被外部修改 即外部可以直接修改对象的属性等
module._count=2;


///3.立即执行函数(可以达到不暴露私有成员的目的)
var module = (function(){
var _count = 0;
var m1 = function(){

};
var m2 = function(){

};
return {
m1 : m1,
m2 : m2
}
})()
console.log(module._count);--undefined

///4.放大模块
一个模块分成几个部分,一个模块继承另一个模块,这时才有放大模块
var module = (function(){
var _count = 0;
var m1 = function(){

};
var m2 = function(){

};
return {
m1 : m1,
m2 : m2
}
})();
var module1 = (function(module){
module.m3 = function(){
return 111;
}
})(module);
console.log(module);

///5.宽放大模式
由于模块的各个部分是从网上获取,不知道哪个部分先加载,采用放大模块可能加载一个不存在的空对象,这时候采用宽放大模式
var module1 = (function(module){

})(window.module || {})


///6.独立性输入全局变量
独立性模块内部不与程序的其它部分直接交互
为了在模块内部调用全局变量,可以显示的将其输入模块
这样可以保持模块的独立性,也很显现出模块的依赖特性
var module=(function($,YAHOO){

})(jQuery,YAHOO)

 

————————————————————————————————————————————————————————
模块的好处:有了模块可以很方便的使用别人的代码,想要啥功能就加载啥模块
考虑到不能瞎写就需要制定一个模块标准。目前的标准有CommonJS和AMD标准

2009美国小伙Ryan Dahl创作了node.js项目把js用于服务器端编程。这标志着模块化正式诞生。在浏览器端有无模块不无大碍,毕竟网页程序的复杂度有限
但是服务器端一定要有模块,与操作系统和其它程序互动否则无法编程。
node.js的模块系统就是参照commonJS规范实现的。在common中有一个全局的require()方法用于加载模块,如
一个math.js数学模块可以如下加载
var math = require("math");
math.add(2,3);-->5

有了服务器端的模块,大家自然想到客户端的模块,最好两者兼容,一个模块不用修改在服务器+客户端浏览器都可以运行。
但是,由于一个重大的局限CommonJS规范不适应于浏览器环境,以上的问题加载math.js可能花费很长时间,对于服务器都在硬盘存储可以同步完成,等待时间就是硬盘加载
的时间。但浏览器就是一个大问题模块放在服务器上,等待时间取决于网络速度,浏览器处于假死状态。因此,浏览器的模块加载不能采用同步(synchronous)只能采用
异步加载的方式(asynchronous)这就是AMD规范的诞生。

AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。
所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:
require([module], callback);
第一个参数是一个数组,里面的成员是要加载的模块,第二个参数是callback,加载成功后回调的函数。
require(["math"],function(math){
math.add(2,3);
})
math.add()与math模块加载不是同步的,浏览器不会发生假死。所以很显然,AMD比较适合浏览器环境。
目前,主要有两个Javascript库实现了AMD规范:require.js和curl.js。
本系列的第三部分,将通过介绍require.js,进一步讲解AMD的用法,以及如何将模块化编程投入实战。


————————————————————————————————————————————————————————
1.为啥要用require.js
最初所有js都写在一个文件里,后来越来越多,分解成多个js.
<script src="1.js"></script>
  <script src="2.js"></script>
  <script src="3.js"></script>
  <script src="4.js"></script>
  <script src="5.js"></script>
  <script src="6.js"></script>
以上缺点:
加载js时候浏览器会停止渲染,加载文件越多,失去响应的时间就越长
js中存在依赖关系必须保证加载顺序,依赖性最大的模块一定放在最后加载,代码的维护和编写变的困难。

require.js
1.实现js文件的异步加载,避免网页失去响应
2.管理模块之间的依赖,便于代码的编写和维护

加载require.js也可能会出现影响页面响应
解决办法:1.放在网页底部
2.defer async="true" (async这个ie不支持所以写上defer)

data-main="js/main"指定网页程序的主模块默认后缀后缀是.js所以只写main就可以
有点像C语言的main()函数
// main.js
  require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
  });

由于是异步加载的js所以不会阻塞网页的渲染及响应。回调函数的好处是只有前面的模块加载完成才会调用,解决了依赖问题。。。。
require(['jquery','underscore','backbone'],function($,_,Backbone){

});

默认不写路径,默认与主模块main.js在一个路径。
require.config()可以对模块的加载进行自定义。配置写在主模块中。
require.config({
paths:{
"require":"lib/jquery.min",
"underscore":"lib/underscore.min",
"requbackboneire":"lib/backbone.min"
}
});

require.config({
baseUrl:"js/lib",
paths:{
"require":"jquery.min",
"underscore":"underscore.min",
"requbackboneire":"backbone.min"
}
});


require.config({
baseUrl:"js/lib",
paths:{
"require":"moduleA.min"
}
});
require(['moduleA','moduleB','moduleC'],function(moduleA,moduleB,moduleC){

});
一旦写了baseUrl那么所有的js都依赖这个。
全局路径
require.config({
paths:{
"jquery":"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min"
}
});

以上要求:
require.js要求每一个模块都是一个单独的js,加载多个模块就会多次http请求,这会影响网页的加载速度。因此提供一个工具来把多个模块合并在一个文件里,减少
请求。

 

模块必须按照AMD的规范进行书写就是模块必须使用define()函数来定义


如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性
define(["moduleC"], function() {
var name = "a";
return name;
});


理论上讲require.js加载的模块必须用define定义按照AMD的规范。但有一部分的没有按照规范来进行,如下解决。
 require.config({
    shim: {
      'underscore':{
        exports: '_'
      },
      'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
      }
    }
  });


shim属性,专门用来配置不兼容的模块
具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。
jQuery的插件可以这样定义
shim: {
    'jquery.scroll': {
      deps: ['jquery'],
      exports: 'jQuery.fn.scroll'
    }
  }

 

require.js插件
require.js还提供一系列插件,实现一些特定的功能。
domready插件,可以让回调函数在页面DOM结构加载完成后再运行。
  require(['domready!'], function (doc){
    // called once the DOM is ready
  });


text和image插件,则是允许require.js加载文本和图片文件。
  define([
    'text!review.txt',
    'image!cat.jpg'
    ],

    function(review,cat){
      console.log(review);
      document.body.appendChild(cat);
    }
  );
类似的插件还有json和mdown,用于加载json文件和markdown文件。

 

 

require.config({
baseUrl: "fsadfdsfdsa"
})

config这个在开发阶段比较有用,上线压缩成一个文件后不起作用了。
node r.js -o baseUrl=./ name=main out=main-build.js(require.js放哪无关)
**/

 

posted @ 2014-12-01 16:00  xiaoweic4895  阅读(121)  评论(0编辑  收藏  举报