Javascript高質量代碼(一)

javascript進階(一)

主博客: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層,提供接口供碼農們調用。


base層:

  • event:
    平時用事件會是什麼狀況?若是你不是用相似jquery的插件,是本身寫的話,可能要兼容不少瀏覽器。

對於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);
}
  • on、attachEvent、addEventListener事件監聽函數

這幾個函數常常見到,可是有時候不知道怎麼用,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);
}
  • get或者$()獲取函數節點元素

相似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.對了,明天去燒烤,人生啊,滿滿的歡樂。寫寫代碼,玩玩,吃吃。

(作事情老是跟着樂趣走,接觸新的東西,可是遇到一點難處就放棄,真的很很差。)



協會第五屆網絡攻防大賽,花花綠綠的,真的好有愛,陽光。

各任的會長,事實告訴咱們,會長都是大胖子。


蛋疼,我的網站何時寫。。。感受期末要來了。感受,東哥的android程序完成不了了。感受華哥的日誌系統,要再想一想了。


夏日小草
2013/11/29 19:01:52
相關文章
相關標籤/搜索