requireJS

以往比如ExtJs里,需要依次加载多个js文件。
这样的写法有很大的缺点。首先,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长;
其次,由于js文件之间存在依赖关系,因此必须严格保证加载顺序,
依赖性最大的模块一定要放到最后加载,当依赖关系很复杂的时候,代码的编写和维护都会变得困难。


require.js的诞生,就是为了解决这两个问题:
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。


<script src="js/require.js" defer async="true" ></script>
加载我们自己的代码了。假定我们自己的代码文件是main.js,也放在js目录下面。那么,只需要写成下面这样就行了:
  <script src="js/require.js" data-main="js/main"></script>


require.js默认的文件后缀名是js,所以可以把main.js简写成main。

 // main.js
  require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // some code here
  });


require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块(css文件或js文件),上例就是['moduleA', 'moduleB', 'moduleC'],
即主模块依赖这三个模块;第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。
加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。


使用require.config()方法,我们可以对模块的加载行为进行自定义。require.config()就写在主模块(main.js)的头部。
参数就是一个对象,这个对象的paths属性指定各个模块的加载路径。
require.config({
  paths: {
      "jquery": "jquery.min",
      "underscore": "underscore.min",
      "backbone": "backbone.min"
   }  
});
上面的代码给出了三个模块的文件名,路径默认与main.js在同一个目录(js子目录)。


2.平台前端所用的插件:
//弹出框插件
require.async(['/plugins/layer-v1.8.4/skin/layer.css','/plugins/layer-v1.8.4/layer.min'],function(){
	$.layer({
		type: 1,
		closeBtn: [0, true],
		title: "协议内容",
		border: [10, 0.3, '#000', true],
		area: ['830px', '550px'],
		page: {
			dom: '#modal_dialog'
			//html:_html
		}
	});	
});
//模板插件
require.async('/plugins/handlebars-v1.3.0/handlebars-v1.3.0.js',function(){
	  require.async('/plugins/handlebars-v1.3.0/transFormatJson',function(){
});
});
//分页插件
require.async(['/plugins/pager/pager.css','/plugins/pager/pager_two'],function(){

});
//提示效果(提示次,这个插件效果不错,研究一下)
require.async(['/plugins/poshytip/tip-yellowsimple/tip-yellowsimple.css', '/plugins/poshytip/jquery.poshytip.min'], function() {
});
//初始化显示表格搜索,这个是自定义的。可以参考js实现表格展示。showTable.js,search.js
require.async(['./showTable','./search'],function(showTable,search){
	showTable.ajaxUrl('/member/award/userAwardJSON.html?'+window.location.search.substr(1),tpl);
	search.search('/member/award/userAwardJSON.html?',tpl);
});
require.async('/plugins/jquery.yomi/jquery.yomi', function() {
   $.invokeYomi();
 });



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值