一、背景

  1. web前端开发人员经常会用到一些现成的js库（框架）。框架的使用增加了代码的模块化和可复用性，最主要的是屏蔽了浏览器之间差异性的实现，使得代码更加简洁，框架使用者只需要将注意力放在业务的实现上而不必为底层繁琐的实现感到头疼。
  2. 目前主流的js框架有很多，各有侧重，我们通常只会用到其中一小部分子功能。如果为了局部功能而引入一个庞大的框架，显然有点大材小用而且会增加浏览器的加载负担，浪费网络带宽，影响用户体验。因此，很多时候定义我们自己的js库非常的有必要，我们只需要根据项目需求构建出个性化js库，这样的js库将会变得相当精简。
  3. 实习导师要求在实习之前学习一下如何构建一个自己的类库，任务使然。

　　结论：基于以上三个原因，笔者大概学习了如何构建一个自己的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对象的一个属性。以此类推，我们可以继续通过往自定义命名空间中添加属性的方式，创建命名空间。

构建自己的js库的更多相关文章

  1. javascript学习(一)构建自己的JS库

    库是一个饱受争议的热门话题.一种观点认为它是一种非常棒的工具,是任何开发者都不可或缺的:另一种观点则认为在不理解库的内部工作原理的情况下对库形成依赖,会助长懒惰的风气从而导致开发者素质下降 库是一个饱 ...

  2. Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库

    Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...

  3. typescript+webpack构建一个js库

    依赖说明 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 ...

  4. 【转载】写一个js库需要怎样的知识储备和技术程度？

    作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...

  5. Vue.js库的第一天的学习

    一,vue.js简介 Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择 所以说, vue.js是一套构建用户界面的渐进式框架 Vue.js的核心 ...

  6. 主流JS库一览

    主流JS库一览 标签: prototypedojomootoolsprototypejsjqueryjavascript 2009-10-14 22:52 19936人阅读 评论(2) 收藏 举报   ...

  7. 12个值得关注的顶级可视化JS库 涉及图表、动画、时间处理，表格操作

    本文是译文,原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库,这个也是毫不逊色其他图表库的.另外Handsontable电子表格库也是 ...

  8. 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结

    打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类 ...

  9. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

随机推荐

  1. 显示IP地址的命令

    显示IP地址的命令   Centos7默认显示IP地址的命令       #获取所有网卡的IP地址 [root@clf ~]# ip  a1: lo: <LOOPBACK,UP,LOWER_UP ...

  2. 【题解】uva1104 chips challenge

    原题传送门 题目分析 给定一张n*n的芯片. '.'表示该格子可以放一个零件. 'C'表示该格子已经放了一个零件(不能拆下). '/'表示该格子不能放零件. 要求在芯片的现有基础上,放置尽可能多的零件 ...

  3. Let's GO(三）

    人生苦短,Let's GO Let's GO(一) Let's GO(二) Let's GO(三) Let's GO(四) 今天我学了什么? 1. 结构体(struct) /* type TYPENA ...

  4. Pop!_OS安装与配置（二）：基础配置

    Pop!_OS相关使用配置 #0x0 书接上回 #0x1 换源 #0x10 nopasswd sudo #0x11 换国内源 0x2 安装应用 #0x0 书接上回 首先请看上一章末尾, Pop!_OS ...

  5. MCU 51-2 LED and Digital tube Test

    点亮LED实验: #include <reg52.h> sbit LED1 = P1^; sbit LED2 = P1^; sbit LED8 = P1^; void main() { L ...

  6. java 面向对象（二）：JVM内存结构

    编译完源程序以后,生成一个或多个字节码文件.我们使用JVM中的类的加载器和解释器对生成的字节码文件进行解释运行.意味着,需要将字节码文件对应的类加载到内存中,涉及到内存解析. <JVM规范> ...

  7. 01 flask源码剖析之werkzurg 了解wsgi

    01 werkzurg了解wsgi 目录 01 werkzurg了解wsgi 1. wsgi 2. flask之werkzurg源码流程 3. 总结 1. wsgi django和flask内部都没有 ...

  8. 小谢第36问：elemet - table表格修改后表格行高亮显示且定位到当前行当前页

    第一次做这个需求得时候很乱,总是在表格页和修改页徘徊,总觉得什么都会,但是就是做不出自己想要得效果 其实如果先把思路搞清楚,这个问题得知识点却是不多,以下是我对表格高亮显示得思路: 首先,我会从已知得 ...

  9. 关于在JSP页面识别不了EL表达式的情况

    今天在JSP页面接收Controller返回的数据user_nickname,使用EL表达式显示数据发现在页面输出的始终是字符串${user_nickname} 经过查阅资料,问题在于使用的web.x ...

  10. 集训作业 洛谷P1135 奇怪的电梯

    这个题我见过!!! 我之前在石油大学的网站上做练习赛,提高了很多,这个题是我第一次在比赛里见到深搜. 当时蒙蔽的一批,现在发现好简单…… 这个题和普通的深搜没什么区别,甚至可以说简单了,因为这个是1维 ...