如何开发一个优秀JS library/framework的一点思考

关键字：JS 前端 公共库 framework 开发

在业务需求到达已经基数的时候，公共library/framework（为行文方便统称lib）的需求当然应运而生。在各个技术栈涌现了一批批优秀的解决方案。在前端领域，比如angular、vue.js等框架类方案，jquery、React等library类方案。

为适应某些业务范畴，也出现了一些像ant design - enterprise-class UI design方案。笔者在工作中也做过一些Web UI Framework的研发工作。本文将结合自身开发经验，对基础平台或中间件开发过程做了一点总结。

为适应某些业务范畴，也出现了一些像ant design - enterprise-class UI design方案。笔者在工作中也做过一些Web UI Framework的研发工作。本文将结合自身开发经验，对基础平台或中间件开发过程做了一点总结。

笔者选择了CAPH项目作为实例，CAPH is a Web UI framework for TV. Develop High Performance Web Application Easily and Quickly.

详细介绍参见 http://developer.samsung.com/tv/develop/extension-libraries/caph-30 。

一、业务支撑：一个优秀的JS公共library需要一定的市场需求

公共library/framework的需求必然需要一定基数的上层业务支撑。在前端领域，PC和mobile端涌现了大量优秀的UI类库，比如jquery-ui、extjs、Ant Design。

在TV设备领域，由于其遥控器操控、大屏的特性，需要定制特定的交互方式、theme。所以这便是CAPH的市场需求。而市面上基于TV场景的JS UI lib方案并不多见。

二、功能聚焦： 面向一定业务范围制定library特性和模块

上文我们提出来业务场景的重要性，那么针对其应该如何定义lib产品的特性的和模块呢。以TV为例，TV的主要特征是遥控器操作、大屏、多展示类场景、设备性能不高等。我们来看为解决这些问题，CAPH提供了哪些模块和特性：

Key Navigation - 解决基于遥控器事件焦点管理

Scrollable List and Grid - 展示需要的模块

UI Components : Button, Radio Button, Toggle Button, Checkbox, Input, Dialog, Context Menu, Dropdown Menu - 适合遥控器操控的UI组件

Touch feature : Pan, Tap and Double Tap. (from CAPH 3.1) - 特定TV（商场展示屏等）

可以看出在功能设定上，library需要聚焦，功能需求上不是兼容并包。

三、技术选型：选用开发者广泛接受的架构方案

CAPH3.0之前的版本，其技术方案为自建的架构体系，包括Event System、Module Manager、Layout、Render Engine、App Lifecycle等。这样做的好处是更高度的定制、更灵活的适配TV平台。但是这样的坏处更加明显或者说危险。如此一来造成：

CAPH团队需要更多的资源去研发Render Engine基础设施及优化工作

开发者对于新的组件定义方式、API设定较难接受

开发者代码复用难度高

...

在3.0版本设计时，团队选用了angularjs作为技术依赖，将angularjs中的组件化、模块管理应用到CAPH功能模块的开发过程中。推广效果显而易见。

四、易用性、扩展性、文档

lib的目的是提供效率，如果没有易用性、扩展性那么效率就无从谈起。APIs的设定可以说是重中之重，直接影响了lib的成败。

CAPH设定API非常简洁便利，见名知意，方便记忆，前后呼应。

如下示例：

caph部分模块和接口

HTML with ng-directive

When you want to use key navigation, just add this directive to target element's attribute.

Pass the focusable option object without 'focusable' prefix to the focusable attribute value.

UP

Javascript APIs:

$scope.changeFocus = function(name) {

focusController.focus(name);

}

更多接口参见：CAPH3 Documents (Tutorial / API reference)

http://developer.samsung.com/onlinedocs/tv/caphdocs/main.html?type=angular&doc=jsdoc&p1=0

扩展性的话，也不说了，略去。

作为一个开放给开发者的lib，至少要有完整的输出，package、samples和文档等的获取是开发者非常重要。常见的文档资源有，apidocs、samples、tutorial等。参见CAPH3 Documents (Tutorial / API reference) 。

五、性能

这里性能不多说了，基本要求。

以上就是开发一个JS公共library或framework的一点思考。谬误之处敬请指出。

作者：opennext@github

欢迎转载，方便的话请注明出处。