做别人没想过的,想别人没做过的

在前面一个转载的文章【jquery要怎么写才能速度最快？】里面提及了 7. 事件的委托处理（EventDelegation）

其中提到了一个非常重要的概念就是事件委托。事件委托的概念是基于事件触发的冒泡机制的。

在以前firefox还有一个 事件捕捉机制，事件捕捉机制就是先从最顶层的元素一层一层向子元素触发。 但是我用这个demo在新版本的firefox里面没有检查出来。。《JavaScript高级程序设计》　第一版里面提及到的，firefox采用的先捕捉，在冒泡的机制。不过现在测试这个demo并没有发现捕获动作（在firefox最新版本里面测试demo，点击span的时候并没有先打印出html的click事件内容。）

事件委派实际上基于冒泡机制，任何一个子元素的事件，都会冒泡到父元素。 事件委派的概念就是 当子元素自身触发一个事件以后，Javascript并没有给子元素提供事件响应，等子元素的事件冒泡到父元素，这个时候Javascript给父元提供事件响应，由父元素的事件来处理子元素的事情。 也就是说，把本来应该子元素自己完成的事件，委派给父元素去完成。

demo2：传统的事件绑定。

 

事件委托demo：

这个需要在高级浏览器中运行，应为在事件监听的时候使用的是w3C的“addEventListener”方法，ie要另做处理。

很久没有关注jQuery了，最近重新看了一下，看到一些不错的文章，转来坐一下笔记。
其内容和一些新提供的方法还是很多有值得学习的地方。
 
1. 使用最新版本的jQuery
 
jQuery的版本更新很快，你应该总是使用最新的版本。因为新版本会改进性能，还有很多新功能。
下面就来看看，不同版本的jQuery性能差异有多大。这里是三条最常见的jQuery选择语句：
　　$('.elem')
　　$('.elem', context)
　　context.find('.elem')
我们用1.4.2、1.4.4、1.6.2三个版本的jQuery测试，看看浏览器在1秒内能够执行多少次。结果如下：

 
可以看到，1.6.2版本的运行次数，远远超过两个老版本。尤其是第一条语句，性能有数倍的提高。
其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。
2. 用对选择器
在jquery中，你可以用多种选择器，选择同一个网页元素。每种选择器的性能是不一样的，你应该了解它们的性能差异。
（1）最快的选择器：id选择器和元素标签选择器
举例来说，下面的语句性能最佳：
　　$('#id')
　　$('form')
　　$('input')
遇到这些选择器的时候，jQuery内部会自动调用浏览器的原生方法（比如getElementById()），所以它们的执行速度快。
（2）较慢的选择器：class选择器
$('.className')的性能，取决于不同的浏览器。
Firefox、Safari、Chrome、Opera浏览器，都有原生方法getElementByClassName()，所以速度并不慢。但是，IE5-IE8都没有部署这个方法，所以这个选择器在IE中会相当慢。
（3）最慢的选择器：伪类选择器和属性选择器
先来看例子。找出网页中所有的隐藏元素，就要用到伪类选择器：
　　$(':hidden')
属性选择器的例子则是：
　　$('[attribute=value]')
这两种语句是最慢的，因为浏览器没有针对它们的原生方法。但是，一些浏览器的新版本，增加了querySelector()和querySelectorAll()方法，因此会使这类选择器的性能有大幅提高。
最后是不同选择器的性能比较图。

 
可以看到，ID选择器遥遥领先，然后是标签选择器，第三是Class选择器，其他选择器都非常慢。
3. 理解子元素和父元素的关系
下面六个选择器，都是从父元素中选择子元素。你知道哪个速度最快，哪个速度最慢吗？
　　$('.child', $parent)
　　$parent.find('.child')
　　$parent.children('.child')
　　$('#parent > .child')
　　$('#parent .child')
　　$('.child', $('#parent'))
我们一句句来看。
(1)$('.child', $parent)
这条语句的意思是，给定一个DOM对象，然后从中选择一个子元素。jQuery会自动把这条语句转成$.parent.find('child')，这会导致一定的性能损失。它比最快的形式慢了5%-10%。
(2)$parent.find('.child')
这条是最快的语句。.find()方法会调用浏览器的原生方法（getElementById，getElementByName，getElementByTagName等等），所以速度较快。
(3)$parent.children('.child')
这条语句在jQuery内部，会使用$.sibling()和javascript的nextSibling()方法，一个个遍历节点。它比最快的形式大约慢50%。
(4)$('#parent > .child')
jQuery内部使用Sizzle引擎，处理各种选择器。Sizzle引擎的选择顺序是从右到左，所以这条语句是先选.child，然后再一个个过滤出父元素#parent，这导致它比最快的形式大约慢70%。
(5)$('#parent .child')
这条语句与上一条是同样的情况。但是，上一条只选择直接的子元素，这一条可以于选择多级子元素，所以它的速度更慢，大概比最快的形式慢了77%。
(6)$('.child', $('#parent'))
jQuery内部会将这条语句转成$('#parent').find('.child')，比最快的形式慢了23%。
所以，最佳选择是$parent.find('.child')。而且，由于$parent往往在前面的操作已经生成，jQuery会进行缓存，所以进一步加快了执行速度。
具体的例子和比较结果，请看这里。
4. 不要过度使用jquery
jQuery速度再快，也无法与原生的javascript方法相比。所以有原生方法可以使用的场合，尽量避免使用jQuery。
请看下面的例子，为a元素绑定一个处理点击事件的函数：
　　$('a').click(function(){
　　　　alert($(this).attr('id'));
　　});
这段代码的意思是，点击a元素后，弹出该元素的id属性。为了获取这个属性，必须连续两次调用jQuery，第一次是$(this)，第二次是attr('id')。
事实上，这种处理完全不必要。更正确的写法是，直接采用javascript原生方法，调用this.id：
　　$('a').click(function(){
　　　　alert(this.id);
　　});
根据测试，this.id的速度比$(this).attr('id')快了20多倍。
5. 做好缓存
选中某一个网页元素，是开销很大的步骤。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。
比如，下面这样的写法就是糟糕的写法：
　　jQuery('#top').find('p.classA');
　　jQuery('#top').find('p.classB');
更好的写法是：
　　varcached = jQuery('#top');
　　cached.find('p.classA');
　　cached.find('p.classB');
根据测试，缓存比不缓存，快了2-3倍。
6. 使用链式写法
jQuery的一大特点，就是允许使用链式写法。
　　$('div').find('h3').eq(2).html('Hello');
采用链式写法时，jQuery自动缓存每一步的结果，因此比非链式写法要快。根据测试，链式写法比（不使用缓存的）非链式写法，大约快了25%。
7. 事件的委托处理（EventDelegation）
javascript的事件模型，采用"冒泡"模式，也就是说，子元素的事件会逐级向上"冒泡"，成为父元素的事件。
利用这一点，可以大大简化事件的绑定。比如，有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click），请问是否需要将下面的命令执行100次？
　　$("td").bind("click", function(){
　　　　$(this).toggleClass("click");
　　});
回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，这个事件会"冒泡"到父元素table上面，从而被监听到。
因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。
具体的写法有两种。第一种是采用.delegate()方法：
　　$("table").delegate("td","click", function(){
　　　　$(this).toggleClass("click");
　　});
第二种是采用.live()方法：
　　$("table").each(function(){
　　　　$("td", this).live("click",function(){
　　　　　　$(this).toggleClass("click");
　　　　});
　　});
这两种写法基本等价。唯一的区别在于，.delegate()是当事件冒泡到指定的父元素时触发，.live()则是当事件冒泡到文档的根元素后触 发，因此.delegate()比.live()稍快一点。此外，这两种方法相比传统的.bind()方法还有一个好处，那就是对动态插入的元素也有效，.bind()只对已经存在的DOM元素有效，对动态插入的元素无效。
根据测试，委托处理比不委托处理，快了几十倍。在委托处理的情况下，.delegate()又比.live()大约快26%。
8. 少改动DOM结构
（1）改动DOM结构开销很大，因此不要频繁使用.append()、.insertBefore()和.insetAfter()这样的方法。
如果要插入多个元素，就先把它们合并，然后再一次性插入。根据测试，合并插入比不合并插入，快了将近10倍。
（2）如果你要对一个DOM元素进行大量处理，应该先用.detach()方法，把这个元素从DOM中取出来，处理完毕以后，再重新插回文档。根据测试，使用.detach()方法比不使用时，快了60%。
（3）如果你要在DOM元素上储存数据，不要写成下面这样：
　　var elem = $('#elem');
　　elem.data(key,value);
而要写成
　　var elem = $('#elem');
　　$.data(elem,key,value);
根据测试， 后一种写法要比前一种写法，快了将近10倍。因为elem.data()方法是定义在jQuery函数的prototype对象上面的， 而$.data()方法是定义jQuery函数上面的，调用的时候不从复杂的jQuery对象上调用，所以速度快得多。（此处可以参阅下面第10点。）
9. 正确处理循环
循环总是一种比较耗时的操作，如果可以使用复杂的选择器直接选中元素，就不要使用循环，去一个个辨认元素。
javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。
10. 尽量少生成jquery对象
每当你使用一次选择器（比如$('#id')），就会生成一个jQuery对象。jQuery对象是一个很庞大的对象，带有很多属性和方法，会占用不少资源。所以，尽量少生成jQuery对象。
举例来说，许多jQuery方法都有两个版本，一个是供jQuery对象使用的版本，另一个是供jQuery函数使用的版本。下面两个例子，都是取出一个元素的文本，使用的都是text()方法。你既可以使用针对jquery对象的版本：
　　var $text = $("#text");
　　var$ts = $text.text();
也可以使用针对jQuery函数的版本：
　　var $text = $("#text");
　　var$ts = $.text($text);
由于后一种针对jquery函数的版本不通过jQuery对象操作，所以相对开销较小，速度比较快。

前几天在微博上看到"杰杰西西卡卡"提出了一个问题
<script>

var i=10;

function a() {
 alert(i);
 var i = 2;
 alert(i);
};
a();

</script>

别运行，给出答案。

这个问题涉及到2个问题，第一个是作用域的问题，第二个是javascript特殊的编译方式的问题。

第一个i，属于全局变量，第二个函数a里面的i，应为使用了 var申明，所以他的作用域属于函数体（花括号）里面。

首相必须明白函数的创建和执行原理 作用域的原理，
函数在创建的时候会生成一个 一个作用域（Scope）属性【这个属于是内部属性】，这个属性里会被 作用域链（Scope chain）填充，作用域链 会在按顺序存放每个可访问 对象集合。
也就是说，函数a被创建的时候，最近的第一个可访问对象的集合 会被翠芳在 ScopeChain[0]的位置。之后全局对象集合会存放在 ScopeChain[1]的位置。

函数在执行的时候，也会生成“执行期上下文”（execution context）的内部对象。“执行期上下文”定义了函数在运行的时候当时做的环境。应为每个函数在多次运行的时候并不是每次都会一样所以需要"执行期上下文"来记录每次运行的环境。当次执行结束以后，这个对象会自动销毁（当然，很多情况下这种销毁机制被自身代码所牵制或则浏览器一些特殊的设定导致不能销毁，所以才出现了内存泄漏）。

"执行期上下文"创建时会被初始化为当前函数的作用域属性中包含的对象。这些对象会被按照出现顺序复制到"执行期上下文"的作用域中。这个过程完成了以后会产生一个“活动对象”（actvation object），这个对象会推入到“执行期上下文”作用域链的最前面（也就是ScopeChain[0]的位置）。当"执行期上下文"被销毁，"活动对象" 也会同时被销毁.

回到问题，第一次执行 alert(i)的时候，作用域链查询，首先会查询 alert这个方法的"执行期上下文"，当查询alert初始化"执行期上下文"时候复制alert作用域链里面的对象集合所生成的"活动对象"里面没有i这个对象的时候，就会查询"执行期上下文"作用域链[1]位置所存储的对象集合，前面所提到，“作用域链 会在按顺序存放每个可访问 对象集合”，所以作用域链[1]所存储的 对象集合 是函数a里面对象集合。假如在函数a里面也没找到i，那么会继续查询作用域链[2]也就是全局对象集合。如果全局对象集合 一起没找到i，那么这个时候就会报错。

那么 第一个alert到底有没有在函数a里面找到i呢？

这里就会涉及到我需要说的第二个问题“javascript特殊的编译方式”

在javascript 里面，存在一个变量声明提升（Hoisting）的概念，JavaScript 会提升变量声明。这意味着 var 表达式和 function 声明都将会被提升到当前作用域的顶部。

需要注意的是，
1.只有申明被提升了，赋值操作不被提升的；
2.提升操作只能提升到当前作用域的顶部。

所以结论就是，
第一个alert是可以在函数体里面找到变量i的，因为 i使用的var定义，会在编译的时候提升到函数a的顶部。但是由于提升的只有申明，赋值操作不被提升。所以第一个结果是undefined。
第二个alert的"执行期上下文"在作用域链[1]位置的对象中i已经执行了复制操作。所以结果会是2.

最简单能够体现 变量被提升的方式。
<script>
 //测试i的结果
 alert(i);
 //测试i是否是存在的对象   hasOwnProperty只有高级浏览器可以使用
 alert(window.hasOwnProperty(i));
 var i = 2;
</script>

 

同样你可以设置默认width和缩放比例 meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"

上代码

 

够简单把，够明了把，不不像其他例子里面有很多颜色。有几个圆。既然是学习，就得先学简单的。

后面的 from 和to  这个就不要说了，问题是 这个不是线性渐变，线性渐变里面from是上to下，或左to右。 圆形渐变（不用径向渐变这一次，这个不是那么直白）里面from是从外到里。

还把，那么现在还有6个数字参数，【 150 150,100,150 150,0】 

怎么会有这么多参数？第一次看晕了有木有啊。这是坑爹爹把~ 好吧， 其实径向渐变是2圆。没错 是2个。那么参数就是 

【圆1坐标，圆1半径，圆2坐标，圆2半径】

我们知道，坐标是x 和y 2个值，所以 6数值 第一个和第二个是没“，”隔开的。同样第四个和第五个也一样。

既然是坐标，所以不想单位就是像素，可以用其他常用单位做定位啦。

不过半径不知道为什么不能用？奇怪呢。

 

好吧，到现在知道6个参数怎么做渐变呢?  其实，大部分做的时候就是一个颜色到另一个颜色的渐变。也就是说，第2个色是结束点。  所以第二个员压根就没有半径....所以第个参数是0.  如果你需要渐变是结束在这个第一个大员的中心点，那么地第2个圆肯定和第一个圆的xy坐标是一样的，因为径向渐变是从第1圆的最外面的地方渐变到第2个圆的最外面的地方。

同事今天突然问我一个问题，为什么 用

的时候测试出来的结果却是"1</option>"，ie6  7 8 都存在这个问题。

经过测试，发现 在用innerHTML输出html 的时候 凡是自定义标签（比如“<x></x>”）都会丢点前面这一部分， 想option必须在 select标签下面的，也不能直接innerHTML。

当然用jq的.html() 方法 不存在这个问题。

给公司首页写的一个banner轮播广告。

 

 

其实这类banner广告图主要思路都是一样的。

1.定义一个切换的方法。

2.定义一个方法保证切换的时候 下面的  1  2  3  之类的选中位置正确

我这里用的fadeIn() 方法来实现效果。 如果喜欢可以改成其他的。

demo：http://dabaii.com/demo/20101203/index.html

 

2010.12.10：ps:最近同事发现1.2版本jQ下面有问题。主要原因是jquery1.2没有通过each 方法给数组对象绑定时间的时候产生不会闭包效果。所以直接绑定事件的时候始终会执行最后一个。

其实在代码设计的时候 按道理也应该使用each 方法，这样就不需要在 切换对象 上添加一个属性 去获取了。

如果用each来循环绑定时间，就不需要这个多余的步骤了。下面是修改后的事件绑定。

通过each 的自带索引参数就可以确定但前点击的是第几个。

最后通过测试，发现1.2的jpqery 的数组对象有的情况下还是会产生闭包的。具体我也不知道怎么去判断。所以建议只要是数组对象需要给每个元素绑定时间都调用each方法。

最近去百度贴吧看到一个打豆豆的flash游戏。玩了几天，感觉不错。于是写了一个js版本的。

由于是自己写的第一个js小游戏，代码规范 算法还有很多地方都很烂。而且好像还有bug，先发出来。有空在该把。

http://dabaii.com/demo/20101129/dadoudou.html

数据库建立索引常用的规则如下： 1、表的主键、外键必须有索引； 2、数据量超过300的表应该有索引； 3、经常与其他表进行连接的表，在连接字段上应该建立索引； 4、经常出现在Where子句中的字段，特别是大表的字段，应该建立索引； 5、索引应该建在选择性高的字段上； 6、索引应该建在小字段上，对于大的文本字段甚至超长字段，不要建索引； 7、复合索引的建立需要进行仔细分析；尽量考虑用单字段索引代替： A、正确选择复合索引中的主列字段，一般是选择性较好的字段； B、复合索引的几个字段是否经常同时以AND方式出现在Where子句中？单字段查询是否极少甚至没有？如果是，则可以建立复合索引；否则考虑单字段索引； C、如果复合索引中包含的字段经常单独出现在Where子句中，则分解为多个单字段索引； D、如果复合索引所包含的字段超过3个，那么仔细考虑其必要性，考虑减少复合的字段； E、如果既有单字段索引，又有这几个字段上的复合索引，一般可以删除复合索引； 8、频繁进行数据操作的表，不要建立太多的索引； 9、删除无用的索引，避免对执行计划造成负面影响； 以上是一些普遍的建立索引时的判断依据。 索引的建立必须慎重，对每个索引的必要性都应该经过仔细分析，要有建立的依据。 因为太多的索引与不充分、不正确的索引对性能都毫无益处：在表上建立的每个索引都会增加存储开销，索引对于插入、删除、更新操作也会增加处理上的开销。 另外，过多的复合索引，在有单字段索引的情况下，一般都是没有存在价值的；相反，还会降低数据增加删除时的性能，特别是对频繁更新的表来说，负面影响更大。

最近闲着无聊把blog风格修改了一下。不再是默认模板风格了。

一下是修改记录：

1.头部添加css文件“templates/default/img/bluestyle/blue.css”

2.添加背景图片

3.主体添加上下10像素外边框，添加5像素投影，颜色#aacdea，添加5像素圆角边框。

4.头部添加背景图片

5.整体页面90%的透明度

6.翻页风格修改

7.其他页面页面标题修改

8.存档页面 文字字体修改

9.代码编辑器风格修改，14号宋体增加阅读性

10.添加一个头像

11.给头像添加一个QQ交谈的连接，鼠标hover放大图片，ie使用zoom实现。放大1.2倍。

备注：整个风格添加不影响旧版本，去掉样式文件就可以回到以前版本。

 

lazyload for JQuery 插件的主要功能是提供给整个页面或者固定对象的延迟滚屏加载。和预加载是两个相对的图片加载技术。

延迟滚屏加载主要优势在于他可以让首屏加载速度提高，而在首屏范围外的图片只有在滚屏的时候在加载（默认模式），对于低带宽的用户和高流量的网页来说这个技术有很可观的价值（提高首屏速度，节约CDN流量）。土豆网  和 QQ返利 上面可以预览到这种效果。当你在下拉滚动条的时候，首屏以外的图片才加载（土豆网主要是视频缩略图，QQ返利主要是返利商家logo）。

首先你需要在你的网页里面应用jQuery和lazyload 2个js文件：

最简单的实现方式：

这个代表你网站上所有图片都会有这个效果，提供一个demo效果:http://www.dabaii.com/demo/20100907/index.html图片背景是红色的，你可以打开网页在首屏等图片加载完毕，网页加载完毕（看浏览器右下角出现完成2个字），在拉动滚动条，你会发现首屏以外的图片开始看到的是红色背景，然后才是图片（如果看不到，那恭喜你你的网速很快，我使用的图片比较小 所以 网速快有可能体验不到效果，你可以 用firefox的插件Throttle看控制一下你的带宽看效果）。如果第一次没看到效果ctrl+F5刷可以再次看到。

但是很明显，这个并不是我实际想要的，很明显我不希望所有首屏以外的图片都实行延迟滚品加载机制，我的页面装饰图，体现页面风格的图片不需要使用这个效果。只有特定的产品图 或者说是内容图（和页面效果无关的，是属于内容模块的图片）才使用这种机制。这样不会导致我下拉的时候页面效果很难看。所以使用的时候记得限定范围。另外lazyload 还提供了其他几个参数：

lazyload for jQuery  下载  源码版  压缩版

访问 lazyload for jQuery网站（英文）

*内容以上面地址的介绍为准，此文章只不过提供个人的测试结果和解释。只作为参考，不能作为文档。请一定以辨证的眼光看待，免得误人子弟。请勿在未校队改文章内容前提下盲目的转载。如果发现错误或者有更好的建议 请发邮件给我。邮箱 dabai@dabaii.com 我会及时更正。谢谢。

 

08年的时候就开始在用json 做一个零时数据的页面，那时候做得是 08年欧洲杯的一个活动页面，我用json记录比赛场次时间之类的信息。后来09年在dnf商城让程序员在后台输出json我在前台操作他生成产品的 颜色 尺码 编号 等等之类信息，但是使用了这么久一直没有在意自己写的json 是否格式真的那么正确。

昨天产品需求让我做一个招聘页面，提供了一份word文档里面有一切招聘岗位的描述。于是为让他提一个需求给程序员在后台提供给编辑一个可以发布招聘信息的编辑器。结果产品以招聘岗位很少变更为由（招聘的都是销售 市场推广之类的人才，所以多多不限），让我把5个招聘职位做成静态的。于是我就想把招聘的信息记录在json里面，用js生成页面。

 

这个是标准的json数据么？ 我用jsonView.(点击下载如果不能下载请百度“json viewer”关键字) 查看显示确实能够用，而且能够体现数据结构（如下图）。

 

但是我突然想起我有一个基于firefox的火狐插件jsonView（在火狐里面选工具 附加组件 获取附加组件 查询jsonView 就可以找到）。我好奇的把这个结构去验证一下（装了组件以后打开下面这个连接。）http://www.dabaii.com/demo/20100825/1.json(如果显示成文本本件，把json文件另存在本地用firefox打开就可以验证)。

你会发现这个插件会提示你 ：“分析JSON文件时出错。文件格式可能不正确.”

其实在json里面， 属性和值 都需要用引号包含起来。   {job:"文本"} 应该写成{”job":"文本"}

一份json在页面上怎么调用呢 ……如果用jquery的话 里面提供了一个 调用json的方法：

提供一个demo 和json文件。

http://www.dabaii.com/demo/20100825/1.json

http://www.dabaii.com/demo/20100825/json.html