DIV CSS 佈局教程網

JavaScript 框架設計
編輯:JavaScript基礎知識     

JavaScript 高級框架設計

在現在,jQuery等框架已經非常完美,以致於常常忽略了JavaScript原生開發,但是這是非常重要的.

所以,我打算寫一個簡單的框架,兩個目的

  • 熟練框架的思想

  • 熟練DOM操作.

所以我打算,模仿jQuery,實現一個簡單的類似jQuery的庫 Hpawn.

關於JavaScript面向對象高級,會在以後介紹.

關於我所有的代碼,都會托管到 github上,https://github.com/apawn

我的開發環境是VSCode.


在Hpawn中,我會分為七個模塊.

  • 選擇器模塊

  • dom操作模塊

  • 事件模塊(click,on) 比較簡單

  • 屬性模塊

  • 樣式模塊

  • 動畫模塊,使用緩動函數而不是css3.

  • 面向對象封裝

?

選擇器模塊

在這裡,我們要實現一個類似於jQuery選擇器的東西,但是要簡單很多.

代碼 01.html

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 100px;
            border: 1px red solid;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
 </body>

現在我們要給上面的div添加綠色背景,按照傳統的辦法,可能會這麼寫

01.js

   onload = function(){
        var divs = document.getElementsByTagName("div");
        for(var i = 0,length = divs.length;i<length;i++){
                divs[i].style.backgroundColor="green";
        }
    }

但是,這樣的DOM操作真的很麻煩.

代碼冗余.丑,易錯, 還會影響性能,為什麼?

因為代碼要壓縮,document.getElementsByTagName()不會改變,但是如果改為get方法,只會存在一個g.

現在開始解決,首先解決代碼冗余

02.js

先封裝一個get方法

var get = function (tag) {
    return document.getElementsByTagName(tag);
}

代碼可能會變成現在這樣,

var divs = get("div");
for(var i = 0,length = divs.length;i<length; i++){
        divs[i].style.background = "green"; 
}

但是,似乎還是很冗余,繼續封裝.

03.js

?

var get = function (tag) {
    return document.getElementsByTagName(tag);
}
var each = function (arr,style,value) {
    for(var i = 0,length = arr.length;i<length; i++){
        arr[i].style[style] = value;
    }
}


var divs = get("div");
each(divs,"backgroundColor","green") ;

代碼變成了上面那樣,有木有覺得好了很多呢.
可能並不覺得會簡單,那是因為我只包含了兩個元素.
但是,上面的代碼只能做一件事情,就是設置樣式,可是我還設置動作,設置屬性.

好了,第一步優化完成,下面開始第二部.
04.js

var get = function (tag) {
    return document.getElementsByTagName(tag);
}
var each = function (arr,func) {
    for(var i = 0,length = arr.length;i<length; i++){
        func(arr[i],i);
    }
}


var divs = get("div");
each(divs,function (item,index) {
   item.style.background = "red"; 
});

我傳遞了一個函數進去,我將arr[i] 和i 傳給函數,這是最關鍵的一步.

但是,一個問題出現了.
比如,我先查找數組 arr =[1,2,3,4] 中元素為3的索引,上面的代碼可以嗎?
我找到了,怎麼跳出呢?

也許想到這樣的代碼

each(arr,function(v,i){
  if(v===5){
    breadk;
  }
})

但是,break 可以寫在函數中嗎??
// 為了查看單獨的js代碼,我使用了node作為運行環境,所以代碼庫裡有一些並沒有對應的html文件.
還是需要再修改each 函數
05.js

 var each = function (arr, func) {
    for (var i = 0, length = arr.length; i < length; i++) {
        if (func(arr[i], i) === false) {
            break;
        }
    }
};

var a = [1, 2, 3, 4];
var index = -1;
each(a, function (v, i) {
    if (v === 3) {
        index = i;
        return false;
    }
});
console.log(index);  // 輸出2

大功告成!

但是,我們每次調用函數的時候都要傳一個v和i 才能使用,如果不小心忘了呢?

似乎有更好的辦法

07.js,繼續回到第一個例子

var get = function (tag) {
    return document.getElementsByTagName(tag);
}
var each = function (arr, func) {
    for (var i = 0, length = arr.length; i < length; i++) {
        if (func.call(arr[i],arr[i], i) === false) {
            break;
        }
    }
};
var divs = get("div");
each(divs,function (item,index) {
   this.style.background = "red"; 
});

現在,我們看看jQuery的each是怎麼實現的.

each: function( obj, callback, args ) {
        var value,
            i = 0,
            length = obj.length,
            isArray = isArraylike( obj );

         else 
            if ( isArray ) {
                for ( ; i < length; i++ ) {
                    value = callback.call( obj[ i ], i, obj[ i ] );

                    if ( value === false ) {
                        break;
                    }
                }
            } else {
                for ( i in obj ) {
                    value = callback.call( obj[ i ], i, obj[ i ] );
                    if ( value === false ) {
                        break;
                    }
                }
        }

        return obj;
    },

是不是差不多呢....

現在,繼續優化get方法.

如果用get方法獲得多個元素,就會獲得多個數組,為了簡化開發,可以考慮合並到一個數組中,調用多次get方法.

給get添加一個result參數

var get = function (tag, result) {
    result = result || [];
    result.push.apply(result, document.getElementsByTagName(tag));
    return result;
}
var each = function (arr, func) {
    for (var i = 0, length = arr.length; i < length; i++) {
        if (func.call(arr[i], arr[i], i) === false) {
            break;
        }
    }
};
var divs = get("div");
each(divs, function (item, index) {
    this.style.background = "red";
});

但是,這裡為什麼要用apply呢?

因為document.getElementsByTagName() 返回一個偽數組,但是push方法只能接受真數組,在這裡調用apply,因為apply接受的其他參數必須是一個數組,這裡把document.getElementsByTagName() 的返回結果進行展開,然後一個一個push進去.

當然也可以這麼寫,但是性能肯定不及原生方法性能高.

each( document.getElementsByTagName(tag),function(){
        result.push(this);
})

再次體現了封裝的意義.

下面將會開始進入get選擇器.

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved