传送门

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 =
        '
<%=typeof width === "number"?width+"px":width%>;" >'
        + '            <% for ( var i = 0, len = data.length; i < len; i++) { %>'
        + '<%     var item = data[i]; %>'
        + '<%=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";

组件分析

observejs：https://github.com/kmdjs/observejs
本文演示：http://kmdjs.github.io/observejs/list/
本文代码：https://github.com/kmdjs/observejs/tree/master/example/list