设计和构建你自己的JavaScript代码库:提示与技巧

  Jani Hartikainen讲述了如何利用Mocha来进行单元测试 Unit Test Your JavaScript Using Mocha and Chai 。在使用Jsmine,Travis,Karma测试JavaScript (Testing JavaScript with Jasmine, Travis, and Karma) 这篇文章中,Tim Evko展示了怎么通过另一个叫做Jasmine的框架来设置良好的测试流程。这两个测试框架都是非常流行的,但还有适应别的需求的其他框架。

  我在这篇文章前面撰写的大纲,已经讲述了它期待怎样的输出。这是一切测试的开始:从期望出发。关于我的代码库的一个Jasmine测试像是这样:

  describe('Basic usage', function () {

  it('should generate a single product', function () {

  // Create a single product

  var product = new UserAgent.Product('EvilCorpBrowser', '1.2');

  product.setComment('X11', 'Linux', 'en-us');

  expect(product.toString())

  .toBe('EvilCorpBrowser/1.2 (X11; Linux; en-us)');

  });

  it('should combine several products', function () {

  var userAgent = new UserAgent;

  // Create and add first product

  var application = new UserAgent.Product('EvilCorpBrowser', '1.2');

  application.setComment('X11', 'Linux', 'en-us');

  userAgent.addProduct(application);

  // Create and add second product

  var engine = new UserAgent.Product('Blink', '20420101');

  userAgent.addProduct(engine);

  expect(userAgent.toString())

  .toBe('EvilCorpBrowser/1.2 (X11; Linux; en-us) Blink/20420101');

  });

  it('should update products correctly', function () {

  var userAgent = new UserAgent;

  // Create and add first product

  var application = new UserAgent.Product('EvilCorpBrowser', '1.2');

  application.setComment('X11', 'Linux', 'en-us');

  userAgent.addProduct(application);

  // Update first product

  application.setComment('X11', 'Linux', 'nl-nl');

  expect(userAgent.toString())

  .toBe('EvilCorpBrowser/1.2 (X11; Linux; nl-nl)');

  });

  });

  一旦你对你的API设计的第一个版本完全满意,是时候开始思考结构和你的代码库应该如何被使用。

  ##模块加载器兼容性

  你或许使用过模块加载器。使用你的代码库的开发者有可能使用加载器,所以你会希望自己的代码库与模块加载器是兼容的。但兼容哪一个呢?应该怎么从CommonJS,RequireJS,AMD和其他加载器中挑选呢?

  实际上,你不需要挑选!通用模块定义(UMD)是一个目标就是支持多种加载器的规则。你可以在网上找到不同风格的代码段,或者从这里 UMD GitHub repository 学习并让它与你的代码库兼容。从其中的某个模板开始,或者使用你喜欢的构建工具 add UMD with your favorite build tool ,你就不必再担心模块加载器的问题了。

  如果你希望用上ES2015的 import / export 语法,我建议使用Babel和 Babel’s UMD plugin 来将代码转换成ES5。通过这个方法你可以在你的项目中使用ES2015,同时生成兼容性良好的代码库。

  ##文档

  我完全赞成在每一个项目中使用文档。但这通常牵涉到大量的工作,导致编写文档被推迟和在最后被遗忘。

  ###基本信息

  文档的编写应当从项目的名字和描述之类基本的信息开始。这会对别人明白你的代码库做了什么和是否对他们有用有所帮助。

  你可以提供像是适用范围和目标之类的信息来更好的给用户提供信息,而提供路线图可以让他们明白在未来可能会有什么新变化以及他们可以提供怎样的帮助。

  ###API,教程和例子

  当然,你需要确保用户知道如何去使用你的代码库。这从API文档开始。教程和例子是很好的补充,但编写他们会是一个庞大的工作。然而,内联文档 Inline documentation 不会这样。下面是一些利用 JSDoc 的,可以被解析和转换成文档页的注释

  ###元任务

  一些用户想对你的代码库作出改进。在大多数情况中,会是贡献代码,但有一些会创建一个私人使用的定制版本。对于这些用户,为类似构建代码库,运行测试,生成,转换和下载数据之类的元任务提供文档很有帮助的。

  ###贡献

  当你对你的代码库进行开源,得到代码贡献是很有帮助的。为了引导贡献者,你可以增加一些关于贡献代码的步骤和需要满足的标准的文档。这会对你审阅和接纳贡献的代码和他们正确的贡献代码有所帮助。