封裝簡易的dom操作。
一、解決命名空間和變量污染
1.作用域
2.立即執行函數
3.閉包
jQuery是一個類數組對象,裏面有各種方法,當然jQuery的dom選擇器是sizzle很牛叉,據瞭解還有更快的dom選擇器,實力上去再探索。jQuery使用無new構造函數,可以直接使用$().xx
(function(window){
var wdjs=function(selector){
return new wdjs.fn.init(selector);//返回wdjs原型鏈init屬性的實例
}
wdjs.fn=wdjs.prototype={
init:function(selector){
return this;//返回指針作用域
}
}
wdjs.fn.init.prototype=wdjs.fn;//將wdjs.prototype原型綁定到init.prototype原型,實現init實例就是wdjs實例
window.wdjs=window.$=wdjs;//註冊全局變量$
})(window)
具體的個人說不清楚,直接搞搞簡單的dom選擇器,完成個人目標。
二、dom選擇器
1.id
2.類(class)
3.屬性名(input:[''])
4.標籤(a div p)
由於dom選擇器有些龐大,個人還未學會正則表達式,所以並未使用querySeletor和querySeletorAll來獲取節點,簡單搞搞。
(function(window){
var wdjs=function(selector){
return new wdjs.fn.init(selector);//返回wdjs原型鏈init屬性的實例
}
wdjs.fn=wdjs.prototype={
init:function(selector){
var doc=document;
//消除字符串頭尾空白字符
String.prototype.trim=function(){
//用replace消除空白字符
return this.replace(/^\s\s*/, '').replace(/\s\s*$/, '');//直接使用trim()不兼容IE
}
//IE9-不支持數組的indexOf
if(!Array.prototype.indexOf){
//添加數組原型indexOf屬性
Array.prototype.indexOf=function(value){
for(var i=0,len=this.length;i<len;i++){
if(this[i]==value){
return i;
}
}
return -1;
}
}
if(selector.trim().split(' ').length>1){
//字符串拼接,用空格分割成數組
//複合選擇器
}else{
//單項選擇器,調用javascript內部原生dom選擇
var type=selector.trim().charAt(0);//返回第一個字符
switch(type){
case '.':
//類選擇器,IE不兼容getElementsByClassName方法
var classes=[];
if(doc.getElementsByClassName){
return doc.getElementsByClassName(selector.slice(1,selector.length));
}else{
var node=doc.getElementsByTagName('*');
for(var i=0;i<node.length;i++){
var cla=node[i].className.split(/\s+/);//類名
if(cla.indexOf(selector.slice(1))!=-1){//如果存在節點
classes.push(node[i]);
}
}
return classes;
}
break;
case '#':
//id選擇器
return doc.getElementById(selector.slice(1,selector.length));
break;
case '[':
//屬性選擇器
break;
default ://tag標籤選擇器
return doc.getElementsByTagName(selector);
}
}
return this;//返回指針作用域
}
}
wdjs.fn.init.prototype=wdjs.fn;//將wdjs.prototype原型綁定到init.prototype原型,實現init實例就是wdjs實例
window.wdjs=window.$=wdjs;//註冊全局變量$
})(window)
實現id,類,標籤,屬性名沒有,也沒有實現多級查找,如$('#id .class')等等。裏面代碼優化什麼的都沒有,後期學習中再考慮。
單項獲取節點,類選擇返回數組,標籤返回類數組。
接下來學習內容,正則表達式,ajax封裝等等js基礎。