迷你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的优化版，专门使用ＨＴＭＬ５时代出现的新属性构建，不再兼容旧式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
        })
    }
}