JavaScript工具函数——操作页面节点、命名空间管理

工具函数

在 javascript 操作页面元素（element）的时候，最常用的函数就是 document.getElementById() 了，把这个函数简写下，可以省好多功夫

function E(id) {
    if (typeof id === 'string') {
        return document.getElementById(id);
    } else {
        return id;
    }    
}   

这样就可以通过 E('foo') 来获得标签 ID 等于 foo 的元素了。

同理，也可以简写 createElement 方法，并且把具有相似功能的 createTextNode、createDocumentFragment 封装到一块

function C(tagName) {
    var dom;
    tagName = tagName.toUpperCase();
    if (tagName == 'TEXT') {
        // 创建文本节点，可以通过 dom.nodeValue = 'foo'; 为节点赋值。
        dom = document.createTextNode('');
    } else if (tagName == 'BUFFER') {
        /* 创建文档碎片，插入过多节点时，可以先把单个节点 appendChild 文档碎片中，
           最后一次性插入页面， 避免多次渲染。
        */
        dom = document.createDocumentFragment();
    } else {
        // 创建元素节点
        dom = document.createElement(tagName);
    }
    return dom;
}        

这样 就可以这样通过下面代码

var buf = C('BUFFER'), div = C('div'), text = C('TEXT'); 

var par = E('parent');

text.nodeValue = 'child';

div.appendChild(text );

buf.appendChild(div);

par.appendChild(buf);

往页面 id="par" 的元素中插入文本了。

命名空间

上面通过 functuion 关键字在全局环境下定义的函数， 都是全局变量，当定义的函数过多或则多人协调开发时，会造成命名的冲突。

由于JS没有命名空间的概念，可以通过对象来管理命名空间

var MY = {};// 定义自己的命名空间
MY.dom = {};// 给工具函数分类
MY.dom.E = function(){
    // 上面的代码
}
MY.dom.C = function(){
    // 上面的代码
}

这样可以通过 MY.dom.E('foo');来获取页面元素了。

函数名字注册

不过，存在这样一个问题，当工具函数越来越多时，每次都要手动往 MY 对象里添加，比较麻烦，

可以写个方法自动往 MY 对象里面添加

var MY = (function(){
    var that = {};
    // 把方法注册到对象上面
    that.register = function (ns, maker) {
        var NSList = ns.split('.');
        var step = that;
        var k = null;
        while(k = NSList.shift()){
            if(NSList.length){
                if(step[k] === undefined){
                    step[k] = {};
                }
                step = step[k];
            }else{
                if(step[k] === undefined){
                    step[k] = maker(that);
                }
            }
        }
    };
    return that;
})();

MY.register('dom.E', function ($) {
    return function(id) {
        // 上面的代码
    };
});
MY.register('dom.C', function ($) {
    return function(tagName) {
        // 上面的代码
    };
});

以后就可以通过MY.register('foo.bar', function ($){}) 往 MY 命名空间中添加方法或对象了，这里的 $ 符号指的是 MY 对象。

函数路径简写

每次访问 E() 函数，都要加个 dom ，需要记住长的命名空间，增加了记忆负担，还是有些麻烦，可以通过注册简短函数来解决问题，

var MY = (function(){
    var that = {};
    that.register = function (ns, maker) {
        // 上面的代码
    };
    that.regShort = function (sname, sfun) {
        if (that[sname] !== undefined) {
            throw '[' + sname + '] : short : has been register';
        }
        that[sname] = sfun;
    };
    return that;
})();

MY.register('dom.E', function ($) {
    return function(id) {
        // 上面的代码
    };
});
MY.register('dom.C', function ($) {
    return function(id) {
        // 上面的代码
    };
});


var hash = {
    'C' : MY.dom.C,
    'E' : MY.dom.E,
}
for(var k in hash){
    MY.regShort(k,hash[k]);
}

这样，即可以通过 MY.E('foo')，又可以MY.dom.E('foo') 来获取页面元素了。

 

模块化

模块就是实现特定功能的一组方法。 只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。模块化

小结

本文介绍了两个常用的工具函数，以及往 MY 命名空间中注册函数的方法，后续会往 MY 空间添加更多的函数，引出模块化的概念