第一百二十九节，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便可。此项目不是为了作一个博客或者微博，而是将里面的各类效果拿出来模仿编写。