码迷,mamicode.com
首页 > 其他好文 > 详细

模块化编程:阮一峰 模块化编程

时间:2015-02-01 23:13:07      阅读:348      评论:0      收藏:0      [点我收藏+]

标签:

由于一个页面写的js太多了,都写在一个文件中,不好调试。所以我的目标就是如何能把所需的js文件,分割成易于维护的代码块,之间能相互调用方法和属性。虽然采用命名空间也能应付,但是不知道什么才是最好的做法。

看了这一系列文章,感觉是处理模块间的依赖关系。这也确实是需要做的事情,比如使用jquery UI,bootstrap等好用的库时,就需要处理好模块的关系。

javascripts模块化编程(一):模块的写法

一、原始写法:函数的堆积

二、对象写法:会暴露所有的模块成员

三、立即执行函数:不暴露私有成员

四、放大模式:一个模块很大,需要分成几个部分;一个模块需要继承另一个模块

var module1 = (function (mod){
  mod.m3 = function () {
    //...
  };
  return mod;
})(module1);  //module1模块添加了一个新方法m3(),然后返回新的module1模块。分成几部分写的话,从第二部分起,就不用加var了吧?

五、宽放大模式:与"放大模式"相比,就是"立即执行函数"的参数可以是空对象。

var module1 = ( function (mod){
  //...
  return mod;
})(window.module1 || {});

六、全局变量:为了在模块内部调用全局变量,必须显式地将其他变量输入模块

var module1 = (function ($, YAHOO) {
  //...
})(jQuery, YAHOO);   //其实可以传一个对象:module1_argu,包含需要的参数。

  

javascripts模块化编程(二):AMD规范

node使用CommonJS规范,由于它是同步加载,不适合浏览器端,所以在浏览器上使用AMD规范。

AMD也采用require()语句加载模块,但是不同于CommonJS,它要求两个参数:第一个参数[module],是一个数组,里面的成员就是要加载的模块;第二个参数callback,则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式。

 

问题:server和client不是用同一套规范,不统一呀。

 

Javascript模块化编程(三):require.js的用法

目标:js异步加载,管理模块的依赖关系。

加载:

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

主模块的写法:

require([‘moduleA‘, ‘moduleB‘, ‘moduleC‘], function (moduleA, moduleB, moduleC){
  // some code here
});

模块的加载:

require.config({
  baseUrl: "js/lib",
  paths: {
    "jquery": "jquery.min",
    "underscore": "underscore.min",
    "backbone": "backbone.min"
  }
});  //如果这些模块与main.js不在一个目录时。

AMD模块的写法:

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

加载非规范的模块:

require.config({
    shim: {

      ‘underscore‘:{
        exports: ‘_‘
      },
      ‘backbone‘: {
        deps: [‘underscore‘, ‘jquery‘],
        exports: ‘Backbone‘
      }
    }
  });

require.config()接受一个配置对象,这个对象除了有前面说过的paths属性之外,还有一个shim属性,专门用来配置不兼容的模块。具体来说,每个模块要定义(1)exports值(输出的变量名),表明这个模块外部调用时的名称;(2)deps数组,表明该模块的依赖性。

 

  

 

模块化编程:阮一峰 模块化编程

标签:

原文地址:http://www.cnblogs.com/wang-jing/p/4266201.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!