JS三教九流系列-require.js-網站模塊化開發

時間 2019-11-08

標籤三教九流系列 require.js require 網站模塊化開發欄目 JavaScript 简体版

原文原文鏈接

js開發的模塊化就是module處理javascript

簡單理解js模塊化的開發就是讓咱們的web項目對js進行分類的處理css

咱們在開發網站的時候，裏面會用要不少的類庫，如jquery，還會有到基於jq各類插件，還會有其餘類庫，還有本身寫的js或者jq代碼等。一個html頁面會有n多個script標籤對外部js的引用，是否是感受這樣的頁面會很是的混亂，若是咱們能夠只用一個script標籤載入一個js文件，這個js文件把其餘須要的js文件能所有加載進去，而且按着之間依賴關係執行，是否是一個頁面就很是的整潔和容易擴展處理。html

js的開發規範有AMD,典型表明就是require.jsjava

CMD，典型表明就是sear.jsnode

Commonjs規範咱們已經接觸過，在nodejs的安裝和使用中咱們在頁面裏運用require()請求原生模塊、第三方模塊和export定義咱們第三方模塊就是在運用commonjs的規範開發jquery

咱們的requirejs就是典型的amd規範處理，實現html頁面中head.appendchild("script")的加載和內部依賴順序處理web

amd是異步加載模塊化開發，採用異步的載入方式，也就是咱們雖然先引用了require.js，下面的js文件也可能先執行處理，若是對上面有依賴，也可能失效。瀏覽器

咱們經過參考requriejs的手冊，去實踐到咱們的網頁開發中去，利用amd模塊化的技術去開發咱們的網頁。app

requirejs文檔地址 http://www.requirejs.cn/ 異步

requirejs下載地址 http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js

我們不去學習那麼多的高級處理，基礎功能已經足夠咱們的項目開發，一切爲了開發去使用

下載requirejs，加載到html頁面中，經過script標籤的src屬性加載require.js

<!DOCTYPE html>
<head>
<title>requirejs</title>
<meta charset="utf-8" />
</head>
<body>
<div class="aa">requirejs</div>
</body>
<script src="js/require.js" type="text/javascript"></script>
</html>

requirejs不使用多個script在html頁面去加載全部js文件，經過require去作咱們這種順序加載處理

咱們給頁面添加data-main屬性，指定咱們的這個主要js控制加載的文件（都是對js的處理，因此省略了.js後綴）

<!DOCTYPE html>
<head>
<title>requirejs</title>
<meta charset="utf-8" />
</head>
<body>
<div class="aa">requirejs</div>
</body>
<script src="js/require.js" data-main="js/config.js" type="text/javascript"></script>
</html>

和咱們的require的路徑同樣，都是放在了js這個文件下面，如今的目錄

requ.html

js/reruire.js

js/config.js

咱們已經知道，config.js就是咱們的控制文件（文字自定義），在這裏面咱們定義和處理對其餘文件的順序加載

咱們給config.js寫入以下代碼

requirejs.config({
  baseUrl: 'js/modules/',
  paths: {
    jquery: 'jquery'
  }
});
require(['jquery'], function(jq) {
 
});

咱們利用reruirejs的config方法去定義咱們依賴的外部文件，

baseUrl屬性：是定義外部文件加載的基本路徑(好比咱們的依賴js都在js/modules下)

paths屬性：是定義加載外部文件的文件名，後綴.js省略（名字叫jquery.js，賦給指定鍵名jquery）

require方法：是請求加載咱們的外部依賴文件，第一個參數是請求路徑，這裏就是jquery類庫（目錄js/modules/jquery.js），

jquery這個鍵值會自動拼接成 baseUrl+paths的路徑進行加載

第二個參數是回調函數，裏面的回調參數被賦值爲請求的依賴文件

咱們先看一下咱們下載的目錄結構：

requ.html

js/reruire.js

js/config.js

js/modules

js/modulesjquery.js

咱們會把大量的外部放置在modules文件夾下面，html利用requirejs經過script加載外部文件，那麼大量文件的基本目錄就是：js/modules

咱們瀏覽器打開html頁面，firebug插件頁面結構

咱們的html頁面其實只定義了require.js的引用，經過對config上面的設置，咱們發現html頁面已經加載了config.js和jqurey.js文件了！

config.js路徑和data-mian的設置同樣，

jquery.js的路徑就是咱們設置裏面的baseUrl+paths

咱們能夠看出，咱們config對路徑的處理是站在html頁面的角度去引用，若是站在config文件的角度去引用就錯了，由於是給html頁面去順序加載js文件的

基本路徑屬性很好理解，就是相對html的路徑，

文件屬性的設置咱們須要給他設置一個鍵名，鍵名的後面是引入文件的名字

require()方法：能夠經過你的鍵名去請求加載外部文件的，看上面的path設置

咱們經過config()定義了依賴文件

如今經過require()獲得依賴，而且在回調函數中賦給了回調參數$

咱們在回調函數內添加咱們的jq處理代碼，config.js修改以下

requirejs.config({ 
 baseUrl: 'js/modules/',  
 paths: {    
  jquery: 'jquery'  
   }
});
require(['jquery'], function($) { 
 alert($(window).height());
 $("body").append("<div>append</div>")
});

頁面彈出了窗口高度而且插入了div，咱們利用requirejs加載jq類庫，和基於jq的代碼處理就完成了！！！

咱們能夠本身定義模塊，用於依賴加載處理，

咱們的依賴文件代碼要放置在define()中。做爲模塊的定義，這樣requirejs才能夠加載依賴

咱們建立自定義依賴文件，叫作ex.js（目錄js/modules/ex.js）

modules建立ex.js，

define(function() {  
 var ex="我是依賴"
 return ex; 
});

config.js設置引入

requirejs.config({ 
 baseUrl: 'js/modules/',  
 paths: {    
  jquery: 'jquery',
  ex: 'ex'  
   }
});
require(['jquery',"ex"], function($,ex) { 
 alert(ex)
 
});

咱們瀏覽器打開HTML頁面，會彈出「我是依賴」。

在js文件，咱們將定義的內容反之在define裏面，咱們在config方法設置路徑，require請求到，返回到到回調函數，咱們回調函數的參數就會賦值爲define裏的內容

對於當前的ex.js文件就是在回調函數中 ex=function() { var ex="我是依賴"; return ex; }

咱們把ex的代碼就行處理，不用原生js的處理代碼，使用jq的代碼，修改以下：

define(function() {  
 var ex=$(window).height();
 return ex;
});

審查報錯了，由於你定義的模塊不知道$是什麼，define提供依賴的支持，咱們修改以下：

define(["./jquery"],function($) {  
 var ex=$(window).height();
 return ex;
});

和require方法相似，能夠先進行依賴請求，而後回調到回調參數中，這樣定義的代碼就對jq識別了，咱們能夠成功運行

咱們看到，define加載依賴的路徑是相對於當前js文件的，

咱們既然在定義模塊能夠加載依賴，好了把ex.js修改成jq插件的形式，咱們在之前文章寫過jq的插件，咱們以tab切換爲案例

ex.js引入jq類庫依賴，放入插件代碼：

define(["./jquery"],function($) {  
 return $.fn.extend({
  tab:function(){ 
   return this.each(function () { 
    var obj = $(this);
    obj.find(".tabnav").children().click(function(){
  $(this).addClass("fou").siblings().removeClass("fou");
  $(this).parent().parent().find(".tabbox").children().eq($(this).index()).show().siblings().hide();
    });
   });
  }
 });
});

咱們直接把插件的代碼放入define裏面就行了，咱們的config.js代碼引用插件

requirejs.config({ 
 baseUrl: 'js/modules/',  
 paths: {    
  jquery: 'jquery',
  ex: 'ex'  
   }
});
require(['jquery',"ex"], function($,ex) { 
 $(".tab1").tab(); 
 
});

這時候ex回調參數其實沒有什麼意義，由於咱們依賴是jq的插件，他會自動加上新的功能，咱們html加上tab切換的html代碼

<!DOCTYPE html>
<head>
<title>requirejs</title>
<meta charset="utf-8" />
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
/*demo*/
.tab1{height:400px; width:400px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px; }
</style>
</head>
<body>
<div class="tab1">
    <div class="tabnav">
        <span class="fou">111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div class="tabbox">
        <div>111111</div>
        <div style="display:none;">22222222222</div>
        <div style="display:none;">33333333</div>
    </div>
</div> 
</body>
<script src="js/require.js" data-main="js/config.js" type="text/javascript"></script>
</html>

瀏覽器打開修改的頁面，咱們的tab效果成功執行了。

咱們的插件裏面放置了依賴，其實config裏面能夠放棄對jq類庫的引用的

config修改以下

requirejs.config({ 
 baseUrl: 'js/modules/',  
 paths: {    
  ex: 'ex'  
   }
});
require(["ex"], function(ex) { 
 $(".tab1").tab(); 
 
});

仍是能夠正確執行！插件裏面加載了jq類庫，當前沒有加載！

咱們若是在外部define定義模塊加載了模塊，那麼咱們這裏引用外部文件會把define定義的代碼和他的依賴都加載進去html頁面

咱們經過require加載的依賴，就是把整個js依賴放入在html中，咱們config.js以下處理

requirejs.config({ 
 baseUrl: 'js/modules/',  
 paths: {    
  jquery: 'jquery'  
   }
});
require(["jquery"], function() { 
 alert($(window).height())
 
});

咱們的jq同樣有效，請求到後，那麼在回調內部就能夠進行處理！

咱們建立一個完整的項目，結構以下

requ.html ‍咱們的靜態頁面

js/reruire.js ‍require文件

js/config.js ‍主要配置文件

js/modules ‍存放jq類庫和插件文件的文件夾

js/modules/jquery.js ‍ jq類庫

js/handle/ys.js‍ 原生js文件,匿名函數返回消息

js/handle/ysfun.js ‍原生js文件,匿名函數返回工具函數

html頁面代碼：

<!DOCTYPE html>
<head>
<title>requirejs</title>
<meta charset="utf-8" />
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
/*demo*/
.tab1{height:400px; width:400px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px; }
</style>
</head>
<body>
<div class="tab1">
    <div class="tabnav">
        <span class="fou">111</span>
        <span>222</span>
        <span>333</span>
    </div>
    <div class="tabbox">
        <div>111111</div>
        <div style="display:none;">22222222222</div>
        <div style="display:none;">33333333</div>
    </div>
</div> 
</body>
<script src="js/require.js" data-main="js/config.js" type="text/javascript"></script>
</html>

ex.js代碼：

define(["./jquery"],function($) {  
 return $.fn.extend({
  tab:function(){ 
   return this.each(function () { 
    var obj = $(this);
    obj.find(".tabnav").children().click(function(){
  $(this).addClass("fou").siblings().removeClass("fou");
  $(this).parent().parent().find(".tabbox").children().eq($(this).index()).show().siblings().hide();
    });
   });
  }
 });
});

ys.js代碼：

define(function() {  
 var ys="我是就是一個消息！";
 return ys;
});

ysfun.js代碼：

define(function() {  
 var tools={};
 tools.norepeat=function(arr){
  arr.sort();
     var newarr=[];
     for(var i=0;i<arr.length;i++){  
   if(arr[i]==arr[i+1]){
   continue;
   }else{
   newarr.push(arr[i]);
   }
     };
  return newarr;
 };
 tools.strindex=function(str,arr){
  var index;
  for(var i=0;i<arr.length;i++){
   if(arr[i]==str){
    index=i;
   }
  };
  return index;
 };
 return tools;
});

config.js代碼：

requirejs.config({ 
 baseUrl: 'js',  
 paths: {    
  jquery: 'modules/jquery',
  ex: 'modules/ex', 
  ys: 'handle/ys' ,
  ysfun: 'handle/ysfun' 
   }
});
require(["jquery","ex","ys","ysfun"], function($,ex,ys,ysfun) { 
 $(".tab1").tab(); 
 alert(ys);
 var arr1=["123","44","55","66","789","44"];
 alert(ysfun.norepeat(arr1));
 alert(ysfun.strindex("66",arr1));
 
 
});

頁面依賴jq類庫，依賴jq的插件，還有其餘js處理，一個基本頁面的js引用大概就這些！

大概的實現：