传送门

observejs:https://github.com/kmdjs/observejs

本文演示:http://kmdjs.github.io/observejs/list/

本文代码:https://github.com/kmdjs/observejs/tree/master/example/list

写在前面

javascript的编程体验一直被改善,从未停止过。从最早的Jscex(现在的windjs),改善异步编程体验。如今ES6的Generator改善异步编程体验。还有类似的seajs、requirejs提供极致的模块化开发体验;五花八门的Class.js改善面向对象编程体验;kmdjs同时改善模块化编程、面向对象编程和构建体验;各式各样的template.js改善数据->标记的体验。

所有的改善,使代码更直观、友好,使程序易维护、可扩展。

最近使用observejs开发组件,发现有几大优点:

  • Dom操作几乎绝迹
  • 专注于数据操作
  • 视图全自动更新
  • 性能棒棒的
  • 仅一行代码搞定上面四点

本文使用世界上最简单的List组件作为例子,大家通过该例子感受一下observejs组件开发改善之处。

组件代码

var List = function (option) {
this.option = option;
this.data = option.data;
this.parent = document.querySelector(this.option.renderTo);
this.tpl =
'<div class="list-group" style=" text-align: center;width:<%=typeof width === "number"?width+"px":width%>;" >'
+ ' <% for ( var i = 0, len = data.length; i < len; i++) { %>'
+ '<% var item = data[i]; %>'
+ '<a class="list-group-item <%=item.active ? "active" : ""%> <%=item.disabled ? "disabled" : ""%>" href="<%=item.href%>" target="<%=item.target?item.target:""%>"><%=item.text%><\/a>'
+ '<% } %>'
+ '<\/div>';
this.render();
//list.render建议使用debounce来控制执行频率提高性能,或者和react一样在下次执行requestAnimFrame的时候更新
observe(this, "option", this._debounce(this.render, 200));
}
List.prototype = {
render: function () {
if (this.node) this.parent.removeChild(this.node);
this.parent.innerHTML += this._tpl(this.tpl, this.option);
this.node = this.parent.lastChild;
},
clear:function(){
this.data.size(0);
},
remove:function(index){
this.data.splice(index,1);
},
add:function(item){
this.data.push(item);
},
edit:function(index,item){
this.data[index]=item;
},
disable:function(index){
this.data[index].disabled = true;
},
_tpl: function (str, data) {
var tmpl = 'var __p=[];' + 'with(obj||{}){__p.push(\'' +
str.replace(/\\/g, '\\\\')
.replace(/'/g, '\\\'')
.replace(/<%=([\s\S]+?)%>/g, function (match, code) {
return '\',' + code.replace(/\\'/, '\'') + ',\'';
})
.replace(/<%([\s\S]+?)%>/g, function (match, code) {
return '\');' + code.replace(/\\'/, '\'')
.replace(/[\r\n\t]/g, ' ') + '__p.push(\'';
})
.replace(/\r/g, '\\r')
.replace(/\n/g, '\\n')
.replace(/\t/g, '\\t') +
'\');}return __p.join("");', func = new Function('obj', tmpl); return data ? func(data) : func;
},
_debounce: function (func, wait, immediate) {
var timeout;
return function () {
var context = this, args = arguments;
var later = function () {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
},
}

ps:模版引擎来自GMU,当然你可以使用任何你喜欢的额模版引擎

组件使用

var list = new List({
data: [
{ text: "天下太贰", disabled: true, active: true },
{ text: "魔兽争霸", href: "##", target: "_blank" },
{ text: "魔兽世界" },
{ text: "坦克世界" },
{ text: "超级玛丽", disabled: true }
],
width: 150,
renderTo: "body"
})
list.edit(1,{text:"haha"})
list.add({ text: "aaaa" });
list.remove(2, 1);
list.disable(2);
list.remove(1);
//操作数据等于操作dom
list.data[0].text="aaaaaaa";

组件分析

其中仅需要一行

observe(this, "option", this._debounce(this.render, 100));

就可以实现option的监听,option包含组件的配置,以及数据,数据的变换都能够通知render方法的调用。

可以看到render方法摧毁了整个dom,然后根据数据重新渲染dom。所以控制render的执行频率变得尤其重要。

如果数据变化频繁,render方法调用频繁,从而降低性能,所以,可以看到上面使用debounce控制render执行的频率。

如果不使用debounce,也有第二种方案控制render频率。该方案和react一样,在requestAnimateFrame下次循环的时候去check组件是否要re-render,需要的话就重新渲染。如果一个页面有一百个组件,都统一在requestAnimateFrame循环中check是否re-render。

可以看到,只有render方法里有dom操作。clear、remove、add、edit、disable都只关心数据,数据变了自动会通知到render。

改善的地方在哪里?分两处地方:

1.组件内部代码,内部的增删改查都只关注数据就行

2.组件使用代码,操作数据等同于操作dom

当然如果不使用赋值又没有observejs的情况下可以使用方法调用的方式,使得一行代码什么都能干,但是如果属性太多,你得定义非常多setXXX方法。但你必须知道:赋值胜于method(即【obj.name=xx】>【obj.setName(xx)】)、约定胜于配置:)。

如果你不是很适应react激进虚拟dom和jsx,如果你反感react放弃了HTML+CSS大量优秀特性功能,如果以后dom性能好了,全世界都i78核+ssd了,那么HTML+CSS才是王道啊。

observejs也许是你的另一选择,欢迎尝试,感谢对observejs提出那么多宝贵建议和意见的童鞋。

observejs:https://github.com/kmdjs/observejs

本文演示:http://kmdjs.github.io/observejs/list/

本文代码:https://github.com/kmdjs/observejs/tree/master/example/list

observejs改善组件编程体验的更多相关文章

  1. 基于 OSGi 的面向服务的组件编程,helloworld

    基于 OSGi 的面向服务的组件编程 OSGi(Open Services Gateway Initiative,开放服务网关协议)提供了一个面向服务组件的编程模型,基于 OSGi 编程,具有模块化, ...

  2. 基于 OSGi 的面向服务的组件编程

    作者:曹 羽中 (caoyuz@cn.ibm.com), 软件工程师, IBM中国开发中心 出处:http://www.ibm.com/developerworks/cn/opensource/os- ...

  3. 全新升级的AOP框架Dora.Interception[1]: 编程体验

    多年之前利用IL Emit写了一个名为Dora.Interception(github地址,觉得不错不妨给一颗星)的AOP框架.前几天利用Roslyn的Source Generator对自己为公司写的 ...

  4. kmdjs集成uglifyjs2打造极致的编程体验

    回顾 上篇文章大概展示了kmdjs0.1.x时期的编程范式: 如下面所示,可以直接依赖注入到function里, kmdjs.define('main',['util.bom','app.Ball', ...

  5. Atitit 面向对象编程(OOP)、面向组件编程(COP)、面向方面编程(AOP)和面向服务编程(SOP)的区别和联系

    Atitit 面向对象编程(OOP).面向组件编程(COP).面向方面编程(AOP)和面向服务编程(SOP)的区别和联系 1. 面向组件编程(COP) 所以,组件比起对象来的进步就在于通用的规范的引入 ...

  6. vue.js2.0 自定义组件初体验

    理解 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.在有些情况 ...

  7. DSAPI多功能组件编程应用-HTTP监听服务端与客户端_指令版

    前面介绍了DSAPI多功能组件编程应用-HTTP监听服务端与客户端的内容,这里介绍一个适用于更高效更快速的基于HTTP监听的服务端.客户端. 在本篇,你将见到前所未有的超简化超傻瓜式的HTTP监听服务 ...

  8. Dora.Interception,为.NET Core度身打造的AOP框架 [1]:更加简练的编程体验

    很久之前开发了一个名为Dora.Interception的开源AOP框架(github地址:https://github.com/jiangjinnan/Dora,如果你觉得这个这框架还有那么一点价值 ...

  9. 依赖注入[6]: .NET Core DI框架[编程体验]

    毫不夸张地说,整个ASP.NET Core框架是建立在一个依赖注入框架之上的,它在应用启动时构建请求处理管道过程中,以及利用该管道处理每个请求过程中使用到的服务对象均来源于DI容器.该DI容器不仅为A ...

随机推荐

  1. CentOS下Zabbix安装部署及汉化

    搭建环境:Centos6.5_x86_64,Zabbix2.4.5,epel 源 服务端: 1.安装开发软件包yum -y groupinstall "Development Tools&q ...

  2. BZOJ1012: [JSOI2008]最大数maxnumber [线段树 | 单调栈+二分]

    1012: [JSOI2008]最大数maxnumber Time Limit: 3 Sec  Memory Limit: 162 MBSubmit: 8748  Solved: 3835[Submi ...

  3. Immutable(不可变)集合

    不可变集合,顾名思义就是说集合是不可被修改的.集合的数据项是在创建的时候提供,并且在整个生命周期中都不可改变. 为什么要用immutable对象?immutable对象有以下的优点: 对不可靠的客户代 ...

  4. Fedora 22中的DNF软件包管理工具

    Introduction DNF is the The Fedora Project package manager that is able to query for information abo ...

  5. 尝试用canvas写小游戏

    还是习惯直接开门见山,这个游戏是有一个老师抓作弊的学生,老师背身,点学生开始加分,老师会不定时回头,如果老师回头还在点学生在,就会被抓住,游戏game over. 1.写游戏首先是loading条,于 ...

  6. 用Go语言做产品半年的一些感觉

    用Go语言做产品刚好半年,有一些感觉跟大家说道说道. 在使用Go之前,我常常想象,无法使用先进的Debug工具会对工作进度造成多么巨大的影响.甚至在Visual Studio的娇惯下认为,不能调试基本 ...

  7. Binder In Native

    关于Binder的设计思想与Driver层实现细节可以看这个:Android Binder设计与实现 - 设计篇,这里首先简要概括一下. Service的每个Binder实体位于Service所属的进 ...

  8. C# 根据类型名称 生成实体 调用方法

    System.Reflection.Assembly ass = System.Reflection.Assembly.Load("项目名称或者DLL"); //System.Th ...

  9. seajs的使用

    写在前面 seajs是什么? Seajs是一个js文件加载器. 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 用于Web开发的模块加载工具,提供简单.极致的模块化体验 一:使用 文件 ...

  10. require() 源码解读

    2009年,Node.js 项目诞生,所有模块一律为 CommonJS 格式. 时至今日,Node.js 的模块仓库 npmjs.com ,已经存放了15万个模块,其中绝大部分都是 CommonJS ...