定义
var empty=[];
何时使用
当属性名是小而连续的整数时，使用数据组，否则使用对象。
识别
typeof运算符对数据没有意义，因为返回的是'object'
//ECMA5 已添加该方法
可以添加静态方法：
{
return Object.prototype.toString.apply(obj)==='[object Array]'
}
长度
length属性的值是这个数组的最大整数属性名加1：
array=[];
array[7]=0;
console.log(array.length);
设置更大length不会给数组分配更多的空间（undefined），而把length设小将导致所有下标等于新的length的属性被删除。
添加
添加一个元素：
empty="";
empty.push("");
删除
delete numbers[2]; //留下一个空洞
numbers.splice(2,1); //向前移动
查找
//IE9+ 支持
array.indexOf()
array.lastIndexOf()
输出
alert(array.valueOf());
alert(array);
alert(array.join(','));
方法
- 字符串方法：
array.concat() //连接字符串，相当于‘+’
array.join() //生成字符串
- 栈方法：
array.push()
array.pop()
- 队列方法
array.shift()
array.unshift()
- 重排序方法
array.reverse() //反排序
array.sort() //字符串排序
- 操作方法
array.slice()
array.splice() //相当强大，可实现任意的增删改。
排序
数据原型中有sort的方法（Array.prototype.sort ），但只对字符排序
{
return a - b
}
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr + "<br />")
//字符排序
document.write(arr.sort() + "<br />") //1,10,1000,25,40,5
//数据排序
document.write(arr.sort(sortNumber)) //1,5,10,25,40,1000
迭代
在此只介绍简单用法.//以下只支持ECMA5
filter() //返回满足条件的子数组
forEach() //对每一个元素进行操作,不返回
map() //对每一个元素进行操作,返回结果数组
some()//有一个满足条件返回true
归并
当前后项有关系时实现的操作，方便实现双向链表的功能. //以下只支持ECMA5
reduceRight()
编码规范
以下来自GitHub,有很多关于javascript优秀的编程风格，推荐大家看看:https://github.com/airbnb/javascript
Use the literal syntax for array creation.
// badvar items =newArray();
// goodvar items = [];Use Array#push instead of direct assignment to add items to an array.
var someStack = [];
// bad
someStack[someStack.length] ='abracadabra';
// good
someStack.push('abracadabra');When you need to copy an array use Array#slice. jsPerf
var len = items.length;
var itemsCopy = [];
var i;
// badfor (i =0; i < len; i++) {
itemsCopy = items;
}
// good
itemsCopy = items.slice();To convert an array-like object to an array, use Array#slice.
functiontrigger() {
var args =Array.prototype.slice.call(arguments);
...
}
本文链接：javascript 数组简明总结，转载请注明。
前言
之前看了一篇文章：@Charlie.Zheng Web系统开发构架再思考-前后端的完全分离，文中论述了为何要前后分离，站在前端的角度来看，是很有必要的；但是如何说服团队使用前端渲染方案却是一个现实问题，因为如果我是一个服务器端，我便会觉得不是很有必要，为什么要前后分离，前后分离后遗留了什么问题，如何解决，都得说清楚，这样才能说服团队使用前端渲染的方案，而最近我刚好遇到了框架选型的抉择。
来到新公司开始新项目了，需要做前端框架选型，因为之前内部同事采用的fis框架，而这边又是使用的php，这次也就直接采用fis基于php的解决方案：
说句实话，fis这套框架做的不错，但是如果使用php方案的话，我就需要蛋疼的在其中写smarty模板，然后完全按照规范走，虽然fis规范比较合理，也可以接受，但是稍微深入解后发现fis基于php的方案可以概括为（我们的框架用成这样，不特指fis）：
显然，这个不是我要的，梦想中的工作方式是做到静态html化，静态html装载js，使用json进行业务数据通信，这就是一些朋友所谓的前端渲染了
JS渲染的鄙利
前端渲染会带来很多好处：
① 完全释放前端，运行不需要服务器；
② 服务器端只提供接口数据服务，业务逻辑全部在前端，前后分离；
③ 一些地方性能有所提升，比如服务器不需要解析index.html，直接返回即可；
④ ......
事实上以上的说法和优势皆没有十足的说服力，根据上述因素，我们知道了为什么我们要采用js+json的方案，但这不代表应该采用。
比如很多朋友认为前后分离可以让前端代码更加清晰，这一说法我就十分不认同，如果前端代码功力不够，绝对可以写成天书，分离是必要条件，却不是分离后前端就一定清晰，否则也不会有那么多人呼吁模块化、组件化；而且服务器端完全可以质疑这样做的种种问题，比如：
① 前端模板解析对手机端的负担，对手机电池产生更快的消耗；
② 前端渲染页面内容不能被爬虫识别，SEO等于没有了；
③ 前端渲染现阶段没有完善的ABTesting方案；
④ 不能保证一个URL每次展示的内容一致，比如js分页导致路由不一致；
⑤ ......
以上的问题，一些是难点，一些是痛点，选取前端渲染方案至少得有SEO解决方案，不然一切都是空谈
所以有如此多的问题，前端凭什么说服团队使用前端渲染的方案，难道仅仅是我们爽了，我们觉得这样好就可以了吗？
况且现状是团队中服务器端的同事资深的多，前端话语权不够，这个时候需要用数据说话，但未做调研也拿不出数据，没有数据你凭什么说服领导采用前端渲染方案？
为什么要采用前端渲染
最近两年我却找到了可以说服自己采用前端渲染的原因：
① 体验更好
② Hybrid内嵌只能用静态文件
事实上我们不能用数据说明webapp（前端渲染）的体验就一定比服务器端渲染好，所以Hybrid内嵌就变成了主要的因素，现有的Hybrid有两种方案：
① webview直连线上站点，响应速度慢，没有升级负担，离线应用不易；
② 将静态html+js+css打包进native中，直接走file模式访问，交互走json，非常简单就可以实现离线应用（某些页面的离线应用）
现在一个产品一般三套应用：PC、H5站点、APP，PC站点早就形成，H5站点一般与APP同步开发，Hybrid中的逻辑与H5的逻辑大同小异，所以
因为服务器端渲染需要使用动态语言，而webview只能解析html等静态文件，所以使用前端渲染就变成了必须，而这一套说辞基本可以说服多数人，自少我是信了。
拦路虎-SEO
上面说了很多前端渲染的问题，什么手机性能、手机耗电、ABTesting都不是痛点，唯一难受的是H5站点的SEO，以原来公司酒店订单来说，有20%以上的流量来源于H5站点，浏览器是一个流量的重要来源，SEO不可丢弃。
PS：这次我在公司和同事说前端渲染SEO有问题，结果同事说，百度的产品SEO肯定靠前不用考虑，真不要考虑吗......
所以前端渲染必须有解决SEO的方案，并且方法不能太烂，否则框架出来了也没人愿意用，好在这次做的项目不是webapp，SEO方案相对要简单一点，移动端展示的信息少SEO不会太难，这个进一步降低了我们的实现难度，经过几轮摸索，我这两天想了一个简单的方案，正在验证可行性。
JS渲染应该如何做
前端渲染应该如何做？阿里的大神们事实上一直也在思考方案，并且似乎已经有成功的产出：前后端分离的思考与实践（二）
可惜，读过文章后，依旧没有获得对自己有用的信息，并且对应的代码也看不到，自己之前的方案：探讨webapp的SEO难题（上），连自己都觉得非常戳而没有继续。
编译的过程
而最近在公司内部使用fis时候，一段代码引起了我的兴趣：
{%widget name="webapp:widget/index/route/route.tpl"%}
{%widget name="webapp:widget/index/searchCity/searchCity.tpl"%}
{%widget name="webapp:widget/index/selectDate/selectDate.tpl"%}
{%/block%}
这段代码基于smarty模板，运行会经过一次release过程，将真正的route模板字符串与服务器data形成最终的html，这段代码引起了我的思考，却说不出来什么问题。
我偶然又看到了之前的react解决方案，似乎也有一个编译的过程：
// 这是什么不是字符串，不是数字，又不是变量的参数……WTF
<h1>Hello, world!</h1>,
document.getElementById('example')
);
//JSX编译转换为javascript==>
React.render(
React.DOM.h1(null, 'Hello, world!'),
document.getElementyById('example')
);
所以，在程序真实运行前有一个编译的过程，一个是编译才能运行，一个是运行时候需要编译，于是我在想前端渲染可以这样做吗？
页面渲染的条件
比较简单的情况下，对于前端来说，页面html的组成需要数据与模板，而服务器也仅仅需要数据与模板，所以简单来说：
前后端的模板有所不同的是：
但是经过我们之前的研究，.net可以运行一个V8的环境帮助解析模板，java等也有相关的类库，所以此问题不予关注，第二个问题是：
前端数据为异步加载，服务器端为同步加载，但是：
于是，一个方案似乎变的可能。
前端渲染方案
入口页
将如我们的index.html是这样的：
debug端：
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="./libs/zepto.js"></script>
<script type="text/javascript" src="./libs/underscore.js"></script>
<script type="text/javascript" src="./libs/require.js"></script>
</head>
<body>
<%
没有评论:
发表评论