首先说说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插件 require.js还提供一系列插件,实现一些特定的功能。 text.js插件的使用
基于require.js的Node打包方案
require.js用于模块化管理javascript的管理工具,非常实用
本书籍主要讲解了require.js如何使用,以及在使用过程中有哪些容易出问题的地方,适合工作中使用require.js开发的项目
require.js.rar
require.jsrequire.jsrequire.jsrequire.jsrequire.jsrequire.js
下面小编就为大家带来一篇基于Require.js使用方法(总结)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
在非专业前端开发的工作中(比如使用vuejs开发),免不了要进行模块化,js的加载使用require.js就可以了,但是对于.css文件的加载需要使用插件,在试用了github上提供的require.js后发现不太好用(报错,还得改人家...
require.js遵循AMD规范,用于实现js在浏览器端的模块化开发。 require.js中有全局require和局部require。
模块化开发及AMD、CMD、Require.js、sea.js、common.js、ES6的对比;模块化开发就是封装细节,提供使用接口,彼此之间互不影响,每个模块都是实现某一特定的功能。模块化开发的基础就是函数
require.js教程.模块化 大家都知道js代码的面向对象鸡助得没话说 所以将js代码模块化是个很重要的技能 我们使用require.js来将我们写的代码封闭成模块 今天写个教程 requirejs教程,最后自动打包发布js模块文件
将我的博客文章(https://blog.csdn.net/IT_interest/article/details/122973985)中的内容用项目实现出来,功能为:使用webpack中的require.context功能,批量导入本地图片,并且可根据需要支持多格式图片导入。...
require.js 的沙箱模块 require.Sandbox 是一个沙盒模块,集成到,可用于安全加载模块。 这个想法是将它们包装到一个沙箱中,以确保错误不会使整个应用程序崩溃,但可以以编程方式处理。 沙盒错误 修补错误函数 ...
Drv.js 基于Director.js,Require.js和Vue.js的组合类型JavaScript MVVM / MVC / SPA开发框架。安装bower install drv.js --save框架和受抚养人路由器/控制器 模块加载器 ViewModel(双向绑定) HTTP / RESTful...
RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用,但它也可以用在其他脚本环境,就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。【百度百科】
NULL 博文链接:https://yangyangmyself.iteye.com/blog/2329391
实现require.js+r.js在node环境下合并,打包,压缩JS代码
require.js 2.3.5 本来想免费,但是最低分数是2分....................