模块化编程（一）浏览器端规范:AMD----requireJS

先明确模块化开发的目的。 模块化开发使代码耦合度降低，模块化的意义在于最大化的设计重用，以最少的模块、零部件，更快速的满足更多的个性化需求。因为有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

在模块化开发中每一个模块都是一个独立的JS文件

一.使用方式: 首先需要引入requireJS文件

<script type="text/javascript" src="lib/require.js"></script>

然后这个js函数中定义了三个全局函数 var requirejs, require, define; 其中requirejs===require 所以其实只有两个全局函数 define:定义模块,这个函数接收三个参数 第一个参数：(暂时未知用途) 第二个参数：需要依赖的模块列表，是一个数组 第三个参数：回调 详细说一下第三个参数 如果第三个参数是一个对象，那么在引入模块的时候就会返回这个对象 如果第三个参数是一个匿名函数,那么在引入模块的时候就会执行这个匿名函数，并返回这个函数的返回值

define(function () {
    console.log('123');
    var a={
        app:'app',
        show:function(){
            console.log(this.app);
        }
    };
    // return ['123','123'];
});

require:引入模块 第一个参数：需要依赖的列表，是一个数组 第二个参数：是在依赖都加载完成之后会运行的函数,这个函数的形参与前面依赖列表的返回值是对应的 第三四个参数：(暂时未知用途)

<script type="text/javascript">//这里是index.html
    require(['js/app'],function(a){
        console.debug(a);
    })
</script>

所有的依赖路径都是相对于这个index.html的,即使依赖的依赖也都是相对于这个index.html的

define(['js/app/a'],function () {
    console.log('app');
    return{
        app:'app',
        show:function(){
            console.log(this.app);
        }
    };
});

二.相关配置: baseUrl ：所有模块的查找根路径。 paths ：path映射那些不直接放置于baseUrl下的模块名。设置path时起始位置是相对于baseUrl的，除非该path设置以"/"开头或含有URL协议（如http:）。

<script type="text/javascript">
    require.config({
        baseUrl:'js/',
        paths:{
            jquery:['../lib/jquery-1.7.2','app/b']
        }
    });
    require(['app','jquery'],function(a,$){
        console.dir(a);
        console.dir($);
    })
</script>

这些配置代码可以放到一个JS文件中，然后像下面这样加载

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

转载于:https://my.oschina.net/u/2499097/blog/751231