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

2024-04-27 14:23:32

字体：大中小

来源：转载

供稿：网友

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') 来获取页面元素了。