思考阿里巴巴系的前端解决方案

题记：你有解决问题的能力，却没有解决问题的方法

     前端是用户体验的基础，是用户最先体验的服务。由于最近在开发购物分享网站食美特，经历了很多前端的麻烦。学习和参考了很多前端解决方案，这篇文章先说说我对阿里巴巴系的前端解决方案的体会。

 

    一、淘宝的前端解决方案：kissy 。淘宝的kissy(http://docs.kissyui.com/)是由阿里集团前端工程师们发起创建的一个开源 JS 类库。它具备模块化、高扩展性、组件齐全、适合国情等特性。定义了通用的js类库，通用的约定，通用的html规范，通用的css规范，通用的js规划，以及基于bootstrap(http://twitter.github.com/bootstrap/)基础样式等等。

 

         kissy的魅力在于定义了绝大多数电商常用的功能，又有一套比较规划的文档，淘宝和天猫都在用，性能不在话下。kissy的负责人非常友好，基本上发邮件给他，都会回复。很敬佩他的职业精神。但是 kissy组件太沉重，而且对于新手，开发组件也比较难，不像jquery，有那么多组件可以使用。

 

二、支付宝的前端解决方案：Arale：Arale做了基于 SeaJS（http://seajs.org/docs/） 的前端解决方案Arale （http://aralejs.org/）以及子集alice（http://aliceui.org/）。SeaJS的魅力在于基于CMD规划的module laoder，小巧玲珑。其2.0版本只有3K左右，可以开发基于 Hybrid 模式的 App 上。Seajs可以使用shim插件，直接使用jquery类库及jquery的插件。

感兴趣的同学，可以到kissy和Seajs主页阅读相关文档。

 

    通过总结这些解决方案，一个通用的前端解决方案有以下功能

1. 通用的约定俗成
2. 通用的html编码规范
3. 通用的css编码规范
4. 通用的js类库
5. 默认的css基础样式 和常见的基础样式。例如table  form icon nav button 等等
6. 前端构建工具。由于前端越来越复杂，一个强健的构建工具必不可少。

   对于一个公司来说，采用基于seajs的模块管理，整合jquery等常用的类库，可以定义自己团队的前端解决方案。

   规范很重要，这是代码管理的基础，但是规划只是规划，需要开发团队去遵守。团队可以在总结kissy的规范http://docs.kissyui.com/docs/html/tutorials/style-guide/common-conventions.html 和 设计模式库 http://docs.kissyui.com/1.3/dpl/ 以及alice http://aliceui.org/的基础上，构建属于自己的规范和通用组件。

前端的构建工具，推荐采用grunt （http://gruntjs.com/）具体使用，请google

 

好吧，其实，我也想搞个前端解决方案。可以使用在我的团队上，也可以使用在我的网站上。

 

 

 

 

 

转载于:https://my.oschina.net/smeite/blog/114352