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

题记:你有解决问题的能力,却没有解决问题的方法

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

    一、淘宝的前端解决方案: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

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

猜你喜欢

转载自blog.csdn.net/hbwang_716/article/details/81170214