requirejs的使用

时间 2019-11-19

标签 requirejs 使用栏目 JavaScript 繁體版

原文原文链接

一、requireJs是什么？html

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

二、为何使用requirejs?bootstrap

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

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

三、怎么使用requirejs?app

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

　<script async="async" defer="defer" src="../hapui/plugins/requireJs/require.js" data-main="../hapui/js/main.js"></script>dom

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'],async

//加载模块依赖，执行函数加载完这些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",
};

四、还有哪些方面能够深化？

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文件。