构建自己的js库
一、背景
- 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对象的一个属性。以此类推，我们可以继续通过往自定义命名空间中添加属性的方式，创建命名空间。
构建自己的js库的更多相关文章
- javascript学习(一)构建自己的JS库
库是一个饱受争议的热门话题.一种观点认为它是一种非常棒的工具,是任何开发者都不可或缺的:另一种观点则认为在不理解库的内部工作原理的情况下对库形成依赖,会助长懒惰的风气从而导致开发者素质下降 库是一个饱 ...
- Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库
Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...
- typescript+webpack构建一个js库
依赖说明 入口文件 tsconfig配置 webpack配置文件 webpack入口文件配置 webpack为typescript和less文件配置各自的loader webpack的output配置 ...
- 【转载】写一个js库需要怎样的知识储备和技术程度？
作者:小爝链接:https://www.zhihu.com/question/30274750/answer/118846177来源:知乎著作权归作者所有,转载请联系作者获得授权. 1,如何编写健壮的 ...
- Vue.js库的第一天的学习
一,vue.js简介 Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择 所以说, vue.js是一套构建用户界面的渐进式框架 Vue.js的核心 ...
- 主流JS库一览
主流JS库一览 标签: prototypedojomootoolsprototypejsjqueryjavascript 2009-10-14 22:52 19936人阅读 评论(2) 收藏 举报 ...
- 12个值得关注的顶级可视化JS库 涉及图表、动画、时间处理，表格操作
本文是译文,原文是https://da-14.com/blog/top-11...我在原文的基础上加了百度的Echats图表库,这个也是毫不逊色其他图表库的.另外Handsontable电子表格库也是 ...
- 使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
打包JS库demo项目地址:https://github.com/BothEyes1993/bes-jstools 背景 最近有个需求,需要为小程序写一个SDK,监控小程序的后台接口调用和页面报错(类 ...
- 前端之Vue.js库的使用
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...
随机推荐
- Howdoo 纳入华为生态系统
原文链接:https://howdoo.io/howdoo-and-huawei-appgallery/ 重点摘要: 我们是华为设备的忠实粉丝,因此我们非常高兴地宣布,我们一直在积极讨论如何开发 Ho ...
- day22 作业
1 统计文件夹大小 def get_filesize(file_path): count = 0 res=None files_sum = os.listdir(file_path) for file ...
- Prometheus + Grafana 监控系统搭
本文主要介绍基于Prometheus + Grafana 监控Linux服务器. 一.Prometheus 概述(略) 与其他监控系统对比 1 Prometheus vs. Zabbix Zabbix ...
- 数据可视化之powerBI技巧（五）在Power BI中写出优雅的度量值是什么体验？
之前的文章(采悟:连接表的几个DAX函数,一次全掌握)介绍了产品A的客户与产品B的客户的各种交叉关系,其中最常用的应该是找出A和B的共同客户,以便进行产品关联分析. 之前的思路是计算出两个产品的共同客 ...
- 05 drf源码剖析之认证
05 drf源码剖析之认证 目录 05 drf源码剖析之认证 1. 认证简述 2. 认证的使用 3. 源码剖析 4. 总结 1. 认证简述 当我们通过Web浏览器与API进行交互时,我们可以登录,然后 ...
- 机器学习实战基础（十二）：sklearn中的数据预处理和特征工程（五） 数据预处理 Preprocessing & Impute 之 处理分类特征：处理连续性特征 二值化与分段
处理连续性特征 二值化与分段 sklearn.preprocessing.Binarizer根据阈值将数据二值化(将特征值设置为0或1),用于处理连续型变量.大于阈值的值映射为1,而小于或等于阈值的值 ...
- 数据可视化之DAX篇（十二）掌握时间智能函数，同比环比各种比，轻松搞定！
https://zhuanlan.zhihu.com/p/55841964 时间可以说是数据分析中最常用的独立变量,工作中也常常会遇到对时间数据的对比分析.假设要计算上年同期的销量,在PowerBI中 ...
- scrapy 源码解析 （五）：启动流程源码分析(五) Scraper刮取器
Scraper刮取器 对ExecutionEngine执行引擎篇出现的Scraper进行展开.Scraper的主要作用是对spider中间件进行管理,通过中间件完成请求.响应.数据分析等工作. Scr ...
- matplot笔记
文件读取: data_train = pd.read_table('G:\python\PYproject\Titanic/train_20171215.txt',header=None,encodi ...
- 找出系统web路径
方法一 :打开web查看源码,复制一个特征字符串,然后替换进下面命令的htmlString搜索之. Win :findstr /s/i/n /d:E:\code\xampp\htdocs\ /c:&q ...