当前位置: 代码迷 >> Web前端 >> 考虑前端解决方案
  详细解决方案

考虑前端解决方案

热度:103   发布时间:2013-03-22 09:49:50.0
思考前端解决方案

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

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

?

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

?

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

?

?

?

?

?

  相关解决方案