前端算法与抽象化概念及其程序模型的建立关系

前端对于算法的重视程度还是不足的，但是随着前后端分离的越来越明显，大量的数据渲染过程开始由服务器端开始转向浏览器端。

那么平时我们普通前端所做的工作用到算法的地方大部分还是遍历，事件绑定。也有些低层次的甚至脑子里都没有算法的概念。但是在html5的canvas的推动下，前端对于算法的概念越来越重视。因为大量的数据要经过前端的渲染不仅仅是功能的完成，还要考虑其复杂程度，这样才不会导致浏览器端的不好的用户体验。

那么算法对于我们正常前端工作的提升是怎么样的呢？

那么我们正常的动态页面异步操作都是基于ajax数据传输，那么我们通过ajax与后台的交互所能得到的在早些年是一个由后端输出的一个html代码片段，后台程序已经将此渲染好，我们直接使用ajax得到的东西直接inner进去就形成了我们可见到的东西。那么未来，我们可能因为分离，拿数据的渲染这块将要由前端去完成。

比方说我们一个动态表格。那么在以前的工作的时候，都是由后端去生成一个表格包括数据的html片段比如

<tr><td rowspan="6">好</td><td rowspan="3">红</td><td rowspan="1">m</td></tr>
<tr><td rowspan="1">l</td></tr>
<tr><td rowspan="1">ml</td></tr>
<tr><td rowspan="3">白</td><td rowspan="1">m</td></tr>
<tr><td rowspan="1">l</td></tr>
<tr><td rowspan="1">ml</td></tr>
<tr><td rowspan="6">中</td><td rowspan="3">红</td><td rowspan="1">m</td></tr>
<tr><td rowspan="1">l</td></tr>
<tr><td rowspan="1">ml</td></tr>
<tr><td rowspan="3">白</td><td rowspan="1">m</td></tr>
<tr><td rowspan="1">l</td></tr>
<tr><td rowspan="1">ml</td></tr>
<tr><td rowspan="6">差</td><td rowspan="3">红</td><td rowspan="1">m</td></tr>
<tr><td rowspan="1">l</td></tr>
<tr><td rowspan="1">ml</td></tr>
<tr><td rowspan="3">白</td><td rowspan="1">m</td></tr>
<tr><td rowspan="1">l</td></tr>
<tr><td rowspan="1">ml</td></tr>

那么后台的操作不仅要操作数据库，也要去操作这些数据的渲染过程，那么这个代价是很大的。

那么现在我们想做的就是后台我们获取到的是一个数组，我们在前端如何用js去渲染这个ajax请求来的数组呢。那么这里就是算法的意义所在。而文中的例子也就是个例子而已。

好了，那我们拿到的数组是这样的

[['好','中','差'],['红','白'],['m','l','ml']];

我们如何渲染成如上的表格呢。

function show(x,y,z){
	$('#neo').children().remove();
	if(x!=0 && y!=0 && z!=0){
	for (var i=0;i<x*y*z;i++){
	if(i%(y*z)==0 && i%z!=0){$('#neo').html($('#neo').html()+'<tr><td rowspan="'+y*z+'">'+i+'</td><td>'+i+'</td></tr>');}
	else if(i%(y*z)==0 && i%z==0){$('#neo').html($('#neo').html()+'<tr><td rowspan="'+y*z+'">'+i+'</td><td rowspan="'+z+'">'+i+'</td><td>'+i+'</td></tr>');}
	else if(i%(y*z)!=0 && i%z==0){$('#neo').html($('#neo').html()+'<tr><td rowspan="'+z+'">'+i+'</td><td>'+i+'</td></tr>');}
	else {$('#neo').html($('#neo').html()+'<tr><td>'+i+'</td></tr>');}
	}
	}
	if(x!=0 && y!=0 && z==0){
	for (var i=0;i<x*y;i++){
	if(i%y==0){$('#neo').html($('#neo').html()+'<tr><td rowspan="'+y+'">'+i+'</td><td>'+i+'</td></tr>');}
	else if(i%y!=0){$('#neo').html($('#neo').html()+'<tr><td>'+i+'</td></tr>');}
	}
	}
	if(x!=0 && y==0 && z!=0){
	for (var i=0;i<x*z;i++){
	if(i%z==0){$('#neo').html($('#neo').html()+'<tr><td rowspan="'+z+'">'+i+'</td><td>'+i+'</td></tr>');}
	else if(i%z!=0){$('#neo').html($('#neo').html()+'<tr><td>'+i+'</td></tr>');}
	}
	}
	if(x==0 && y!=0 && z!=0){
	for (var i=0;i<y*z;i++){
	if(i%z==0){$('#neo').html($('#neo').html()+'<tr><td rowspan="'+z+'">'+i+'</td><td>'+i+'</td></tr>');}
	else if(i%z!=0){$('#neo').html($('#neo').html()+'<tr><td>'+i+'</td></tr>');}
	}
	}
	if(x!=0 && y==0 && z==0){
	for (var i=0;i<x;i++){
	$('#neo').html($('#neo').html()+'<tr><td >'+i+'</td></tr>');
	}
	}
	if(x==0 && y!=0 && z==0){
	for (var i=0;i<y;i++){
	$('#neo').html($('#neo').html()+'<tr><td >'+i+'</td></tr>');
	}
	}
	if(x==0 && y==0 && z!=0){
	for (var i=0;i<z;i++){
	$('#neo').html($('#neo').html()+'<tr><td >'+i+'</td></tr>');
	}
	}
	if(x==0 && y==0 && z==0){
	$('#neo').html('');
	}
	}

这是第一次尝试做的，当中有大量我们觉得类似却又有点不同的代码片段。那么我们抽象模型的概念是什么？就是从复杂的数据中找到一种特定的规律性的东西，比如这样一个故事

张三拿出他身上的钱

李四拿出他身上的钱

小明拿出他身上的钱

等等等等

那么我们去抽象出一个模型 就是

人 + 拿出他的钱。这个就是抽象模型的简单概念。

那抽象的意义有哪些？

可拓展，我们抽象的概念就是为了拓展，后期的增加数组的长度，或者是组数的个数。这样也能导致我们可以渲染。那么我们第一次只能渲染出3数组长度的表格，而且在表格中的数据不能按照一定的规律去做一件事。上面的八个判断，就是整个代码最不能扩展的地方！！！

那么我们抽象的模型就是

window.οnlοad=function(){
		var numt=[['好','中','差'],['红','白'],['m','l','ml']];//每个栏目里面
		show(numt,document.getElementById('neo'));
	}
		//arr是一个二维数组，每个板块具体的值量。
		//obj,是一个对象，是最终插入html地方的片段
	function show(arr,obj){
		var a=[];//对应的数组里面数组的个数
		var b=1;//td的总的个数
		var c=[];//数组里装的是一个可以判断是否打印td的参考数值
		var html='';//最后插入到table中的html片段
		for(var i=0;i<arr.length;i++){
			a.push(arr[i].length);
			}
		for(i=0;i<a.length;i++){
			if(a[i]!=0)
			{b=b*a[i];}
			}
		var m=b;//m是b的镜像，因为后期还会用到b，所以不能改变b的数值，只能用一个变量去保存。
		for(i=0;i<a.length;i++){
			if(m/a[i]!=Infinity)
			{
			c.push(m/a[i]);}
			else {c.push(0);}
			if(a[i]!=0)
			{m=m/a[i];}
			}
		for(var j=0;j<b;j++)
		{	html+='<tr>'	
			for(var k=0;k<a.length;k++){
				if((j%c[k])==0){
					var getint=j/c[k];
					var finint=Math.floor(getint/a[k]);
					var style=getint-finint*a[k];
					html+= '<td rowspan="'+c[k]+'">'+arr[k][style]+'</td>';
					}
				}
			html+='</tr>'
			}
			console.log(html);
		obj.innerHTML=html;
		}	

无限拓展，只要从后台分析出的数组，然后拿到数组就能尽情的渲染。

我喜欢别人的赞美，哪怕是言不由衷。