原生 js前端路由系统实现3之代码 构建工具 和 querystring功能
构建
目前前端构建工具流行的是 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