requirejs的使用

最新推荐文章于 2023-08-22 11:39:22 发布

weixin_33974433

最新推荐文章于 2023-08-22 11:39:22 发布

阅读量105

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/Seaside20151225/blog/744034

版权

2019独角兽企业重金招聘Python工程师标准>>>

1、requireJs是什么？

RequireJS是一个非常小巧的JavaScript模块载入框架，是AMD规范(Asynchronous Module Definition，即异步模块加载机制)最好的实现者之一，

2、为什么使用requirejs?

　　（1）实现js文件的异步加载，避免网页失去响应；

　　（2）管理模块之间的依赖性，便于代码的编写和维护。

3、怎么使用requirejs?

1)为了防止加载文件造成网页失去响应，因此把加载代码放在页面的底部，并且async表明异步加载，IE不支持这个属性，只支持defer.data-main的作用是指定网页程序的主模块。

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的说明

关于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就要这样写：