理解Javascript库

从本章，我们来用之前的基础知识来写一个项目，用以巩固之前所学。那么，每个项目为了提高开发效率，我们需要创建一个库来存放大量的重复调用的代码。而在这里，我们需要理解一些知识。

 

一．项目介绍

在现在流行的网站中，大量使用前端的Web应用，估计就是博客系统了。博客系统目前主要分为两种，一种是博客，一种是微博(一句话博客)。

 

（博客主页）                           （微博主页）

 

不管在博客和微博，都采用的大量的JavaScript特效，有图片广告、下拉菜单、表单验证、弹窗、轮播器等等一系列。那么我们就创建一个项目，把上面各种应用较多的效果编写出来。

 

二．理解JavaScript库

什么是JavaScript库？说白了，就是把各种常用的代码片段，组织起来放在一个js文件里，组成一个包，这个包就是JavaScript库。现如今有太多优秀的开源JavaScript库，比如：jQuery、Prototype、Dojo、Extjs等等。这些JavaScript库已经把最常用的代码进行了有效的封装，以方便我们开发，从而提高效率。

当然，这里我们就不去探讨这些开源JavaScript库，那样就太容易了一点。我们这里需要探讨的是自己创建一个JavaScript库，虽然自己创建的可能没有那些开源JavaScript库功能强大，但在提升自己JavaScript开发能力，有很大帮助。

 

三．创建基础库

我们可以创建一个库，这是一个基础库，名字就叫做base.js。我们准备在里面编写最常用的代码，然后不断的扩展封装。

在最常用的代码中，最最常用的，也许就是获取节点方法。这里我们可以编写如下代码：

//创建一个base.js

var Base = {                                                    //整个库可以是一个对象

       getId : function (id) {                                //方法尽可能简短而富有含义

              return document.getElementById(id);

       },

       getName : function (name) {

              return document.getElementsByName(name);

       },

       getTagName : function (tag) {

              return document.getElementsByTagName(tag);

       }

};

 

//前台调用代码

window.onload = function () {

       alert(Base.getId('box').innerHTML);    

       alert(Base.getName('sex')[0].value);            

       alert(Base.getTagName('div')[2].innerHTML);           

};