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

初步认识了解require与AMD模式

时间:2015-01-26 22:23:07      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

require可以被理解为一个工具库,主要作用于把客户端代码分割为各模块从而实现了模块化管理,便于代码的编写与维护;其次实现了异步或动态加载解决了网页加载阻塞

它的模块管理遵循AMD规范(Asynchronous Module Definition - 异步加载模块规范);所谓AMD规范,就是为了解决模块化编程带来的代码加载先后顺序问题,以及常规为解决该阻塞问题方式带来的各种附加问题

 

核心是通过define方法将无序混乱代码分割为有序的模块,通过require方法实现代码的模块加载

需要载入的文件:require

 

载入require实现模块化编程

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

这样就可以开始了:js文件夹下存放着require文件和demo文件夹,demo文件夹下存放着main文件;data-main属性指定的文件main.js存放着程序主代码

页面会自己加载main.js,注意该加载为异步加载且不会引起阻塞

 

定义模块的define方法

独立模块

define({
    create : function (){},
    update : function (){},
    read : function (){},
    delete : function (){}
});

这是一个定义了拥有CURD4个方法的独立新模块,还可以这样写

define(function (){
    return{
        create : function (){},
        update : function (){},
        read : function (){},
        delete : function (){}
    };
});

第二种方法更自由,还可以初始化一些代码;对象变成了函数,函数的返回值即模块

 

非独立模块

define([‘image‘, ‘text‘], function (img, txt){
    return{
        get : function (){
            img.geturl();
            txt.getext();
        }
    };
});

参数以数组形式定义了一个依赖image模块和text模块的新模块,image和text分别代表同样被定义为模块的image.js文件和text.js文件,回调中的参数则分别对应加载的模块

新模块中get方法调用了image模块的geturl方法和text模块的getext方法

define(function (require){
    var img = require(‘image‘);
    var txt = require(‘text‘);

    return{
        get : function (){
            img.geturl();
            txt.getext();
        }
    };
});

好处是导入模块过多的时候,视觉上不会蛋疼

 

加载模块的require方法

异步加载

require([‘image‘, ‘text‘], function (img, txt){
    return true;
});

书写格式和define一样

 

动态加载

define(function (require){
    var status = false;
    require([‘image‘, ‘text‘], function (img, txt){
        status = true;
    });

    return status;
});

这是一个新的独立模块,定义模块的define方法内部动态加载了2个模块,加载完成后设置了一个状态值并返回

define([‘html‘], function (html){
    var hm = new html();
    require([‘image‘, ‘text‘], function (img, txt){
        hm.set({
            img : img,
            txt : txt
        });
    };

    return hm.send();
});

这是一个新的非独立模块,加载了一个依赖模块html,定义模块的define方法内部动态加载了2个模块,加载完成后改变html模块的set对象并返回html模块的send对象

 

第三参数

require([‘image‘, ‘text‘], function (img, txt){
    return true;
}, function (err){
    return false;
});

回调用于处理错误,参数为接受到的error对象

 

配置require的config方法

paths

require.config({
    paths : {
        jquery : ‘public/jquery‘
    }
});

paths参数指定各模块位置

require([‘jquery‘], function ($){
    return true;
});

加载已配置了路径的jquery模块

 

shim

require.config({
    paths : {
        ‘underscore‘ : ‘public/underscore‘,
        ‘backbone‘ : ‘public/backbone‘
    },
    shim : {
        ‘underscore‘: {
            exports : ‘_‘
        },
        ‘backbone‘: {
            deps : [‘underscore‘],
            exports : ‘Backbone‘
        }
    }
});

有些库AMD模式不兼容,需要指定shim属性的值来帮助require加载非AMD规范库
underscore、backbone就是非AMD规范库,shim指定它们依赖关系及输出符_、Backbone

 

AMD模式

定义模块的define方法和调用模块的require方法,合称为AMD模式

该模式的定义模块方法清晰且不会污染全局环境,能够清楚的显示依赖关系;允许异步加载模块,也可以根据需要动态加载模块

 

我们的学习完成了,但是还是很迷糊;先这样了不经实战也是无法继续深入了

初步认识了解require与AMD模式

标签:

原文地址:http://www.cnblogs.com/johnl/p/4251300.html

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