关键字‘封装’的相关文章

zLib1.0.1发布

世界上的事儿，从来都是没有定论的，既定的目标也未必能如愿，可能就是在你离目标越来越近的时候，会遇到另外一个选择，逐渐让你和目标渐行渐远。关于这点，写zLib的过程就是一个实实在在的例子！

写zLib的初衷只是想总结一些平时自己常用的函数，以便加快前端开发的进程，并不敢想象成就一个真正的JavaScript框架。但是在这个过程中，考虑到时下正流行的OOP，自己也难免落入俗套，于是设计理念转向了OOP，呵呵，虽然JavaScript不能算是一门面向对象编程的语言，只是基于对象而已，但是它特有的灵活度，完全可以模拟出来所谓的OOP。这样一来，本来三两天就可以搞定的事情，足足耗费了我一个月的时间（当然是工作之余），加上最后编写这个API文档，可真是觉得有些费时费力了。

说说zLib的特性：

1，简约快速的CSS选择器

2，DOM扩展：

zLib的主要内容，众所周知，javascript主要应用于Web开发，那么浏览器端环境里的DOM当然是每个框架的首要扩展目标，如果zLib不提供DOM扩展，那真的是一无是处了。

3，动画

4，非侵入式调用，相信用户很痛恨Dojo的这一点

5，保持和原生对象一致，即没有对JavaScript原生对象进行原型扩展，套用一句名言：“不要修改原生对象的prototype，除非你认为必要。”

6，提供完美的兼容方案，zLib兼容市场目前的主流浏览器：Internet Explorer6+, Mozilla Firefox 2, Safari 2+, Chrome, Opera 9+, 及其他基于IE内核的浏览器如Maxthon、360、Sogou等。

7，简易ajax的实现

可以实现很时髦的链式调用，如果觉得这种写法会使代码可读性降低，当然可以采用分段式写法，这个完全由个人喜好所决定！

诚然，zLib到目前为止，不能算是js framework，因为它不具备其他第三方程序库强悍的功能，我只把他当做自己的library来使用，但是如果zLib有幸被你下载并使用，那么这个API文档将会对你十分有帮助，因为利用它，你可以轻松的调用zlib的内部定义的方法来帮你完成手头上的任务，而不必在意这个方法究竟是怎么实现的。

立即体验

标签：, , 发布在 javascript | 5 条评论 »

封装选项卡

选项卡技术很常见，即使刚踏入前端开发的同学都会使用它去完成一些基本的任务。有一种情况值的考虑，假如在一个页面中多处出现同样的功能模块的应用，那么我们很自然的会想到，把这个功能写成一个function，然后用一个事件来驱动这个function，这个的思路看上去一切都没什么问题了，既体现的代码的重用和模块化，又可以很快的完成繁琐的工作任务。

事实上，这样处理确实带来很多的便利性，但是美中不足的地方在于，在每个操作对象上都要加上事件属性（onclick=”",onmouseover=”"等等），否则一经写好的function就无法奏效，在推尚结构和表现向分离（实际上是xhtml+css技术，用在此处颇有不妥）的今天，这样的结构是遭人唾弃的（起码我很BS）， 问题的出现总会有完美的解决方案。

顺水推舟，如果创建一个构造类，把一切操作对象的属性作为参数传入这个类，并赋给这个类的一个私有属性，那么在这个类的实例对象中，执行初始化方法时，利用定位运算符（.）能很轻松的访问到操作对象的属性，从而进行一些必要的操作。这个Tab类的结构如下：

  1. function Tab(obj){
  2.     this.obj = obj;
  3. }
  4. Tab.prototype.init = function(){
  5.     var $para = this.obj;
  6.     var t1 = document.getElementById($para.id).getElementsByTagName($para.tag1);
  7.     var t2 = document.getElementById($para.id).getElementsByTagName($para.tag2);
  8.     this.$event = "on" + $para.eventType;
  9.     t1[0].className = "current";
  10.     t2[0].style.display = "block";
  11.     for(var i=0;i<t1.length;i++){
  12.         t1[i][this.$event] = (function(index){
  13.             return function(){
  14.                 for(var j=0;j<t1.length;j++){
  15.                     t1[j].className = "";
  16.                     t2[j].style.display = "";
  17.                 }
  18.                 this.className = "current";
  19.                 t2[index].style.display = "block";
  20.             }
  21.         })(i);
  22.     }
  23. }

利用这个Tab类，可以帮助我们很快捷的完成任务，而且仅仅需要二行代码，其中一行用来创建一个实例化的对象，之后进行初始化操作，这一切看上去都是那么的优雅（自己的看法 -.-）。

点击查看应用

标签：, 发布在 javascript | 5 条评论 »