js库建设方案

前言：

自从互联网诞生之日起，JavaScript就成为统治web前端开发的通用语言，并在web开发人员群体中得到了广泛使用。JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。

一套完整的BS模式系统界面解决方案。包括十余种不同结构的主页、各种常用的导航与布局模板、丰富的组件、特效和完备的CSS样式库等等，并有多种皮肤样式可供选择，适合WEB开发工程师、前端制作工程师和界面设计师使用，适用于各种应用系统的开发。将这些常用的js、css样式等封装成库，达到最大程度的公用，这将能够大幅度地提高系统开发效率，降低开发成本。

一个良好设计的、适合自身产品的JavaScript基础库，能让一线工程师从繁重的基础问题中解放出来，将更多的精力用于优化业务逻辑和产品体验，从而提高研发效率。但这并非意味着所有公司都一味地采用通用开源的JavaScript库，因为业务特点和需求的不同，不同的公司所需要的JavaScript库的内容也不一样。从长期发展来看，针对自己公司业务的特点，设计最适合自己的JavaScript库才能够达到事半功倍的效果。

一、现状与存在的问题

目前公司现有系统前端的js脚本主要存在以下问题：

    1、浏览器兼容性问题

       系统js效果无法兼容IE6、IE7、IE8、FIREFOX等主流浏览器，出现页面错位、显示不全等问题。

    2、js书写不规范。

       不少系统页面js效果全部写在页面里面，页面杂乱，对于一些js效果需要单独js文件链接进来。

    3、js代码臃肿，客户端加载慢。

       客户端js代码实现复杂，代码量大；js代码冗余,无关代码较多。往往一个简单的效果，几行代码就能实现，确需要加入多个js文件。如我们只是写一个简单的图片滚动效果，一般情况下自己写就可以了，如果这时候用一个JQueryUI就显得臃肿了。

    4、js效果与现有系统框架冲突问题

       现有系统已使用前台框架与现有js代码相冲突，导致页面错误。如现有睿剑平台开发使用的是MooTools的类库，如果加入基于jquery的效果就会发生冲突。

    5、js代码与后台代码结合问题，导致js实现效果与UI设计的效果不一致。

       不少页面js效果需要按照UI设计进行包装，往往存在UI设计的界面实现不了或者界面走样

二、解决方案

    1、所有系统统一各js效果的UI界面和实现方式。

    2、js代码尽量精简而且规范，不要有任何多余的代码。

    2、对所有常用js效果进行封装，对外只提供调用的方法。

    3、增加兼容性，实现与现有的系统零冲突。

4、控件尽量做到高类聚，低耦合，拆分控件功能特性，让所有特性实现可插拔。

    5、各js效果要按需装载，保证从中调出的代码量是最小的

三、实现方式

    1、使用原生的js，不使用框架。

       缺点：书写复杂，代码量大，考虑浏览器兼容性

       优点：不依赖框架

    2、完全使用网上主流的js类库和组件，如jquery和jqueryUI，Extjs等

       优点：快速开发，简化操作，更多关注业务逻辑的实现，不用过分关心浏览器兼容等问题。

       缺点：不良依赖，忽略基础特性，受到框架的架构、设计的理念所限制和约束。

    3、自主开发全新类库和组件。

       优点：能灵活根据公司业务要求适应。

       缺点：工作量大，人力及条件达不到要求。

    4、使用网上主流的js类库,结合自身业务特点自主开发组件。

       优点：快速开发，简化操作，更多关注业务逻辑的实现，屏蔽浏览器兼容问题。

       缺点：不良依赖，忽略基础特性，受到类库的架构、设计的理念所限制和约束。

     建议：根据具体业务场景，使用主流js类库,结合自身业务特点自主开发组件与使用原生JS相结合。    

对于一些简单的页面效果，可以直接写一些原生的js代码实现，对于一些常用效果，可以将其封装成组件库，使用的时候用统一的语法调用，可以达到JS的结构与行为分离，使页面更干净，使用更方便，减少代码量，不易出错，浏览器兼容。

四、现有js库分析

现在业界的几种主流框架和类库，Jquery,mootools,prototype,YUI,Extjs,dojo,包括国内的淘宝的kissy,百度的七巧板等。

近期国外科技网站W3Techs公布了对近100万个网站进行调查分析报告显示：“jQuery是目前最流行的JavaScript库”。W3Techs发现被调查的网站中有61.0%的网站没有使用任何的JavaScript库，而使用jQuery的占到总数的29.2%，而使用MooTools、Prototyp、ASP.NET Ajax、Dojo等其他JavaScript库的总数只占到9.8%。jQurey占到了JavaScript市场份额的74.7%的市场份额。

如果除却环境原因，在各方面需求都非常均衡的情况下选择框架，个人认为可以从易用性，高性能，功能性，多浏览器兼容，跨平台，可扩展性等方面考虑。

考虑简单易用，Jquery的$远远领先了其他框架。

高性能上，根据主流框架选择器性能测试，Jquery在这方面也是出于领先地位。

功能上，包括UI和其他方面。现在各个框架基本都有自己的UI，不过EXT在这方面更强一些。

可扩展性方面：jquery有大量用户开发的插件可供使用

多浏览器兼容和跨平台现在已经成框架的最基本要求了，基本上每种框架都会跨浏览器。