angular 之 jqLite
对于 jqLite主要实现以下方法
addClass
实现原理：主要是判断 setAttribute是否存在，借助 setAttribute 和getAttribute 方法实现
具体实现：主要是借助 getAttribute 查找该元素原始的css 内容，然后查找这个css 内容中是否拥有新的class，如果没有就添加进去，然后把更新之后的css 内容 使用setAttribute 更新css 内容。
function jqLiteAddClass(element,cssClasses){
if(element && element.setAttribute){
// 获取原来的css
var exisingClass = ('' + (element.getAttribute('class') || '') + '').replace(/[\n\t]/g.' ');
forEach(classClasses.split(' '),function(cssClass){
cssClass = trim(cssClass);
// 如果存在的class 中不存在你需要添加的对象
if(existingClasses.indexOf('' + cssClass + '') === -1){
// 添加进去
existingClasses += cssClass + ' ';
}
})
// 更新元素的css 结果
element.setAttribute('class',trim(exisingClass ));
}
}
after
实现原理：主要是借助 parentNode 和 insertBefore 实现
具体实现：主要是查找到 element.nextSibling 将 newElement 插入到 nextSibling之前。
after：function(element,newElement){
var index = element,parent = element.parentNode;
newElement = new JQLite(newElement);
for(var i = 0,ii = newElement.length;i<ii;i++){
var node = newElement[i];
// 主要借助于 insertBefore 方法
parent.insertBefore(node,index.NextSibling);
index = node;
}
}
append
实现原理：主要是先利用nodeType 节点的类型，只有符合条件的节点类型才能被append ，然后利用appendChild方法实现append 功能
具体实现：获取节点类型（nodeType），如果不满足条件的节点类型则不做处理，否则就将新要插入的节点插入到节点中去（appendChild）
append:function(element,node){
var nodeType = element.nodeType;
if(nodeType !== 1 && nodeType !== 11){
return;
}
node = new JQLite(node);
for(var i = 0,ii = node.length;i<ii;i++){
var child = node[i];
// 主要通过appendChild 方法实现
element.appendChild(child);
}
}
attr
实现原理：setAttribute，getAttribute，removeAttribute
主要实现：先获取节点类型，如果节点类型不满足条件，则直接返回，如果满足则再判断名称是否是boolean 类型（multiple，selected，checked，disabled，readyOnly，required，open），则赋值true 或者 false。再者去判断是否存在value 如果存在就调用setAttribute 方法设置属性，如果不存在，则调用getAttribute 方法获取属性。
var BOOLEAN_ATTR = {};
forEach('multiple,selected,checked,disabled,readOnly,required,open'.split(','),function(value){
BOOLEAN_ATTR[lowercase(value)] = value;
})
attr:function(element,key,value){
var nodeType = element.nodeType;
if(nodeType === 3 || element === 2 || element === 8){
return;
}
var lowercasedName = lowercase(name);
// 是否满足boolean 类型 的参数
if(BOOLEAN_ATTR[lowercasedName]){
if(isDefined(value)){
if(!!value){
element[name] = true;
element.setAttribute(name,lowercasedName);
}
else{
element[name] = false;
element.removeAttribute(name);
}
}
else{
// element.attribute.getNamedItem(name) 是 xml dom 的方法
return (element[name] || (element.attribute.getNamedItem(name) || noop).specified) ? lowercasedName: undefined;
}
}
// value 是否存在
else if(isDedined(value)){
element.setAttribute(name,value);
}
// 查看是否存在getAttribute 方法
else if(element.getAttribute){
// the extra argument '2' is to get the right thing for a.href in ie,see jquery code
// some element (eg:Document) don't have get attribute, so return undefined;
var ret = element.getAttribute(name,2);
return ret === null ? undefined : ret;
}
}
bind
比较复杂 待定
children
实现原理： childNodes
主要实现：主要遍历element 对象的 childNodes，然后判断 子节点类型是否是 NODE_TYPE_ELEMENT类型，如果是就返回
children:function(element){
var children = [];
forEach(element.childNodes,function(ele){
// 符合条件的 节点类型
if(ele.nodeType === 2){
children.push(ele);
}
})
return children;
}
clone
实现原理：cloneNode
主要实现：主要利用cloneNode 方法实现的
function jqLiteClone(element){
return element.cloneNode(true);
}
contents
实现原理：contentDocument childNodes
主要实现：首先获取元素的contentDocument 对象，如果获取不到就获取他的childNodes 再获取不到 返回 [ ]
content:function(element){
return element.contentDocument || element.childNodes || [];
}
css
data
detach
empty
eq
find
hasClass
html
next
on
off
one
parent
prepend
prop
ready
remove
removeAttr
removeClass
removeData
replaceWith
text
toggleClass
triggerHandler
unBind
val
wrap