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

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

那么平时我们普通前端所做的工作用到算法的地方大部分还是遍历，事件绑定。也有些低层次的甚至脑子里都没有算法的概念。但是在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.onload=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;
}

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



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