為什么80%的碼農都做不了架構師？>>> ??

構建

目前前端構建工具流行的是 grunk.js 功能是大而全，但往往大而全的東西為了多樣性 需要做額外的配置 ?我還是想要有一個專門為自己特性項目而生構建工具

我不想加載第三方的node模塊，也不想寫配置 ,想要的功能也很簡單只是根據文件名字進行合并 ?

build.js

名字規則： a-b-c.js 或者 a-b-c.txt?

a代表文件合并的順序（這個順序跟文件顯示的順序一致） 第一固定為0 最后固定為e ?b代表合并后的文件名字 ?c代表自己的文件名字

以下代碼會 尋找當前目錄下src目錄中的所有js,txt文件 提取b相同的文件 按照a順序 進行合并

//將src目錄中的js文件?按照文件名字規則?合并到js文件夾中 var?fs=require('fs'); //順序執行 function?sear(arr,call){if(arr&&!arr[0])return;!function?run(i,para){if(i==arr.length){call(null,para);return;}arr[i](function(err,para){if(err!=null){call(err);return;}run(i+1,para);},para); }(0); } //遍歷?并列執行?結果反饋給回調 function?map(arr,fn,call){if(Object.prototype.toString.call(arr)==='[object?Array]'){var?rs=[],rerr=null,num=1;for(var?i=0,l=arr.length;i<l;i++){!function(t,i){fn(function(err,res){if(err)rerr=err;else?rs[i]=res;if(num++==l)call(rerr,rs);},t,i);}(arr[i],i)}}else?if(Object.prototype.toString.call(arr)==='[object?Object]'){var?keys=[],num=1,rs={},rerr=null;for(var?key?in?arr)keys.push(key);for(var?key?in?arr){!function(t,key){fn(function(err,res){if(err)rerr=err;else?rs[key]=res;if(num++==keys.length)call(rerr,rs);},t,key);}(arr[key],key)}} } function?each(arr,fn){for(var?i=0,l=arr.length,t;i<l;i++){t=arr[i];if(fn(t,i)===false)break;} } console.time('構建js'); sear([function(next){fs.readdir(__dirname+'/src',next); },function(next,fiels){var?r={};each(fiels,function(t,i){var?a=t.split('.');if(a[1]!='js'&&a[1]!='txt')return;var?b=a[0].split('-');if(b.length!=3)return;var?type=b[1];r[type]=r[type]||[];r[type].push({sort:b[0],path:__dirname+'/src/'+t});});for(var?key?in?r){r[key].sort(function(a,b){return?a>b});}next(null,r); },function(next,obj){map(obj,function(end,t,key){map(t,function(end1,t1,i1){fs.readFile(t1.path,'utf-8',end1);},end);},next); },function(next,p){map(p,function(end,t,key){fs.writeFile(__dirname+'/js/'+key+'.js',t.join('\n/*=======================*/\n'),end)},next); }],function(err,p){if(err)console.error(err);else?console.timeEnd('構建js'); });

route.js拆分后為下圖

0 和 e 是 兼容ADM加載器 ,對外暴露api的開頭和結尾

其他的文件都是單獨的一個個模塊 每個模塊代碼都不足百行 閱讀起來會非常方便

1-route-type.js 數據類型判斷

2-route-core.js 路由注冊和解析實現核心部分

3-route-get.js ?get路由匹配實現

4-route-decode.js 編碼問題

5-route-querystring.js ?url參數和json互相轉換

querystring

url: ?a=b&b=c&d=1

經過querystring會把上面url參數轉換為 {a:"b",b:"c",d:1} 轉換的結果存放req.query屬性上

相反的操作

? 在使用to函數的時候可以傳一個對象 querystring會轉換為 url的形式

??5-route-querystring.js ?

function?each(arr,fn){for(var?i=0,l=arr.length,t;i<l;i++){t=arr[i];if(fn(t,i)===false)break;} } //url參數和json互相轉換?轉換后存儲在req.query屬性中 !function(route){var?to=route.to,use=route.use;function?stringify(obj){var?a=[];for(key?in?obj){a.push(key+'='+obj[key]);}return?a.join('&')}use(function(req,next){var?urlp=req.path.split('?')[1];if(!urlp){next();return;}var?a=urlp.split('&');var?r={};each(a,function(t,i){var?b=t.split('=');r[b[0]]=b[1];});req.query=r;next();});route.mix({to:function(path,obj){if(path.indexOf('?')==-1&&obj){path+='?'+stringify(obj);}to(window.encodeURI(path));}}) }(route);

對于ie 67 瀏覽器 改變路由無法調用到相應的路由 ?下一步會對ie67 ?做兼容

以上所有代碼?https://git.oschina.net/diqye/route.js

轉載于:https://my.oschina.net/diqye/blog/477602

總結

以上是生活随笔為你收集整理的原生 js前端路由系统实现3之代码 构建工具 和 querystring功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。