rubylouvre / avalon Goto Github PK

//0.85
    function scanNodes(parent, vmodels, callback) {
        var tags = []
        for (var i = 0, node; node = parent.childNodes[i++]; ) {
            if (node.nodeType === 1) {
                tags.push(node)
            } else if (node.nodeType === 3) {
                scanText(node, vmodels)
            }
        }
        callback && callback();
        tags.forEach(function(node) {
            if (W3C) {
                scanTag(node, vmodels) //扫描元素节点
            } else {
                avalon.nextTick(function() {
                    scanTag(node, vmodels) //扫描元素节点
                })
            }
        })
    }

//0.82
    function scanNodes(parent, vmodels, callback) {
        var nodes = []
        for (var i = 0, node; node = parent.childNodes[i++]; ) {
            nodes.push(node);
        }
        callback && callback();
        for (var i = 0; node = nodes[i++]; ) {
            if (node.nodeType === 1) {
                scanTag(node, vmodels) //扫描元素节点
            } else if (node.nodeType === 3) {
                scanText(node, vmodels) //扫描文本节点
            }
        }
    }

//0.9 pre
    function scanNodes(parent, vmodels) {
        var nodes = []
        for (var i = 0, node; node = parent.childNodes[i++]; ) {
            nodes.push(node);
        }
        for (var i = 0; node = nodes[i++]; ) {
            if (node.nodeType === 1) {
                scanTag(node, vmodels) //扫描元素节点
            } else if (node.nodeType === 3) {
                scanText(node, vmodels) //扫描文本节点
            }
        }
    }

vm.$watch('name',function(a,b){console.log(a,b)}); 


IE7报SCRIPT16389: 未指明的错误。 

//v0.84
  function scanExpr(value) {
        var tokens = [],
                left
        if (rexpr.test(value)) {
            do {
                value.replace(rexpr, function(a, b) {
                    left = RegExp.leftContext
                    value = RegExp.rightContext
                    if (left) {
                        tokens.push({
                            value: left,
                            expr: false
                        })
                    }
                    if (b) {
                        var leach = []
                        if (b.indexOf("|") > 0) { // 注意排除短路与
                            b = b.replace(rfilters, function(c, d, e) {
                                leach.push(d + (e || ""))
                                return c.charAt(0)
                            })
                        }
                        tokens.push({
                            value: b,
                            expr: true,
                            filters: leach.length ? leach : void 0
                        })

                    }
                    return ""
                });
            } while (value.indexOf(closeTag) > -1);

            if (value) {
                tokens.push({
                    value: value,
                    expr: false
                })
            }
        }

        return tokens
    }

function scanExpr(str) {
        var tokens = [], value, start = 0, stop
        if (rexpr.test(str)) {
            do {
                var stop = str.indexOf(openTag, start)
                if (stop == -1) {
                    break
                }
                value = str.slice(start, stop)
                if (value) {// {{ 左边的文本
                    tokens.push({
                        value: value,
                        expr: false
                    })
                }
                start = stop + openTag.length
                stop = str.indexOf(closeTag, start)
                if (stop == -1) {
                    break
                }
                value = str.slice(start, stop)
                if (value) {//{{ }} 之间的表达式
                    var leach = []
                    if (value.indexOf("|") > 0) { // 注意排除短路与
                        value = value.replace(rfilters, function(c, d, e) {
                            leach.push(d + (e || ""))
                            return c.charAt(0)
                        })
                    }
                    tokens.push({
                        value: value,
                        expr: true,
                        filters: leach.length ? leach : void 0
                    })
                }
                start = stop + closeTag.length;
            } while (1);
            value = str.slice(start);
            if (value) { //}} 右边的文本
                tokens.push({
                    value: value,
                    expr: false
                })
            }
        }
        return tokens
    }

if(p.scroll)
        {
            s = this.getScroll(curX, curY);
            if((s[0] != 0) || (s[1] != 0))
            {
                window.scrollTo(window.scrollX + s[0], window.scrollY + s[1]);
            }
        }

    this.getScroll = function(pX, pY)
    {
        //read window variables
        var sX = window.scrollX;
        var sY = window.scrollY;

        var wX = window.innerWidth;
        var wY = window.innerHeight;

        //set contants      
        var scroll_amount = 10; //how many pixels to scroll
        var scroll_sensitivity = 100; //how many pixels from border to start scrolling from.

        var delX = 0;
        var delY = 0;       

        //process vertical y scroll
        if(pY - sY < scroll_sensitivity)
        {
            delY = -scroll_amount;
        }
        else
        if((sY + wY) - pY < scroll_sensitivity)
        {
            delY = scroll_amount;
        }

        //process horizontal x scroll
        if(pX - sX < scroll_sensitivity)
        {
            delX = -scroll_amount;
        }
        else
        if((sX + wX) - pX < scroll_sensitivity)
        {
            delX = scroll_amount;
        }

        return [delX, delY]
    }
http://www.gotproject.com/blog/post2.html

 var login=avalon.define('login',function(vm){
            vm.user='';
            vm.validate={
                user:function(){
                    avalon.log(vm.user);//取不到值
                    avalon.log(login.user);//正常
                }                
            }  
 })

    function isArraylike(obj) {
        var length = obj.length,
                type = getType(obj)

        if (avalon.isWindow(obj)) {
            return false
        }

        if (obj.nodeType === 1 && length) {
            return true
        }

        return type === "array" || type !== "function" &&
                (length === 0 ||
                        typeof length === "number" && length > 0 && (length - 1) in obj)
    }

    function isArrayLike(obj) {
        if (obj) {
            var n = obj.length
            if (+n === n && !(n % 1) && n >= 0) {
                if ({}.propertyIsEnumerable.call(obj, 'length')) {
                    return Array.isArray(obj) || typeof obj !== "function" && /^\s?function/.test(obj.item || obj.callee)
                }
                return true
            }
        }
        return false
    }

vm.monument = [{title:"",descriptions:""}];//结构为数组型,内Object数量会变动（但是这个并不是BUG的来源），descriptions是HTML格式的数据

vm.monument = [{title:"",descriptions:""},{title:"",descriptions:""}];

    var monumentsVModel = avalon.define("monumentsDetail", [], function(vm) {
        vm.monument = false;
        vm.title = "相册集";
        vm.allMonument = res;
    });

{
        name: "普罗旺斯",
        details: [{
                title: "城市简介",
                descriptions: "普罗旺斯（Provence）\n是罗马帝国的一个行省，英文简称PACA，现为法国东南部的一个地区，毗邻地中海，和意大利接壤。从阿尔卑斯山经里昂南流的隆河（Rhone），在普罗旺斯附近分为两大支流，然后注入地中海。普罗旺斯是世界闻名的薰衣草故乡、旅游胜地。\n普罗旺斯是欧洲的“骑士之城”，位于法国东南部，[1]毗邻地中海和意大利，从地中海沿岸延伸到内陆的丘陵地区，中间有大河“Rhone”流过。自古就以靓丽的阳光和蔚蓝的天空，迷人的地中海和心醉的薰衣草，令世人惊艳。是中世纪重要文学体裁骑士抒情诗的发源地。历史上的普罗旺斯地域范围变化很大，古罗马时期普罗旺斯行省北至阿尔卑斯山，南抵比利牛斯山脉，包括整个法国南部。18世纪末法国大革命时，普罗旺斯成为5个行政省份之一。到了1960年代，法国被重新划分为22个大区，普罗旺斯属于普罗旺斯－阿尔卑斯－蓝色海岸大区。\n浪漫之城如果有人说普罗旺斯是彻底的浪漫，大概也不过分，因为这里除了很久流传的浪漫爱情传奇，还有因《马赛曲》而闻名的马赛，因《基督山伯爵》而为众人皆知的依夫岛，还有儒雅的大学城艾克斯和阿维尼翁，回味久远的中世纪山庄，街边舒适的小咖啡馆。\n普罗旺斯历史上有包括塞尚、凡高、莫奈、毕加索、夏卡尔等人均在普罗旺斯展开艺术生命的新阶段，蔚蓝海岸的享乐主义风气，也吸引了美国作家费兹杰罗、英国作家劳伦斯、科学家赫胥黎、德国诗人尼采等人前来朝圣，当然，还囊括了《山居岁月》，将普罗旺斯推向巅峰的彼得·梅尔。\n"
            }, {
                title: "地理位置",
                descriptions: "普罗旺斯位于法国南部，从诞生之日起，就谨慎地保守着她的秘密，直到英国人彼得·梅尔的到来，普罗旺斯许久以来独特生活风格的面纱才渐渐揭开。在梅尔的笔下“普罗旺斯”已不再是一个单纯的地域名称，更代表了一种简单无忧、轻松慵懒的生活方式，一种宠辱不惊，闲看庭前花开花落，去留无意，漫随天外云卷云舒的闲适意境。如果旅行是为了摆脱生活的桎梏，普罗旺斯会让你忘掉一切。\n整个普罗旺斯地区因极富变化而拥有不同寻常的魅力——天气阴晴不定，时而暖风和煦，时而海风狂野，地势跌宕起伏，平原广阔，峰岭险峻，寂寞的峡谷，苍凉的古堡，蜿蜒的山脉和活泼的都会，全都在这片法国的大地上演绎万种风情。7～8月间的薰衣草迎风绽放，浓艳的色彩装饰翠绿的山谷，微微辛辣的香味混合着被晒焦的青草芬芳，交织成法国南部最令人难忘的气息。\n"
            }, {
                title: "气候环境",
                descriptions: "气候状况\n整个普罗旺斯地区因极富变化而拥有不同寻常的魅力--天气阴晴不定，时而暖风和煦，时而冷风狂野，地势跌宕起伏，平原广阔，峰岭险峻，寂寞的峡谷，苍凉的古堡，蜿蜒的山脉和活泼的都会--全都在这片法国的大地上演绎万种风情。7-8月间的薰衣草迎风绽放，浓艳的色彩装饰翠绿的山谷，微微辛辣的香味混合着被晒焦的青草芬芳，交织成法国南部最令人难忘的气息。在美食方面，普罗旺斯最大的优势在于农产品丰富，新鲜的蔬菜水果、橄榄油、大蒜、海鲜、香料组合成食客的天堂。\n普罗旺斯地区属地中海气候，夏季干燥，冬季温和，每年日照达到300天以上。夏季通常为7月到9月，白天气温一般都在30度以上。冬季（12月-2月）气温通常在10-15度左右。尽管普罗旺斯南北气候有所差异，但总体上来说常年适合旅游，尤其是春夏秋三季的旺季。普罗旺斯冬季的风非常著名，尤其是冬季从阿尔卑斯山脉吹来的风，顺着Rhone山谷畅通无阻，有时风速甚至可以达到每小时100公里。\n地理状况\n普罗旺斯（Provence）位于法国南部。最初的普罗旺斯北起阿尔卑斯山，南到比利牛斯山脉，包括法国的整个南部区域。罗马帝国时期，普罗旺斯就被列为其所属的省份。18世纪末大革命时期，法国被分成5个不同的行政省份，普罗旺斯是其中之一。到了20世纪60年代，行政省份又被重新组合划分成22个大区，于是有了现在的普罗旺斯－阿尔卑斯大区。在温文尔雅的大学名城艾克斯、教皇之城亚维农的前后，还有那些逃过世纪变迁的中世纪小村落和古老的山镇。\n普罗旺斯出品优质葡萄美酒，其中20$Cts%$为高级和顶级酒种。由于地中海阳光充足，普罗旺斯的葡萄含有较多的糖分，这些糖转变为酒精，使普罗旺斯酒的酒精度比北方的酒高出2度。略带橙黄色的干桃红酒是最具特色的。常见的红酒有：Cotes de Provence, Coteaux d $Cts'$Aix en Provence, Bandol。普罗旺斯地理位置  普罗旺斯地理位置\n从地中海沿岸延伸到内陆的丘陵地区，中间有大河“Rhone”流过，很多历史城镇，自古就以靓丽的阳光和蔚蓝的天空，迷人的地中海和心醉的薰衣草，令世人惊艳。\n薰衣草的传说\n话说普罗旺斯的村里有个少女，一个人独自在寒冷的山中采著含苞待放的花朵，但是却遇到了一位来自远方但受伤的旅人，少女一看到这位青年，整颗心便被他那风度翩翩的笑容给俘虏了！\n於是少女便将他请到家中，也不管家人的反对，坚持要照顾他直到痊愈，而过了几天後，青年旅人的伤也已经康复，但两人的恋情却急速蔓延，已经到了难分难舍的地步。\n不久後的某日，青年旅人向少女告别离去，而正处於热恋中的少女却坚持要随青年离去，虽然亲人们极力挽留，但她还是坚持要和青年一起到开满玫瑰花的故乡！就在少女临走的前一刻，村子里的老太太给了她一束薰衣草，要她用这束薰衣草来试探青年旅人的真心，因为...传说薰衣草的香气能让不洁之物现形.\n正当旅人牵起她的手准备远行时，少女便将藏在大衣里的薰衣草丢掷在青年的身上，没想到，青年的身上发出一阵紫色的轻烟之後，就随著风烟消云散了！而少女在山谷中还彷佛隐隐的听到青年爽朗的笑声，就这样，留下了少女一人孤形影单......\n没过多久，少女竟也不见踪影，只留下一句“其实我就是你想远行的心”.\n有人认为她和青年一样幻化成轻烟消失在山谷中，也有人说，她循著玫瑰花香去寻找青年了......\n"
            }, {
                title: "风景名胜",
                descriptions: "薰衣草观赏：\n吕贝隆山区（Luberon）Sault修道院的花田是该区最著名的薰衣草观赏地，也是《山居岁月》一书的故事背大片的薰衣草  大片的薰衣草\n景，号称全法国最美丽的山谷之一。山上有一座12世纪的修道院，塞南克修道院前方有一大片的薰衣草花田，是由院里的修道士栽种的，有不同颜色的薰衣草。\n施米雅那山区（Simiane-la-Rotonde）的施米雅那是一座极具特色的山城，山顶矗立着一座建于12至13世纪的城堡罗通德，环绕着一大片的薰衣草花田。站在施米雅那城镇里，随处可见到紫色花田，无边无际地蔓延。\n周边小城游：\nLuberon（吕贝隆）是沃克里兹省的南部地区，彼得·梅尔的《普罗旺斯的一年》中所写的地方就在这里。Roussillon(鲁西庸)是座彩色的村庄，桃红、鲜橙、明黄的房子像天使的玩具，随意散落在村中。\nGordes是座岩石山庄，Gordes村里还有一座薰衣草博物馆，门口一辆老式的薰衣草压油机。博物馆里展示了薰衣草农田里的各种用具。\n艾克斯市是画家保尔·塞尚的故乡，自中世纪就是一座大学城，也是著名的“泉城”。这里是罗马普罗旺斯的古都。该市以独特的烹饪、玫瑰红葡萄酒，以及特贝的语言--普罗旺斯方言闻名。在奥郎日，你可以坐在罗马时代的圆形露天剧场看戏；在阿尔，你可以坐在咖啡厅里消磨一个下午。这里每年7月，还会举办一个很时髦石头城的国际摄影节，在石头古巷和小广场上，展览当今缔造潮流的大摄影师和风流人物。\n波城古堡游：\n波城古堡是指位于亚耳附近地区的波城·普罗旺斯（Les Baux de Provence）的古城塞遗迹。波城这里曾经是被诗人米斯特拉称为“鹫族”的英勇的波城一族驻守的城塞，后来经历了无数次战波城古堡  波城古堡\n争硝烟的洗礼，波城古堡于路易13世在位期间毁于战火，现在保留的是当年的古堡废墟可供游人参观。\n波城古堡的入口处是波城历史博物馆（Musée d'Histoire des Baux），展示城堡当年鼎盛时期的历史资料与文物，站在城堡顶端，环顾四方，亚耳古城等周边风光尽收眼底，据说北方的地狱谷（Va d'Enfer）是触发但丁撰写《神曲·地狱篇》的地方。\n"
            }
        ]
    }

avalon.ready(function() {

     var outClass, inClass, pages, lock = 0, lastIndex = 0
    avalon.define("apphopeui", function(vm) {
        vm.panels = [0, 1, 2, 3]
        vm.currentPageIndex = 0;

        vm.changePanelIndex = function() {
             if (!lock) {
                        lock = 1
                        var index = this.$vmodel.$index;
                        if (lastIndex !== index) {
                            lastIndex = index
                            vm.currentPageIndex = index;
                        } else {
                            lock = 0
                        }
             }
        }
        vm.removeClass = function() {
                   lock++
                    var className = this.animClass;
                    if (className === outClass) {
                        this.classList.remove("pt-page-current")
                    }
                    var el = this
                    className.replace(/[\w-]+/g, function(c) {
                        el.classList.remove(c)
                    })

                    if (lock === 3) {
                        lock = 0;
                    }
        }
        vm.$watch("currentPageIndex", function(next, curr) {
                     if (next > curr) {
                        outClass = 'pt-page-moveToLeft';
                         inClass = 'pt-page-moveFromRight';
                    } else {
                          inClass = 'pt-page-moveFromRight';
                         outClass = 'pt-page-moveToLeft';
                    }
                    var currPage = pages[curr]
                    var nextPage = pages[next]

                    currPage.animClass = outClass;
                    outClass.replace(/[\w-]+/g, function(c) {
                        currPage.classList.add(c)
                    })

                    currPage.classList.add("pt-page-current")

                    nextPage.animClass = inClass
                    inClass.replace(/[\w-]+/g, function(c) {
                        nextPage.classList.add(c)
                    })
                    nextPage.classList.add("pt-page-current")
        })

    })

    avalon.scan()
    avalon.nextTick(function() {//因为页面只有一个切换板做模板，只有扫描后才动态生成四个
        pages = document.querySelectorAll(".panels>div")
    })
})

define("mvvm", "$event,$css,$attr".split(","), function($) {

    var prefix = "ms-";
    var avalon = $.avalon = {
        models: {},
        filters: {
            uppercase: function(str) {
                return str.toUpperCase()
            },
            lowercase: function(str) {
                return str.toLowerCase();
            },
            number: function(str) {
                return isFinite(str) ? str : "";
            },
            aaa: function(str) {
                return str + "AAA"
            }
        }
    };
    var blank = " ";
    var obsevers = {};
    var Publish = {};//将函数放到发布对象上，让依赖它的函数
    var expando = new Date - 0;
    var subscribers = "$" + expando;
    /*********************************************************************
     *                            View                                    *
     **********************************************************************/
    var regOpenTag = /([^{]*)\{\{/;
    var regCloseTag = /([^}]*)\}\}/;
    function hasExpr(value) {
        var index = value.indexOf("{{");
        return index !== -1 && index < value.indexOf("}}");
    }
    function forEach(obj, fn) {
        if (obj) {//不能传个null, undefined进来
            var isArray = isFinite(obj.length), i = 0
            if (isArray) {
                for (var n = obj.length; i < n; i++) {
                    fn(i, obj[i]);
                }
            } else {
                for (i in obj) {
                    if (obj.hasOwnProperty(i)) {
                        fn(i, obj[i]);
                    }
                }
            }
        }
    }
    //eval一个或多个表达式
    function watchView(text, scope, scopes, data, callback, tokens) {
        var updateView, target, filters = data.filters;
        var scopeList = [scope].concat(scopes);
        if (!filters) {
            for (var i = 0, obj; obj = scopeList[i++]; ) {
                if (obj.hasOwnProperty(text)) {
                    target = obj;//如果能在作用域上直接找到,我们就不需要eval了
                    break;
                }
            }
        }
        if (target) {
            updateView = function() {
                callback(target[text]);
            };
        } else {
            updateView = function() {

                if (tokens) {
                    var val = tokens.map(function(obj) {
                        return obj.expr ? evalExpr(obj.value, scopeList, data) : obj.value;
                    }).join("");
                } else {
                    val = evalExpr(text, scopeList, data);
                }

                callback(val);
            };
        }
        Publish[ expando ] = updateView;
        updateView();
        delete  Publish[ expando ];
    }
    function evalExpr(text, scopeList, data) {
        console.log(text)
        var uniq = {
            $occoecatio: 1
        }, names = [], args = [];

        scopeList.forEach(function(scope) {
            scope.$occoecatio = true;
            forEach(scope, function(key, val) {
                if (!uniq[key]) {
                    names.push(key);
                    args.push(val);
                    uniq[key] = 1;
                }
            });
            delete scope.$occoecatio;
        });

        if (data.compileFn) {
            console.log(data.compileFn+"")
            args.push(avalon.filters)
            return data.compileFn.apply(data.compileFn, args);
        }
        if (data.filters) {
            var random = new Date - 0, textBuffer = [], fargs;
            textBuffer.push("var ret", random, "=", text, "\r\n");
            for (var i = 0, f; f = data.filters[i++]; ) {
                var start = f.indexOf("(");
                if (start !== -1) {
                    fargs = f.slice(start + 1, f.lastIndexOf(")")).trim();
                    fargs = "," + fargs;
                    f = f.slice(0, start).trim();
                } else {
                    fargs = "";
                }
                textBuffer.push(" if(filters", random, ".", f, "){\r\n\ttry{ret", random,
                        " = filters", random, ".", f, "(ret", random, fargs, ")}catch(e){};\r\n}\r\n");
            }
            textBuffer.push("\treturn ret", random);
            text = textBuffer.join("");
            names.push("filters" + random);
            args.push(avalon.filters);
            delete data.filters;//释放内存
        } else {
            text = "\treturn " + text;
        }
        try {
            var fn = Function.apply(Function, names.concat(text));
            var val = fn.apply(fn, args);
            data.compileFn = fn;//缓存,防止二次编译
        } catch (e) {
            data.compileFn = function() {
                return "";
            };
            val = "";
        }
        uniq = textBuffer = names = null;//释放内存
        return val;
    }

    var bindingHandlers = avalon.bindingHandlers = {
        //将模型中的字段与input, textarea的value值关联在一起
        "model": function(data, scope, scopes) {
            var element = data.element;
            var tagName = element.tagName;
            if (typeof  modelBinding[tagName] === "function") {
                var array = [scope].concat(scopes);
                var name = data.node.value, model;
                array.forEach(function(obj) {
                    if (!model && obj.hasOwnProperty(name)) {
                        model = obj;
                    }
                });
                model = model || {};
                modelBinding[tagName](element, model, name);
            }
        },
        //抽取innerText中插入表达式，置换成真实数据放在它原来的位置
        //<div>{{firstName}} + java</div>，如果model.firstName为ruby， 那么变成
        //<div>ruby + java</div>
        "text": function(data, scope, scopes) {
            var node = data.node;
            watchView(data.value, scope, scopes, data, function(val) {
                node.nodeValue = val;
            });
        },
        //控制元素显示或隐藏
        "toggle": function(data, scope, scopes) {
            var element = $(data.element);
            watchView(data.value, scope, scopes, data, function(val) {
                element.toggle(!!val);
            });
        },
        //这是一个字符串属性绑定的范本, 方便你在title, alt,  src, href添加插值表达式
        //<a href="{{url.hostname}}/{{url.pathname}}.html">
        "href": function(data, scope, scopes) {
            //如果没有则说明是使用ng-href的形式
            var text = data.value.trim();
            var node = data.node;
            var simple = node.name.indexOf(prefix) === 0;
            var name = data.type;
            if (!simple && /^\{\{([^}]+)\}\}$/.test(text)) {
                simple = true;
                text = RegExp.$1;
            }
            watchView(text, scope, scopes, data, function(val) {
                data.element[name] = val;
            }, simple ? null : scanExpr(data.value));
        },
        //这是一个布尔属性绑定的范本，布尔属性插值要求整个都是一个插值表达式，用{{}}包起来
        //布尔属性在IE下无法取得原来的字符串值，变成一个布尔，因此需要用ng-disabled
        //text.slice(2, text.lastIndexOf("}}"))
        "disabled": function(data, scope, scopes) {
            var element = data.element, name = data.type,
                    propName = $.propMap[name] || name;
            watchView(data.value, scope, scopes, data, function(val) {
                element[propName] = !!val;
            });
        },
        //切换类名，有三种形式
        //1、ms-class-xxx="flag" 根据flag的值决定是添加或删除类名xxx 
        //2、ms-class=obj obj为一个{xxx:true, yyy:false}的对象，根据其值添加或删除其键名
        //3、ms-class=str str是一个类名或多个类名的集合，全部添加
        //http://www.cnblogs.com/rubylouvre/archive/2012/12/17/2818540.html
        "class": function(data, scope, scopes) {
            var element = $(data.element);
            watchView(data.value, scope, scopes, data, function(val) {
                if (data.args) {//第一种形式
                    element.toggleClass(data.args.join(""), !!val);
                } else if (typeof val === "string") {
                    element.addClass(val);
                } else if (val && typeof val === "object") {
                    forEach(val, function(cls, flag) {
                        if (flag) {
                            element.addClass(cls);
                        } else {
                            element.removeClass(cls);
                        }
                    });
                }
            });
        },
        //控制流程绑定
        "skip": function() {
            arguments[3].stopBinding = true;
        },
        "if": function(data, scope, scopes) {
            var element = data.element;
            var fragment = element.ownerDocument.createDocumentFragment();
            watchView(data.value, scope, scopes, data, function(val) {
                if (val) {
                    while (fragment.firstChild) {
                        element.appendChild(fragment.firstChild);
                    }
                } else {
                    while (element.firstChild) {
                        fragment.appendChild(element.firstChild);
                    }
                }
            });

        },
        "each": function(data, scope, scopes, flags) {
            var args = data.args, itemName = args[0] || "$data", indexName = args[1] || "$index";
            var parent = data.element;
            var scopeList = [scope].concat(scopes);
            var list = evalExpr(data.value, scopeList, data);
            var doc = parent.ownerDocument;
            var fragment = doc.createDocumentFragment();
            while (parent.firstChild) {
                fragment.appendChild(parent.firstChild);
            }
            function updateListView(method, args, len) {
                var listName = list.name;
                switch (method) {
                    case "push":
                        $.each(args, function(index, item) {
                            updateView(len + index, item);
                        });
                        break;
                    case "unshift"  :
                        list.insertBefore = parent.firstChild;
                        $.each(args, function(index, item) {
                            updateView(index, item);
                        });
                        resetIndex(parent, listName);
                        delete list.insertBefore;
                        break;
                    case "pop":
                        var node = findIndex(parent, listName, len - 1);
                        if (node) {
                            removeView(parent, listName, node);
                        }
                        break;
                    case "shift":
                        removeView(parent, listName, 0, parent.firstChild);
                        resetIndex(parent, listName);
                        break;
                    case "clear":
                        while (parent.firstChild) {
                            parent.removeChild(parent.firstChild);
                        }
                        break;
                    case "splice":
                        var start = args[0], second = args[1], adds = [].slice.call(args, 2);
                        var deleteCount = second >= 0 ? second : len - start;
                        var node = findIndex(parent, listName, start);
                        if (node) {
                            removeViews(parent, listName, node, deleteCount);
                            resetIndex(parent, listName);
                            if (adds.length) {
                                node = findIndex(parent, listName, start);
                                list.insertBefore = node;
                                $.each(adds, function(index, item) {
                                    updateView(index, item);
                                });
                                resetIndex(parent, listName);
                                delete list.insertBefore;
                            }
                        }
                        break;
                    case "reverse":
                    case "sort":
                        while (parent.firstChild) {
                            parent.removeChild(parent.firstChild);
                        }
                        $.each(list, function(index, item) {
                            updateView(index, item);
                        });
                        break;
                }
            }
            var isList = Array.isArray(list[ subscribers ] || {});
            if (isList) {
                list[ subscribers ].push(updateListView);
            }

            function updateView(index, item, clone, insertBefore) {
                var newScope = {}, textNodes = [];
                newScope[itemName] = item;
                newScope[indexName] = index;
                if (isList) {
                    var comment = doc.createComment(list.name + index);
                    if (list.insertBefore) {
                        parent.insertBefore(comment, list.insertBefore);
                    } else {
                        parent.appendChild(comment);
                    }
                }
                for (var node = fragment.firstChild; node; node = node.nextSibling) {
                    clone = node.cloneNode(true);
                    if (clone.nodeType === 1) {
                        scanTag(clone, newScope, scopeList, doc);//扫描元素节点
                    } else if (clone.nodeType === 3) {
                        textNodes.push(clone);
                    }
                    if (list.insertBefore) {
                        parent.insertBefore(clone, list.insertBefore);
                    } else {
                        parent.appendChild(clone);
                    }
                }
                for (var i = 0; node = textNodes[i++]; ) {
                    scanText(node, newScope, scopeList, doc);//扫描文本节点
                }
            }
            forEach(list, updateView);
            flags.stopBinding = true;
        }
    };
    //重置所有路标
    function resetIndex(elem, name) {
        var index = 0;
        for (var node = elem.firstChild; node; node = node.nextSibling) {
            if (node.nodeType === 8) {
                if (node.nodeValue.indexOf(name) === 0) {
                    if (node.nodeValue !== name + index) {
                        node.nodeValue = name + index;
                    }
                    index++;
                }
            }
        }
    }
    function removeView(elem, name, node) {
        var nodes = [], doc = elem.ownerDocument, view = doc.createDocumentFragment();
        for (var check = node; check; check = check.nextSibling) {
            //如果到达下一个路标,则断开,将收集到的节点放到文档碎片与下一个路标返回
            if (check.nodeType === 8 && check.nodeValue.indexOf(name) === 0
                    && check !== node) {
                break
            }
            nodes.push(check);
        }
        for (var i = 0; node = nodes[i++]; ) {
            view.appendChild(node);
        }
        return [view, check];
    }
    function removeViews(elem, name, node, number) {
        var ret = [];
        do {
            var array = removeView(elem, name, node);
            if (array[1]) {
                node = array[1];
                ret.push(array[0]);
            } else {
                break
            }
        } while (ret.length !== number);
        return ret;
    }
    function findIndex(elem, name, target) {
        var index = 0;
        for (var node = elem.firstChild; node; node = node.nextSibling) {
            if (node.nodeType === 8) {
                if (node.nodeValue.indexOf(name) === 0) {
                    if (node.nodeValue == name + target) {
                        return node;
                    }
                    index++;
                }
            }
        }
    }
    //循环绑定其他布尔属性
    var bools = "autofocus,autoplay,async,checked,controls,declare,defer,"
            + "contenteditable,ismap,loop,multiple,noshade,open,noresize,readonly,selected";
    bools.replace($.rword, function(name) {
        bindingHandlers[name] = bindingHandlers.disabled;
    });
    //建议不要直接在src属性上修改，因此这样会发出无效的请求，使用ms-src
    "title, alt, src".replace($.rword, function(name) {
        bindingHandlers[name] = bindingHandlers.href;
    });

    var modelBinding = bindingHandlers.model;
    //如果一个input标签添加了model绑定。那么它对应的字段将与元素的value连结在一起
    //字段变，value就变；value变，字段也跟着变。默认是绑定input事件，
    //我们也可以使用ng-event="change"改成change事件
    modelBinding.INPUT = function(element, model, name) {
        if (element.name === void 0) {
            element.name = name;
        }
        var type = element.type, ok;
        function updateModel() {
            model[name] = element.value;
        }
        function updateView() {
            element.value = model[name];
        }
        if (/^(password|textarea|text)$/.test(type)) {
            ok = true;
            updateModel = function() {
                model[name] = element.value;
            };
            updateView = function() {
                element.value = model[name];
            };
            var event = element.attributes[prefix + "event"] || {};
            event = event.value;
            if (event === "change") {
                $.bind(element, event, updateModel);
            } else {
                if (window.addEventListener) { //先执行W3C
                    element.addEventListener("input", updateModel, false);
                } else {
                    element.attachEvent("onpropertychange", updateModel);
                }
                if (window.VBArray && window.addEventListener) { //IE9
                    element.attachEvent("onkeydown", function(e) {
                        var key = e.keyCode;
                        if (key === 8 || key === 46) {
                            updateModel(); //处理回退与删除
                        }
                    });
                    element.attachEvent("oncut", updateModel); //处理粘贴
                }
            }

        } else if (type === "radio") {
            ok = true;
            updateView = function() {
                element.checked = model[name] === element.value;
            };
            $.bind(element, "click", updateModel);//IE6-8
        } else if (type === "checkbox") {
            ok = true;
            updateModel = function() {
                if (element.checked) {
                    $.Array.ensure(model[name], element.value);
                } else {
                    $.Array.remove(model[name], element.value);
                }
            };
            updateView = function() {
                element.checked = !!~model[name].indexOf(element.value);
            };
            $.bind(element, "click", updateModel);//IE6-8
        }
        Publish[ expando ] = updateView;
        updateView();
        delete Publish[ expando ];
    };
    modelBinding.SELECT = function(element, model, name) {
        var select = $(element);
        function updateModel() {
            model[name] = select.val();
        }
        function updateView() {
            select.val(model[name]);
        }
        $.bind(element, "change", updateModel);
        Publish[ expando ] = updateView;
        updateView();
        delete Publish[ expando ];
    };
    modelBinding.TEXTAREA = modelBinding.INPUT;
    /*********************************************************************
     *                    Collection                                    *
     **********************************************************************/
    //http://msdn.microsoft.com/en-us/library/windows/apps/hh700774.aspx
    //http://msdn.microsoft.com/zh-cn/magazine/jj651576.aspx
    //Data bindings 数据／界面绑定
    //Compatibility 兼容其他
    //Extensibility 可扩充性
    //No direct DOM manipulations 不直接对DOM操作
    function Collection(list, name) {
        var collection = list.concat();
        collection[ subscribers ] = [];
        collection.name = "#" + name;
        String("push,pop,shift,unshift,splice,sort,reverse").replace($.rword, function(method) {
            var nativeMethod = collection[ method ];
            collection[ method ] = function() {
                var len = this.length;
                var ret = nativeMethod.apply(this, arguments);
                notifySubscribers(this, method, arguments, len);
                return ret;
            };
        });
        collection.clear = function() {
            this.length = 0;
            notifySubscribers(this, "clear", []);
            return this;
        };
        collection.sortBy = function(fn, scope) {
            var ret = $.Array.sortBy(this, fn, scope);
            notifySubscribers(this, "sort", []);
            return ret;
        };
        collection.ensure = function(el) {
            var len = this.length;
            var ret = $.Array.ensure(this, el);
            if (this.length > len) {
                notifySubscribers(this, "push", [el], len);
            }
            return ret;
        };
        collection.update = function() {//强制刷新页面
            notifySubscribers(this, "sort", []);
            return this;
        };
        collection.removeAt = function(index) {//移除指定索引上的元素
            this.splice(index, 1);
        };
        collection.remove = function(item) {//移除第一个等于给定值的元素
            var index = this.indexOf(item);
            if (index !== -1) {
                this.removeAt(index);
            }
        };
        return collection;
    }
    /*********************************************************************
     *                            Subscription                           *
     **********************************************************************/
    /*
     为简单起见，我们把双向绑定链分成三层， 顶层， 中层， 底层。顶层是updateView, updateListView等需要撷取底层的值来更新自身的局部刷新函数， 中层是监控数组与依赖于其他属性的计算监控属性，底层是监控属性。高层总是依赖于低层，但高层该如何知道它是依赖哪些底层呢？

     在emberjs中，作为计算监控属性的fullName通过property方法，得知自己是依赖于firstName, lastName。
     App.Person = Ember.Object.extend({
     firstName: null,
     lastName: null,

     fullName: function() {
     return this.get('firstName') +
     " " + this.get('lastName');
     }.property('firstName', 'lastName')
     });

     在knockout中，用了一个取巧方法，将所有要监控的属性转换为一个函数。当fullName第一次求值时，它将自己的名字放到一个地方X，值为一个数组。然后函数体内的firstName与lastName在自身求值时，也会访问X，发现上面有数组时，就放进去。当fullName执行完毕，就得知它依赖于哪个了，并从X删掉数组。
     var ViewModel = function(first, last) {
     this.firstName = ko.observable(first);
     this.lastName = ko.observable(last);

     this.fullName = ko.computed(function() {
     // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
     return this.firstName() + " " + this.lastName();
     }, this);
     };
     详见 subscribables/observable.js subscribables/dependentObservable.js

     */
    //http://www.cnblogs.com/whitewolf/archive/2012/07/07/2580630.html
    function getSubscribers(accessor) {
        if (typeof accessor === "string") {
            return obsevers[accessor] || (obsevers[accessor] = []);
        } else {
            return accessor[ subscribers ];
        }
    }
    function collectSubscribers(accessor) {//收集依赖于这个域的函数
        if (Publish[ expando ]) {
            var list = getSubscribers(accessor);
            $.Array.ensure(list, Publish[ expando ]);
        }
    }
    function notifySubscribers(accessor) {//通知依赖于这个域的函数们更新自身
        var list = getSubscribers(accessor);
        if (list && list.length) {
            var args = [].slice.call(arguments, 1);
            var safelist = list.concat();
            for (var i = 0, fn; fn = safelist[i++]; ) {
                if (typeof fn === "function") {
                    fn.apply(0, args); //强制重新计算自身
                }
            }
        }
    }
    /*********************************************************************
     *                            Model                                   *
     **********************************************************************/
    $.model = function(name, obj) {
        name = name || "root";
        if (avalon.models[name]) {
            $.error('已经存在"' + name + '"模块');
        } else {
            var model = modelFactory(name, obj, $.skipArray || []);
            model.$modelName = name;
            return avalon.models[name] = model
        }
    };
    var startWithDollar = /^\$/;
    function modelFactory(name, obj, skipArray) {
        var model = {}, first = [], second = [];
        forEach(obj, function(key, val) {
            //如果不在忽略列表内,并且没有以$开头($开头的属性名留着框架使用)
            if (skipArray.indexOf(key) === -1 && !startWithDollar.test(key)) {
                //相依赖的computed
                var accessor = name + key, old;
                if (Array.isArray(val) && !val[subscribers]) {
                    model[key] = Collection(val, accessor);
                } else if (typeof val === "object") {
                    if ("set" in val && Object.keys(val).length <= 2) {
                        Object.defineProperty(model, key, {
                            set: function(neo) {
                                if (typeof val.set === "function") {
                                    val.set.call(model, neo); //通知底层改变
                                } else {
                                    obj[key] = neo;
                                }
                                if (old !== neo) {
                                    old = neo;
                                    notifySubscribers(accessor); //通知顶层改变
                                }
                            },
                            //get方法肯定存在,那么肯定在这里告诉它的依赖,把它的setter放到依赖的订阅列表中
                            get: function() {
                                var flagDelete = false;
                                if (!obsevers[accessor]) {
                                    flagDelete = true;
                                    Publish[ expando ] = function() {
                                        notifySubscribers(accessor); //通知顶层改变
                                    };
                                    obsevers[accessor] = [];
                                }
                                old = val.get.call(model);
                                obj[name] = old;
                                if (flagDelete) {
                                    delete Publish[ expando ];
                                }
                                return old;
                            },
                            enumerable: true
                        });
                        second.push(key);
                    } else {

                    }
                } else if (typeof val !== "function") {
                    Object.defineProperty(model, key, {
                        set: function(neo) {
                            if (obj[key] !== neo) {
                                obj[key] = neo;
                                //通知中层,顶层改变
                                notifySubscribers(accessor);
                            }
                        },
                        get: function() {
                            //如果中层把方法放在Publish[ expando ]中
                            if (!obj.$occoecatio){//为了防止它在不合适的时候收集订阅者,添加$occoecatio标识让它瞎掉
                                collectSubscribers(accessor);
                            }

                            return obj[key];
                        },
                        enumerable: true
                    });
                    first.push(key);
                }
            }
        });
        first.forEach(function(key) {
            model[key] = obj[key];
        });
        second.forEach(function(key) {
            first = model[key];
        });
        return  model;
    }
    /*********************************************************************
     *                           Scan                                     *
     **********************************************************************/
    function scanTag(elem, scope, scopes, doc) {
        scopes = scopes || [];
        var flags = {};
        scanAttr(elem, scope, scopes, flags);//扫描特点节点
        if (flags.stopBinding) {//是否要停止扫描
            return false;
        }
        if (flags.newScope) {//更换作用域， 复制父作用域堆栈，防止互相影响
            scopes = scopes.slice(0);
            scope = flags.newScope;
        }
        if (elem.canHaveChildren === false || !stopScan[elem.tagName.toLowerCase()]) {
            var textNodes = [];
            for (var node = elem.firstChild; node; node = node.nextSibling) {
                if (node.nodeType === 1) {
                    scanTag(node, scope, scopes, doc);//扫描元素节点
                } else if (node.nodeType === 3) {
                    textNodes.push(node);
                }
            }
            for (var i = 0; node = textNodes[i++]; ) {//延后执行
                scanText(node, scope, scopes, doc);//扫描文本节点
            }
        }
    }
    var stopScan = $.oneObject("area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed,wbr,script,style".toUpperCase());
    //扫描元素节点中直属的文本节点，并进行抽取
    function scanText(textNode, scope, scopes, doc) {
        var bindings = extractTextBindings(textNode, doc);
        if (bindings.length) {
            executeBindings(bindings, scope, scopes);
        }
    }
    function scanExpr(value) {
        var tokens = [];
        if (hasExpr(value)) {
            //抽取{{ }} 里面的语句，并以它们为定界符，拆分原来的文本
            do {
                value = value.replace(regOpenTag, function(a, b) {
                    if (b) {
                        tokens.push({
                            value: b,
                            expr: false
                        });
                    }
                    return "";
                });
                value = value.replace(regCloseTag, function(a, b) {
                    if (b) {
                        var filters = []
                        if (b.indexOf("|") > 0) {
                            b = b.replace(/\|\s*(\w+)\s*(\([^)]+\))?/g, function(c, d, e) {
                                filters.push(d + e)
                                return ""
                            });
                        }
                        tokens.push({
                            value: b,
                            expr: true,
                            filters: filters.length ? filters : void 0
                        });
                    }
                    return "";
                });
            } while (hasExpr(value));
            if (value) {
                tokens.push({
                    value: value,
                    expr: false
                });
            }
        }
        return tokens;
    }

    function scanAttr(el, scope, scopes, flags) {
        var bindings = [];
        for (var i = 0, attr; attr = el.attributes[i++]; ) {
            if (attr.specified) {
                var isBinding = false, remove = false;
                if (attr.name.indexOf(prefix) !== -1) {//如果是以指定前缀命名的
                    var type = attr.name.replace(prefix, "");
                    if (type.indexOf("-") > 0) {
                        var args = type.split("-");
                        type = args.shift();
                    }
                    remove = true;
                    isBinding = typeof bindingHandlers[type] === "function";
                } else if (bindingHandlers[attr.name] && hasExpr(attr.value)) {
                    type = attr.name; //如果只是普通属性，但其值是个插值表达式
                    isBinding = true;
                }
                if (isBinding) {
                    bindings.push({
                        type: type,
                        args: args,
                        element: el,
                        node: attr,
                        remove: remove,
                        value: attr.nodeValue
                    });
                }
                if (!flags.newScope && type === "controller") {//更换作用域
                    var temp = avalon.models[attr.value];
                    if (typeof temp === "object" && temp !== scope) {
                        scopes.unshift(scope);
                        flags.newScope = scope = temp;
                    }
                }
            }
        }
        executeBindings(bindings, scope, scopes, flags);
    }

    function executeBindings(bindings, scope, scopes, flags) {
        bindings.forEach(function(data) {
            bindingHandlers[data.type](data, scope, scopes, flags);
            if (data.remove) {//移除数据绑定，防止被二次解析
                data.element.removeAttribute(data.node.name);
            }
        });
    }

    function extractTextBindings(textNode, doc) {
        var bindings = [], tokens = scanExpr(textNode.nodeValue);
        if (tokens.length) {
            var fragment = doc.createDocumentFragment();
            while (tokens.length) {//将文本转换为文本节点，并替换原来的文本节点
                var token = tokens.shift();
                var node = doc.createTextNode(token.value);
                if (token.expr) {
                    bindings.push({
                        type: "text",
                        node: node,
                        element: textNode.parentNode,
                        value: token.value,
                        filters: token.filters
                    }); //收集带有插值表达式的文本
                }
                fragment.appendChild(node);
            }
            textNode.parentNode.replaceChild(fragment, textNode);
        }
        return bindings;
    }
/* 例子
    var model = $.model("app", {
        firstName: "xxx",
        lastName: "oooo",
        bool: false,
        array: [1, 2, 3, 4, 5, 6, 7, 8],
        select: "test1",
        color: "green",
        vehicle: ["car"],
        fullName: {
            set: function(val) {
                var array = val.split(" ");
                this.firstName = array[0] || "";
                this.lastName = array[1] || "";
            },
            get: function() {
                return this.firstName + " " + this.lastName;
            }
        }
    });
    $.model("son", {
        firstName: "yyyy"
    });
    $.model("aaa", {
        firstName: "6666"
    });
    scanTag(document.body, model, [], document);
    setTimeout(function() {
        model.firstName = "setTimeout";
    }, 2000);

    setTimeout(function() {
        model.array.reverse()
        // console.log(obsevers.applastName.join("\r\n"))
    }, 3000);
   */
});