第一百二十九節，JavaScript，理解JavaScript庫

JavaScript，理解JavaScript庫

 

學習要點：

1.項目介紹

2.理解JavaScript庫

3.建立基礎庫

 

從本章，咱們來用以前的基礎知識來寫一個項目，用以鞏固以前所學。那麼，每一個項目爲了提升開發效率，咱們須要建立一個庫來存放大量的重複調用的代碼。而在這裏，咱們須要理解一些知識。

 

一．項目介紹

在如今流行的網站中，大量使用前端的Web應用，估計就是博客系統了。博客系統目前主要分爲兩種，一種是博客，一種是微博(一句話博客)。

無論在博客和微博，都採用的大量的JavaScript特效，有圖片廣告、下拉菜單、表單驗證、彈窗、輪播器等等一系列。那麼咱們就建立一個項目，把上面各類應用較多的效果編寫出來。

 

二．理解JavaScript庫

什麼是JavaScript庫？說白了，就是把各類經常使用的代碼片斷，組織起來放在一個js文件裏，組成一個包，這個包就是JavaScript庫。現現在有太多優秀的開源JavaScript庫，好比：jQuery、Prototype、Dojo、Extjs等等。這些JavaScript庫已經把最經常使用的代碼進行了有效的封裝，以方便咱們開發，從而提升效率。

固然，這裏咱們就不去探討這些開源JavaScript庫，那樣就太容易了一點。咱們這裏須要探討的是本身建立一個JavaScript庫，雖然本身建立的可能沒有那些開源JavaScript庫功能強大，但在提高本身JavaScript開發能力，有很大幫助。

 

三．建立基礎庫

咱們能夠建立一個庫，這是一個基礎庫，名字就叫作base.js。咱們準備在裏面編寫最經常使用的代碼，而後不斷的擴展封裝。

在最經常使用的代碼中，最最經常使用的，也許就是獲取節點方法。這裏咱們能夠編寫以下代碼：

封裝庫代碼：

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

/**
 *定義封裝庫對象
 **/
var feng_zhuang_ku = {
    /**------------------------------------------------獲取元素標籤開始--------------------------------------------**/
    /**
     * huo_qu_id()方法,經過id獲取元素標籤，參數是id值，返回元素對象
     **/
    huo_qu_id: function (id) {
        return document.getElementById(id);
    },
    /**
     * huo_qu_name_zhi()方法，經過元素name值獲取指定元素，參數是元素name值，返回元素相同name值對象集合，通常獲取表單
     **/
    huo_qu_name_zhi: function (name) {
        return document.getElementsByName(name);
    },
    /**
     * huo_qu_name()方法，經過標籤名稱獲取相同標籤名的元素，參數是標籤名稱，返回對象集合
     **/
    huo_qu_name: function (tag) {
        return document.getElementsByTagName(tag);
    }
    /**------------------------------------------------獲取元素標籤結束--------------------------------------------**/
};

前臺調用代碼

//前臺調用代碼
window.onload = function (){
    alert(feng_zhuang_ku.huo_qu_id('li').innerHTML);
    alert(feng_zhuang_ku.huo_qu_name_zhi('j')[0].innerHTML);
    alert(feng_zhuang_ku.huo_qu_name('div')[2].innerHTML);
};

PS：本項目爲了更好的兼容性，咱們採用UTF-8，在Notepad++上設置默認爲UTF-8便可。此項目不是爲了作一個博客或者微博，而是將裏面的各類效果拿出來模仿編寫。