原生 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

原生 js前端路由系统实现3之代码 构建工具 和 querystring功能

标签：

原文地址：http://my.oschina.net/diqye/blog/477602