您的位置：首页 > Web前端 > JavaScript

构建自己的js库

2016-06-12 14:57 246 查看

一、背景

web前端开发人员经常会用到一些现成的js库（框架）。框架的使用增加了代码的模块化和可复用性，最主要的是屏蔽了浏览器之间差异性的实现，使得代码更加简洁，框架使用者只需要将注意力放在业务的实现上而不必为底层繁琐的实现感到头疼。

目前主流的js框架有很多，各有侧重，我们通常只会用到其中一小部分子功能。如果为了局部功能而引入一个庞大的框架，显然有点大材小用而且会增加浏览器的加载负担，浪费网络带宽，影响用户体验。因此，很多时候定义我们自己的js库非常的有必要，我们只需要根据项目需求构建出个性化js库，这样的js库将会变得相当精简。

实习导师要求在实习之前学习一下如何构建一个自己的类库，任务使然。

　　结论：基于以上三个原因，笔者大概学习了如何构建一个自己的js库，以及在构建的过程中应该注意的一些事项。

二、构建js库是需要注意的问题

　　1、会不会和其他的库产生冲突

　　　　比如jQuery，Ext，Prototype等符号

　　2、不要版本检测。

　　　　不依赖于浏览器的样式，和浏览器的版本，而是依赖于脚本语言js的强大。

　　3、使用命名空间。

这里所说的命名空间不是真正的命名空间，只是能在脚本内营造的一个属于自己的小空间的技巧而已。

----命名空间的唯一性：

如果多个方法的名字相同，则默认使用最后一个方法。不过通常要避免这种做法。

一般命名为IC （ItCast）

----命名空间不共享：

库中的任何函数只在库中使用，保证自己使用$()函数，使用js小技巧。

(function(){

//运行的代码。

})(); //后面的括号表示运行，定义匿名函数之后直接运行。前面的括号表示分隔符，定义函数。

三、构建一个简单的js库实例

这里给出了一个简单的js例子。

<script>
(function(){

//自己的命名空间，外部无法访问。
//定义了自己的函数$()
Function $()
{
//代码。
//测试是否成功。
alert("你好！");
}
//构造自己的命名空间。
Window['myNameSpace']={}
//将自己的命名空间注册到window，并且注册自己的$函数。
Window['myNameSpace']['$']=$;
})();
</script>

然后再html文件中对我们之前构建简单的js库进行测试。

<html>
<head>
<title>js库测试</title>
<script type="text/javascript" src="myNameSpace.js"></script>
</head>
/*调用自己建立的 $()方法。window可以省略*/
<body onload="window.myNameSpace.$();">
</body>
</html>

需要注意的是，调用js库中的方法时，window可以省略（由js作用域链的相关知识可知）。所以我们可以定义一个名为myExtJs的库，并通过这样的方式来调用。eg：myExtJs.myLoad()。

用过ExtJs的朋友，看到这里应该会感到很熟悉，ExtJS的就是以Ext作为顶级命名空间，并将该命名空间作为window对象的一个属性。以此类推，我们可以继续通过往自定义命名空间中添加属性的方式，创建命名空间。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航