标签:
require可以被理解为一个工具库,主要作用于把客户端代码分割为各模块从而实现了模块化管理,便于代码的编写与维护;其次实现了异步或动态加载解决了网页加载阻塞
它的模块管理遵循AMD规范(Asynchronous Module Definition - 异步加载模块规范);所谓AMD规范,就是为了解决模块化编程带来的代码加载先后顺序问题,以及常规为解决该阻塞问题方式带来的各种附加问题
需要载入的文件: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({ 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([‘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 : { jquery : ‘public/jquery‘ } });
paths参数指定各模块位置
require([‘jquery‘], function ($){ return true; });
加载已配置了路径的jquery模块
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
定义模块的define方法和调用模块的require方法,合称为AMD模式
该模式的定义模块方法清晰且不会污染全局环境,能够清楚的显示依赖关系;允许异步加载模块,也可以根据需要动态加载模块
标签:
原文地址:http://www.cnblogs.com/johnl/p/4251300.html