标签：
创建库，分别创建了三个文件，demo.html demo.js base.js
demo.html：连接引用外部两个JS文件
demo.js：是用来写一些调用封装库的操作的一些JS代码
base.js：这个就是封装库的JS文件了。里面会写上一些封装好的效果，用于提供给demo.js进行调用
JS中常用的通过几个方式获取页面上的元素对象数据
通过元素设置的ID获取
通过元素设置的name获取
通过元素的标签获取
JS中捕获了元素对象后我们通常会做的常规事情
捕获后，更改元素对象的CSS样式
捕获后，更改元素对象的内容或者值
捕获后，增加常用的事件， 如：点击，提交，跳转。
在demo.html中建立代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="base.js"></script> <script type="text/javascript" src="demo.js"></script> </head> <body> <div id="box">id</div> <input type="radio" name="sex" value="男" checked="checked"> <p>段落</p> </body> </html>
如果在demo.js中获取到为了获取上面三个元素对象的值或者内容，那么就需要写上冗长的JS代码
window.onload = function() { // 获取demo上的box内容 alert(document.getElementById(‘box‘).innerHTML); // 获取的demo上的input的value值 alert(document.getElementsByName(‘sex‘)[0].value); // 获取p元素的内容 alert(document.getElementsByTagName(‘p‘)[0].innerHTML); }
这样的操作可以让我们获取到页面的元素，就利用原生写法 获取页面上的三个标签的元素值或者内容，但写这么长的代码会使人很烦躁。利用弹出可以看到
最后弹出都是正确的页面上三种标签的值或者内容
为了更方便以后使用，需要将一些可以重用的东西封装起来。
所以在base.js开始利用函数的方式封装起页面
function getId(id){ return document.getElementById(id); } function getName(name){ return document.getElementsByName(name); } function getTagName(tag){ return document.getElementsByTagName(tag); }
然后就可以在demo.js中这样写了,这样就简化了很多，封装库文件base.js中只是写进了一些可以为可重用的代码，就可以方便我们调用了
window.onload = function() { alert(getId(‘box‘).innerHTML); alert(getName(‘sex‘)[0].value); alert(getTagName(‘p‘)[0].innerHTML); }
上面是函数的简化方式，已经可以让使用者少写比较多的代码了。
下面是另一种简写封装方法，对象方式
把刚才封装库文件base.js中写的函数方式先屏蔽掉。继而输入下面的对象方式的代码
// 对象方式 // json格式 var Base = { // 捕获id元素的内容 getId:function(id){ return document.getElementById(id); }, // 捕获标签里的name元素的value值 getName:function(name){ return document.getElementsByName(name); }, // 捕获标签元素内容 getTagName:function(tag){ return document.getElementsByTagName(tag); } }
写完后，再在demo.js中调用一下代码就可以实现了对页面元素进行捕获，下面这样的方式依然可以弹出捕获到的页面代码内容。
// 对象调用方式 window.onload = function() { alert(Base.getId(‘box‘).innerHTML); alert(Base.getName(‘sex‘)[0].value); alert(Base.getTagName(‘p‘)[0].innerHTML); }
基本上，老师在跟我们学生讲解的第一节封装库的课上就介绍了 如此的两中封装方式。
特此回忆记录一下，日后方便查看。
标签：
原文地址：http://www.cnblogs.com/kwongyan/p/4741069.html
