首先说说require.js
这个js是按需加载js的,也就是说将js写成java引入外包的模式,需要什么就加载什么。传统的写法是一坨js直接加载进来,用不用反正是都扔进来了,大大降低了效率,维护起来也很麻烦。
做的时候我们需要一个入口页面,我这里用的是HTML
<script src="js/lib/require.js" defer async="true" data-main="js/app"></script>
src就是你require.js所存在的路径,data-main的值即就是入口js。
下面是app.js的内容:
requirejs.config({ //默认从 js/lib 中加载模块 baseUrl: 'js/lib', urlArgs: "bust=v201501152", //如果模块ID以app开头,则会在 js/app 目录下寻找 paths: { //path中配置各个js文件的基本路径,冒号前是今后引用该js的缩写名称 app: '../app', zepto: 'zepto', zepto_cookie: 'zepto.cookie', conf: '../conf', tools: '../tools', tm: '../../template/build', mvc: '../mvc', 'socket.io': '../plugin/socketio/socket.io' }, shim: { //shim中配置的是js之间的依赖关系, //或者export出的全局名称(在外部使用时比较方便,export后全局可用) 'zepto_cookie': {deps: ['zepto']}, 'socket.io': {exports: 'io'}, zepto: { exports: '$' } } }); requirejs(['zepto','mvc/workreport/model/workreport_model'], function ($,_wm) { /**这里比较重要:这个写法就是基于AMD规范的闭包。 []中写需要引入的js,例如[]中的第二个参数就是上面path中定义的路径别名+workreport_model.js 对于'mvc'的相对路径。function中的参数,对应[]中的js,其实相当于java中new了一个类,这个时候 这个类中允许被调用的方法就可以 以"类名.方法名"的方式调用。例如代码中的 _wm.getMyTeam(); **/ function init() { _wm.getMyTeam(); }; $(document).ready(function (){ init(); }); })
接着我们来看看_wm中是怎么写的,上面说到_wm其实就是对应的workreport_model.js:
define(['zepto','tools/consts','mvc/workreport/controller/workreport_ctrl','mvc/common/util/DIVHelper'],function($,_tc,_wrc,_dh){ //var requestBaseUrl = _t.baseUrl; var requestBaseUrl = _tc.baseurl; //var token = _tu.token; var token = 'EE6C98324197BF613E4BA7BC3EEBDAD3340A9499B4438EAA15282F22D05C8DB2AF5A67B5A7C5381ACA07001BB1D23632'; var teamData = null; var ccData = null; var errData = null; init=function(){ getMyTeam(); }; /* * 根据token获取当前使用者相关的team * */ getMyTeam = function(){ var url = 'taskhelper/team/getMyTeam?tst=1'; var option = { type:'POST', dataType:'json', url:requestBaseUrl+'/'+url+'&token='+token, success:function(data){ teamData = eval(data); _wrc.init(teamData); }, error:function(e){ errData = e; } }; $.ajax(option); }; openTree=function(){ _dh.WinTip(_dh.input_bgId,_dh.input_showId); }; //原java调用用回调方法 //callbackfn = function(msg){ // alert(msg); //} return{ init:init, getMyTeam:getMyTeam, openTree:openTree } });
我们看到AMD的标准闭包写法是
define([js1,js2...],function(name1,name2...){
//some code
return{
};
});
在最后的return中,可以return方法,也可以是属性。只有被return其他引用本js文件的js才可以使用该方法或者属性,有点java里public 或者 private的意思。与app.js一样,这个js也在define的时候引用了很多其他的js并给与了相应的别名,方便使用。
相关推荐
《require.js——JavaScript模块加载与AMD规范解析》 在JavaScript的世界里,随着代码量的增加,管理和组织变得越来越复杂。require.js的出现,为解决这一问题提供了强大的解决方案。require.js是一个小巧但功能...
在Node.js环境中,`require.js`通常用于浏览器端的模块加载和管理,它遵循AMD(Asynchronous Module Definition)规范,而Node.js自身则使用CommonJS规范处理模块导入。不过,有时候开发者可能希望将使用了require....
在JavaScript的世界里,模块化开发变得越来越重要,RequireJS作为一款强大的异步模块定义(AMD)框架,极大地促进了这一进程。RequireJS不仅提供了一个管理依赖关系的机制,还支持加载各种资源,包括JavaScript、CSS...
RequireJS的设计基于AMD(Asynchronous Module Definition)规范,这是一种定义模块和依赖关系的异步方式。AMD允许我们并行加载多个模块,而不会阻塞浏览器,这与传统的脚本引入方式形成了鲜明对比。通过`define`...
Require.js是JavaScript的一个模块加载器,它引入了AMD(Asynchronous Module Definition)规范,为JavaScript提供了异步加载模块的能力,尤其适合在浏览器环境中处理大量依赖关系。 在JavaScript中,早期的编程...
Require.js是一个JavaScript模块加载器,其主要作用是帮助页面管理JavaScript文件的依赖关系,并且能够异步加载JavaScript文件以提高页面加载的性能。使用Require.js的目的是为了解决在浏览器端开发时遇到的两个主要...
require.js用于模块化管理javascript的管理工具,非常实用
它可以依赖其他模块,使用AMD(Asynchronous Module Definition)规范的`require()`函数来管理依赖。例如: ```javascript // main.js require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, ...
require.js和sea.js分别是AMD和CMD规范的代表性实现。 require.js由James Burke创建,它的主要目标是通过异步加载脚本来优化页面性能,尤其是在处理大量脚本时。require.js的核心功能包括模块定义、依赖管理和动态...
- **JavaScript**:require.js是基于JavaScript的,提供了JavaScript的模块化解决方案。 - **开发语言**:作为开发工具,require.js帮助开发者更好地组织和管理JavaScript代码。 - **ECMAScript**:虽然require.js...
require.jsrequire.jsrequire.jsrequire.jsrequire.jsrequire.js
Require.js是一种JavaScript模块加载器,它遵循AMD(异步模块定义)规范,这种规范允许你以异步的方式加载JavaScript模块。它非常小巧,压缩后的大小只有14KB,适合用于管理前端JavaScript模块的加载,能够有效地...
Require.js是一个流行的AMD(Asynchronous Module Definition)模块加载器,它允许我们在浏览器环境中按需加载JavaScript模块。而r.js是Require.js的一个配套工具,专门用于构建和优化项目,包括合并、打包和压缩JS...
`require.js` 提供了AMD(Asynchronous Module Definition)规范,允许异步加载模块,避免了JavaScript阻塞页面渲染的问题。 2. **配置require.js**:在项目中引入`require.js`后,我们需要配置它的路径和依赖关系...
***monJS规范和RequireJS:CommonJS是另一种JavaScript模块定义规范,与AMD规范不同,CommonJS是同步加载模块的。RequireJS提供了对CommonJS的兼容支持。 9. JSONP和RequireJS:JSONP是解决跨域问题的一种技术,...
总结来说,require.js是JavaScript模块化编程的重要工具,通过AMD模式实现模块定义、依赖管理和异步加载,提高了代码的组织性和运行效率。在大型项目中,结合r.js进行代码优化,可以有效地管理复杂的应用结构。了解...
1. Require.js的使用:理解AMD规范,学习如何配置和使用`require.config()`来管理模块路径和依赖。 2. 模块化开发:如何将代码拆分为可复用的模块,并通过`define()`函数定义和导出。 3. Backbone.js的基础:学习...
Require.js是一个JavaScript文件和模块加载器,支持AMD规范,可以在浏览器中异步加载JavaScript模块,以提高页面性能。在开发微信上传图片组件时,我们可以将各个组件的html、js、css分别放在用组件名字命名的文件夹...
require.js遵循AMD规范,用于实现js在浏览器端的模块化开发。 require.js中有全局require和局部require。