前段时间，整理出了属于自己的一个动画核心库，虽然渐变动画核心是复制Tweener的代码，但是在实现上，根据自己实际情况以及项目中所使用到的特效，编写了符合自己习惯的接口和参数调用方式，整理这个的主要目的是为了方便自己以后在想要开发一些特效以及提高用户体验相关的项目的时候能够用上，同时也是对自己编码的一点点锻炼吧。Tweener.js 现在觉得嘛，只要这个动画核心建立起来了，其他的fadein、fadeout、opacity、border、font-size等等的变化都可以随心所欲了，只需要找到一个平衡点：使用多长的动画时间才能够在IE、非IE下都能够有一个比较良好的体验。因为IE下处理动画的能力始终是那么的弱，这点很让人烦恼。这些就不多说了，来说一下之前自己写的一个tab slide模块的设计思路和使用到的技巧。 设计思路： 让CSS、HTML、JS分离，尽量是它们处理分内的事情。 使用函数节流方式。 使用HTML元素的id来定位元素，使用class来给元素设置样式。避免使用元素的id和class混合的方式来添加样式，如果有自定义样式，可以使用多个class，而不是使用元素的id。 自动记录前一次mouseover移动过的Trigger元素。 事件逻辑和应用逻辑相分离。 把一切可变的、或者可以自定义的变量通过参数设置为可以自定义的。
Js学的也差不多了，该是来总结一下Js中一些比较高级的智慧结晶了。基于Js的动态性、对象都是易变的、函数是第一对象等等其他语言所不包含的特性，可以在使用Js的时候创造出更高效、组织性更好的代码。下面提到的一些概念，是不是很熟悉： 分支、惰性实例化、惰性载入函数、单例的两种模式、享元类、函数绑定（纠正函数一个执行上下文）、函数curry化、高级定时器、保护上下文的构造函数、函数节流、自定义事件…… js中的继承、原型、构造函数这些都是老生常谈的了。但是对于构造函数式继承和原型式继承的优缺点，还是有必要了解一下的。原型式继承的主要优点就是共享方法和属性，使得从原型对象中继承出来的子对象都可以在内存中共享全部的方法和属性，这如果是在大型的继承链中将会大大的改善性能和减少内存的使用量。
腾讯内部使用的js库也开源了— JET(Javascript Extension Tools – Javascript 扩展工具包)，很难得的一件事情，赶紧下了Jet 1.1.1版本的整个源码，包括说明文档来看看源码，看看腾讯强大的前端技术的后面会有一个怎样的js库来支撑的。http://code.google.com/p/j-et/wiki/JET 查看了Jet的使用方式之后，首先不禁冒出了一个词“复制”。是的，Jet复制了YUI3的编写方式，提供了“包”的概念package： [javascript] Jet().$package(function(J){ //code here… }; [/javascript] 采用的也是颗粒化的方式，将负责不同功能的代码整理到独立的js文件里，比如：DOM、string、Event、http、fx、ui等等，不过Jet方法里并不能像YUI3那样直接导入该包的js文件，查看它的DEMO，需要自由组合几个js文件来实现想要的功能，做到了无缝的插入包，这个就得益于Jet中的微内核—jet.core.js。
不知道怎么给这篇文章起个标题，因为也是YY几句而已，就谈谈啦。 翻完了《Javascript高级程序设计第二版》，对其中的最佳实践认同度很高。整体来说，看了这本书，对作用域、原型、构造函数、解耦、分离等等理解都有了另一种体会，原来测试中发现的很多疑问，在书中都能够找到答案，很阔然开朗。来聊聊内容、行为、表现分离吧。 或者也可以说是：结构、数据、行为、表现相分离，因为内容具体的就是指结构和数据，而这点是比较容易误解的：数据和结构也一定程度上需要保持分离。而数据和结构分离的一种应用场合就是模板技术，模板提供结构，后端提供数据，前端或者后端技术提供模板解析行为，CSS控制表现。
搜索了几种客户端存储的方式：Flash SharedObject、Google Gears、Cookie、DOM Storage、User Data、window.name、Silverlight、Open Database等等，都存在或多或少的缺点以至于无法跨浏览器、跨页面、跨目录的方式来储存客户端的数据。因此很多应用在需要这个客户端存储数据功能的时候，就需要权衡这几种方案，看哪一种能更接近于应用的功能，将影响和差异降低到最小。（可以参考：http://ningxiaotao.javaeye.com/blog/683611） 需要安装插件、新版的现代浏览器才支持的方案都存在很大的缺陷，在可用性方面得不到最大的保障，如果能充分利用各大浏览器都普遍支持的方案来实现，这样才能更加符合大部分应用的需求，window.name能在当前页面刷新或者在当前窗口跳转到其他页面的时候仍然存在（试试吧），不过不能跨窗口传值；还有User Data在IE下也支持完好（缺点是：只能在相同目录下的页面之间共享数据）；再加上HTML5提倡的localStorage方案来实现其他支持它的现代浏览器，来做到渐进增强、稳步退化。这是经常会使用的方式，来做到一个比较好的权衡。 但是有一点必须注意：不宜在客户端存储敏感的信息。使用window.name、localStorage、globalStorage等在客户端存储的信息都非常的容易暴露，所以建议在完成数据存储或者设定一个过期时间清除掉来保证用户帐号等的安全。 从上面的所说的出发，使用window.name、User Data在IE6、7上实现存储、IE8+等现代浏览器使用localStorage或者globalStorage来实现，得到了一个比较权衡的兼容，但是缺点仍然存在：IE6、IE7下使用User Data不能跨目录读取存储的数据，这时候就可以使用window.name来实现跨页面的存储数据；localStorage或者globalStorage就可以实现跨页面、跨目录的读取存储的数据，但是都不能跨域。下面是使用示例： [javascript] storeLocalData.setItem("test1","shafeng00453sfsdfsd1"); //storeLocalData.setItem("test","supersha001"); //storeLocalData.removeItem("test"); alert(storeLocalData.getItem("test1")); toreLocalData.setItem("test2","fsd1"); alert(storeLocalData.getItem("test2")); //================================ … 了解更多
最近一直在学习一些巧妙的设计代码编写的技巧，比如：单例模式，模块模式，类模式，字面量模式等等。其中单例模式、模块模式的写法又可以根据不同的特点有几种不同的变体。哈哈，有点走题了，本文主要说的不是这些，而是怎样利用字面量对象来设计代码。 当初利用三元运算符来代替多个if的逻辑，使得代码看起来简单，虽然牺牲了一点代码可读性，但是代码看起来没有那么臃肿了。对于if逻辑多的时候，可以使用switch来代替众多的if…else if逻辑，但是对于每一个分支比较复杂或者是很类似的时候，看到switch…case一连串，也感觉不爽，那么就是用字面量对象来代替吧，就如我下面所写的那样： [javascript] var checkFn=function(operation){ return { ‘=’:function(e) { return (e.getAttribute(attr) == attrValue); }, ‘~’:function(e) { return (e.getAttribute(attr).match(new RegExp(‘\\b’+attrValue+’\\b’))); … 了解更多