javascript構(gòu)建模塊化開發(fā)過程解析-創(chuàng)新互聯(lián)

在使用 sea.js 、require.js 、 angular 的時(shí)候。

創(chuàng)新互聯(lián)于2013年創(chuàng)立，先為葉縣等服務(wù)建站，葉縣等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為葉縣企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

我們使用到 define 、 module（require） 的方式，定義模塊，和依賴模塊

下面給出 define 和 module 的簡單實(shí)現(xiàn)。 其本質(zhì)，就是往一個(gè)對(duì)象上面添加方法

var F = {};
F.define = function(str,fn){
  var parts = str.split(".");
  var parent = this; // parent 當(dāng)前模塊的父模塊
  var i = len = 0;
  //如果第一個(gè)模塊是模塊單體對(duì)象,則移除
  if(parts[0] == "F"){
    parts = parts.slice(1);
  }
   
  //屏蔽對(duì) define module 模塊方法重寫
  if(parts[0] == "define" || parts[0] == "module"){
    return ;
  }     
   
  for(len = parts.length; i < len-1; i++){
    //如果父模塊中不存在當(dāng)前模塊
    if(typeof parent[parts[i]] === 'undefined'){
      //聲明當(dāng)前模塊
      parent[parts[i]] = {};
    }
    //緩存下一層父模塊
    parent = parent[parts[i]];
  }
   
  if(fn && parts[i]){
    //如果給定模塊方法,則綁定該模塊的方法,
    parent[parts[i]] = fn();
  }
  return this;
}
 
F.module = function(){
  var args = [].slice.call(arguments);//復(fù)制參數(shù)
  var fn = args.pop(); //獲取回調(diào)
   
  var parts = args[0] && args[0] instanceof Array ? args[0] : args;
   
  //模塊的依賴
  var modules = [];
   
  //模塊的路由
  var modIDs = "";
   
  //依賴模塊的索引
  var i = 0;
   
  var len = parts.length; // 依賴模塊的長度
   
  var parent,j,jlen; //父級(jí)模塊,模塊路由層級(jí)索引,模塊路由層級(jí)長度
   
  while(i < len){
    if(typeof parts[i] == "string"){
      parent = this;
      //解析路由,并且屏蔽掉 F
      modIDs = parts[i].replace(/^F\./,"").split(".");
      //遍歷模塊層級(jí)
      for( j = 0,jlen = modIDs.length; j < jlen; j++){
        //迭代 父模塊
        parent = parent[modIDs[j]] || false;
      }
      modules.push(parent); //將模塊添加到依賴列表
    }else{
      //直接將模塊添加到依賴列表
      modules.push(parts[i]);
    }
    //取下一個(gè)模塊
    i++;
  }
   
   
  //執(zhí)行回調(diào),將依賴的模塊注入
  fn.apply(null,modules);  
} 
//定義 string 模塊
F.define("string",function(){
  return {
    trim(str){
      return str.replace(/^s+|\s+$/g,"");
    }
  }
});
//定義 string 模塊,的子模塊 sub
F.define("string.sub",function(){
  return {
    low(str){
      return str.toLowerCase();
    }
  }
});
console.log(F);
//使用模塊
F.module(["string","string.sub",document],function(str,strSub,doc){
  console.log(str,strSub,doc)
});

分享標(biāo)題：javascript構(gòu)建模塊化開發(fā)過程解析-創(chuàng)新互聯(lián)
鏈接地址：http://www.muchs.cn/article24/hgdje.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、移動(dòng)網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、做網(wǎng)站、App開發(fā)、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)