1、requireJs是什么?
RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范(Asynchronous Module Definition,即异步模块加载机制)最好的实现者之一,
2、为什么使用requirejs?
(1)实现js文件的异步加载,避免网页失去响应;
(2)管理模块之间的依赖性,便于代码的编写和维护。
3、怎么使用requirejs?
1)为了防止加载文件造成网页失去响应,因此把加载代码放在页面的底部,并且async表明异步加载,IE不支持这个属性,只支持defer.data-main的作用是指定网页程序的主模块。
<script async="async" defer="defer" src="../hapui/plugins/requireJs/require.js" data-main="../hapui/js/main.js"></script>
2)main.js的内容
'use strict' var _page = document.getElementById("moduleId").getAttribute("pagename");//根据body中的id获取html的pageName来加载js require.config({ //模块的加载行为自定义 baseUrl : "../../hapui/plugins", //设置基路径 paths: { //用于映射不存在根路径下面的模块路径 jquery: 'jquery/jquery-1.11.1.min', bootstrap:'bootstrap/bootstrap.min', angular:'angular/angular', angularroute:"angular/angular-route.min", angularUIroute:"angular/angular-ui-router", smarttable:"smarttable/Smart-Table.debug", ueditorconfig:"ueditor/ueditor.config", ueditorall:"ueditor/ueditor.all", ueditorzh:"ueditor/lang/zh-cn/zh-cn", ZeroClipboard: "ueditor/third-party/zeroclipboard/ZeroClipboard", _page:_page, interfaces:"../js/interface/interfacesConfig" //应用级别:储存统一配置服务地址 }, shim: { //配置在脚本/模块外面并没有使用ReauireJs的函数依赖和初始化函数 'bootstrap': {deps : ['jquery']}, //表明模块的依赖性 'angular' : {exports:'angular'}, //外部模块调用时的名字 'angularroute' : {deps : ['angular']}, 'angularUIroute':{deps : ['angular']}, 'smarttable' : {deps : ['angular']}, 'ueditorconfig': {deps : ['jquery']}, 'ueditorall': {deps : ['ueditorconfig']}, 'ueditorzh': {deps : ['ueditorall']}, //加载依赖关系数组 '_page':{deps : ['angular','smarttable','interfaces','ueditorconfig','ueditorall','ueditorzh']} } }); require(['angular','jquery','bootstrap','angularroute','angularUIroute','smarttable','interfaces','ueditorconfig','ueditorall','ueditorzh','_page'], //加载模块依赖 ,执行函数加载完这些js之后 function(angular) { angular.element(document).ready(function(){ angular.bootstrap(document,["myApp"]); }); }); |
关于_page的说明
<body ng-controller="customerController" id="moduleId" pagename="../../cust/customer"> |
关于interfaces的说明
console.info('加载','interfacesConfig.js'); //请求主机地址和端口号 var host =window.location.host; var httpUrl="http://"+window.location.host+"/"; var dev_menu_domain="http://"+host+"/" ; var domain = dev_menu_domain ; //请求客户信息的restful地址 var interfaces = { customers:httpUrl+"custapp/customers", oriinns:httpUrl+"origamiapp/oriinns", }; |
4、还有哪些方面可以深化?
1)用RequireJS定义模块?---(仅供参考,目前并未在项目中应用。http://www.ruanyifeng.com/blog/2012/11/require_js.html)
require.js加载的模块,采用AMD规范。也就是说,模块必须按照AMD的规定来写。
具体来说,就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块,那么可以直接定义在define()函数之中。
假定现在有一个math.js文件,它定义了一个math模块。那么,math.js就要这样写:
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});
加载方法如下:
// main.js
require(['math'], function (math){
alert(math.add(1,1));
});
如果这个模块还依赖其他模块,那么define()函数的第一个参数,必须是一个数组,指明该模块的依赖性。
define(['myLib'], function(myLib){
function foo(){
myLib.doSomething();
}
return {
foo : foo
};
});
当require()函数加载上面这个模块的时候,就会先加载myLib.js文件。