基于自定义JS框架的UI库之自定义框架

 

                    前几年才开始关注JS，发现这真的是一门博大精深的语言，个人认为其难度绝对不低于C#（尤其是调试）。当时在网上搜了一下发现JQUERY是个受到大多数人青睐的强大框架。在刚开始的时候也对其源代码进行过分析。总的来说jquery的强大毋庸置疑，但是在我们平时90%的应用场景中只能用到其10%的功能：取赋值，事件绑定，ajax。当时考虑到自己的项目没有那么多的应用场景再加上自己也希望深入学习一下JS，所以决定自己开发一个轻量级的框架。

                      首先来看一下框架的整体设计：

 

                

                      BWF框架的处理与jquery不同，后者将dom对象与数组对象一视同仁的处理，二BWF则是将其非别封装成两个对象，在统一的调用入口处进行处理，是一个简单的门面模式应用。另一方面，当将两个对象拆分开后，用户每次进行调用，不会将一些用不到的功能进行实例化，也可以减少一些客户端内存的使用。在框架的调用方面采用了和jquery相同的方式——链式调用，在某些操作下通过链式访问可以将对DOM元素的封装对象与DOM数组的封装对象串联起来达到更强大的功能。

                     核心函数：w(argument)。

 

该函数将用户传递进来的参数根据不同的规则进行简单的处理，这里也是门面模式实现的地方。平时所使用的90%的功能这里几乎都已经提供。下面以radio checked name:分支说明一下：

            var ccs = [];
            var names = command_code.split(":")[1];
            var check_boxes = []; 
            ccs = document.getElementsByTagName("input");
            var k = 0;
            for (var i = 0; i < ccs.length; i++) {
                if (ccs[i].checked && ccs[i].type == "radio" && ccs[i].name == names) {
                    check_boxes[k] = ccs[i];
                    k++;
                }
            }
            var _temp = new elementarray(check_boxes);
            return _temp;
            
        }
        else {
            var tt = document.getElementsByName(command_code);
            return new elementarray(tt);
        }

                这里采用了getElementsByTagName来获取所有的input元素，在判断是否被选中的时候才用了原生的JS处理方式加快速度。最后返回一个elementarray对象，该对象实现了对数组元素的封装。

             下面再看一个例子，复杂命令格式必须由:（冒号）开头，当程序不由冒号开头的时候，程序默认采用了利用ID获取对象的方式，因为Name的方式获取到的对象可能并不唯一（当然这一点也带来了一个问题，框架如果与EXT进行合并使用的话可能会有一些奇怪的问题发生，究其原因就是ID重复导致），前面已经说过，该框架是一个轻量级框架（这也是开发伊始的最初远望，可是随着项目的不断完善，功能不断强大，最终形成了一个轻量级的UI库）。在用户传入ID的情况下，程序将会执行：

var myx = new forest(parameter_value);

            返回一个封装的DOM元素对象。forest函数采用面向对象的方式开发，每一次调用w（）函数，都会在内存中初始化一个全新的forest对象。

var Forest = window.forest = forest = function (temp_value) {

    this.temp_obj = _$_(temp_value);
    if (this.temp_obj == null)
    {
        return null;
    }
    this[0] = _$_(temp_value);

}

            该函数的初始化代码如上所示，_$_函数利用ID对象获取DOM对象。

 

                  封装后的DOM元素添加了所有最长用到的方法：取值，复制，清空，启用，禁用，常用属性，追加子元素，为元素添加临时存储空间，以动画方式出现，以动画方式消失，右键菜单等功能。

 

                    本节主要介绍了BWF框架的核心架构，下一节内容将是基于BWF框架所实现的可移动弹出窗口，以及在JSON表格控件。