第一百三十節，JavaScript，封裝庫--連綴

JavaScript，封裝庫--連綴

 

 

學習要點：

1.連綴介紹

2.改寫庫對象

 

本章咱們重點來介紹，在調用庫的時候，咱們須要可以在前臺調用的時候能夠同時設置多個操做，好比設置CSS，設置innerHTML，設置click事件等等。那麼本節課來討論這個問題。

 

一．連綴介紹

所謂連綴，最簡單的理解就是一句話同時設置一個或多個節點兩個或兩個以上的操做。好比：

$().getId('box').css('color', 'red').html('標題').click(function () {alert('a')});

連綴的好處，就是快速方便的設置節點的操做。

 

二．改寫庫對象

若是是實現操做連綴，那麼咱們就須要改寫上一節課的對象寫法：var Base = {}，這種寫法沒法在它的原型中添加方法，因此須要使用函數式對象寫法：

封裝庫代碼

/**
 *feng_zhuang_ku_1.0版本，js封裝庫，2016/12/29日：林貴秀
 **/

/** 每次調用$建立庫對象,使其每次調用都是獨立的對象
 **/
var $ = function () {
    return new feng_zhuang_ku();
};

/**
 *定義封裝庫構造函數，建立庫對象
 **/
function feng_zhuang_ku () {
    /**對象說明：
     * this表示對象自己
     * 使用庫，首先要  var $ = new feng_zhuang_ku();   首先要new建立對象
     * 再在建立的對象下調用方法或者屬性
     * 
     * 大綱：
     * 獲取元素標籤開始，行號18
     * 連綴-元素節點操做開始，行號64
     * 
     * 
     **/


    /**------------------------------------------------獲取元素標籤開始--------------------------------------------**/
    /**獲取元素標籤說明：
     * jie_dian屬性，保存獲取到的元素節點，返回數組,
     * huo_qu_id()方法，經過id獲取元素標籤，適用於獲取單個節點，
     * huo_qu_name_zhi()方法，經過元素name值獲取指定元素，適用於獲取表單元素,
     * huo_qu_name()方法，經過標籤名稱獲取相同標籤名的元素，適用於獲取多個相同元素節點,
     **/


    /** jie_dian屬性，建立數組，初始化，保存獲取到的元素節點，返回數組
     **/
    this.jie_dian = [];

    /** huo_qu_id()方法,經過id獲取元素標籤，參數是id值，將獲取到的元素對象添加到，jie_dian屬性,適用於獲取單個節點
     **/
    this.huo_qu_id = function (id) {
        this.jie_dian.push(document.getElementById(id));
        return this;
    };

    /** huo_qu_name_zhi()方法，經過元素name值獲取指定元素，參數是元素name值，返回元素相同name值對象集合，
     * 循環元素集合，將每次循環到的元素對象添加到 jie_dian屬性，適用於獲取表單元素
     **/
    this.huo_qu_name_zhi = function (name) {
        var name_zhi = document.getElementsByName(name);
        for (var i = 0; i < name_zhi.length; i ++){
           this.jie_dian.push(name_zhi[i]);
        }
        return this;
    };

    /** huo_qu_name()方法，經過標籤名稱獲取相同標籤名的元素，參數是標籤名稱，返回對象集合
     * 循環元素集合，將每次循環到的元素對象添加到 jie_dian屬性，適用於獲取多個相同元素節點
     **/
    this.huo_qu_name = function (tag) {
        var name = document.getElementsByTagName(tag);
        for (var i = 0; i < name.length; i ++){
            this.jie_dian.push(name[i]);
        }
        return this;
    };

    /**------------------------------------------------獲取元素標籤結束--------------------------------------------**/


    /**------------------------------------------------連綴-元素節點操做開始---------------------------------------**/
    /**連綴-元素節點操做說明：
     * css()方法，給獲取到的元素設置行內css樣式
     * wen_ben()方法，給獲取到的元素設置文本，參數是要設置的文本字符串
     * click()方法，給獲取到的元素添加一個點擊事件，參數是一個匿名函數（包含函數功能），
     **/


    /** css()方法，給獲取到的元素設置行內css樣式,兩個參數，參數1樣式名稱，參數2樣式值
     * 循環jie_dian屬性裏的節點，將每次循環的節點添加css樣式
     **/
    this.css = function (attr,value) {
        for (var i = 0; i < this.jie_dian.length; i ++){
            this.jie_dian[i].style[attr] = value;
        }
        return this;
    };

    /** wen_ben()方法，給獲取到的元素設置文本，參數是要設置的文本字符串，
     * 循環jie_dian屬性裏的節點，將每次循環的節點添加元素文本
     **/
    this.wen_ben = function (str) {
        for (var i = 0; i < this.jie_dian.length; i ++){
            this.jie_dian[i].innerHTML = str;
        }
        return this;
    };

    /** click()方法，給獲取到的元素添加一個點擊事件，參數是一個匿名函數（包含函數功能），
     * 循環jie_dian屬性裏的節點，將每次循環的節點添加元素點擊事件
     **/
    this.click = function (fu) {
        for (var i = 0; i < this.jie_dian.length; i ++){
            this.jie_dian[i].onclick = fu;
        }
        return this;
    };
    /**------------------------------------------------連綴-元素節點操做結束---------------------------------------**/
}

前臺調用代碼

//前臺調用代碼
window.onload = function (){
    $().huo_qu_name('div').css('background-color','#ffff3e');
    $().huo_qu_name('p').css('color','#ff2128').css('background-color','#b2bbff').wen_ben('改變').click(function () {
        alert('a');
    });
};