by zhangxinxu 2020-11-30 21:59

IntersectionObserver实现文档标题自动生成导航

一、为何叫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 animationtransition,以较低成本增强组件交互体验。同时,兼顾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组件都是采用这样的设计思想。

四、滚动到底部我高亮

试试看