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

作者:小爝
链接:https://www.zhihu.com/question/30274750/answer/118846177
来源:知乎
著作权归作者所有,转载请联系作者获得授权。

1,如何编写健壮的javascript代码,鲁棒性,简单总结几条我觉得是常识的事:
1.1 一个javascript库最好的实现方式是占用最少的命名空间,比如window对象上或者global对象上只占用一个引用。
1.2 健壮的js程序对输入都会有完善的类型检查和异常处理,边界值的判断。
1.3 对js的几种继承方式要足够了解,什么时候用原型继承,什么时候用拷贝继承,好处缺点,以及整个库中的类管理的统一。
1.4 用好的函数名和变量名代替多余的注释。
1.5 对浏览器和宿主环境的检查,nodejs比如os的检查,web端比如浏览器版本和型号的检测,检测又分为功能检测和版本检测等方法。
1.6 一样的代码不写第二次。
1.7 少用匿名函数。
1.8 整个库的生命周期定义要想好。
1.9 可读性的维护,比如dom元素都带$,局部变量和全局变量,常量,私有变量的使用,js的2条链,作用域和原型链的概念,统一的出入口,统一的流程控制,事件机制,适当的根据场景应用设计模式,我的建议是可读性优先于代码性能。
等等等等吧,这些都属于是工程类的问题,经验包吃多了 平时写代码都会注意。而健壮的javascript代码以上都是必须的,其实其他语言也适用,可以多看看重构,编写可维护的代码这一类的书。

2,什么是js库,一个开源的js库都包含哪些东西(不仅仅只有代码)。
如果是第一条是写js库的一个前提条件,那么这里说的是当你实现了功能之后,你的库里配套的还需要什么?
2.1 文档,这个不必说了,文档分2种,一种自动的jsdoc一类的,一种手工维护的API列表和说明。最后还应该附带最佳实践和例子。
2.2 测试用例,这里一般指单元测试,如果你的pr不通过单元测试,说明你影响了你修改部分的其他逻辑,这也是保证库健壮可用的必须条件。
2.3 demo,和文档类似,但是更贴近现实生活,就是说完整的使用场景。
2.4 自动化构建或者说项目维护的脚本,如果说一个库的功能很复杂,那么多代码如何最终构建给用户使用,内部一定要有一套机制来完善,比如dev比如build,有人用make有人用gulp,这部分的额外工作在很多js库都有体现。
2.5 依赖包的状态要告诉使用者,升级策略和开发版本与稳定版本的区别。
2.6 安装文档,或者提供云cdn资源。
2.7 完善的dev环境文档,这里很多开发者没有,导致你的项目只能你自己维护,很累,其他人想帮忙,在环境这一关就被拦下来了。

3,易用性,也就是要有一定的API设计能力,足够的代码抽象能力,也就是用户体验部分。
我在编写一些玩具库的时候,都是先设计API,先写实例初始化化的伪代码,调用方法的伪代码,在脑海里想一下 我怎么用这个库更舒服,设计好之后,再对库进行实现,当然也可以多参考其他框架库的方法命名,尊重用户习惯,可以多看看API设计一类的书,这一部分也是不区分语言的。

4,肯定要对算法和数据结构要有一定了解。
举一个最简单的例子,很多库里面的缓存策略是什么样子的?这里抛砖引玉,比如vue的缓存就用了https://github.com/rsms/js-lru 这个库,而这个库说白了就是Least Recently Used 近期最少使用算法,简称LRU,很多语言都有实现,你不了解不知道算法和数据结构,你怎么做最合适的取舍呢?

5,如果是说js库,那么配套的扩展机制也一定要提前设计好。
vue有全家桶,jquery有jq-ui,yui也有自己配套的一系列插件和扩展方法。当然如果你只是想写一些小巧的独立js库,最好把一些关键方法暴露出来让其他人可以方便在外部复写或者继承重写。否则遇到问题,别人就只能破坏你的源码了,这对开发使用者来说也是非常不友好的。

时间: 2024-12-21 01:44:11

【转载】写一个js库需要怎样的知识储备和技术程度?的相关文章

如何全新学习一个JS库的使用?

在实际的项目开发过程中,对于前端开发人员,一般都是遵照项目架构中的实现技术来做相关业务的开发,但是对于一些新功能的实现就需要新的解决方案来实现,在此就缺少不了对于新技术的学习,怎样从小白到熟练掌握一个全新的JS库的使用流程,在此做个小总结: 1,在官网网站中或者Github中下载库文件,参照实例或者文档介绍实例化简单的雏形 2,阅读文档更进一步结合业务需求找到实现方法,了解插件中包含的属性和方法,当然在寻找是否具有某些属性和方法之前,可以先思考业务流程中可能需要的属性和方法 3,在JS宿主环境中

写一个js配合rem

rem.js 目前笔者解决移动端的尺寸带来的样式问题,都是通过viewport + rem的.viewport 相信大家都用过了,而rem需要用js动态设置html的字体大小. 动态设置rem的根字体大小 首先我们要确定你的设计稿大小是多少,一般移动端设计稿的宽度是750,当然也用些用1080的; 我们要确定rem和px的转换比例,前提是要注意浏览器的字体大小是有限制的,比如chrome的字体不能小于12px; 记得加上viewport,比如这样设置:<meta name="viewpor

自己写js库,怎么支持AMD

最近我打算把之前做项目写的一些工具集成到一个js库中,但是库既要在普通环境正常运行,又要在AMD环境下不暴露全局变量.一时间挺头疼的.随即我参考了一些现在流行的库的源码.学着写了一下,感觉还不错. 既然要支持AMD,那么我们需要选择一款AMD的模块加载器,这里我使用requireJS. 至于库我使用的是我最近写的一个小工具库 mTools, gitHub地址:  https://github.com/grARM/mTools  .那我们开始吧. 一.判断环境 我要实现的效果是在一般环境暴露一个全

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

自已实现一个UI库

[2014年写一个UI库时写的几个文章,发布出来] 几年前的一个嵌入式的UI开发,使自己有机会接触到了UI的一些底层知识,虽然之前也开发过很多Windows下的信息应用系统,也做很多的界面开发,但一直却对UI的一些运作却不了解. BOSS决定使用UCGUI做为UI的基本库来开发UI界面的一些应用.用UCGUI的库来做开发,它已经有很完善的基本构件,像窗体的管理,基本的控件,图片,文字处理等,不过听说UCGUI的授权费用也是不菲的,但我认为它确实是一个物有所值的东西. 在使用中也还是遇到过一些问题

优雅的创建一个JavaScript库

这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法,以优化他人编写或维护自己的JS库. 在我们深入之前,我做了两点假设: 你知道简单的JavaScript或C语言. 你不打算使用jQuery.通常情况下,一个JavaScript库不需要任何依赖. 首先,我遇到了第一个麻烦,即如何正确的看待一个JavaScript库.在C/C++中,一个库是功能的集合,并且通常不需要很完美的结构.而JavaScript的工作方式有所不同,因此我做了一些研究.最后的结论是,一个Java

怎样写一个webpack loader

在上一篇<webpack从入门到上线>介绍了wepack的配置和相关的概念,这一篇介绍怎样写一个webpack loader. 通过写一个js的html模板为例子. 上篇文章已提及,loader加载器就是对各种非正常资源的解析,转化成浏览器可以识别的js/css文件等,甚至可以说loader就是一个小型的编译器.例如sass loader:将sass格式编译成css,在安装sass的过程中你会发现,其实sass用的是C++,sass本身是面向对象的.但是本文不会介绍怎样写一个编译器(我也不知道

js库编写的环境和准备工作

在编写一个js库之前需要准备许多基础知识. 本人在编写之前主要参考了visjs和百度的echarts这两个库的部分内容,这之中提取出几个要点如下: 1.如何整理代码结构,使模块与模块分开又不至于出现调用困难的现象? 首先讲一下上面两个参考的库使用的方法,visjs是一个相对较小的开源库,目前已经更新了很多个版本,但是最具参考意义的应该是0.0.9版,因为之后的版本增删改太多,命名方式也改的很奇葩,基本看不懂,读者可以从github上下载历史版本.他的代码整理工具用的是nodejs,通过一个生成方

分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业不是百度来的,我只是百度了一些示例代码的意思,怎么用!算了,越解释万一越黑呢!哈哈O(∩_∩)O哈哈~) ----------------------------------------------------------------分界线------------------------------