构建

目前前端构建工具流行的是 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