迷你MVVM框架 avalonjs 0.8发布
本版本最重要的特性是引进了AMD规范的模块加载器,亦即原来mass Framework 的并行加载器, 不同之处,它引进了requirejs的xxx!风格的插件机制,比如要延迟到DOM树建完时触发,是使用ready!, 要加载css文件是使用css!css_path。
加载器在移动设备或PC的单页应用不可或缺。根据公司内容的不完全统计,手机等浏览器的性能只是PC的十分之一左右,而且测试对象还是公司的有钱同事的手机,什么IP,三星GALAXY。
在过去的一周,整合angular, requirejs遇到各种困难,最后只能到github下载了一个整合好的应用来修改。由于没有整合的能力,意味着我们的angular就不能随意升级了。因此深感自带加载器的重要性。当然加载器一直是微博遇到的一些朋友所热切盼望的功能。因为要同时同步两个不是自己能掌控的项目,实在心绞力竭。
现在avalon项目下,除了avalon.js外,还有一个叫avalon.mobile.js的东西,它是avalon.js的优化版,专门使用HTML5时代出现的新属性构建,不再兼容旧式IE,IE的支持版本为IE10,这就保证移动设备上也能流畅运行。
比如hasClass, addClass, removeClass, toggleClass在avalon.js是这样实现的
hasClass: function(cls) { var el = this[0] || {} if (el.nodeType === 1) { return !!el.className && (" " + el.className + " ").indexOf(" " + cls + " ") > -1 } }, addClass: function(cls) { var node = this[0] if (cls && typeof cls === "string" && node && node.nodeType === 1) { if (!node.className) { node.className = cls } else { var a = (node.className + " " + cls).match(rnospaces) a.sort() for (var j = a.length - 1; j > 0; --j) if (a[j] === a[j - 1]) a.splice(j, 1) node.className = a.join(" ") } } return this }, removeClass: function(cls) { var node = this[0] if (cls && typeof cls > "o" && node && node.nodeType === 1 && node.className) { var classNames = (cls || "").match(rnospaces) || [] var cl = classNames.length var set = " " + node.className.match(rnospaces).join(" ") + " " for (var c = 0; c < cl; c++) { set = set.replace(" " + classNames[c] + " ", " ") } node.className = set.slice(1, set.length - 1) } return this }, toggleClass: function(value, stateVal) { var state = stateVal, className, i = 0 var classNames = value.match(rnospaces) || [] var isBool = typeof stateVal === "boolean" while ((className = classNames[i++])) { state = isBool ? state : !this.hasClass(className) this[state ? "addClass" : "removeClass"](className) } return this },
到avalon.mobile则是这样实现:
hasClass: function(cls) { var el = this[0] || {} return el.nodeType === 1 && el.classList.contains(cls) }, addClass: function(cls) { var el = this[0] if (cls && typeof cls === "string" && el && el.nodeType === 1) { cls.replace(rword, function(c) { el.classList.add(c) }) } return this }, removeClass: function(cls) { var node = this[0] if (cls && typeof cls > "o" && node && node.nodeType === 1 && node.className) { cls.replace(rword, function(c) { node.classList.remove(c) }) } return this }, toggleClass: function(value, stateVal) { var state = stateVal, className, i = 0 var classNames = value.match(rnospaces) || [] var isBool = typeof stateVal === "boolean" var node = this[0] || {}, classList if (classList = node.classList) { while ((className = classNames[i++])) { state = isBool ? state : !classList.contains(className) classList[state ? "add" : "remove"](className) } } return this },
attr方法在这两个版本的实现也不一样,avalon.mobile.js用到了dataset。
data: function(name, value) { name = "data-" + hyphen(name || "") switch (arguments.length) { case 2: this.attr(name, value) return this case 1: var val = this.attr(name) return parseData(val) case 0: var attrs = this[0].attributes, ret = {} for (var i = 0, attr; attr = attrs[i++]; ) { name = attr.name if (!name.indexOf("data-")) { name = camelize(name.slice(5)) ret[name] = parseData(attr.value) } } return ret } }, //---------------------------------------------------------- avalon.data = function(name, val) { var dataset = this[0].dataset; switch (arguments.length) { case 2: dataset[name] = val return this case 1: val = dataset[name] return parseData(val) case 0: var ret = {} for (var name in dataset) { ret[name] = parseData(dataset[name]) } return ret } }
avalon.mobile.js甚至尝试用hidden实现visible绑定
if (typeof DOC.createElement("div").hidden === "boolean") { bindingHandlers.visible = function(data, vmodels) { var elem = data.element watchView(data.value, vmodels, data, function(val) { elem.hidden = !val }) } }
未来的展望,接着眼于下来的0.9版本,将尝试加强国际化的支持与对数组元素的深层监控, avalon.mobile将尝试使用webworker, 然后发布正式版1.0!!!!!!!!!!
迷你MVVM框架在github的仓库https://github.com/RubyLouvre/avalon