array(2) { ["docs"]=> array(10) { [0]=> array(10) { ["id"]=> string(3) "428" ["text"]=> string(77) "Visual Studio 2017 单独启动MSDN帮助(Microsoft Help Viewer)的方法" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(8) "DonetRen" ["tagsname"]=> string(55) "Visual Studio 2017|MSDN帮助|C#程序|.NET|Help Viewer" ["tagsid"]=> string(23) "[401,402,403,"300",404]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400964" ["_id"]=> string(3) "428" } [1]=> array(10) { ["id"]=> string(3) "427" ["text"]=> string(42) "npm -v;报错 cannot find module "wrapp"" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "zzty" ["tagsname"]=> string(50) "node.js|npm|cannot find module "wrapp“|node" ["tagsid"]=> string(19) "[398,"239",399,400]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400760" ["_id"]=> string(3) "427" } [2]=> array(10) { ["id"]=> string(3) "426" ["text"]=> string(54) "说说css中pt、px、em、rem都扮演了什么角色" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(12) "zhengqiaoyin" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511400640" ["_id"]=> string(3) "426" } [3]=> array(10) { ["id"]=> string(3) "425" ["text"]=> string(83) "深入学习JS执行--创建执行上下文(变量对象,作用域链,this)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "Ry-yuan" ["tagsname"]=> string(33) "Javascript|Javascript执行过程" ["tagsid"]=> string(13) "["169","191"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511399901" ["_id"]=> string(3) "425" } [4]=> array(10) { ["id"]=> string(3) "424" ["text"]=> string(30) "C# 排序技术研究与对比" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "vveiliang" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(8) ".Net Dev" ["catesid"]=> string(5) "[199]" ["createtime"]=> string(10) "1511399150" ["_id"]=> string(3) "424" } [5]=> array(10) { ["id"]=> string(3) "423" ["text"]=> string(72) "【算法】小白的算法笔记:快速排序算法的编码和优化" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(9) "penghuwan" ["tagsname"]=> string(6) "算法" ["tagsid"]=> string(7) "["344"]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511398109" ["_id"]=> string(3) "423" } [6]=> array(10) { ["id"]=> string(3) "422" ["text"]=> string(64) "JavaScript数据可视化编程学习(二)Flotr2,雷达图" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "chengxs" ["tagsname"]=> string(28) "数据可视化|前端学习" ["tagsid"]=> string(9) "[396,397]" ["catesname"]=> string(18) "前端基本知识" ["catesid"]=> string(5) "[198]" ["createtime"]=> string(10) "1511397800" ["_id"]=> string(3) "422" } [7]=> array(10) { ["id"]=> string(3) "421" ["text"]=> string(36) "C#表达式目录树(Expression)" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(4) "wwym" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(4) ".NET" ["catesid"]=> string(7) "["119"]" ["createtime"]=> string(10) "1511397474" ["_id"]=> string(3) "421" } [8]=> array(10) { ["id"]=> string(3) "420" ["text"]=> string(47) "数据结构 队列_队列实例:事件处理" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(7) "idreamo" ["tagsname"]=> string(40) "C语言|数据结构|队列|事件处理" ["tagsid"]=> string(23) "["246","247","248",395]" ["catesname"]=> string(12) "数据结构" ["catesid"]=> string(7) "["133"]" ["createtime"]=> string(10) "1511397279" ["_id"]=> string(3) "420" } [9]=> array(10) { ["id"]=> string(3) "419" ["text"]=> string(47) "久等了,博客园官方Android客户端发布" ["intro"]=> string(288) "目录 ECharts 异步加载 ECharts 数据可视化在过去几年中取得了巨大进展。开发人员对可视化产品的期望不再是简单的图表创建工具,而是在交互、性能、数据处理等方面有更高的要求。 chart.setOption({ color: [ " ["username"]=> string(3) "cmt" ["tagsname"]=> string(0) "" ["tagsid"]=> string(2) "[]" ["catesname"]=> string(0) "" ["catesid"]=> string(2) "[]" ["createtime"]=> string(10) "1511396549" ["_id"]=> string(3) "419" } } ["count"]=> int(200) } 222 Unobtrusive Ajax 的两种境界 - 爱码网

王国维在《人间词话》说:古今之成大事业、大学问者,必经过三种之境界:

  1. 昨夜西风凋碧树。独上高楼,望尽天涯路。
  2. 衣带渐宽终不悔,为伊消得人憔悴。
  3. 众里寻他千百度,蓦然回首,那人却在,灯火阑珊处。

类似,在 Web 中使用 Ajax 也有境界之分,这里境界不指技能的高低,而是思想的成熟。

有一片关于 Unobtrusive Ajax 的著名文章,是 Jesse Skinner (80后,3~4岁就玩电脑)在06年10月发表的:http://www.thefutureoftheweb.com/talks/2006-10-ajax-experience/slides/

文中指出应当将 JavaScript (或其它脚本)从 Html 中分离出来,就像最初将样式从 Html 中分离出来一样道理。简单来说就是将嵌入在 Html 中的 JavaScript 全部取出来,放在单独的 js 文件中,页面中不要出现任何 onclick、onload 等。

使用 Unobtrusive Ajax 我们最大的收益就是简单易于维护的代码(Code is cleaner and easier to maintain)。

Jesse Skinner 将脚本分离(Separation)分成了两种:Physical Separation 和 Conceptual Separation 两种,也就是标题中所提的两种境界。如果没有进行脚本分离,只能算是个初学者,技术再高也谈不上境界。

Physical Separation

代码中没有任何 onclick、onload,就算达到这一境界了。

技术上比较容易实现,通过 jQuery 或其它 JavaScript Library 我们很容易进行做到:

$('#abc').click(function(){
    //...
});

这种分离,简化了页面,提高了页面代码的可读性。能做到这一步,是思想上的一种进步,也是 Web 开发开始走向成熟的第一步。

但这种分离只是初步的,只是将 JavaScript 移了下位置,并没有从根本上改变 HTML 和 JavaScript 之间的关系。

Conceptual Separation

这个境界可不容易了,要满足以下要求(源自 Jesse Skinner 的文章,翻译的可能不太准确):

  1. 网页内容和表单使用纯 HTML;
  2. 不借助 JavaScript,表单和超级连接也能正常使用;
  3. 页面外观完全由 CSS 控制,而不是 HTML(不要用 table 来布局) 或 JavaScript;
  4. 任何人都能通过任何设备(考虑不支持JavaScript的设备)访问;

说白了,就是没有 JavaScript,网站也能正常运行。这种分离其实是重新定义了 HTML 和 JavaScript 的分工:

  1. HTML 为主,JavaScript 为辅;
  2. HTML 不依赖于 JavaScript,可独立运行;
  3. JavaScript 仅用来增加页面效果。

要达到这种境界,要求开发时先不使用任何脚本,这样保证了 HTML 独立运行。然后在不影响 HTML 的前提下,逐步加入脚本,以增强页面效果。

之所以作为一个境界,是因为做到这一步是非常困难的,有时是不可能的(如:Google 地图),如果能做到,你也将受益匪浅:

  1. 没有脚本的干扰,网站调试更加简单;
  2. 更换网站动态效果像换肤一样简单,只需要引用另外一个脚本;
  3. 开发人员分工更加明确,前端开发与后台开发彻底分开,互不影响。

Unobtrusive Ajax 面临的挑战

现在是 2010 年 10 月了,离 Jesse Skinner 发表文章已经有四年时间了,这四年间 web 发生了巨大变化:

  1. Chorme 为代表的新一代浏览器的出现,JavaScript 运行效率越来越高,对新的 Web 标准(HTML5 和 CSS3 )支持也不断完善;
  2. 各种 JavaScript 类库的涌现和成熟,有和 Unobtrusive Ajax 同一战线的(jQuery、Prototype),也有站在对立面的如:ExtJS;
  3. 杂乱的 Web 控件很多,很多都是具有很强侵入性的;
  4. WebOS、在线 Office 等逐渐兴起,且对 JavaScript 依赖较强。

后计

从一开始接触到 Unobtrusive Ajax,我就感觉这是一种伟大的想法,并积极向 Conceptual Separation 的境界努力。当然 Unobtrusive Ajax 也有一定的适用范围,并不适用于所有的 Web 开发。

希望听听大家对 Unobtrusive Ajax 的看法,支持的也好,反对的也好,交流就是一种进步!

相关文章: