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就要這樣寫：