设计和构建自己的JavaScript库:提示和技巧

本文由Adrian Sandu , Vildan Softic和Dan Prince进行了同行评审。 感谢所有SitePoint的同行评审人员使SitePoint内容达到最佳状态!

图书馆:我们一直在使用它们。 库是打包的代码,开发人员可以在他们的项目中使用它们,这总是可以节省工作并避免浪费时间。 拥有可重用的开源或封闭软件包比重建相同功能或从过去的项目手动复制和粘贴要好。

但是除了打包的代码之外,什么是库除少数例外,一个库应该始终是一个文件,或在一个文件夹中多个文件。 它的代码应单独维护,并在项目中实施时保持原样。 库应允许您设置项目特定的配置和/或行为。 将其视为仅允许通过USB端口进行通信的USB设备。 某些设备(例如鼠标和键盘)允许通过设备附带的接口或设备附带的接口进行配置。

在本文中,我将解释如何构建库。 尽管涵盖的大多数主题都将适用于其他语言,但本文主要侧重于构建JavaScript库。

为什么要建立自己的Javascript库

首先,库使重用现有代码变得非常方便。 您不必挖掘旧项目并复制一些文件,只需将库拉入即可。这也使您的应用程序片段化,从而使应用程序代码库更小,更易于维护。

设计和构建自己的JavaScript库:提示和技巧

根据您的库的复杂性,您可能还需要考虑一下结构。 利用设计模式是构建库甚至克服某些技术问题的好方法。 当添加新功能时,它还降低了重构大型零件的风险。

灵活性和定制

使库变得很棒的是灵活性,但是在您可以自定义的内容与您不能自定义的内容之间划清界限也很困难。 chart.js与D3.js就是一个完美的例子。 两者都是用于可视化数据的出色库。 Chart.js可以非常轻松地创建和设置不同类型的内置图表的样式。 但是,如果您需要对图形的更多控制,则需要D3.js。

有多种方法可以控制用户:配置,公开公共方法以及通过回调和事件。

配置库通常是在初始化期间完成的,但是某些库允许您在运行时修改选项。 选项通常仅限于很小的部分,更改这些值除了更新这些值以备后用外别无他法。

可以公开与实例交互的方法,例如从实例(获取器)检索数据,将数据放入实例(设置器)并执行操作。

回调有时通过公共方法传递,通常是在异步任务之后运行用户代码。

活动具有很大的潜力。 它们类似于回调,除了添加事件处理程序不应触发动作。 事件通常用来表示事件,您可能猜到了! 就像回调一样,您可以提供其他信息并返回一个值以供库使用。

在某些情况下,您可能希望允许用户扩展您的库。 为此,您可以公开一个公共方法或用户可以填充的属性,就像Angular模块( )和jQuery的 ( )一样,或者什么也不做,只是让用户访问您库的命名空间:

同样,这也允许您覆盖方法。

如果是后者,则使用户能够访问您库的名称空间,从而使您对如何定义扩展名/插件的控制更少。 为确保扩展遵循某些约定,您可以(并且应该)编写文档。

测试中

编写大纲是测试驱动开发的良好起点。 简而言之,这是在编写实际库之前以测试形式写下标准的情况。 如果这些测试检查某个功能是否表现出应有的功能,并且您在编写库之前就编写了这些功能,则该策略称为行为驱动开发 。 无论哪种方式,如果您的测试涵盖了库中的每个功能,并且代码通过了所有测试,则可以安全地假定库可以工作。

Jani Hartikainen解释了如何在使用Mocha和Chai进行JavaScript单元测试中使用Mocha编写单元测试。 在用Jasmine,Travis和Karma测试JavaScript中 ,Tim Evko展示了如何与另一个名为Jasmine的框架建立一个甜蜜的测试管道。 这两个测试框架非常流行,但是有很多不同的风格。

我在本文前面创建的大纲已经对预期的输出进行了评论。 这是所有测试的起点:期望值很高。 我的库的Jasmine测试如下所示:

来源:dingshi7798

声明:本站部分文章及图片转载于互联网,内容版权归原作者所有,如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢!

上一篇 2016年4月27日
下一篇 2016年4月27日

相关推荐