LuLu UI组件中文文档 » 命名与设计

一、为何叫LuLu？

气质相符。

二、为什么使用LuLu？

1. 已迭代多年

   始于2015年，已成功支持多个千万PV大型项目，迭代优化多年，较成熟。

2. 上手简单

   会简单HTML和jQuery就可以上手了，不像一些流行框架，需要较多的学习成本。

3. 使用方式灵活

   支持类似seajs这种模块化加载，同时也支持一个一个<script>直接加载调用。

4. 体验和细节很棒

   体验和细节很棒，包括：

   ①. 代码质量高

   eslint对格式进行严格控制，同时有比较详细的注释，API命名和变量命名等至始至终风格一致，方便理解、修改与学习。

   ②. retina支持

   所有UI组件都是支持retina显示的。主要应用了CSS生成技术，以及SVG的处理。

   且每个组件的小图标独立使用，不耦合，使用base64技术，减少无谓的额外http请求，IE7/IE8使用图片向下兼容。

   .icon {
     background: url(test.png);
     background: url(data:image/svg+xml;base64,…), none;
   }

   ③. 交互细腻

   渐进增强使用CSS3 animation和transition，以较低成本增强组件交互体验。同时，兼顾hover延迟，弹框背景锁定，组件可视区域控制等很多细节处理。

5. 无障碍访问支持

   peak主题下，增加了Aria屏幕阅读设备无障碍访问以及键盘无障碍访问支持。

三、设计理念

1. 面向设计开发

   关于面向设计开发可参见这里：“面向设计的半封装web组件开发”。

   面向设计最大的特点在于能够对设计进行最完美的还原，可以很好地展现设计品质。有别于先有组件，然后再制约设计的设计策略。

   所以，LuLu UI是没有版本的概念的，只有一条核心线自己往前走。当新项目过来需要使用的时候，完全拷贝LuLu UI到项目开发目录中，然后根据当前项目的设计风格，对HTML和JS进行结构上的调整，是放心大胆的调整。

   因此，LuLu UI组件不是传统的大而全，而是走极简轻便灵活方向，表现为模块低耦合，层级扁平；API非常少，尤其一些基本组件，直接就没有API。

   LuLu UI没有版本概念，只有主题。目前有morden和peak两个主题。寓意为“现代”和“巅峰”。morden主题兼容IE7+，目前已停止维护，因为项目已经放弃对IE7的兼容；peak主题兼容IE8+，是目前持续维护和迭代的版本。

2. 基于HTML开发

   相对于其他UI框架，LuLu UI技术栈更偏向HTML和CSS，以便更友好地还原设计和增强体验。

   具体而言，LuLu UI基于HTML开发，实现前端开发分离，具体可参考“顺势而为，HTML发展与UI组件设计进化”。

   换句话说，开发的时候，只需要关心原生的HTML控件就可以，组件什么的不用在意。例如，时间选择，当我们选择或修改日期，就直接当组件不存在，处理原生input就好了：

   $("input").change(function() {});

   想要修改日期范围，很简单，直接改变原生的属性值就好了：

   $("input").attr({
     "min": "2015-07-01",
     "max": "2015-09-01"
   });

   组件自动就会同步，就跟原生的时间选择组件感觉一样！

   所谓UI组件，本来就应该只负责UI，跟业务没有瓜葛才对。

   LuLu中的很多UI组件都是采用这样的设计思想。