澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站:的开源功能插件和框架

顺势而为,HTML发展与UI组件设计进化

2016/01/22 · HTML5 · UI

原文出处: 腾讯ISUX   

在阅读本文之前,建议先阅读之前的一篇文章:“面向设计的半封装web组件开发”,便于理解文章的一些解惑。

介绍

组件化什么时候在软件工程领域提出已经无从考究了,这个概念很早就被提出,近年来随着前端开发的迅速发展和工程化转变,组件化开发的思想也得到了进一步的发展和实践。我也是在前端开发中使用到Vue这个框架,接触到了组件化开发的思想。那什么是组件化呢?其实对(大)前端工程师来说很好理解,用一句话概括就是,接受外部数据输入,暴露特定事件的UI 逻辑组成的单元

对iOS工程师来说,系统提供的各种原生控件就是一种组件。例如一个输入框UITextField,它接受外部传入的初始值,接受用户输入,通过Delegate方式暴露出各种可以被关注的事件textChange。我们可以在xib/Storyboard/代码中方便的引入,用一个一个组件单元,组成我们的用户界面,同时监听我们所需的事件。对安卓工程师,也是一样的开发体验,各种原生的控件都相当的强大和方便。同时,当原生控件不能满足我们的需求时,我们也可以很方便的使用继承对原生控件进行扩展,比如添加子控件、添加自定义事件等,对于我们来说,开发手机客户端和搭积木非常相似,我们只需要选择合适的积木,按照一定的规则堆好就行了。

澳门新浦京娱乐场网站 1

组件化.jpg

上图就是一个组件化开发的例子,页面分为Nav、List两个大的组件,List组件下包含了ListHeader、ListBody、ListFooter三个子组件,ListBody有包含若干ListCell组件,逻辑结构就可以表示成如下

<app>
  <Nav></Nav>
  <List>
    <ListHeader></ListHeader>
    <ListBody>
      <ListCell></ListCell>
      <ListCell></ListCell>
      ...
    </ListBody>
    <ListFooter></ListFooter>
  </List>
</app>

相信有客户端开发经验的同学看到这种结构一定非常熟悉——这不就是iOS里的Xib,Android中的Xml布局文件嘛!其实组件化的思想早已深入到了客户端开发中

原创:W3C中文教程(W3Schools.wang)

 

JavaScript 是一个在全球范围内都非常受欢迎的脚本语言,由 Netscape 的 LiveScript 发展而来,可用于 Web 开发、移动应用开发、服务器端开发等。它因简单、安全、动态和跨平台等特点而受到新老开发者的追捧。本文整理了一些基于 Javascript 的开源功能插件和框架,希望能给你的开发带来帮助。

一、现状

1. 前端发展现状
前端这几年的发展都是有目共睹的,然而,如果按照已经落地投入实践的标准梳理下,会发现,基本上都是偏后的JS开发层面的,比方说Node.js下的前后端分离,MV*库,React.js,各种包管理工具及前端集成解决方案等。

而往前,Shadow DOM, Web Components规范和标准虽然也出现了,给大家看到了方向和未来,但由于兼容性的问题(参见下表),或者可能缺乏优秀团队的强势引领,我们在实际的项目中鲜有看到。

 

就算有webcomponents.js这样的polyfills处理,也只有IE11 才完全支持。

难道我们就这样干等着,直到Web Components一统江山的时候,我们才开始在HTML侧发力吗?这么多年HTML5的发展就这么白费了?我们做PC端的就因为一些过时的浏览器而止步不前?

2. UI组件现状
成熟的团队都有自己的一套组件库,以便各种项目来的时候,都能从容应对。

为了能够从容应对,我们必然要考虑周全,企业级,能应对大型项目,各种复杂场景,充分发挥组件的复用性。往往最终,会让组件变得比较重,逻辑比较复杂,API数量也比较多。我们不妨可以看下kissy 5.0的DatePicker的组件使用示意:
澳门新浦京娱乐场网站 2

如果我们单看功能,确实很强大,禁用日期可以任意自定义,可以轻松定义各个操作栏是否显示,确实是企业级的web组件,看上去能适应各种复杂场景。

但是,在我看来,问题却非常多。

  1. 诸位静下心来想想看,我们所经历的项目,是不是绝大多数都不复杂,我们是否有必要使用企业级的大而重的产品?就好比你一个展示性为主的网站,却使用AngularJS MVVM来高大上。截趾适屦,敦云其愚。
  2. 看上去能适应各种场景,但是,眼下现代web技术飞速发展,UI层变化日新月异,你确定你这个组件能跟得上这些变化。怕是最后演变成,组件支持跟不上,而否决了设计师的一些想法。本末倒置了!
  3. 代码中出现了GregorianCalendar, GregorianCalendarFormat这样的方法或对象,请问在座的各位你知道这是个什么鬼吗?你知道他是干嘛用的吗?学习成本啊~~
  4. render, showWeekNumber, showClear, showToday, disabledDate这些API名称大家有没有觉得在哪里见过?
    “好像是在哪儿见过?”
    “好像个鬼啊,是之前根本就没见过!”
    现在大家闭上眼睛,还记不记得这些API名称是什么?假设一周以后呢,你还记不记得。是不是你要去翻API文档了?使用成本啊~
  5. 想象这样的场景,项目启动了,负责组件的前端和负责业务的前端一起开工,谁知突然,负责组件的前端的老婆突然要临盆,不得不去陪产。此时负责业务的前端该怎么搞?会不会像这样一样在心中马景涛:“时间选择组件还没完成,这里的日期交互依赖组件,这不是丢锅给我接吗!?”可以看到,两人的开发被牵制了!两种结果,一是自己上,二是这块工作暂停。
    所以大家发现没,组件和业务耦合在一起,不利于协作啊。比方说上面截图代码的picker.on('select', function(e) {});,组件不弄好,根本就没法使用啊!要么就自己先搞搞,回头再改,都是很烦的。

Web组件化发展

而对于web前端来说,世界可能就没有那么美好了,我们没有那么多强大的控件得以使用,很多基础性的、公共的组件,浏览器都没有提供给我们,留给我们的只有

  • 简单的HTML标签
  • JS操作DOM的能力
  • CSS描述布局的功能。

在这种前提下,web前端初学者,包括我在初学的时候非常容易把代码写成意大利面条一样,所有的逻辑,比如ajax,更新DOM,更新数据等等都混杂在一起。这种写法在前端逻辑简单,界面层级不复杂的阶段是可行的,这种情况下引入框架反而会增加复杂性。

但随着前端的逐步发展以及前后端分离的开发趋势,现阶段的后端往往只提供数据,而不进行界面的构建和渲染,这样的好处就在于后端不必再给Web端提供专门的开发,而只需和手机客户端一样只提供接口和数据,让后端真正负责后台应该做的事情——处理业务逻辑、并发、分布式、缓存等等。这就要求前端处理更多的逻辑和渲染的工作,这是一个方面。另一方面,随着Google Mail Web版的横空出世,其与PC版几乎无异的流畅操作体验第一次把单页面应用(Single Page Application)带入人们的视线。于是,前端又有更多的事情要做了——路由、状态、本地存储、复杂动画。。。我们也把单页应用成为Web App,和iOS App、Android App等是平等的关系,开发的复杂程度也日趋接近。

所以,正如“人民日益增长的物质文化需求和落后的生产力之间的矛盾一样”,Web前端日益增长的需求和落后的开发标准和体验之间的矛盾,促使W3C标准的快速发展,从HTML5新增标签(也是组件的一种),到编程语言的发展ES5、ES6,以及Web的组件化标准Web Component`=,Web标准在一步一步走向完善,EmacScript更是加快到一年更新一个新版本。标准的制定是一回事,浏览器厂商的支持程度又是另一回事,目前的情况就是,虽然浏览器厂商积极的跟进Web标准,但距离主流浏览器完全实现还是有一定的距离,譬如组件化标准Web Components虽然很早提出但现在还没有定案。

正因为浏览器对组件化的支持程度不足,所以诞生了一系列的支持组件化的前端框架——Angular Directives、Ember Components、React Components、Vue.js Components等等,解决了前端开发的燃眉之急!


 

一、MV* 框架和库

1、Angular JS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,兼容主流浏览器,与 jQuery 配合良好。

澳门新浦京娱乐场网站 3

DEMO

2、React.js

React.js(React)是 Facebook 推出的一个用来构建用户界面的 JavaScript 库。已经应用于构建 Instagram 网站及 Facebook 部分网站。

澳门新浦京娱乐场网站 4

DEMO

3、Vue.js

Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。

澳门新浦京娱乐场网站 5

DEMO

4、Ember.js

Ember 是一个雄心勃勃的 Web 应用程序,消除了样板,并提供了一个标准的应用程序架构的 JavaScript 框架。

澳门新浦京娱乐场网站 6

DEMO

5、Backbone.js

Backbone.js 是一种重量级 javascript  MVC 应用框架,通过 Models 进行 key-value 绑定及 custom 事件处理,通过 Collections 提供一套丰富的 API 用于枚举功能,通过 Views 来进行事件处理及与现有的 Application 通过 RESTful JSON 接口进行交互。

澳门新浦京娱乐场网站 7

DEMO:

6、Meteor

Meteor 是一组新的技术用于构建高质量的 Web 应用,提供很多现成的包,可直接在浏览器或者云平台中运行。

澳门新浦京娱乐场网站 8

DEMO

7、regularJS

看到 regular 的名字就能感受到扑面而来的山寨味,但 regularjs 的出现绝不仅仅是作者造轮子情绪泛滥的结果。在 angular 大行其道的时期也激励产生了很多优秀框架,如 vue.js、avalon.js、reactive 等,而 regular 正是在这种百花齐放的时候产生,最终在实现上采取了angular的数据更新策略,提倡极致的声明式和裸数据操作, 依赖于基于字符串的模板描述结构结合更规范性的类式继承的组件体系来定义数据层的业务逻辑。

澳门新浦京娱乐场网站 9

DEMO

8、T3.js

T3js(t3.js)与 MVC 框架不同,T3 是建立在可伸缩 JavaScript 应用体系结构的概念之上来创建松耦合、少模型的系统,以此来创建大型 JavaScript 应用。

澳门新浦京娱乐场网站 10

DEMO

9、Knockout.js

Knockout 是个JavaScript library,帮助创建丰富的显示和编辑器 UI,通过干净的底层数据模型。你可以在任何时候动态更新 UI 的选择部分。

澳门新浦京娱乐场网站 11

DEMO

10、Spine.js

Spine.js 是一个用于构建 JavaScript Web 应用的轻量级框架Spine 可让你使用 MVC 的框架思路来开发Web应用。

DEMO

二、探索

正是由于当下有这些不如意的现状,所以我就一直在思考,有没有什么办法可以做出改变,不一定是大跨越式的一步到位,至少能指明柳暗花明的另一条路。

我们还是拿时间选择器举例,想想看,HTML5有没有为我们带来native的UI组件?对吧,有的,应该都知道的:

<input type="date" >

1
<input type="date" >

date类型的input输入框,天然可以选择时间。
澳门新浦京娱乐场网站 12

我们可以使用min/max属性限制可以选择的时间范围,使用value确定当前选择日期。也就是说,从原始功能角度而言,原生的date时间选择可以满足绝大多数的业务需求。

这些符合标准,业界规范的HTML特性要是可以直接在实际项目中应用该多好啊!

然而,问题在于,浏览器原生的界面往往跟我们站点的设计风格有些不协调,说白了,就是设计师觉得丑,而且不能自由定义某些功能,例如清除。

还有一个很现实的问题是兼容性,包括IE11在内的IE浏览器都没有type="date"组件行为,澳门新浦京娱乐场网站 13 这个补刀直接剐在了心头。

怎么办呢?

我们此时不妨梳理下:

<input type="date" min="2016-01-01" max="2016-12-31" value="2016-02-14"/>

1
<input type="date" min="2016-01-01" max="2016-12-31" value="2016-02-14"/>

type/min/max/value这些原生标准的HTML属性并没有问题,有问题的只是点击出现的那个长相简陋的选择浮层。所谓对症下药,哪个有问题就搞哪个,我们只要想办法把丑陋的浮层搞漂亮就可以了。

考虑到兼容性,我们其实可以和传统的时间选择器组件一样,对浮层内容进行自定义,注意,我们仅自定义浮层,HTML还是原始的。

我们构建一个名叫DateTime的实例方法,理想状况下,我们只要绑定初始化一下,类似这样:

new DateTime($("[type=date]");

1
new DateTime($("[type=date]");

然后duang,时间选择器浮层直接美化成设计师需要的模样,那该多完美啊!

梦想总是有的,万一实现了呢?

既然使用自定义的浮层,那就需要干掉浏览器原生的浮层,怎么弄呢?我们可以让inputreadonly只读,这样,就不会出现原始的输入框了。

input框内置的三角(需要隐藏)和斜杠(需要使用短横)该怎么办呢? 这部分是支持自定义的,类似:

::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-calendar-picker-indicator { display:none; } [type="date"]::-webkit-datetime-edit-text { color: transparent; } [type="date"]::-webkit-datetime-edit-text::before { content: '-'; position: absolute; } ::-webkit-datetime-edit-text, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-ampm-field { background: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
::-webkit-clear-button,
::-webkit-inner-spin-button,
::-webkit-calendar-picker-indicator {
  display:none;
}
[type="date"]::-webkit-datetime-edit-text {
  color: transparent;
}
[type="date"]::-webkit-datetime-edit-text::before {
  content: '-';
  position: absolute;
}
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-year-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute-field,
::-webkit-datetime-edit-ampm-field {
  background: none;
}

就可以把webkit下的时间输入框改造成我们想要的样子了,而IE等不支持date输入框的浏览器,保持原来的样子就可以。

于是乎,通过CSS和JS的配合,我们就可以实现基于原生HTML5标准的时间选择器了。

“稍等,怎么就实现了?”有人可能会有这样的疑问。

下面这段是我年轻时候使用过的一套组件库的初始化示意:

new DatePicker($("#date"), { type: "date", initDate: .., beginDate: .., endDate: .., onSelected: $.noop });

1
2
3
4
5
6
7
new DatePicker($("#date"), {
  type: "date",
  initDate: ..,
  beginDate: ..,
  endDate: ..,
  onSelected: $.noop
});

对比:

<input type="date" min="2016-01-01" max="2016-12-31" value="2016-02-14">

1
<input type="date" min="2016-01-01" max="2016-12-31" value="2016-02-14">

我们是不是可以找到之间的关系?没错,这位同学好生眼力,HTML中的type属性对应JS中的type API, value澳门新浦京娱乐场网站:的开源功能插件和框架小集锦,html5时间选择器。属性值对应initDate值, min/max分别对应beginDate/endDate。其实内部实现跟传统的组件没什么差别。

onSelected呢?onSelected是个回调方法,解读下就是当选择日期之后,干嘛干嘛。其实我们原生的input框有类似的事件,什么呢?change事件。既然,我们这里使用的是原生的HTML输入框,那我们就可以使用其原生的change事件。所以,什么onSelected回调,完全不需要。我们只要在组件内部,当赋值的同时trigger下原生的change事件。

于是乎,我们就得到了一个HTML是原生,API也是原生,事件也是原生,UI自定义的时间选择控件。真真切切将HTML5应用到了实际项目中,同时,就算是是10年前的IE6也是可以兼容。

完美!

然而,一定会有小伙伴提出质疑,你这个功能也太局限了吧,如果遇到特殊需求,例如,所有的周末都不能选择,你怎么整?

OK,此时就需要“面向设计的半封装web组件开发”的这篇文章出马了?

之所以有人会提出上面的质疑,还是按照了传统组件的思维方式去思考。没错,确实有些项目的时间组件要求周末不能选择。但是,你现在做的这个项目,有这个需求吗?你好好想想。

CSS3现在发展越来越成熟,UI层的变化越来越迅速和不可预知,这种趋势,要求我们的UI组件要轻快,灵活,随时可以根据上层变化做调整。而那种妄图考虑各种场景,代码又大又冗余的组件开发方式已经越来越不适应未来的潮流了。

如果你真的遇到“周末都不能选择”的需求,我告诉你怎么办?自定义一个名为”date-no-weekend“的type类型,内部的JS代码当然该重用的重用,该模块化的模块化:

<input type="date-no-weekend"/>

1
<input type="date-no-weekend"/>

还是觉得难以接受,仔细品味后面这句话:组件要面向设计,落地项目,追求品质。

好,我们现在实现了基于HTML5时间选择组件落地实践生产,加以推广,势必对HTML5标准在国内的学习与普及带来帮助。

然而,就单单一个组件,势单力薄,怕是针落大海,激不起一点水花,其他些组件是不是也可以找这种面向HTML的思路去开发呢?

有!

告诉大家,QQ公众平台的UI组件体系贯穿始终,就是基于面向HTML标准开发的思想实现,同时借助面向设计的开发思想,让组件极致体验,同时轻便快捷,风一吹就可以飞到天上去。

组件化的优势

下面以Vue组件为例,展示一下组件化开发的优势

作为开发者,我们需要了解一些宝贵的UI开源框架资源,它们可以帮助我们更快更好地实现一些现代化的界面,包括一些移动设备的网页界面风格设计。本文汇总了目前18个公认的世界顶级UI开源框架(附官网、Github以及各自的教程),欢迎大家学习使用。

 

二、UI 库

1、Bootstrap

Bootstrap 是快速开发 Web 应用程序的前端工具包。它是一个 CSS,HTML 和 JS 的集合,使用了最新的浏览器技术,给你的 Web 开发提供了时尚的版式,表单,buttons,表格,网格系统等等。

澳门新浦京娱乐场网站 14

DEMO

2、Semantic UI

Semantic UI — 完全语义化的前端界面开发框架,跟 Bootstrap 比起来,还是有些不同的,在功能特性上、布局设计上、用户体验上均存在很多差异。

澳门新浦京娱乐场网站 15

DEMO

3、ZUI

ZUI 是禅道项目管理软件团队在完善自己产品过程中形成的一个开源前端实践方案,它具有简单美观,易于使用,轻快独立稳定等特点,比较适合中文环境。

澳门新浦京娱乐场网站 16

DEMO

4、Layui 

Layui 是一款带着浓烈情怀的国产前端UI框架,她追求极简,又不失丰盈的内在,说她是史上最轻量的结晶,似乎并不为过。一切都源自于她对原生态的执着,对前端社区的那些噪杂声音的过滤,以及她本身的精心雕琢。

澳门新浦京娱乐场网站 17

DEMO

5、Amaze UI

Amaze UI 是中国首个开源 HTML5 跨屏前端框架,旨在帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的前端开发者不再受前端复杂代码困扰。

澳门新浦京娱乐场网站 18

DEMO

6、Flat UI

Flat UI 是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap 实现。这套界面工具包含许多基本的和复杂的 UI 部件,例如按钮,输入框,组合按钮,复选框,单选按钮,标签,菜单,进度条和滑块,导航元素等等。

澳门新浦京娱乐场网站 19

DEMO

7、Masonry

Masonry 是一 个用来布局的 jQuery 插件,看了下面这张对比图你就知道它的用途:

澳门新浦京娱乐场网站 20

DEMO

8、qooxdoo

qooxdoo 是一个用于开发 Ajax 应用程序的 GUI 框架,使用它可以开发出类似于 Window 桌面风格的 Web 应用程序。

DEMO

三、实践

QQ公众平台的UI组件实现,和传统实现是完全不同的设计思想。从JS层进一步往下沉淀了一个层次,基于原生的HTML实现。

多说无益,眼见为实(狠击下面)。

demo-点击这里-demo

点击上面的demo, 进入一个平凡的静态页面,引入眼帘的是一个普通的表单,里面的UI都是系统默认的,HTML功能也是原生的。

例如:

  • title提示
    澳门新浦京娱乐场网站 21
  • 选择日期
    澳门新浦京娱乐场网站 22
  • 点击提交的表单验证
    澳门新浦京娱乐场网站 23

UI虽然原始,但是功能却是很健全的。

例如:

  • 男女款式、城市以及运费险对价格的影响
    澳门新浦京娱乐场网站 24
  • 表单提交事件
    澳门新浦京娱乐场网站 25

下面,见证奇迹的时刻到了,点击demo页面(下图所示)的按钮进行QQ公众平台UI组件资源的加载和初始化:

澳门新浦京娱乐场网站 26

结果,一瞬间,上面原始粗糙的界面一下子变成了这样子:
澳门新浦京娱乐场网站 27

妥妥的丑小鸭变成了白天鹅,包括之前原生的HTML功能。

例如:

  • title提示
    澳门新浦京娱乐场网站 28
  • 选择日期
    澳门新浦京娱乐场网站 29
  • 点击提交的表单验证
    澳门新浦京娱乐场网站 30

而,最最重要,和最最神奇的事情是:我们仅仅是引入了QQ公众平台的UI组件,对,仅仅是引入和一点初始化,没有动之前一点点一丝丝的业务JS. 但是,之前的各种交互功能,却完全不受影响,反而体验更上两层楼!

请看下面的gif截图演示:
澳门新浦京娱乐场网站 31

真是一场意外之旅,发现没,面向HTML开发,实际上不是简单推动了HTML5等现代web技术落地实践,对我们的开发流程等也带来了巨大帮助——UI组件可以和业务JavaScript完全分离,可以实现无缝对接。就是因为整个组件体系基于原生HTML开发的设计理念,让UI组件回归了其本质或者说本职作用——UI.

1.可扩展

通过组件之间的合理组合搭配,可以构建出满足业务需求的新组件。
这一点很好理解,举个例子,我们有一个基础的树形组件treetree-node,现在来了一个业务需求,需要开发一个人员/机构的选择器,那么我们就可以很方便的基于我们的tree组件进行扩展,创建一个新的组件xx-selector

// xx-selector.vue
<template>
  <list :data="selectedData" /> // 已选列表
  </selected>
  <tree :data="treeData"  onSelect="onSelect">
    <template slot="treeNode">
      ...custom ui here
    </template>
  </tree> 
</template>

<script>
  import tree from ./tree.vue
  import list from ./list.vue
  module.exports = {
    data:{
      treeData:[],  
      selectedData:[]
    },
    created:function(){
      this.init()
    }
    methods:{
      onSelect:function(selected){
        this.selectedData = selected
        this.$emit('onSelectedChange',selected)
      },
      initData:function(){
        // ajax请求获取人员信息
      }
    }
  }
</script>

我们在逻辑代码部分加上诸如请求人员信息的接口、响应用户点击事件、响应全选/反选事件等等,这样就组成了一个功能完备的人员选择器组件。

  1. Bootstrap

HTML5日期输入类型(date)

 

分享

 

分享

 

分享

 

分享

 

分享

在很多页面和web应用中都有输入日期和时间的地方,最典型的是订飞机票,火车票,酒店,批萨等网站。

在HTML5之前,对于这样的页面需求,最常见的方案是用Javascript日期选择组件。这几乎是无可争议、别无选择的做法。你可以在搜寻一下 “javascript 日期选择框”,会发现有无数的可选择的JavaScript组件。大部分这些日期选择组件都提供将日期填充到指定的输入框里的功能。

HTML5里的dateinput类型给了给了浏览器实现原生日历的机会,从此之后,JavaScript版的日历组件将退出历史舞台。

HTML5规范里只规定date新型input输入类型,并没有规定日历弹出框的实现和样式。所以,各浏览器根据自己的设计实现日历。
目前只有谷歌浏览器完全实现日历功能。相信这种局面很快就会结束,所有的浏览器最终都将会提供原生的日历组件。

如果你使用的是谷歌浏览器,那你就可以在下面的实例演示中看到这个漂亮的日期组件。用鼠标点击输入框,就能看到浏览器原生的日历框。

约会日期:

如果你当前使用的浏览器还没有实现日历组件,下面的图片你可以先睹为快。

澳门新浦京娱乐场网站 32

无需任何的JavaScript,它变成了一个最基本的input类型 <input type=”date”/>

<label for="meeting">约会日期:</label><input id="meeting" type="date" value="2014-01-13"/>

HTML5让Web程序员的工作变得异常简单,不是吗?不仅如此,我们得到的不仅仅只有一个“日期”类型的input,还有一系列相关的日期、时间 参数让我们自定义。我们虽然称之为“日期”类型,但这里的type实际上是可以为“date”、“week”、“month”、“time”、 “datetime”和“datetime-local”。下面我将用实例加图文的方式向大家演示各种type的外观表现。

需要提醒的是,下面的截图都是在谷歌浏览器中效果,其它浏览器中显示的样子会稍有不同,但功能会是一样的。

三、编辑器

1、Editor.md

Editor.md 是一个可嵌入的开源 Markdown 在线编辑器组件,你可以很方便用在浏览器、NW.js(Node-webkit)等地方,基于CodeMirror、jQuery 和 Marked 构建。

澳门新浦京娱乐场网站 33

DEMO

2、CodeMirror

CodeMirror 是一款“Online Source Editor”,基于Javascript,短小精悍,实时在线代码高亮显示,他不是某个富文本编辑器的附属产品,他是许多大名鼎鼎的在线代码编辑器的基础库。

澳门新浦京娱乐场网站 34

DEMO

3、TinyMCE

TinyMCE 是一个轻量级的基于浏览器的所见即所得编辑器,支持目前流行的各种浏览器,由 JavaScript 写成。功能配置灵活简单(两行代码就可以将编辑器嵌入网页中),支持 AJAX。另一特点是加载速度非常快,如果你的服务器采用的脚本语言是 PHP,那还可以进一步优化。

DEMO

4、Summernote 

Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。

澳门新浦京娱乐场网站 35

DEMO

5、CKEditor

CKEditor 是新一代的 FCKeditor,是一个重新开发的版本。CKEditor 是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。

DEMO

6、ContentTools

ContentTools 是一个用于构建 HTML 内容的 WYSIWYG 编辑器的 JS 库。

澳门新浦京娱乐场网站 36

DEMO

四、优势

下面总结下面向HTML的UI组件开发的优势。

1. HTML/CSS侧的现代产物落地实践
基于HTML标准来开发我们的UI组件,通过技术跨越各种兼容问题,使得我们前端技术在HTML层也乘上了现代web技术的快车,标准的HTML5规范和属性提前很多年在广受众的传统PC页面呈现,我觉得是非常有意义的一件事情。

2. 规避了传统组件的很多问题

  1. 更强的语义化,可访问性,SEO等;
  2. 学习和使用成本低;
  3. 专注HTML控件本身,而不是组件;
  4. 可以一次性全局处理;

①. 语义化,可访问性

毕竟是基于原生HTML来开发的,这一块必定杠杠的。

例如,时间选择:

<input type="date">

1
<input type="date">

显然语义要比下面的text类型要好:

<input type="text">

1
<input type="text">

又如基于checkbox/radio类型的input框模拟的单复选框自然要比传统div元素模拟的无论是语义、设备可访问性都要高很多。

②. 更低的学习和使用成本

不会出现类似GregorianCalendar, GregorianCalendarFormat一眼不知道干嘛的对象和方法。

不需要记住类似showWeekNumber, showClear, showToday, disabledDate这样千差万别的JS API名称,记住标准的HTML5属性即可,只要记住一次,终身受用,放心,不会变的,HTML5文案已经定稿了。

而学习成本低对于跨团队合作非常有帮助。你说kissy上手快,还是只需要写写标准HTML就OK上手快!

其他团队同学乐于使用你的东西,介入快,实现效果好,大家都开心。反之,API千差万别,每次使用都要去翻文档,肯定影响合作。

不过,实践下来,有一点学习成本我没考虑到,就是转换思维方式的学习成本。实际上只要面向元素的HTML元素开发就可以了,但是有遇到小伙伴,还是按照老的思维方式,在生成的UI组件元素上做文章。 澳门新浦京娱乐场网站 37

③. 专注HTML控件本身,而不是组件

举个例子,日期选择器,当日期修改了,我们要干嘛干嘛,直接:

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

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

想要修改日期范围,直接:

$("input").attr({ "min": "2015-12-27", "max": "2016-12-27" });

1
2
3
4
$("input").attr({
  "min": "2015-12-27",
  "max": "2016-12-27"
});

UI组件会自动同步。没有任何组件相关的JS代码,也没有什么故弄玄虚,没有所谓的高屋建瓴,全是很简单基础的HTML操作。是不是这样的开发反而很省心,连小白用户也能上手?

于是乎,在多团队联合协作开发的时候,前端开发的进度并不会受UI组件开发影响,面向HTML,专心自身业务开发就可以了。

负责组件开发的前端去休陪产假了,负责业务的前端,直接按照标准的HTML控件元素是实现自己的业务逻辑,什么回调啊都直接使用原生的事件和方法。等负责组件开发的前端,回来了,哪怕拖了个把星期,只要组件完成,公共JS一初始化,业务JS没有任何修改,无缝对接。

于是乎,实现了一个听上去很了不得的东西:前端分离

这对于整个开发流程和效率也带来了巨大的提升。

不仅如此,厂子里有很多开发,负责内部项目,会写JS擅长业务功能实现,但是,UI这块是个软肋。OK,此时,我们这里面向HTML开发的UI组件体系就是其救星,对吧,直接引入CSS和JS,简单全局初始化一下(可能还有一些简单的微调),结果,页面立马高大上了,是不是很有用!

④. 可以一次性全局处理

传统实现,每个具体业务的脚本里面要参与UI组件的具体API参数设置。而面向HTML的实现,API落地与具体的业务页面,于是乎,只要在项目的common.js中全局初始化一下,如下拉Select.init(), 具体的业务JS文件(绝大多数情况下)中就无需再出现UI组件相关的JS代码。

UI层的JS代码和业务层JS代码分离,实现进一步的「前端分离」,去耦合。对于日后的维护、升级等要比传统组件更轻松。

2.可复用

澳门新浦京娱乐场网站,刚才的xx-selector组件就复用到了基础的tree组件和tree-node组件。同样的道理,我们开发的xx-selector人员选择器组件,可以在任何有同样需求的地方重复使用,可以成为一个专属你们开发团队的一个基础组件,减少了开发量。

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

1. 日期(<input type=”date”/>)

这是最基本的日期选择器,你只能从日历中选择某个日期。

请选择日期:

截图:
澳门新浦京娱乐场网站 38

四、测试工具

1、Mocha

Mocha 是一个简单、灵活有趣的 JavaScript 测试框架,用于 Node.js 和浏览器上的 JavaScript 应用测试。Mocha 是具有丰富特性的 JavaScript 测试框架,可以运行在 Node.js 和浏览器中,使得异步测试更简单更有趣。Mocha 可以持续运行测试,支持灵活又准确的报告,当映射到未捕获异常时转到正确的测试示例。

澳门新浦京娱乐场网站 39

DEMO

2、Karma

Karma 是一个简单的 javascript 测试工具,它允许在多个真正的浏览器执行 JavaScript 代码。

DEMO

3、CasperJS

CasperJS 是一个开源的导航脚本和测试工具,使用 JavaScript 基于 PhantomJS 编写,用于测试 Web 应用功能,Phantom JS是一个服务器端的 JavaScript API 的 WebKit。其支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。

DEMO

4、Jasmine

Jasmine 是一个简易的JS单元测试框架。Jasmine 不依赖于任何浏览器、DOM、或者是任何 JavaScript 而存在。它适用于所有网站、Node.js 项目,或者是任何能够在 JavaScript 上面运行的程序。 

澳门新浦京娱乐场网站 40

DEMO

5、Selenium

Selenium (SeleniumHQ) 是 thoughtworks 公司的一个集成测试的强大工具,现在存在2个版本,一个叫  selenium-core, 一个叫 selenium-rc 。

澳门新浦京娱乐场网站 41

DEMO

6、Chai

Chai 是一个针对 Node.js 和浏览器的行为驱动测试和测试驱动测试的诊断库,可与任何 JavaScript 测试框架集成。

DEMO

7、SlimerJS

SlimerJS 是一个提供给 Web 开发人员,可通过脚本编程控制的浏览器。它可以让你使用 Javascript 脚本操纵一个网页:打开一个网页,点击链接,修改的内容等,这对于做功能测试,页面自动机,网络监控,屏幕捕获等是非常有用的。

澳门新浦京娱乐场网站 42

DEMO

8、Phantom JS

Phantom JS 是一个服务器端的 JavaScript API 的 WebKit。其支持各种 Web 标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。

澳门新浦京娱乐场网站 43

DEMO

五、结果

面向HTML的UI组件开发贯穿于整个QQ公众平台UI组件体系。包括上面没出现过的range范围选择,自定义滚动效果等等。

从实践的结果来看,前端同事啧啧称赞过(功能层),我们设计中心这边leader希望这套可以推到其他team去(体验层)。

大家有兴趣,不妨速度加入QQ公众平台,也来体验下,欢迎反馈以及提出宝贵意见。

3.高内聚/低耦合

在我们使用xx-selector组件时,我们无需关心该组件内部的实现细节,我们只需要监听它暴露出来的onSelectedChanged(selectedList)事件,这个事件在选中人员发生改变时触发,把已选人员列表selectedList传递我们——我们使用选择器,所该关心就只是已选列表而已。

// my-app.vue
<template>
  <xx-selector onSelectedChanged="selectorChanged">
</template>
<script>
  import xx-selector from ./xx-selector.vue
  module.exports = {
    data:{ },
    methods:{
      selectorChanged:function(selected){
        // 处理已选
      }
    }
  }
</script>

这样就实现了

  • 组件内部高度内聚——只给外部提供功能,对外部的修改关闭
  • 组件之间低耦合——组件与组件只需要监听事件、触发事件,子组件不依赖与父组件

Github:

2. 周(<input type=”week”/>)

这时,你选择的就不是一个日期了,而是周。请注意周数显示的方式。

请选择周:

截图:
澳门新浦京娱乐场网站 44

五、CMS 

1、DoraCMS

DoraCMS 是基于 Nodejs express mongodb 编写的一套内容管理系统,其结构清晰、模块简单,上手很容易。

澳门新浦京娱乐场网站 45

DEMO

2、Cody

Cody 结合了 Nodejs 和 CMS,是基于 JavaScript 的内容管理系统。作者有超过15年的CMS开发经验,在用户体验和性能上都做得很好,有很大的潜力。

澳门新浦京娱乐场网站 46

DEMO

3、Apostrophe

Apostrophe 是一个基于 Node.js 开发的内容管理系统,核心模块提供了丰富的内容编辑功能,提供一个必须的服务用来跟你的 Express 应用绑定。

澳门新浦京娱乐场网站 47

DEMO

4、Ghost

Ghost 是一个开源的博客平台, 可以把他看作 WordPress 的一个挑战者。Ghost 基于 JavasSript 的 Node.js 进行开发,在可预见的未来里,JS 无疑比 PHP 有着更多的优势。

DEMO

5、KeystoneJS

KeystoneJS 是以 Express 和 MongoDB 为基础搭建的 Node.js CMS 和 Web 应用程序平台。

DEMO

六、结语

一个type="date"input框实际上就是一个终极的Web Components,一小段`就是一个可以被import`的模块,然后就可以出现界面复杂的组件效果(shadow DOM),而API就是HTML的原生属性。

QQ公众平台UI组件离Web Components到底有多远?如果说传统的web组件距离是1条长安街的话,那QQ公众平台UI组件只有0.5条长安街的距离。

HTML和API利用了原生的Web Components模式,非Web Components模式的仅仅是自定义的浮层这一块,但是,设计思想和思路都是朝着Web Components模式前进的。

换句话说,虽然无法一步直达Web Components,但是,我们可以利用HTML的发展,通过一些策略和设计,对UI组件进行一些变革,让其在朝着Web Components前进的道路上迈出一大步。

本文主讲设计思想,至于具体的技术细节,以后有机会会慢慢分享,能够讲的点非常非常多,越是简单的成品越是需要足够的积累。

以上,希望本文的内容能够对大家有一点启示。

1 赞 1 收藏 评论

澳门新浦京娱乐场网站 48

组件化的问题

正如《人月神话》中说到的——没有银弹,在软件工程中没有任何方法是完美的,组件化也有它的缺点,最明显的一点就是,当组件之间存在复杂和频繁的交流时,每一个组件都有可能修改系统的状态,由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也逐渐增长。

澳门新浦京娱乐场网站 49

父子组件直接通信.png

通常在遇到这种情况的时候,Flux架构能较好的解决这种问题,通过单向数据流和统一的状态管理实现组件之间的依赖解耦。此时组件之间不再直接通信,而是通过修改共享的状态,去影响其他组件,间接得实现通信。这种方式在组件数量多、层次多时可以有效的降低复杂度。

澳门新浦京娱乐场网站 50

Flux间接通信统一状态管理.png

中文教程:http://w3schools.wang/bootstrap/bootstrap_tutorial.html

3. 月份(<input type=”month”/>)

这时你选择的是月份,跟“date”类型比起来少了后面的日子数。

请选择月:

截图:
澳门新浦京娱乐场网站 51

六、表格/网格

1、DataTables

DataTables 是一个 jQuery 的表格插件。这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何 HTML 表格。

DEMO

2、jqGrid

jqGrid 是一个用来显示网格数据的jQuery插件,文档比较全面,附带中文版本。

DEMO

3、jTable 

jTable 是一个 jQuery 插件用来创建基于 Ajax 的 CRUD 表格,无需进行 HTML 和 JavaScript 编码。

DEMO

4、ParamQuery

ParamQuery 是一种轻量级的 jQuery 网格插件,基于用于用户界面控制、具有一致 API 的优秀设计模式 jQueryUI Widget factory 创建,能够在网页上展示各种类似于 Excel 和 Google Spreadsheet 效果的网格。

DEMO

 

作者:开源中国-达尔文

  1. Semantic-ui

4. 时间(<input type=”time”/>)

这是最简单的一种显示,没有日历,只能选择时间。

请选择时间:

截图:
澳门新浦京娱乐场网站 52

Semantic 是一个为主题化而设计的UI框架。主要特点:50 UI 元素;3000 CSS 变量;3 级变量继承(和 SublimeText 类似);用 em 作为单位构建以实现响应式设计;Flexbox 友好。

5. 日期 时间(<input type=”datetime”/>)

既显示日期组件,又显示时间组件,其实就是“date”类型和“time”类型的组合。

请选择日期和时间:

截图:
澳门新浦京娱乐场网站 53

官网:

6. 本地日期时间(<input type=”datetime-local”/>)

顾名思义,就是用本地时间显示。

请选择日期和时间:

截图:
澳门新浦京娱乐场网站 54

除了上面这些类型为,日期输入类型还有一些其它属性需要注意。

 

属性 描述
这是HTML里input元素的通用属性。就是输入框里的数据。
min 日期或时间的最小值
max 日期或时间的最大值
step 步长。不同的类型有不同的缺省步长。
  • Date – 缺省是1天
  • Week – 缺省是1周
  • Month – 缺省是1月
  • Time – 缺省是1分钟
  • DateTime – 缺省是1分钟
  • Local DateTime – 缺省是1分钟

Github:

  1. Foundation

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。

官网:

Github:

  1. Materialize

一个基于 Material Design 的 CSS 框架。

官网:

Github:

  1. Material-ui

集成 Google Material 设计的 React 组件。

官网:

Github:

  1. Phantomjs

PhantomJS 是一个基于 WebKit 的服务器端 JavaScript API。它全面支持web而不需浏览器支持,其快速,原生支持各种Web标准: DOM 处理, CSS 选择器, JSON, Canvas, 和 SVG。 PhantomJS 可以用于 页面自动化 , 网络监测 , 网页截屏 ,以及 无界面测试 等。

官网:

Github:

  1. Pure

Pure.css是美国雅虎公司出品的一组轻量级、响应式纯css模块,适用于任何Web项目。

官网:

GitHub:

中文教程:

  1. Flat-ui

Flat UI是基于Bootstrap做的Metro化改造,由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件,但是外观更加漂亮。Flat UI Flat UI是一套精美的扁平风格 UI 工具包,基于 Twitter Bootstrap 实现。

官网:

Github:

  1. Jquery-ui

jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。无论您是创建高度交互的 Web 应用程序还是仅仅向窗体控件添加一个日期选择器,jQuery UI 都是一个完美的选择。

官网:

Github:

  1. React-bootstrap

基于 React 的 Bootstrap 3 组件。

官网:

Github:

  1. Uikit

Uikit 是一款轻量级、模块化的前端框架,可快速构建强大的web前端界面。

官网:

GitHub:

中文教程:

  1. Metro-ui-css

Metro UI CSS 是一套用来创建类似于Windows 8 Metro UI风格网站的样式. 这组风格被开发成一个独立的基于Bootstrap的解决方案。

官网:

Github:

  1. Iview

iView 主要服务于 PC 界面的中后台业务,是一套高质量的开源 UI 组件库。主要特性:使用单文件的 Vue 组件化开发模式;基于 npm webpack babel 开发,支持 ES2015;高质量、功能丰富;友好的 API ,自由灵活地使用空间;详细、友好的文档,事无巨细。

官网:

Github:

  1. Layui

Layui 是一款采用自身模块规范编写的国产前端UI框架,遵循原生HTML/CSS/JS的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发。

官网:

Github:

  1. Mui

MUI 是一个轻量级的CSS框架,遵循Google的Material Design设计方针。

官网:

Github:

  1. Frozenui

Frozen UI是一个开源的简单易用,轻量快捷的移动端UI框架。基于手Q样式规范,选取最常用的组件, 做成手Q公用离线包减少请求,升级方式友好,文档完善,目前全面应用在腾讯手Q增值业务中。

官网:

Github:

  1. AlloyUI

AlloyUI是一个基于YUI3(JavaScript)的框架,它使用Bootstrap 3(HTML / CSS)为构建高可扩展应用程序提供了一个简单的API。

官网:

Github:

  1. W3.CSS

W3.CSS是一个响应式的现代CSS框架。W3.CSS比其他CSS框架更小更快(大小仅为29K),比其他CSS框架更容易学习,更易于使用。

教程:http://w3schools.wang/w3css/w3css_tutorial.html

本文由 【W3C中文教程】 发表。转载此文章须经 【W3C中文教程】 同意,并请附上 W3C中文教程 及 原文链接:http://w3schools.wang/report/top-UI-open-source-framework-summary.html

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站:的开源功能插件和框架