requirejs学习之路

时间:2023-03-09 08:59:53
requirejs学习之路

2006年,由于微软的名声比SUN公司的名声要大,选择了asp.net,利用VS开发了很多项目,那个时候觉得自己真是很牛气,什么都能做;现在随着互联网和移动互联的冲击,这些传统技术也受到了冲击,由于ASP.NET不开源,市场迅速减少;让我也开始怀疑微软在做什么了?所以我不在等了,2014年,开始转行java;开启了java之路;互联网之旅,从此开始了。

一个项目团队,竟然没有做前端开发,把团队成员都当做特种兵,我又从服务端开始接触前端。

一个服务端程序员,开始专心研究前端,这是要转行的节奏吗?扯远了,开始我们今天的主题

随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。JS在web开发中占有越来越重要的地位。由于JS代码庞大,文件数目多,传统的使用<script src=""></script>会带来很多性能的问题,因此requirejs可以为我们提供两种解决思路:

1、模块化组织JS;(避免网页失去响应)

2、异步加载JS文件;(便于代码的编写和维护)

核心文件 require.js和config.js(JS统一入口配置文件);

引用

<script src="/public/require.js" data-main="/public/main"></script>

data-main:配置文件入口(类似java中的main函数);data-*** 是HTML5规范中新增的html元素属性;

配置文件示例:

require.config({
baseUrl:"/public/jsFrame/",“根路径”

paths: {
"Main": 'Home/main/mainIndex'  “模块名称:路径”
},
map: {
'*': {
'css': 'bower/require-css/css',“优先加载”
},
},

shim: {“加载非AMD方式的JS文件代码”

'Page': {
deps:[
'css!/public/Css/Home' “代码加载依赖”
]
}
},

urlArgs: 't=随机数(解决业务JS代码的缓存问题)' //增加版本,解决js缓存
});

1、模块化文件,一般是一个功能是一个文件。文件的名字,就是上面requireconfig中配置的模块名字。require加载文件时,会自动加上.js后缀。

2、当某些模块依赖其他模块时,可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系,require会在异步加载后,自动调整次序。

define是定义js模块,require是运行脚本;

require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。

具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。

 例如:require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

    // some code here

  });

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

require.js会先加载moduleA、moduleB和moduleC,然后再运行回调函数