传送门

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. SqlServer简单数据分页

    手边开发的后端项目一直以来都用的.NET MVC框架,访问数据库使用其自带的EF CodeFirst模式,写存储过程的能力都快退化了 闲来无事,自己写了条分页存储过程,网上类似的文章多的是,这里只列了 ...

  2. POJ1743 Musical Theme [后缀数组]

    Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 27539   Accepted: 9290 De ...

  3. DoraCMS 源码知识点备注

    项目需要研究了下DoraCMS这款开源CMS,真心做的不错:).用的框架是常用的express 4 + mongoose,代码也很规范,值得学习. 源码中一些涉及到的小知识点备注下: https:// ...

  4. .Net深入实战系列—JSON序列化那点事儿

    序 当前主流的序列化JSON字符串主要有两种方式:JavaScriptSerializer及Json.net(Nuget标识:Newtonsoft.Json).JavaScriptSerializer ...

  5. EasyPR--中文开源车牌识别系统 开发详解(1)

    在上篇文档中作者已经简单的介绍了EasyPR,现在在本文档中详细的介绍EasyPR的开发过程. 正如淘宝诞生于一个购买来的LAMP系统,EasyPR也有它诞生的原型,起源于CSDN的taotao123 ...

  6. IKAnalyzer

    我们的项目中中文切词使用的是mmseg,有一个不满意的地方是jar包中的默认词典一定会被加载进去,当我对有些term有意见时,无法删除. mmseg中Dictionary.java里一段代码保证了/d ...

  7. python学习 正则表达式

    一.re 模块中 1.re.match #从开始位置开始匹配,如果开头没有match()就返回none 语法:re.match(pattern, string, flags=0) pattern 匹配 ...

  8. Android自定义控件之自定义属性

    前言: 上篇介绍了自定义控件的基本要求以及绘制的基本原理,本篇文章主要介绍如何给自定义控件自定义一些属性.本篇文章将继续以上篇文章自定义圆形百分比为例进行讲解.有关原理知识请参考Android自定义控 ...

  9. 当master down掉后,pt-heartbeat不断重试会导致内存缓慢增长

    最近同事反映,在使用pt-heartbeat监控主从复制延迟的过程中,如果master down掉了,则pt-heartbeat则会连接失败,但会不断重试. 重试本无可厚非,毕竟从使用者的角度来说,希 ...

  10. 一个技术汪的开源梦 —— 基于 .Net Core 的公共组件之序列化

    一个技术汪的开源梦 —— 目录 想必大家在项目中都接触过 JSON 或者 XML 吧,为了将对象在网络上传输或者将其持久化必须将其序列化为一个字符串然后进行后续操作.常见的就是将其序列化成 JSON ...