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

工具函数

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

1 function E(id) {

2     if (typeof id === 'string') {

3         return document.getElementById(id);

4     } else {

5         return id;

6     }    

7 }   

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

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

 1 function C(tagName) {

 2     var dom;

 3     tagName = tagName.toUpperCase();

 4     if (tagName == 'TEXT') {

 5         // 创建文本节点，可以通过 dom.nodeValue = 'foo'; 为节点赋值。

 6         dom = document.createTextNode('');

 7     } else if (tagName == 'BUFFER') {

 8         /* 创建文档碎片，插入过多节点时，可以先把单个节点 appendChild 文档碎片中，

 9            最后一次性插入页面， 避免多次渲染。

10         */

11         dom = document.createDocumentFragment();

12     } else {

13         // 创建元素节点

14         dom = document.createElement(tagName);

15     }

16     return dom;

17 }        

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

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没有命名空间的概念，可以通过对象来管理命名空间

1 var MY = {};// 定义自己的命名空间

2 MY.dom = {};// 给工具函数分类

3 MY.dom.E = function(){

4     // 上面的代码

5 }

6 MY.dom.C = function(){

7     // 上面的代码

8 }

这样可以通过 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 ，需要记住长的命名空间，增加了记忆负担，还是有些麻烦，可以通过注册简短函数来解决问题，

 1 var MY = (function(){

 2     var that = {};

 3     that.register = function (ns, maker) {

 4         // 上面的代码

 5     };

 6     that.regShort = function (sname, sfun) {

 7         if (that[sname] !== undefined) {

 8             throw '[' + sname + '] : short : has been register';

 9         }

10         that[sname] = sfun;

11     };

12     return that;

13 })();

14 

15 MY.register('dom.E', function ($) {

16     return function(id) {

17         // 上面的代码

18     };

19 });

20 MY.register('dom.C', function ($) {

21     return function(id) {

22         // 上面的代码

23     };

24 });

25 

26 

27 var hash = {

28     'C' : MY.dom.C,

29     'E' : MY.dom.E,

30 }

31 for(var k in hash){

32     MY.regShort(k,hash[k]);

33 }

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

 

模块化

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

小结

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