1. 取整同时转成数值型：
'10.567890'|0
结果: 10
'10.567890'^0
结果: 10
-2.23456789|0
结果: -2
~~-2.23456789
结果: -2
 
2. 日期转数值：
var d = +new Date(); //1295698416792
 
3. 类数组对象转数组：
var arr = [].slice.call(arguments)
4. 漂亮的随机码：
Math.random().toString(16).substring(2); //14位
Math.random().toString(36).substring(2); //11位
 
5. 合并数组：
var a = [1,2,3];
var b = [4,5,6];
Array.prototype.push.apply(a, b);
uneval(a); //[1,2,3,4,5,6]
 
6. 用0补全位数：
function prefixInteger(num, length) {
return (num / Math.pow(10, length)).toFixed(length).substr(2);
}
 
7. 交换值：
a= [b, b=a][0];
8. 将一个数组插入另一个数组的指定位置：
var a = [1,2,3,7,8,9];
var b = [4,5,6];
var insertIndex = 3;
a.splice.apply(a, Array.concat(insertIndex, 0, b));
// a: 1,2,3,4,5,6,7,8,9
 
9. 删除数组元素：
var a = [1,2,3,4,5];
a.splice(3,1);
 
10. 快速取数组最大和最小值
Math.max.apply(Math, [1,2,3])  //3
Math.min.apply(Math, [1,2,3]) //1
 
11. 条件判断：
var a = b && 1; 
相当于
if (b) {
a = 1
}
 
var a = b || 1; 
相当于
if (b) {
a = b;
} else {
a = 1;
}
 
12. 判断IE:
var ie = /*@cc_on !@*/false;
来自：http://site.douban.com/widget/notes/22456/note/142716442/

hello..各位家长,各位同学：

大家好，我是王松，也是咋们实验中学职高部的学生，可以算是在座同学的师兄吧。现在就职于淘宝网，为咋们中国上亿的网民提供网上购物服务。而我现在主要做淘宝的移动社区，让咋们用户可以在移动终端上进行信息的交流、分享。今天很荣幸受到咋们辜老师的邀请，来给大家做这个视频分享，就大概给大家分享3个方面的内容吧，一是我在上高中的一些经历，比如我为什么会选择职高这条路，二是我想分享关于自己对即将就业的同学的一些想法，三呢就是想跟各位同学分享下在职高如何看待学习。

我记得我当时初中升高中的时候，我是拿着高价才进了咋们实验中学的普高班，成绩属于班上的很差的那种，基本上每次考试都是排倒数，老师根本部鸟的那种，但是那时我对计算机方面比较感兴趣，当然会经常去买很多书来看，经常在上外语这类很重要的课程上面去看。。。到了后来，咋们学校有举办一个校园计算机大赛吧，我记得我当时参加了近5项吧，结果3项拿了第一，而且当时比赛的时候职高组和普高组没有完全分开，所以当时就感觉特自豪，自己能和职高组的进行竞赛，而且能够那那么多第一。于是后来就开始自学一些关于编程方面的东西，比如说C语言呀之类的，记得当时还去参加信息学的奥林匹克比赛…我记得曾经写过一些小程序在四川省还拿过奖。这些荣誉都是在高1高2的时候拿的，因为那时的成绩很差，自己也有想过自己该怎么办，参加普通高考？考上专科都很难很难，后来了解到也可以通过咋们的职高考大学，而且综合考的全是计算机，当时我觉得如果我去职高，会有很大的希望能够进入大学。当时我自己就下定决心要去职高，当然我去职高也并非那么简单，因为我上高中时是拿着高价才进的普高班，而现在要到职高，父母那里肯定不好交代，当然后来经过的软磨硬泡，父母勉强的答应我进入职高班。后来进入了职高班，就去学一些自己感兴趣的东西，比如网络技术、网站开发之类的，后来也顺利的拿到了计算机3级网络证书。当然事后也证明了我的选择是正确的，我在参加高考时，专业成绩考了269分，当时在班上算是很不错的了，后来如愿以偿的进入了大学，宜宾学院……所以我觉得我能进入大学，最重要的时选择，在正确的时间做了正确的事。。。

第二点想和大家分享一下关于一些同学出去就业的想法。其实我不是很鼓励一些同学现在就出去就业，因为你们现在还很小，才十七八岁，你们经历的太少，文化水平相对较低，学习一些新的技术相对吃力，而在社会上也会遇到很多的很多问题。其实我有时候也在想，咋们的同学在这样一个年龄，这样一个文化背景下就出去就业大概会做些什么事情？进厂？进富士康做电子产品？每天做着重复的工作，每天工作12个小时，或许比这还长？或许现在富士康的月薪达到3k多，还是一个相对不错的薪资范围。但是我们同学们有没有想过以后？现在中国的劳动力已经部在像以前那么廉价，导致公司的人力成本提高，而公司需要赚钱，公司会寻找新的解决办法，比如使用机器代理人力，而这时我们大批同学将面临下岗的威胁…..这不是危言耸听，富士康已经有相关的倾向了。所以我也希望即将出去就业的同学在工作之余要继续学习，提高自己的自学能力，不要去做重复的事情，因为你所做的那些事情很有可能被机器代替，而你下岗…

第三点就是想给各位打算继续学习考大学的同学的一点建议..不能算是建议，算是自己的曾经的一些经验吧。首先希望同学们记住一点，不要把你现在所学的东西当作你出生社会的技能，因为你们现在才高中，现在重要的不是学习技术，而是培养你们的兴趣，有了兴趣，所有的东西都好办。而你们相对与普高来说轻松很多很多，高考文化考试很简单，专业相对来说也挺简单…所以你们只需要去挖掘这方面的兴趣就好。比如说你喜欢网络技术，你对他很感兴趣，你在了解一些知识点的时候你可能会进行更深入的研究，在了解之后，你会发现原来书上讲的东西是那么的简单。所以现在给你们的意见就是挖掘兴趣，好好学习语数外，考一个好的大学。有时候我的一些大学师弟问我大学生活应该怎么过的时候，我直接给他们说好好玩，好好恋爱，好好发现自己的兴趣…因为你的生存技能是你在工作中才能学到东西。

恩。。好了。。。大概就分享这多么多吧。。祝各位即将进入社会的师弟师妹们找到一份好的工作，有一份好的薪水。祝各位继续深造的师弟师妹们进入一个自己理想的大学，做自己喜欢的工作！～

谢谢各位!~

今天下午2:20分，淘宝网新版首页如期发布！~当然，自己的心情是非常的激动，看到自己所参与的项目发布，上亿网民能够看到我们的成果，那种成就感很强烈。其次是因为新版首页增加了一个较为隐蔽的彩蛋，这个彩展示我们参与新版淘宝首页的开发人员，而且链接到我们个各自的博客，看到自己的博客流量飙升，那种欣喜......

下午有位同事问我前面总结中所写的ssi如何配置，下面我简单的介绍下如何配置吧:

先设想一下：当我们在做一个比较大型的项目时，这个项目含有近20个demo页面，而所有demo页面将会引用统一的样式、JS等文件，这20个demo页面中有10个页面包含统一的侧栏模块。当我们将这个项目demo做完后，将会是20个完整的html文件，我们在将完整的demo交友后台开发工程师进行开发。

但是我们都知道，在项目过程中，需求随时在更改，当我们将这个20个完整的html做好后，如果侧栏的某一模块的需求改变，那么将会有近10个html页面都会进行变更，如果我们前端在对这10个页面都进行更改，这应该会是一个很大的工作量，而且会很容易出错。在这时候我们就需要想一些办法来解决这样的问题，那么ssi将是最好的解决方案。

其实学过php的同学应该知道，在php中有一个方法:include();这个方法能在当前文档中引入外部文件。其实ssi的功能大概也就是这样实现的。还是接着刚刚上面的例子，我们现在需要对这个10个页面的侧栏模块进行修改，我们可以先将这个侧栏模块的代码放在一个独立的文件中，然后再html中所需要进行include操作，这样我们后期有需求修改的时候，我们只需修改这一个独立的侧栏模块文件就OK。那么这样效率会更高。

对于ssi的引用非常简单，我只举两个简单的例子：

引用绝对路径文件：＜！－－#include file="D:/dev/include/sub.html"－－＞

引用当前虚拟目录文件：＜！－－#include virtual="include/sub.html"－－＞   注：此处注释标签采用使用全角方式录入，在使用时建议自己录入命令，不要直接copy.

ssi的用不只是局限于重复内容模块的应用，而且还可以设置变量等等，可以到 Apache指南中查看。

因为ssi是apache中的一个模块服务项，所以我们首先要对ssi模块进行加载，打开apache的配置文件httpd.conf。找到 LoadModule ssl_module modules/mod_ssl.so 命令，因该服务未被默认加载，所以只需取消该命令前的注释符#即可。

因为使用ssi技术的默认文件名为.shtml，所以我们需要在配置文件中对.shtml后缀名进行设置，并设置需要对ssi技术进行解析的文件类型设置。命令如下：

AddType text/html .shtml   //添加shtml文件类型

AddOutputFilter INCLUDES .shtml   //对shtml文件进行ssi指令解析

在apache中没有限制只能在shtml中使用ssi指令，如果我们需要在html中使用ssi指令，那么我们只需要在配置文件中添加一句

AddOutputFilter INCLUDES .html

对于虚拟目录设置最简单的方法就是在httpd.conf中搜索到Options，并在该命令后添加Includes。如果本地创建了多个虚拟目录，还需要对每个虚拟目录进行设置，打开conf/extra/httpd_vhosts.conf，对目录授权时，可使用Options +命令来使其支持SSI，具体可参考Apache options指令指南

重启apache，所有配置将生效！~

其实ssi不仅仅可以进行模块化开发，而且还有进行团队化开发，其实最简单的例子也就是这次淘宝网新版首页的开发，我们一个团队5个前端开发人员，我们的工作仅开发一个页面，这样我们可以使用ssi进行模块分工开发.......

现在，本人对于apache的学习也正在进一步摸索，所写的这些东西也仅仅是凭借自己在项目中的经验所得，如有不妥的地方还请告知！~

现在，淘宝网新版首页已经处于内测中，虽然还有很多bug需要修改，但也差不多接近尾声了，今天就来总结一下在这个项目中近20天的所学所思吧。在这近20天中，了解到了关于淘宝网首页的前端架构，优化方案等，以及前端的开发环境与本地开发环境。

一、开发环境

开发环境的搭建是在这次项目开发中学到最重要的东西，因为我们的开发环境直接关系到后期维护等等效率的问题。在做完首页项目，当我继续进行淘小组项目的工作时，感觉到很困难，感觉到现在如果我要对产品进行增加一个功能或者修改现有功能的效率会更加的底，这也让我总结了很多.

对于我们做项目的前端开发来讲，我们做的东西不只是一个页面，一个项目可能会涉及到很多页面，而不同的页面可能有不同的状态，在做项目时，我们不能做好一个面交给后台开发就丢掉，我们需要考虑到后期项目的修改、增加功能等等demo改动。当然这些也给我们带来很多困扰：比如页面一些公用模块，我们不能像JAVA开发或者PHP开发那样，可以将所有页面公用的模块直接写在一个单独的模块文件中，在页面中需要该模块时直接一个include就ok，当需要修改模块中的内容直接修改一个文件即可。而我们是需要返回去对每一个页面的代码都进行修改，这样的工作量是非常之大。另外一个感触就是开发的目录结构搭建要合理。所以我们需要对自己的开发环境进行改良，来提高我们的开发效率。

所以在后面的摸索和@拔赤的指教中，慢慢学会了搭建这样的开发环境。所以我的做法是：使用apache搭建web服务器，然后使用ssi来对公用模块进行调用，这样我们也就能像java或者php开发那样，直接使用进行调用，而后期修改也仅仅只需要修改一个html也就OK，而ssi还有很多功能，这些我也需要去慢慢的学习。另外apache的功能很强大，我们只要用好了它，我们的开发效率也会高很多。

二、前端优化

>以前，在我的心里根本没有页面优化这个概念，以为只要在写样式或者脚本时注意不要有太多的冗余或减少HTTP请求，减少文件内容大小，来解决文件下载的时间等等，这样就能达到性能的优化。但在这次项目的开发中又了解到很多关于前端优化的东西，比如html的延时渲染、延时加载、按需加载等等。

1、延时渲染，项目中我所做的模块内容都涉及到了延时渲染。所以对延时渲染也有了一点理解，所谓延时渲染，就是在在页面加载时部分内容不会显示出来，所以在页面加载时就可以先将这部分不需要显示出来的内容不使浏览器对齐渲染，这样就大大节约了浏览器的页面渲染时间。至于这个所节约的渲染时间是多少我没有去了解，只知道他对加载时间有所影响。对于延时渲染我原理我大致理解为：

a) 将暂时不需要的显示的html代码放在一个textarea中，并将textarea隐藏。

b) 当触发了需要显示部分内容的事件后，使用JS提取textarea中的内容，并对齐渲染，对于JS的渲染方式没有去了解过，应该是使用innerHTML进行代码插入元素中，并达到渲染效果。

2、延时加载，对于延时加载我以前有了解过jquery的延时加载功能。我的理解是他主要是在页面开始加载渲染时减少HTTP请求以及占用带宽。当页面的HTML渲染完成后在对图片进行加载。延时加载好像主要正对于图片。我认为他的工作原理大致为：

a) 将img标签的src替换为一个1px的图片文件（所有需要延时加载的图片的src为同一个）或者不设定src属性，创建data-src伪属性，并将其真实图片URL赋给data-src属性

b) 在页面html渲染完后或者在需要加载图片的时候使用JS将img标签的src属性替换掉图片真实地址，进行请求图片。

我在很多网站上看到使用图片延时加载的功能，也或者说按需加载。

3、按需加载，我目前对按需加载的理解还停留在HTML，比如个页面有很多很多图片，而这些图片在页面加载时并没有进行加载渲染，而是当滚动条滚动到有图片的时候图片才进行加载。在这次D2中听到玉伯讲的JS模块按需加载的情况还不是很了解，还需要抽时间了解下。

首页我所了解的页面优化方式大概就这三种，但是感觉这三种优化方式可以组合对页面进行优化。

三、技能方面

在这次首页项目中，技能得到很大的提高，但是我也说不出我现在到底哪里提高了，或许写代码的风格，写样式的方式等等。总之感觉自己进步很大。

最后感谢@小马、云烈给我提供这个很好的锻炼机会，感谢@拔赤对我的指教，感谢这次首页的开发团队 黑三、承玉、玉醴、法海、游仙、宗颖……

到淘宝实习已经3个月多了，这期间，除了技能方面的飞速提升，也根据自己的习惯搭建了一个适合自己的前端开发环境！~自己感觉挺不错，比较适合自己，也比较全面。。下面来分享分享！

硬件配置

1. dell optiplex 780,算是比较高端的机器了

2. 22′ + 19′ 双显示器(小屏幕写代码，大屏幕看效果)

软件配置

操作系统：windows 7、windows xp(虚拟机)

一个开发环境最基本也最重要的是需要一个编写代码的软件，曾经使用dreamweaver,zend,EditPlus,Vim 感觉这些都不是很好用，后来转向了aptana这个IDE，感觉很不错，有代码提示，高亮显示，自定义颜色等等。对于IDE这一块我没什么要求，适合自己最好！

作为一个预备的前端攻城师，所做的东西必须的考虑到大部分浏览器的兼容，但是就我现在的水平而言，也只能保证ie6,7,8,firefox,safari,chrome,opear这些浏览器的兼容（马上就会出ie9），所以这些浏览器是我必备的。

在我们的操作系统中,ie6,7,8是无法再同一个windows操作系统中并存的，这里有两种解决方案：1是使用ieTESTER,这个软件可以帮助我们在看到网页在ie6,7,8中的效果，但是我不是很喜欢这个软件（个人原因。。），所以我选择第2中方案：使用vm搭建winxp虚拟机，因为xp默认浏览器就为ie6,同时也可以使用iedevtoolbar来调试，后面介绍下这个软件。。。因为我的计算机配置较高，所以我不是很在乎花搭建虚拟机这么大的代价。（注意，要选好xp的版本，最要选择最优化的，否则你的虚拟机会很慢！~）

我的调试是基于firefox,个人感觉firefox就是w3c标准，只要在firefox下测试通过，ie8,safari,chrome,opear(所谓的360,sougou,tt这类浏览器都是基于IE，所以不能算是独立的浏览器)

调试插件

Firebug：Firebug是firefox下的一个插件,能够调试所有网站语言,如Html,Css等，但FireBug最吸引我的就是javascript调试功能，使用起来非常方便，而且在各种浏览器下都能使用（IE,Firefox,Opera, Safari）。除此之外，其他功能还很强大，比如html,css,dom的察看与调试，网站整体分析等等。总之就是一整套完整而强大的 WEB开发工具。再有就是其为开源的软件。http://getfirebug.com/

IEDevToolBar:微软的IEDevToolBar，这是一个免费的专门为Web开发人员制作的IE插件，IE插件IEDevToolBar可以帮助我们分析网站的布局结构，有助于我们学习和分析页面的CSS。http://baike.baidu.com/view/1439188.htm

Fiddler：Fiddler是一个web调试代理。它能够记录所有客户端和服务器间的http请求，允许你监视，设置断点，甚至修改输入输出数据，fiddler包含了一个强大的基于事件脚本的子系统，并且能够使用.net框架语言扩展。http://www.fiddlertool.com/fiddler2/

DynaTrace AJAX是一个运行在IE浏览器下的免费页面性能分析工具，它可以支持主流的IE6、IE7、IE8浏览器。这款工具正是DynaTrace为进入前端性能分析领域而发布的。您可以利用它来分析页面渲染时间、DOM方法执行时间，甚至可以看到JS代码的解析时间。连JQuery的创始者 John Resig 也鼎力推荐了一把。http://www.dynatrace.com/en/

搭建本地服务器

对于本地服务器，主要用来调试ajax,创建伪数据，如果不需要的做ajax请求可以不要。因为ajax为了安全方面，所以要求很严格。

apache:Apache是世界使用排名第一的Web服务器软件。它可以运行在几乎所有广泛使用的计算机平台上，由于其跨平台和安全性被广泛使用，是最流行的Web服务器端软件之一。同时Apache音译为阿帕奇，是北美印第安人的一个部落，叫阿帕奇族，在美国的西南部。也是一个基金会的名称、一种武装直升机等等。http://httpd.apache.org/

php5:2004年7月，PHP5正式版本的发布，标志着一个全新的PHP时代的到来。它的核心是第二代Zend引擎，并引入了对全新的PECL模块的支持。http://php.net

其他一些辅助工具

closure-compiler:js压缩工具（google出版）

yuicompressor:yui压缩工具，不仅能压缩js,还能压缩css

pngout:png图片压缩工具

cssEmbed:将图片转为base64嵌入代码

YSlow:firefox插件，他能把整个页面所有的javascript,css等合并在一个文件

mesureIt:firefox插件，算是一把尺子的作用，他能让我精确看到部分元素之间的距离

idebug:淘宝内部的一个测试工具

expression web4:microsoft出的一款web兼容查看软件，他能让我的页面精确比对出于设计稿的区别，已经每个浏览器之间的区别，对于精确地设计有很好的帮助！~