AMD规范&RequireJs基础

来源：互联网发布：淘宝虚拟试衣间商家编辑：程序博客网时间：2024/06/11 02:41
AMD简介：AMD：Asynchronous Module Definition，即异步模块加载机制。AMD中唯一的API(define函数)：define([module-name?], [array-of-dependencies?], [module-factory-or-object]);参数：module-name: 模块标识，可以省略。array-of-dependencies: 所依赖的模块，可以省略。module-factory-or-object: 模块的实现，或者一个JavaScript对象。说明：当define函数执行时，它首先会异步的去调用第二个参数中列出的依赖模块，当依赖的所有模块都载入完成之后，如果第三个参数是一个回调函数则执行，然后告诉系统该模块可用，也就通知了依赖于自己的模块自己已经可用了。AMD规范的实现框架：RequireJS，NodeJS，Dojo，JqueryRequireJs：1）概念：用于客户端的模块管理，让客户端的代码由一个个模块组成，实现模块的异步或动态加载，从而提高代码的性能和可维护性。优点：1> 不使用RequireJS：页面在<head></head>标签中依次加载多个js文件：1)加载的时候，浏览器会停止网页渲染，加载的文件越多，网页失去响应的时间就会越长加载的时候，浏览器会停止网页渲染，加载的文件越多，网页失去响应的时间就会越长。2)js文件之间存在依赖关系，因此必须保证正确的加载顺序，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。2> 使用RequireJS：1)实现js文件的异步加载，极大地缩短了网页失去响应的时间。2)管理模块之间的依赖性，便于代码的编写和维护。2）核心思想：通过define()方法，将代码定义为模块；通过require.config()方法配置require.js的运行参数；通过require()方法，实现代码的模块加载。3）核心API：1> define方法：1)定义一个非独立模块：define(['module1', 'module2'], function(m1, m2){});说明：第一个参数：该模块所依赖的其他模块组成的数组。注意：一般情况下，module1模块和module2模块指的是当前目录下的module1.js文件和module2.js文件，相当于['./module1', './module2']第二个参数：是一个函数，当前面数组的所有成员都加载成功后，它将被调用。它的参数和数组的成员一一对应。注意：该函数必须返回一个模块对象，供其他模块调用。eg：define(['module1', 'module2'], function(m1, m2){return {method : function(){m1.methodA();m2.methodB();}};});2)定义一个不依赖其他模块的独立模块：define(模块对象);eg：定义一个包含method1和method2这两个方法的模块。方式一：define(function(){return {method1:function(){}, method2:function(){}};});说明：该函数的返回值就是要定义的模块对象;可以在函数体内添加一些模块的初始化代码。方式二：define({method1:function(){}, method2:function(){}});2> require.config({baseUrl:"", paths:{}, shim:{}})方法：配置require.js的运行参数。说明：1)该方法写在配置文件中：amd.config.js、amd.config.debug.js2)该方法接受一个对象作为参数，即：{baseUrl:"", paths:{}, shim:{}}参数对象的属性：baseUrl：RequireJS以一个相对于baseUrl的地址来加载模块。paths：指定各个模块的位置。注：1)这个位置可以是同一个服务器上的相对位置，也可以是外部网址。2)可以为每个模块定义多个位置，如果第一个位置加载失败，则加载第二个位置。3)指定本地文件路径时，可以省略文件最后的js后缀名。shims：专门用来配置不兼容(非AMD规范)的模块，为那些没有使用define()定义的模块来声明依赖关系注：deps：是一个数组，表明该模块的依赖性。exports：输出的变量名，即外部调用这个模块时的名称。eg：amd.config.js文件：require.config({baseUrl:"",paths:{"jquery":"scripts/jquery.min","jxn.model": "scripts/jxn.web.core.model","jxn.util": "scripts/jxn.web.core.util","jquery.ui.draggable":"plugins/jquery-ui/jquery.ui.draggable"},shim:{"jquery.ui.draggable": {deps: ["jquery.ui.core","jquery.ui.widget","jquery.ui.mouse"], exports: "jquery.ui.draggable"}}});3> require方法：require(['moduleX', 'moduleY'], function(x, y){}, function(error){});说明：第一个参数：该模块所依赖的其他模块组成的数组。注意：一般情况下，module1模块和module2模块指的是当前目录下的module1.js文件和module2.js文件，相当于['./module1', './module2']第二个参数：是一个函数，当前面数组的所有成员都加载成功后，它将被调用。它的参数和数组的成员一一对应。第三个参数：处理错误的回调函数，接受一个error对象作为参数。eg：require(['moduleX', 'moduleY'], function(x, y){x.methodA();y.methodB();});4）几点说明：1)RequireJS认为所有的依赖资源都是js脚本，因此无需在module ID上再加".js"后缀，2)如果服务器端采用JSONP模式，则可以直接在require方法中调用：注：必须将参数"callback"的值设为为"define"require(["http://someapi.com/foo?callback=define"],function (data) {//The data object will be the API response for the JSONP data call.console.log(data);});5）应用开发1> 配置RequireJS：1)在web项目中创建配置文件：一般模式：webcontent\scripts\amdconfig\amd.config.js调试模式：webcontent\scripts\amdconfig\amd.config.debug.js2)编写配置文件amd.config.js和amd.config.debug.js：即完成require.config({});方法的编写。2> 自定义模块：1)在web项目中创建webcontent\scripts\module\jxnexample.js2)编写自定义模块对应的js文件，即完成define(['module1', 'module2'], function(m1, m2){});的编写。3> 使用已经定义好的模块：1)在web项目中创建页面及对应的js控制器:webcontent\html\test.htmlwebcontent\controller\test.js2)引入RequireJS，并且指定页面的主模块。在test.html页面中引入RequireJS：在body的最后一行，即</body>标签的上一行引入RequireJS：<body>...<script src="webcontent/js/require.js?debug=true" data-main="webcontent/controller/test.js"></script></body>注：data-main：指定网页程序的主模块，即test.js会被require.js第一个加载。debug=true表示开启调试模式。在test.js中编写控制器的逻辑require(["jquery", "jxn.model", "jxn.util", "jquery.ui.draggable"],function($, jxnModel, jxnUtil){$(function(){var time = jxnUtil.getCurrentTime();alert(time);});}
0 0