主博客:http://xiaocaoblog.diandian.com/javascript
最近在看《編寫高質量代碼-web前端修煉之道》,寫了3篇博客,寫寫感想。php
第一篇寫了關於javascript封裝以及模塊化插件設計。前端
第二篇寫了關於javascript面向對象思想以及原型和構造器。java
第三篇主要寫關於javascript的編寫風格以及細節設計問題。node
今天的代碼都保存了。
http://xiaocao.u.qiniudn.com/work/base-2013-11-29.zipjquery
之前寫代碼都是,羅列函數,全局變量。android
最近想弄些高質量的代碼,看些javascript進階,感受收穫不少,寫些想法和筆記。web
日誌主要包涵以下:面試
javascript是一種面向對象性語言,因此具備面向對象的特色,每一個節點都是一個對象。chrome
相似MVC思想,能夠把javascript分紅:base層,common層,page層。
base層:主要兼容一些瀏覽器特性,比較底層,相似mvc中的m層,封裝不一樣瀏覽器特性公common層調用。
common層:主要集成化插件,實現功能供page調用,mvc中典型的c層,控制頁面的主體。
page:其實咱們平時用的插件都在用page層多,插件都是封裝了base和common層,提供接口供碼農們調用。
對於IE來講,event做爲一個window全局屬性調用,可是對於現代瀏覽器(firfox,chrome,opera),event做爲事件對象。其次,event對象的屬性也是不一樣的,IE用event對象的srcElement,firefox用target訪問。
下面咱們來封裝event對象。
function getEventTarget(e){ e=window.event || e; return e.srcElement || e.target; //返回e對象 } /*===測試下===*/ document.getElementById('test').onclick=function(e){ var test=getEventTarget(e); console.log("對象的名稱是:"+test.tagName); }
這幾個函數常常見到,可是有時候不知道怎麼用,attachEvent是IE支持的方法,addEventListener是firefox支持的方法。
on+事件類型(){...}比較難用,並且容易出現重疊。
attachEvent(eventType, callback){...}
addEventListener(eventType, callback, useCapture){...}
其中addEventListener傳入三個參數,第三個是一個bool,選擇是否事件冒泡。
下面來實現函數封裝成on函數:
function on(elem, eventType, handler){ /*====轉化elem格式====*/ elem=typeof elem == "string" ? document.getElementById(elem):elem; /*====這樣子,elem就支持id輸入,也支持選擇器輸入了====*/ if(document.all){//檢測是否爲IE(媽蛋的,IE個垃圾) elem.attachEvent("on"+eventType, handler); }else{ elem.addEventListener(eventType, handler, false); } } /*====下面來測試下====*/ var node =document.getElementById('test'); on(node, "click", function(){ console.log("測試陳功,點擊了id爲:"+node+"的節點"); });
trim去除空格函數
表單驗證獲取value要去除開始的空格,和結尾的空格。可是js裏面沒有原生函數,那就本身寫個。
function trim(value){ return value.replace(/^\s+|\s+$/g,""); }
阻止事件冒泡
假如你有2個點擊事件,DOM文檔爲
你的事件函數爲:
document.getElementById('test1').onclick=function(){ console.log("你單擊了test1"); } document.getElementById('test2').onclick=function(){ console.log("你單擊了test2"); }
當你點擊了test2,在conlose裏面會顯示「你單擊了test1」和「你單擊了test2」。
事件冒泡,由於test2在test1裏面,因此你單擊test2了,同時也單擊了test1.
下面解決這個問題。
/*====上面的點擊會冒泡,下面的不會了*/ function stopPropagation(e){ e=window.event || e; if(document.all){ e.cancelBubble=true; }else{ e.stopPropagation(); } } /*====測試=====*/ document.getElementById('test2').onclick=function(){ console.log("你單擊了test2,此時事件不會冒泡"); stopPropagation(e); }
相似jquery簡潔模式獲元素取節。函數很簡單。
function $(elem){ elem=typeof elem=="string" ? document.getElementById(elem) : elem; return elem; }
若是是class呢,也不難。
function getElementByclassName(elem, root, tag){ /*====包涵三個參數====*/ /*====只有elem是必選項,其餘可不選。elem表明className,root是父節點,默認爲根節點,tag是標籤的名字*/ if(root){ root = typeof root="string" ? document.getElementById(root) : root; }else{ root = document.body; } tag = tag || *; var els=root.getElementsByTagName(tag), arr=[]; for(var j=0, n=els.length; i<n, i++){ for(var j=0, k=els[i].className.split(" "), l<k.length; j<l; j++){ if(k[j]==elem){ arr.push(els[i]); break; } } } return arr; }
- extend繼承對象
javascript是面嚮對象語言,可是javascript沒有類,能夠自定義函數繼承。
javascript屬於原型語言,經過new實例化對象,屬性和行爲來自兩部分,一部分來自構造函數,一部分來自原原型。當咱們生成一個類時,同時生成一個隊形原型。
例如:構造了對象A;
var test = new A( ) ;
那麼,
test.prototype
就指向原型。原型經過constructor指向類。
下面試試這個。
function extend(subClass, superClass){ var C=function(){}; C.prototype=superClass.prototype; subClass.prototype=new C(); subClass.prototype.constructor=subClass; subClass.superClass=superClass.prototype; if(superClass.prototype.constructor == Object.prototype.constructor){ superClass.prototype.constructor=superClass; } } /*=====搞定了=====*/
好了今天就寫到這裏了。
下一篇寫個common的一些相關。
感受最近啥都沒作,可是又忙半死。仍是要多記錄一些東西。
最近作的事情:
1.看了本MySQL,寫了寫東西,準備寫些日誌。
2.看這本《高質量的javascript》
3.寫了幾個小php,昨晚想弄個php抓取頁面信息的東西,發現讀取節點好麻煩,就沒弄了。
4.對了,明天去燒烤,人生啊,滿滿的歡樂。寫寫代碼,玩玩,吃吃。
(作事情老是跟着樂趣走,接觸新的東西,可是遇到一點難處就放棄,真的很很差。)