打造自己的js库1.1
前言:
当前已经有许多非常成熟的js框架,如jquery,prototype,yui等等,他们各有特色,但也有许多相同的特性,他们都是由许多基础的js函数组建而成。而js库不同于框架,我们在这里只是把常用的js操作制作成函数然后整合为自己的一个js库,当然,当这些操作积累到一定程度,也通过使用一些设计模式,分类而演变成属于自己的一个mini js框架。好了,我们从基础的部分开始吧。
Js最常用的操作就是对dom的操作,所以我们的封装也从对dom的操作开始。
1.得到dom元素
得到dom元素的方法有很多种,当然也多强大的框架提供了dom元素获取的方法,比如jquery 的sizzle就是一个纯js的CSS 选择器引擎,在这里我们做不到这么复杂,只是应对常用的选择操作。
var Choose = function(selector, context){
context = context || document;
var result = [],
idElem = new RegExp("^#[a-zA-Z0-9\\-]*"),
classElem = new RegExp("^\\.{1}[a-zA-Z0-9\\-]*"),
tagElem = new RegExp("^[a-zA-Z0-9\\-]*$");
_selector = selector.substring(1,selector.length);
var hasClass = function(element,className){
var reg = new RegExp("\\s|<span style="font-family: Arial, Helvetica, sans-serif;">^</span><span style="font-family: Arial, Helvetica, sans-serif;">" + className +"\\s|$");</span>
return reg.test(element.className);
},
getByClass = function(className){
var result = [],
nodes = context.getElementsByTagName("*");
for(var i = 0;i < nodes.length;i++){
if( hasClass(nodes[i],className) ){
result[result.length] = nodes[i];
}
}
return result;
};
//如果不是dom元素,nodeType == 9 为document ==3 为普通的dom
if (!context.nodeType || (context.nodeType != 9 && context.nodeType != 1)){
return result;
}
//是id选择器
if (selector.match(idElem) && selector.match(idElem)[0].length == selector.length){
result[result.length] = context.getElementById(_selector);
return result;
} else if (selector.match(classElem) && selector.match(classElem)[0].length == selector.length){
//如果是类选择器
if(document.getElementsByClassName)
return context.getElementsByClassName(_selector);
return getByClass(_selector);
} else if (selector.match(tagElem) && selector.match(tagElem)[0].length == selector.length){
//如果是名称选择器
return context.getElementsByTagName(selector);
} else {
//其他选择器 兼容ie8+
if(document.querySelectorAll)
return context.querySelectorAll(selector);
return [];
}
};
上述代码对应了4种情况的选择,分别是 id class tagName 和通过css选择,不过最后一种方法只支持IE8+浏览器。
2.子元素遍历,该函数通过递归遍历子元素,用户可以指定一个filter来过滤不需要的dom
var nodeIntor = function(){
var
//保存this指针
_this,
//保存所有符合条件的node
nodes = [],
//加入符合条件的函数
callback = function(node) {
//过滤text
if(_this.filter(node) && node.nodeType == 1) {
nodes[nodes.length] = node;
}
},
//遍历node
processElements = function(node, isOuter) {
var children = node.hasChildNodes()?node.childNodes:[];
for(var i = 0;i < children.length;i++) {
//递归遍历
if( children[i].hasChildNodes() ) {
processElements(children[i]);
}
callback.call( this, children[i] );
}
if(isOuter)
callback.call( this, node );
},
//初始化函数
init = function(selector, filter){
this.root = Choose(selector)[0]; // || document
this.filter = filter;
_this = this;
processElements(this.root,true);
};
return {
traverse : init,
nodes : nodes
}
}();
3.属性设置/获取
var attr = function(selector, key, value){
var node = Choose(selector)[0];
if(value){
node.setAttribute(key, value);
}
return node.getAttribute(key);
};
4.设置/获取元素的css属性
var css = function(){
var pfx = function(style){
//得到符合的前缀
var s = "Webkit,Moz,O,ms,Khtml",
pre = s.split(","),
tNode = document.createElement("div");
for(var i = 0;i < pre.length;i ++) {
//重新组装style
var reStyle = pre[i] + style.charAt(0).toUpperCase() + style.substr(1);
if( tNode.style[reStyle] != undefined){
return reStyle;
}
}
return style;
},
setCss = function(node, styles){
if (typeof styles === 'object'){
for (var i in styles){
node.style[pfx(i)] = styles[i];
}
}
},
getCss = function(node, style){
//兼容ie ff
var styles = window.getComputedStyle ? window.getComputedStyle(node,null) : obj.currentStyle;
return styles [pfx(style)];
}
return {
setCss : setCss,
getCss : getCss
}
}();
以上内容均为本人原创,转载请注明出处,欢迎大家批评指正。