(function() {
    window.util = {};

    util.shallowClone =  function (obj) {
        var c = Object.create(Object.getPrototypeOf(obj));
        Object.getOwnPropertyNames(obj).forEach(function (k) {
            return c[k] = obj[k];
        });
        return c;
    };

    //class操作;
    util.hasClass = function(e, arg) {
        return e.className.indexOf(arg)!==-1 ? true : false;
    };

    //添加class;
    util.addClass = function(e, arg) {
        if( !util.hasClass(e, arg) ) {
            e.className = e.className+" "+arg;
        };
    };

    //刪除class
    util.removeClass = function(e, arg) {
        if(!arg) {
            e.className = "";
        }else{
            if( !util.hasClass(e, arg) )return;
            if(e.className.indexOf( arg )!=-1) {
                if( e.className.split(" ").indexOf( arg ) !== -1) {
                    e.className = e.className.replace(new RegExp(arg,"gi"), "");
                };
            };
        };
    };

    //匹配className匹配的父級節(jié)點；
    util.closest = function (obj, className ) {
        if(!obj||!className)return;
        if(obj.nodeName.toLowerCase() === "body") return;
        if( util.hasClass(obj.parentNode, className) ) {
            return obj.parentNode;
        }else{
            return util.closest(obj.parentNode, className);
        };
    };

    //underscore抄的模板引擎;
    var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;

    var escapes = {
        "'":      "'",
        '\\':     '\\',
        '\r':     'r',
        '\n':     'n',
        '\t':     't',
        '\u2028': 'u2028',
        '\u2029': 'u2029'
    };

    util.templateSettings = {
        evaluate    : /<%([\s\S]+?)%>/g,
        interpolate : /<%=([\s\S]+?)%>/g,
        escape      : /<%-([\s\S]+?)%>/g
    };

    util.template = function(text, data) {
        var render;
        settings = util.templateSettings;

        // Combine delimiters into one regular expression via alternation.
        var matcher = new RegExp([
            (settings.escape || noMatch).source,
            (settings.interpolate || noMatch).source,
            (settings.evaluate || noMatch).source
        ].join('|') + '|$', 'g');

        // Compile the template source, escaping string literals appropriately.
        var index = 0;
        var source = "__p+='";
        text.replace(matcher, function(match, escape, interpolate, evaluate, offset) {
            source += text.slice(index, offset)
                .replace(escaper, function(match) { return '\\' + escapes[match]; });

            if (escape) {
                source += "'+\n((__t=(" + escape + "))==null?'':_.escape(__t))+\n'";
            }
            if (interpolate) {
                source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
            }
            if (evaluate) {
                source += "';\n" + evaluate + "\n__p+='";
            }
            index = offset + match.length;
            return match;
        });
        source += "';\n";

        // If a variable is not specified, place data values in local scope.
        if (!settings.variable) source = 'with(obj||{}){\n' + source + '}\n';

        source = "var __t,__p='',__j=Array.prototype.join," +
            "print=function(){__p+=__j.call(arguments,'');};\n" +
            source + "return __p;\n";

        try {
            render = new Function(settings.variable || 'obj', '_', source);
        } catch (e) {
            e.source = source;
            throw e;
        }

        var template = function(data) {
            return render.call(this, data);
        };

        // Provide the compiled function source as a convenience for precompilation.
        template.source = 'function(' + (settings.variable || 'obj') + '){\n' + source + '}';

        return template;
    };

    /**
     * @desc 從jQuery里面拷貝了一個extends;
     * @desc 當(dāng)?shù)谝粋€參數(shù)為boolean值時候，可以實現(xiàn)深度繼承;
     * @param (boolean, result, obj)
     * @param (result, obj, obj, obj)
     * @return result;
     */
    util.cloneProps = function () {
        var options, name, src, copy, copyIsArray, clone,
            target = arguments[0] || {},
            i = 1,
            length = arguments.length,
            deep = false,
            isArray = function( arr ){
                return Object.prototype.toString.call( arr ) === "[object Array]";
            },
            core_hasOwn = {}.hasOwnProperty,
            isPlainObject = function( obj ) {
                if ( !obj || (typeof obj !== "object") || obj.nodeType ) {
                    return false;
                }

                try {
                    // Not own constructor property must be Object
                    if ( obj.constructor &&
                        !core_hasOwn.call(obj, "constructor") &&
                        !core_hasOwn.call(obj.constructor.prototype, "isPrototypeOf") ) {
                        return false;
                    }
                } catch ( e ) {
                    // IE8,9 Will throw exceptions on certain host objects #9897
                    return false;
                }

                // Own properties are enumerated firstly, so to speed up,
                // if last one is own, then all properties are own.

                var key;
                for ( key in obj ) {}

                return key === undefined || core_hasOwn.call( obj, key );
            };
        // Handle a deep copy situation
        if ( typeof target === "boolean" ) {
            deep = target;
            target = arguments[1] || {};
            // skip the boolean and the target
            i = 2;
        };

        // Handle case when target is a string or something (possible in deep copy)
        if ( typeof target !== "object" && typeof target !== "function" ) {
            target = {};
        }

        // extend jQuery itself if only one argument is passed
        if ( length === i ) {
            target = this;
            --i;
        }

        for ( ; i < length; i++ ) {
            // Only deal with non-null/undefined values
            if ( (options = arguments[ i ]) != null ) {
                // Extend the base object
                for ( name in options ) {
                    src = target[ name ];
                    copy = options[ name ];

                    // Prevent never-ending loop
                    if ( target === copy ) {
                        continue;
                    }

                    // Recurse if we're merging plain objects or arrays
                    if ( deep && copy && ( isPlainObject(copy) || (copyIsArray =  isArray(copy) ) )) {
                        if ( copyIsArray ) {
                            copyIsArray = false;
                            clone = src && isArray(src) ? src : [];

                        } else {
                            clone = (src && (typeof src === "object")) ? src : {};
                        }

                        // Never move original objects, clone them
                        target[ name ] = util.cloneProps( deep, clone, copy );

                        // Don't bring in undefined values
                    } else if ( copy !== undefined ) {
                        target[ name ] = copy;
                    }
                }
            }
        }

        // Return the modified object
        return target;
    };

    //EventBase;
    /**
     * @example
     var obj = Object.create( new EventBase )
     obj.addListener("click", function(type) {
            console.log(type)
         })
     obj.fireEvent("click");
     * */
    var EventBase = function () {};

    EventBase.prototype = {
        /**
         * 注冊事件監(jiān)聽器
         * @name addListener
         * @grammar editor.addListener(types,fn)  //types為事件名稱，多個可用空格分隔
         * @example
         * })
         * editor.addListener('beforegetcontent aftergetcontent',function(type){
             *         if(type == 'beforegetcontent'){
             *             //do something
             *         }else{
             *             //do something
             *         }
             *         console.log(this.getContent) // this是注冊的事件的編輯器實例
             * })
         */
        addListener:function (types, listener) {
            types = types.split(' ');
            for (var i = 0, ti; ti = types[i++];) {
                if(typeof listener === "function") {
                    getListener(this, ti, true).push(listener);
                }else{
                    for(var j=0 ;j<listener.length; j++) {
                        getListener(this, ti, true).push(listener[j]);
                    };
                };
            };
        },

        /**
         * 移除事件監(jiān)聽器
         * @name removeListener
         * @grammar editor.removeListener(types,fn)  //types為事件名稱，多個可用空格分隔
         * @example
         * //changeCallback為方法體
         */
        removeListener:function (types, listener) {
            types = types.trim().split(' ');
            for (var i = 0, ti; ti = types[i++];) {
                removeItem(getListener(this, ti) || [], listener);
            }
        },

        /**
         * 觸發(fā)事件
         * @name fireEvent
         * @grammar
         * @example
         */
        fireEvent:function () {
            var types = arguments[0];
            types = types.trim().split(' ');
            for (var i = 0, ti; ti = types[i++];) {
                var listeners = getListener(this, ti),
                    r, t, k;
                if (listeners) {
                    k = listeners.length;
                    while (k--) {
                        if(!listeners[k])continue;
                        t = listeners[k].apply(this, arguments);
                        if(t === true){
                            return t;
                        }
                        if (t !== undefined) {
                            r = t;
                        }
                    }
                }
                if (t = this['on' + ti.toLowerCase()]) {
                    r = t.apply(this, arguments);
                }
            }
            return r;
        }
    };
    /**
     * 獲得對象所擁有監(jiān)聽類型的所有監(jiān)聽器
     * @public
     * @function
     * @param {Object} obj  查詢監(jiān)聽器的對象
     * @param {String} type 事件類型
     * @param {Boolean} force  為true且當(dāng)前所有type類型的偵聽器不存在時，創(chuàng)建一個空監(jiān)聽器數(shù)組
     * @returns {Array} 監(jiān)聽器數(shù)組
     */
    function getListener(obj, type, force) {
        var allListeners;
        type = type.toLowerCase();
        return ( ( allListeners = ( obj.__allListeners || force && ( obj.__allListeners = {} ) ) )
            && ( allListeners[type] || force && ( allListeners[type] = [] ) ) );
    };

    function removeItem(array, item) {
        for (var i = 0, l = array.length; i < l; i++) {
            if (array[i] === item) {
                array.splice(i, 1);
                i--;
            };
        };
    };

    /**
     * 繼承的基本類;
     * */
    var __extends = (this && this.__extends) || function (d, b) {
        for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
        function __() {
            this.constructor = d;
        }

        __.prototype = b.prototype;
        d.prototype = new __();
    };

    var nono =  {};
    /**
     * 組件
     * */
    nono.Dom = function( opt ) {
        opt = opt || {};
        //繼承eventBase;
        EventBase.apply(this, arguments);
        this.doc = opt&&opt.doc || document;
        this.opt = opt || {};
    };
    //繼承EventBase的原型;
    __extends( nono.Dom, EventBase);

    /**
     * @desc 綁定自定義事件, Dom初始化即可綁定自定義事件;;
     *
     * */
    nono.Dom.prototype.initEmiter = function (evs) {
        for(var e in evs) {
            this.addListener(e, evs[e]);
        };
    };

    /**
     * 主邏輯， 渲染界面;
     * @param 虛擬DOM
     * @param 目標(biāo)節(jié)點
     * @param true的是時候不會綁定事件和屬性
     * @return 虛擬DOM
     * */
    nono.Dom.prototype.render = function( vEl, tar , flag) {
        if( tar ) {
            //把目標(biāo)內(nèi)部的所有節(jié)點刪除;
            this._assignChildren( tar );
        };
        return this._render( vEl, tar ,flag);
    };

    /**
     * @desc 更新dom的時候調(diào)用改方法;
     * */
    nono.Dom.prototype.update = function ( tar ) {
        if( tar ) {
            //把目標(biāo)內(nèi)部的所有節(jié)點刪除;
            this._assignChildren( tar );
        };
        this.render(this.vEl, tar , true);
    };

    /**
     * @desc 迭代并生成子元素;
     * @return void;
     * */
    nono.Dom.prototype.renderKids = function ( kids, tar ) {
        for(var i=0 ,len = kids.length; i< len ;i++ ) {
            var dom = new nono.Dom();
            //dom.render(kids[i], tar);
            //this._render( kids[i] , tar);
            dom._render(kids[i], tar);
        };
    };

    /**
     * @desc 內(nèi)部用的渲染;
     * @param 虛擬DOM
     * @param 目標(biāo)節(jié)點
     * @param true的是時候不會綁定事件和屬性
     * */
    nono.Dom.prototype._render = function(  vEl, tar , flag) {
        //緩存虛擬元素和目標(biāo)節(jié)點;
        if(vEl) this.vEl = vEl;
        if(tar) this.tar = tar;

        var nNode, tag;
        //初始化要渲染到的父級節(jié)點;
        tar = (tar&&tar.nodeType === 1 ? tar : undefined );

        //如果是字符串的話
        this.fireEvent("beforerender", tar);
        if( typeof vEl === "string" || typeof vEl === "number" ) {

            var string = "";
            try{
                string = util.template( vEl )( tar&&tar.dom&&tar.dom.vEl&&tar.dom.vEl.model );
            }catch(e) {
                string = "util.template string error";
            };
            nNode = document.createTextNode( string );

            //如果是一個可以渲染的組件
        }else if( typeof vEl === "object" && vEl.Class ){

            //通過組件渲染; 組件渲染屬于迭代渲染， 會自動渲染子組件;
            //生成新元素， 該元素要添加到目標(biāo)節(jié)點中;
            nNode = this.addComponent( vEl );

            //如果只是一個單純的對象, 我們認為這是一個元素;
        }else if( typeof vEl === "object" ) {

            //tag的名稱;
            tag = vEl.name || "div";
            nNode = document.createElement( tag );

            //綁定屬性,　事件，　自定義事件;
            if( !flag ) {
                this._assignProps( nNode, vEl&&vEl.model );
            };
            nNode.dom = this;
            nNode.dom.nNode = nNode;

            //如果有子元素的話, 就迭代渲染子元素;;
            if( nNode&&vEl&&vEl.kids ) {
                this.renderKids( vEl.kids ,nNode );
            };

        }else if(typeof vEl === "undefined"){

            return

        };

        //如果有目標(biāo)元素， 那就把所有的子元素先刪了吧;
        if( tar ) {
            this.fireEvent("beforeappend", nNode, tar);
            tar.appendChild( nNode );
            this.fireEvent("afterappend", nNode, tar);
        };
        this.fireEvent("afterrender", tar);

        return tar || nNode;

    };

    /**
     * @public
     * @desc 通過組件渲染;
     * @param vEle 虛擬DOM
     * @return DOM;
     * */
    nono.Dom.prototype.addComponent = function ( vEle ) {
        var Class = vEle.Class;
        var kids = Array.prototype.concat.call([],Class.settings.kids || [],  vEle.kids||  []);
        //把Component中的配置加載到vEle上;
        vEle.kids = kids;

        vEle.model = vEle.model || {};
        util.cloneProps(true, vEle.model , Class.settings.model);

        vEle.name = vEle.name || Class.settings.name;
        Class.init&&Class.init();
        var dom = new nono.Dom();
        //delete vEle.Class;
        vEle.Class = undefined;
        return dom.render(vEle);
    };

    /**
     * 添加屬性到虛擬DOM中;
     * @param target
     * @param { key : value };
     * */
    nono.Dom.prototype._assignProps = function(tar, props) {
        var fc, val;
        for( var p in props ) {
            fc = p.charAt(0);
            val = props[p];
            switch (fc) {
                case "#" :
                    tar.setAttribute("id", val);
                    break;
                case "@":
                    tar.setAttribute(p.slice(1), val);
                    break;
                case "-":
                    tar.style.setProperty(p.slice(1), val);
                    break;
                case ".":
                    tar.className += val;
                    break;
                case "!" :
                    //綁定事件;
                    this._assignEv( tar,  p.slice(1), props[p] );
                    break;
                case "*" :
                    this.initEmiter( props[p] || [] );
                    break;
                default:
                    props.tplData = props.tplData || {};
                    //把數(shù)據(jù)保存到tplData這個對象里面;
                    props.tplData[p] = props[p];
            };
        };
    };

    /**
     * 添加綁定事件;
     *
     * */
    nono.Dom.prototype._assignEv = function(tar,e, fn) {
        eventHandlers(tar, e, fn ,false);

        function cancel(ev) {
            ev.returnValue = false;
            ev.cancelBubble = true;
            ev.preventDefault&&ev.preventDefault();
            ev.stopPropagation&&ev.stopPropagation();
        };

        /**
         * @desc 事件綁定;
         * @param 元素
         * @param 事件名字
         * @param 綁定的事件或者事件數(shù)組
         * @param 是否捕獲
         * */
        function eventHandlers(realElem, evName, fns, capture) {
            if (typeof fns === "object" ) {
                for (var i = 0, n = fns.length; i < n; i++) {
                    (function(i) {
                        fns[i] && realElem.addEventListener(evName, function(ev) {
                            //如果返回false就不自動刷新界面;
                            if( !fns[i].apply(realElem, Array.prototype.slice.apply(arguments).concat( realElem.dom.vEl )) ) {
                                cancel(ev);
                                return
                            };
                            //作用域被我們捕獲;
                            try{
                                realElem.dom.update(realElem);
                            }catch(e) {
                                console.log("realElem.dom.update(); error");
                            };
                        }, capture);
                    })(i);
                };

            }else if (fns && (typeof fns === "function")) {
                realElem.addEventListener(evName, function(ev) {
                    //如果返回false就不自動刷新界面;
                    if( !fns.apply(realElem, Array.prototype.slice.apply(arguments).concat( realElem.dom.vEl )) ) {
                        cancel(ev);
                        return;
                    };
                    //每次執(zhí)行事件的時候都會重新刷新dom, 作用域被我們捕獲;
                    try{
                        realElem.dom.update(realElem);
                    }catch(e) {
                        console.log("realElem.dom.update(); error");
                    };
                }, capture);
            };
        };
    };

    /**
     * @desc 要把目標(biāo)元素中節(jié)點全部刪除;
     * @param tar 目標(biāo)節(jié)點;
     * */
    nono.Dom.prototype._assignChildren = function( tar ) {
        //所有的NODE節(jié)點;
        var child, name;
        while(child = tar.lastChild) {
            name = (child.tagName || child.nodeName || "").toLocaleLowerCase();
            if(name === "script" || name === "link" || name === "style") break;
            this.fireEvent("beforeremovechild" ,child);
            //如果fireEvent返回值為false，那么就不刪除元素;
            if( this.fireEvent("removechild" ,child) !== false ) {
                tar.removeChild( child );
            };
            this.fireEvent("afterremovechild" ,child);
        };
    };

    /**
     * @desc更新model模型， 到view中?
     *
     * */
    nono.Dom.prototype.setState = function( key, value) {

    };

    /**
     * @desc 創(chuàng)建DOM組件， 可以進行復(fù)用, COM組件主要是用來保存參數(shù);
     * @return Constructor;
     * */
    nono.Component = function ( settings ) {
        //這樣可以使用無new的方式使用Component組件
        if( this === window) {
            return new nono.Component( settings );
        };
        this.settings = util.cloneProps(true, {}, settings);//util.shallowClone(settings);
    };

    /**
     * @desc 初始化設(shè)置;
     * */
    nono.Component.prototype.init = function(  ) {
    };

    /**
     * @desc 為元素附加視圖;
     * @param 參數(shù)為函數(shù)或者一個對象；
     * @return this;
     * */
    nono.Component.prototype.extendView = function ( obj ) {
        if( typeof obj === "function") {
            obj.call(this,this.settings.kids);
        }else if( typeof obj === "object" ) {
            this.setting.kids.push( obj );
        };
        return this;
    };

    window.nono = nono;
})();

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://files.cnblogs.com/files/diligenceday/ui.js"></script>
    <link rel="stylesheet" href="http://cdn./bootstrap/3.3.5/css/bootstrap.min.css"/>
</head>
<body>
    <div class="container">
        <div class="row">
            <div id="div0">

            </div>
        </div>
    </div>
    <script>
        //基于JS描述型的導(dǎo)航欄組件;
        function ComNavButton(content, index) {
            return new nono.Component({
                model : {
                    "." : "btn-group",
                    "@role" : "group"
                },
                kids : [
                    {
                        name : "button",
                        model : {
                            "." : "btn btn-default",
                            "@type" : "button",
                            "!click" : function() {
                                util.closest(this,"master").dom.fireEvent("showPanel",index)
                            }
                        },
                        kids : [content]
                    }
                ]
            });
        }

        //導(dǎo)航欄組件;
        var ComNav = new nono.Component({
            model : {
                "." : "navi btn-group btn-group-justified",
                "@role" : "group"
            },
            kids : [
                 //調(diào)用ComNavButton并生成不同參數(shù)的組件;
                {Class:ComNavButton("L",0)},
                {Class:ComNavButton("M",1)},
                {Class:ComNavButton("R",2)}
            ]
        });

        //內(nèi)容組件;
        var Content = function( content ) {
            return new nono.Component({
                model: {
                    "." : "panel panel-default panel-e",
                    "*" : {
                        "show":function() {
                            this.nNode.style.display = "block"
                        }
                    }
                },
                kids : [
                    {
                        model : {
                            "." : "panel-body"
                        },
                        kids : [ content ]
                    }
                ]
            })
        };

        //內(nèi)容區(qū)域的組件;
        var ConContent = new nono.Component({
            model : {
                "." : "content-group"
            },
            kids : [
                {
                    Class : Content("heheda")
                },
                {
                    Class : Content("lallalal")
                },
                {
                    Class : Content("ooooooo")
                }
            ]
        });

        //基于JS描述型的結(jié)構(gòu)化語言;
/*
        <div class="btn-group btn-group-justified" role="group">
                <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">L</button>
        </div>
        <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">M</button>
        </div>
        <div class="btn-group" role="group">
                <button type="button" class="btn btn-default">R</button>
        </div>
        </div>

        <div class="content-group">
                <div class="panel panel-default">
                <div class="panel-body">
                Panel content０
        </div>
        </div>
        <div class="panel panel-default">
                <div class="panel-body">
                Panel content１
        </div>
        </div>
        <div class="panel panel-default">
                <div class="panel-body">
                Panel content２
        </div>
        </div>
        </div>
*/
        var dom = new nono.Dom();

        dom.render( {
            kids : [
                {
                    Class : ComNav,
                    model : {
                    }
                },
                {
                    Class : ConContent
                }
            ],
            model : {
                "." : "master",
                //綁定自定義事件;
                "*" :  {
                    "hideAllPanle" : function() {
                        var bodys = document.getElementsByClassName("panel-e")
                        for(var i=0 ;i< bodys.length; i++ ) {
                            bodys[i].style.display = "none";
                        };
                    },
                    "showPanel" : function (eventName, i) {
                        dom.fireEvent("hideAllPanle");
                        dom.nNode.getElementsByClassName("panel-e")[i].dom.fireEvent("show");
                    }
                }
            }
        }, document.getElementById("div0") );

    </script>
</body>
</html>