RequireJS 依賴關(guān)系的實例(推薦)

更新時間：2017年01月21日 09:32:27 投稿：jingxian

下面小編就為大家?guī)硪黄猂equireJS 依賴關(guān)系的實例(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

現(xiàn)在看看RequireJS帶來的整潔的特點：

下面有個html頁面：

<html> 
 <head> 
  <title>configuration</title> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  <link type="text/css" href="../master/plugin/artDialog4.1.6/skins/blue.css" rel="stylesheet"/> 
  <script data-main="../master/script/app/config" src="../master/script/third_party/require.js"></script> 
 </head>

最有一個script語句引入了require.js文件，并且在data-main中指定了另一個js文件：config.js，我定義如下：

require.config({ 
  paths: { 
    "jquery": "../third_party/jquery-1.8.0.min", 
    "jquery.validate": "../../plugin/jquery-validation-1.9.0/jquery.validate", 
    "jquery.artDialog": "../../plugin/artDialog4.1.6/jquery.artDialog" 
  } 
}); 
 
require(["jquery"], function(util) { 
 
  require(["jquery.validate", "jquery.artDialog"], function(util) { 
 
    require(["masterUI", "masterSite", "configuration"], function(util) {                                                                
      $(document).ready(function() { 
    window.configuration.init(); 
      }) 
    }); 
  }); 
});

require.config中配置了引入的第三方的js庫的js文件所在位置，包括jquery, jquery.validate和jquery.artDialog

之后三個require調(diào)用，一層套一層，注意依賴順序就是內(nèi)層依賴外層。最先要被加載的就寫到最外層。

最里面寫了一個調(diào)用，$(document).ready(...) 本來一般寫在html頁面里面來的，這樣好了。又和html解耦了。

以上這篇RequireJS 依賴關(guān)系的實例(推薦)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

ng-events類似ionic中Events的angular全局事件
這篇文章主要介紹了ng-events類似ionic中Events的angular全局事件,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2018-09-09
移除AngularJS下URL中的#字符的方法
這篇文章主要介紹了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人氣JavaScript庫,需要的朋友可以參考下
2015-06-06
使用xampp將angular項目運行在web服務(wù)器的教程
這篇文章主要介紹了使用xampp將angular項目運行在web服務(wù)器,本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套
這篇文章主要介紹了詳解angularJs模塊ui-router之狀態(tài)嵌套和視圖嵌套，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-04-04
Angular 獨立組件入門指南
這篇文章主要為大家介紹了Angular 獨立組件入門教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
AngularJS實現(xiàn)星星等級評分功能
這篇文章主要為大家詳細(xì)介紹了AngularJS實現(xiàn)星星等級評分功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-09-09
AngularJS自定義指令實現(xiàn)面包屑功能完整實例
這篇文章主要介紹了AngularJS自定義指令實現(xiàn)面包屑功能,結(jié)合完整實例形式分析了AngularJS自定義指令的定義、調(diào)用及面包屑功能的具體實現(xiàn)技巧,需要的朋友可以參考下
2017-05-05
AngularJs導(dǎo)出數(shù)據(jù)到Excel的示例代碼
本篇文章主要介紹了AngularJs導(dǎo)出Excel的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-08-08
Angularjs中UI Router的使用方法
這篇文章主要為大家詳細(xì)介紹了Angularjs中UI Router的使用方法，感興趣的朋友可以參考一下
2016-05-05
angular2 ng2 @input和@output理解及示例
本篇文章主要介紹了angular2 ng2 @input和@output理解及示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-10-10