avalon2
Version:
an elegant efficient express mvvm framework
1,468 lines (1,365 loc) • 44.6 kB
JavaScript
/*!
*
* 这是一个迷你版avalon,支持IE9+
*/
(function () {
var avalon = function () {
}
window.avalon = avalon
var vmodels = avalon.vmodels = {}
avalon.define = function (obj) {
return vmodels[obj.$id] = Observer(obj)
}
avalon.mix = function (a, b) {
for (var i in b) {
a[i] = b[i]
}
return a
}
avalon.noop = avalon
var rhashcode = /\d\.\d{4}/
avalon.makeHashCode = function (prefix) {
/* istanbul ignore next*/
prefix = prefix || 'avalon'
/* istanbul ignore next*/
return String(Math.random() + Math.random()).replace(rhashcode, prefix)
}
var hasConsole = typeof console === 'object'
avalon.config = function fn(obj) {
avalon.mix(fn, obj)
}
avalon.config({
debug: 1
})
avalon.log = function () {
if (hasConsole && avalon.config.debug) {
// http://stackoverflow.com/questions/8785624/how-to-safely-wrap-console-log
Function.apply.call(console.log, console, arguments)
}
}
var rword = /[^, ]+/g
avalon.oneObject = function (array, val) {
if (typeof array === 'string') {
array = array.match(rword) || []
}
var result = {},
value = val !== void 0 ? val : 1
for (var i = 0, n = array.length; i < n; i++) {
result[array[i]] = value
}
return result
}
avalon.quote = JSON.stringify
function startWith(long, short){
return long.indexOf(short) === 0
}
function isArray(a) {
return Array.isArray(a)
}
function isObservable(key, value) {
return (typeof value !== 'function') && key.charAt(0) !== '$'
}
function isObject(a) {
return a && typeof a === 'object'
}
function createFragment() {
return document.createDocumentFragment()
}
function createAnchor(nodeValue) {
return document.createComment(nodeValue)
}
function copy(target) {
var ret
if (isArray(target)) {
ret = target.slice(0)
} else if (isObject(target)) {
ret = avalon.mix({}, target)
}
return ret || target
}
function replaceNode(newNode, oldNode) {
oldNode.parentNode.replaceChild(newNode, oldNode)
return newNode
}
avalon.each = function (a, fn) {
if (isArray(a)) {
a.forEach(function (el, index) {
fn(index, el)
})
} else {
for (var i in a) {
fn(i, a[i])
}
}
}
var delayCompile = {}
avalon.directives = {}
avalon.directive = function (name, opts) {
avalon.directives[name] = opts
if (opts.delay) {
delayCompile[name] = 1
}
}
//============ Observer 模块 ==========
function createObserver(target, ret) {
if (isObject(target)) {
return target.$events ? target : new Observer(target, ret)
}
if (ret) {
return target
}
}
function Observer(data, vm) {
if (isArray(data)) {
vm = observeArray(data)
} else {
vm = observeObject(data)
}
if(vm)
vm.$events.__dep__ = new Depend()
return vm
}
function observeObject(object) {
var core = {} //events
var state = {}
var props = {}
for (var key in object) {
var val = object[key]
if (isObservable(key, val)) {
state[key] = createAccessor(key, val, core)
} else {
props[key] = val
}
}
addMoreProps(props, object, state, core)
var observe = {}
observe = createViewModel(observe, state, props)
for (var i in props) {
observe[i] = props[i]
}
core.observe = observe
return observe
}
function observeItemObject(before, after) {
var core = before.$events
var state = before.$accessor
var object = after.data
delete after.data
var props = after
for (var key in object) {
state[key] = createAccessor(key, object[key], core)
}
addMoreProps(props, object, state, core)
var observe = {}
observe = createViewModel(observe, state, props)
for (var i in props) {
observe[i] = props[i]
}
core.observe = observe
if (!core.__dep__) {
core.__dep__ = new Depend()
}
return observe
}
var modelAccessor = {
get: function () {
return toJson(this)
},
set: avalon.noop,
enumerable: false,
configurable: true
}
function toJson(val) {
if (isArray(val)) {
var array = []
for (var i = 0; i < val.length; i++) {
array[i] = toJson(val[i])
}
return array
} else if (isObject(val)) {
var obj = {}
for (i in val) {
if (val.hasOwnProperty(i)) {
var value = val[i]
obj[i] = value && value.nodeType ? value : toJson(value)
}
}
return obj
} else {
return val
}
}
function createViewModel(a, b, c) {
return Object.defineProperties(a, b)
}
function observeArray(array, rewrite, ret) {
function createAccessor(key, val, core) {
var value = val
var childOb = createObserver(val)
return {
get: function Getter() {
var ret = value
if (Depend.watcher) {
core.__dep__.collect()
if (childOb && childOb.$events) {
childOb.$events.__dep__.collect()
}
}
return ret
},
set: function Setter(newValue) {
var oldValue = value
if (newValue === oldValue) {
return
}
core.__dep__.beforeNotify()
value = newValue
childOb = createObserver(newValue)
core.__dep__.notify()
},
enumerable: true,
configurable: true
}
}
function addMoreProps(props, object, state, core) {
var hash = avalon.makeHashCode('$')
state.$model = modelAccessor
avalon.mix(props, {
$id: object.$id || hash,
$events: core,
$hashcode: hash,
$accessor: state
})
}
//============ 监控数组 ==========
var ap = Array.prototype
var __array__ = {}
var __method__ = ['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse']
function rewriteArrayMethods(array) {
/* istanbul ignore else */
for (var i in __array__) {
array[i] = __array__[i]
}
array.$events = {} // 以后自动加上
}
__method__.forEach(function (method) {
var original = ap[method]
__array__[method] = function () {
// 继续尝试劫持数组元素的属性
var args = []
var size = this.length
var core = this.$events
for (var i = 0; i < arguments.length; i++) {
args.push(arguments[i])
}
core.__dep__.beforeNotify()
var result = original.apply(this, args)
var inserts = []
switch (method) {
case 'push':
case 'unshift':
inserts = args
break
case 'splice':
inserts = args.slice(2)
break
}
if (inserts && inserts) {
inserts = observeArray(inserts, 1, 1)
}
core.__dep__.notify({
method: method,
args: args
})
return result
}
})
//============== Depend ============
var guid = 0
/**
* 依赖收集类 用于联结 VM 与 Watcher
*/
function Depend() {
this.watchers = []
this.guid = guid++
}
/**
* 当前收集依赖的订阅模块 watcher
* @type {Object}
*/
Depend.watcher = null
var dp = Depend.prototype
/**
* 添加依赖订阅
* @param {Object} watcher
*/
dp.addWatcher = function (watcher) {
this.watchers.push(watcher)
}
/**
* 移除依赖订阅
* @param {Object} watcher
*/
dp.removeWatcher = function (watcher) {
var index = this.watchers.indexOf(watcher)
if (index > -1) {
this.watchers.splice(index, 1)
}
}
/**
* 为 watcher 收集当前的依赖
*/
dp.collect = function () {
if (Depend.watcher) {
Depend.watcher.addDepend(this)
}
}
/**
* 依赖变更前调用方法，用于旧数据的缓存处理
*/
dp.beforeNotify = function () {
this.watchers.forEach(function (watcher) {
watcher.beforeUpdate()
})
}
/**
* 依赖变更，通知每一个订阅了该依赖的 watcher
* @param {Object} args [数组操作参数信息]
*/
dp.notify = function (args) {
var guid = this.guid
this.watchers.forEach(function (watcher) {
watcher.update(args, guid)
})
}
//============ Watcher模块 ============
/**
* 遍历对象/数组每一个可枚举属性
* @param {Object|Array} target [遍历值/对象或数组]
* @param {Boolean} root [是否是根对象/数组]
*/
var walkedObs = []
function walkThrough(target, root) {
var events = target && target.$events
var guid = events && events.__dep__.guid
if (guid) {
if (walkedObs.indexOf(guid) > -1) {
return
} else {
walkedObs.push(guid)
}
}
avalon.each(target, function (key, value) {
walkThrough(value, false)
})
if (root) {
walkedObs.length = 0
}
}
/**
* 用户watch回调及页面上的指令都会转换它的实例
* @param {type} vm
* @param {type} desc
* @param {type} callback
* @param {type} context
* @returns {Watcher}
*/
function Watcher(vm, desc, callback, context) {
this.vm = vm
avalon.mix(this, desc)
this.callback = callback
this.context = context || this
// 依赖 id 缓存
this.depIds = []
this.newDepIds = []
this.shallowIds = []
// 依赖实例缓存
this.depends = []
this.newDepends = []
var expr = desc.expr
var preSetFunc = typeof expr === 'function'
// 缓存取值函数
this.getter = preSetFunc ? expr : createGetter(expr)
// 缓存设值函数（双向数据绑定）
this.setter = this.type === 'duplex' ? createSetter(expr) : null
// 缓存表达式旧值
this.oldVal = null
// 表达式初始值 & 提取依赖
this.value = this.get()
}
var wp = Watcher.prototype
/**
* 获取取值域
* @return {Object}
*/
wp.getScope = function () {
return this.context.scope || this.vm
}
wp.getValue = function () {
var scope = this.getScope()
try {
return this.getter.call(scope, scope)
} catch (e) {
avalon.log(this.getter + 'exec error')
}
}
wp.setValue = function (value) {
var scope = this.getScope()
if (this.setter) {
this.setter.call(scope, scope, value)
}
}
wp.get = function () {
var value
this.beforeGet()
value = this.getValue()
// 深层依赖获取
if (this.deep) {
// 先缓存浅依赖的 ids
this.shallowIds = copy(this.newDepIds)
walkThrough(value, true)
}
this.afterGet()
return value
}
wp.beforeGet = function () {
Depend.watcher = this
}
wp.addDepend = function (depend) {
var guid = depend.guid
var newIds = this.newDepIds
if (newIds.indexOf(guid) < 0) {
newIds.push(guid)
this.newDepends.push(depend)
if (this.depIds.indexOf(guid) < 0) {
depend.addWatcher(this)
}
}
}
wp.removeDepends = function (filter) {
var self = this
this.depends.forEach(function (depend) {
if (filter) {
if (filter.call(self, depend)) {
depend.removeWatcher(self)
}
} else {
depend.removeWatcher(self)
}
})
}
wp.afterGet = function () {
Depend.watcher = null
// 清除无用的依赖
this.removeDepends(function (depend) {
return this.newDepIds.indexOf(depend.guid) < 0
})
// 重设依赖缓存
this.depIds = copy(this.newDepIds)
this.newDepIds.length = 0
this.depends = copy(this.newDepends)
this.newDepends.length = 0
}
wp.beforeUpdate = function () {
this.oldVal = copy(this.value)
}
wp.update = function (args, guid) {
var oldVal = this.oldVal
var newVal = this.value = this.get()
var callback = this.callback
if (callback && (oldVal !== newVal)) {
var fromDeep = this.deep && this.shallowIds.indexOf(guid) < 0
callback.call(this.context, newVal, oldVal, fromDeep, args)
}
}
wp.destroy = function () {
this.value = null
this.removeDepends()
if (this._destroy) {
this._destroy()
}
for (var i in this) {
delete this[i]
}
}
//========== 渲染模块 =========
function isDirective(directive) {
return /^(?:\:|ms-)\w+/.test(directive)
}
function delayCompileNodes(dirs) {
for (var i in delayCompile) {
if (('ms-' + i) in dirs) {
return true
}
}
}
var regMustache = /\{\{.+\}\}/
var rcolon = /^(:|ms)-/
function getRawBindings(node) {
if (node.nodeType === 1) {
var attrs = node.attributes
var props = {}, has = false
for (var i = 0, n = attrs.length; i < n; i++) {
var attr = attrs[i]
if (attr.specified) {
var name = attr.name
if (name.charAt(0) === ':') {
name = name.replace(rcolon, 'ms-')
}
if (startWith(name,'ms-')) {
props[name] = attr.value
has = true
}
}
}
if (attrs['is']) {
if (!props['ms-widget']) {
props['ms-widget'] = '{}'
}
has = true
}
return has ? props : false
} else if (node.nodeType === 3) {
if (regMustache.test(node.nodeValue)) {
return {
nodeValue: node.nodeValue
}
}
} else if (node.nodeType === 8) {
if (startWith(node.nodeValue,'ms-for:')) {
var nodes = []
var deep = 1
var begin = node
var expr = node.nodeValue.replace('ms-for:', '')
node.nodeValue = 'msfor:' + expr
while (node = node.nextSibling) {
nodes.push(node)
if (node.nodeType === 8) {
if (startWith(node.nodeValue,'ms-for:')) {
deep++
} else if (startWith(node.nodeValue,'ms-for-end:')) {
deep--
if (deep === 0) {
node.nodeValue = 'msfor-end:'
nodes.pop()
}
}
}
}
var f = createFragment()
nodes.forEach(function (n) {
f.appendChild(n)
})
this.queue.push([
f, this.vm, {'ms-for': expr}, begin
])
}
}
}
function emptyNode(a) {
var f = createFragment()
while (a.firstChild) {
f.appendChild(a.firstChild)
}
return f
}
avalon.scan = function (node, vm) {
return new Render(node, vm)
}
var eventMap = avalon.oneObject('animationend,blur,change,input,click,dblclick,focus,keydown,keypress,keyup,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover,mouseup,scan,scroll,submit')
function Render(node, vm) {
this.node = node
this.vm = vm
this.queue = []
this.directives = []
this.init()
}
var cp = Render.prototype
cp.init = function () {
this.fragment = emptyNode(this.node)
this.getBindings(this.fragment, true)
}
cp.getRawBindings = getRawBindings
cp.getBindings = function (element, root) {
var childNodes = element.childNodes
var scope = this.vm
var dirs = this.getRawBindings(element)
if (dirs) {
this.queue.push([element, scope, dirs])
}
if (!/style|textarea|xmp|script|template/i.test(element.nodeName)
&& childNodes
&& childNodes.length
&& !delayCompileNodes(dirs || {})
) {
for (var i = 0; i < childNodes.length; i++) {
this.getBindings(childNodes[i], false)
}
}
if (root) {
this.compileBindings()
}
}
cp.compileBindings = function () {
this.queue.forEach(function (tuple) {
this.parseBindings(tuple)
}, this)
this.node.appendChild(this.fragment)
}
/**
* 将收集到的绑定属性进行深加工,最后转换为watcher
* @param {Array} tuple [node, scope, dirs]
*/
cp.parseBindings = function (tuple) {
var node = tuple[0]
var scope = tuple[1]
var dirs = tuple[2]
if ('nodeValue' in dirs) {
this.parseText(node, dirs, scope)
} else if (!('ms-skip' in dirs)) {
var uniq = {}, bindings = []
var directives = avalon.directives
for (var name in dirs) {
var value = dirs[name]
var rbinding = /^(\:|ms\-)\w+/
var match = name.match(rbinding)
var arr = name.replace(match[1], '').split('-')
if (eventMap[arr[0]]) {
arr.unshift('on')
}
if (arr[0] === 'on') {
arr[2] = parseFloat(arr[2]) || 0
}
arr.unshift('ms')
var type = arr[1]
if (directives[type]) {
var binding = {
type: type,
param: arr[2],
name: arr.join('-'),
expr: value,
priority: directives[type].priority || type.charCodeAt(0) * 100
}
if (type === 'on') {
binding.priority += arr[3]
}
if (!uniq[binding.name]) {
uniq[binding.name] = value
bindings.push(binding)
if (type === 'for') {
binding.begin = tuple[3]
bindings = [binding]
break
}
}
}
}
bindings.forEach(function (binding) {
this.parse(node, binding, scope)
}, this)
}
}
cp.parse = function (node, binding, scope) {
var dir = avalon.directives[binding.type]
if (dir) {
if (dir.parse) {
dir.parse(binding)
}
this.directives.push(new DirectiveWatcher(node, binding, scope))
}
}
cp.parseText = function (node, dir, scope) {
var rlineSp = /\n\r?/g
var text = dir.nodeValue.trim().replace(rlineSp, '')
var pieces = text.split(/\{\{(.+?)\}\}/g)
var tokens = []
pieces.forEach(function (piece) {
var segment = '{{' + piece + '}}'
if (text.indexOf(segment) > -1) {
tokens.push('(' + piece + ')')
text = text.replace(segment, '')
} else if (piece) {
tokens.push(avalon.quote(piece))
text = text.replace(piece, '')
}
})
var binding = {
expr: tokens.join('+'),
name: 'nodeValue',
type: 'nodeValue'
}
this.directives.push(new DirectiveWatcher(node, binding, scope))
}
cp.destroy = function () {
this.directives.forEach(function (directive) {
directive.destroy()
})
for (var i in this) {
delete this[i]
}
}
//========== Eval ========
var stringNum = 0
var stringPool = {
map: {}
}
var rfill = /\?\?\d+/g
function dig(a) {
var key = '??' + stringNum++
stringPool.map[key] = a
return key + ' '
}
function fill(a) {
var val = stringPool.map[a]
return val
}
function clearString(str) {
var array = readString(str)
for (var i = 0, n = array.length; i < n; i++) {
str = str.replace(array[i], dig)
}
return str
}
function readString(str) {
var end, s = 0
var ret = []
for (var i = 0, n = str.length; i < n; i++) {
var c = str.charAt(i)
if (!end) {
if (c === "'") {
end = "'"
s = i
} else if (c === '"') {
end = '"'
s = i
}
} else {
if (c === '\\') {
i += 1
continue
}
if (c === end) {
ret.push(str.slice(s, i + 1))
end = false
}
}
}
return ret
}
var keyMap = avalon.oneObject("break,case,catch,continue,debugger,default,delete,do,else,false," +
"finally,for,function,if,in,instanceof,new,null,return,switch,this," +
"throw,true,try,typeof,var,void,while,with," + /* 关键字*/
"abstract,boolean,byte,char,class,const,double,enum,export,extends," +
"final,float,goto,implements,import,int,interface,long,native," +
"package,private,protected,public,short,static,super,synchronized," +
"throws,transient,volatile")
var skipMap = avalon.mix({
Math: 1,
Date: 1,
$event: 1,
__vmodel__: 1
}, keyMap)
var rguide = /(^|[^\w\u00c0-\uFFFF_])(@|##)(?=[$\w])/g
var ruselessSp = /\s*(\.|\|)\s*/g
var rlocal = /[$a-z_][$\.\w\_]*/gi
var rregexp = /(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\\\r\n])+\/[gimyu]{0,5}(?=\s*($|[\r\n,.;})]))/g
function addScope(expr) {
var body = expr.trim().replace(rregexp, dig)//移除所有正则
body = clearString(body) //移除所有字符串
body = body.replace(ruselessSp, '$1').//移除.|两端空白
replace(rguide, '$1__vmodel__.').//转换@与##
replace(rlocal, function (a, b) {
var arr = a.split('.')
if (!skipMap[arr[0]]) {
return '__vmodel__.' + a
}
return a
}).replace(rfill, fill).replace(rfill, fill)
return body
}
function createGetter(expr) {
var body = addScope(expr)
try {
return new Function('__vmodel__', 'return ' + body + ';')
} catch (e) {
avalon.log('parse getter: ', expr, body, ' error')
return avalon.noop
}
}
/**
* 生成表达式设值函数
* @param {String} expr
*/
function createSetter(expr) {
var body = addScope(expr)
if (!startWith(body,'__vmodel__.')) {
body = ' __vmodel__.' + body
}
body = 'try{ ' + body + ' = __value__}catch(e){}'
try {
return new Function('__vmodel__', '__value__', body + ';')
} catch (e) {
avalon.log('parse setter: ', expr, ' error')
return avalon.noop
}
}
//=================== 各种指令的实现 ==============
/**
* 一个watcher装饰器
* @returns {watcher}
*/
function DirectiveWatcher(node, binding, scope) {
var type = binding.type
var directive = avalon.directives[type]
if (node.nodeType === 1) {
node.removeAttribute('ms-' + type)
node.removeAttribute(':' + type)
}
var callback = directive.update ? function (value) {
directive.update.call(this, node, value)
} : avalon.noop
var watcher = new Watcher(scope, binding, callback)
watcher.node = node
watcher._destory = directive.destory
if (directive.init)
directive.init(watcher)
delete watcher.value
watcher.update()
return watcher
}
avalon.directive('nodeValue', {
update: function (node, value) {
node.nodeValue = value
}
})
avalon.directive('attr', {
update: function (node, value) {
for (var i in value) {
node[i] = value[i]
}
}
})
avalon.directive('css', {
update: function (node, value) {
for (var i in value) {
node.style.setPropertyValue(i, value[i])
}
}
})
avalon.directive('on', {
init: function (watcher) {
var node = watcher.node
var body = addScope(watcher.expr)
var rhandleName = /^__vmodel__\.[$\w\.]+$/i
if (rhandleName.test(body)) {
body = body + '($event)'
}
body = body.replace(/__vmodel__\.([^(]+)\(([^)]*)\)/, function (a, b, c) {
return '__vmodel__.' + b + '.call(__vmodel__' + (/\S/.test(c) ? ',' + c : '') + ')'
})
var ret = [
'try{',
'\tvar __vmodel__ = this;',
'\t' + body,
'}catch(e){avalon.log(e)}']
var fn = new Function('$event', ret.join('\n'))
this.eventHandler = function (e) {
return fn.call(watcher.vm, e)
}
node.addEventListener(watcher.param, this.eventHandler)
},
destory: function () {
this.node.removeEventListener(this.param, this.eventHandler)
}
})
avalon.directive('if', {
delay: true,
priority: 5,
init: function (watcher) {
var node = watcher.node
node.removeAttribute('ms-if')
node.removeAttribute(':if')
watcher.node = node
var parent = node.parentNode
var c = watcher.placeholder = createAnchor('if')
replaceNode(c, node)
watcher.isShow = true
var f = createFragment()
f.appendChild(node)
watcher.fragment = f.cloneNode(true)
watcher.boss = avalon.scan(f, watcher.vm)
if (!!watcher.value) {
parent.replaceChild(f, c)
}
},
update: function (node, value) {
value = !!value
if (this.isShow === value)
return
this.isShow = value
if (value) {
var c = this.placeholder
var p = c.parentNode
var node = this.fragment.cloneNode(true)
this.boss = avalon.scan(node, this.vm)
this.node = node.firstChild
p.replaceChild(node, c)
} else {
var p = this.node.parentNode
var c = this.placeholder
p.replaceChild(c, this.node)
this.boss.destroy()
}
}
})
avalon.directive('html', {
update: function (node, value) {
this.boss && this.boss.destroy()
var div = document.createElement('div')
div.innerHTML = value
this.boss = avalon.scan(div, this.vm)
emptyNode(node)
node.appendChild(emptyNode(div))
},
delay: true
})
avalon.directive('duplex', {
priority: 999999,
init: function (watcher) {
var node = watcher.node
this.eventHandler = function () {
watcher.setValue(node.value)
}
if (/password|text|hidden/i.test(node.type)) {
node.addEventListener('input', this.eventHandler)
}
},
update: function (node, value) {
if (/password|text|hidden/i.test(node.type)) {
node.value = value
}
},
destory: function () {
this.node.removeEventListener('input', this.eventHandler)
}
})
avalon.directive('text', {
delay: true,
init: function (watcher) {
var node = watcher.node
emptyNode(node)
var child = document.createTextNode(watcher.value)
node.appendChild(child)
watcher.node = child
var type = 'nodeValue'
watcher.type = watcher.name = type
var directive = avalon.directives[type]
watcher.callback = function (value) {
directive.update.call(this, watcher.node, value)
}
}
})
var none = 'none'
function getDisplay(el) {
return window.getComputedStyle(el, null).display
}
function parseDisplay(elem, val) {
//用于取得此类标签的默认display值
var doc = elem.ownerDocument
var nodeName = elem.nodeName
var key = '_' + nodeName
if (!parseDisplay[key]) {
var temp = doc.body.appendChild(doc.createElement(nodeName))
val = getDisplay(temp)
doc.body.removeChild(temp)
if (val === none) {
val = 'block'
}
parseDisplay[key] = val
}
return parseDisplay[key]
}
avalon.directive('skip', {
delay: true
})
avalon.directive('visible', {
init: function (watcher) {
watcher.isShow = true
},
update: function (node, value) {
var isShow = !!value
if (this.isShow === isShow)
return
this.isShow = isShow
var display = node.style.display
if (isShow) {
if (display === none) {
value = this.displayValue
if (!value) {
node.style.display = ''
if (node.style.cssText === '') {
node.removeAttribute('style')
}
}
}
if (node.style.display === '' && getDisplay(node) === none &&
// fix firefox BUG,必须挂到页面上
node.ownerDocument.contains(node)) {
value = parseDisplay(node)
}
} else {
if (display !== none) {
value = none
this.displayValue = display
}
}
function cb() {
if (value !== void 0) {
node.style.display = value
}
}
cb()
}
})
var rforAs = /\s+as\s+([$\w]+)/
var rident = /^[$a-zA-Z_][$a-zA-Z0-9_]*$/
var rinvalid = /^(null|undefined|NaN|window|this|\$index|\$id)$/
var rargs = /[$\w_]+/g
avalon.directive('for', {
delay: true,
priority: 3,
parse: function (binding) {
var str = binding.origExpr = binding.expr, asName
str = str.replace(rforAs, function (a, b) {
/* istanbul ignore if */
if (!rident.test(b) || rinvalid.test(b)) {
avalon.error('alias ' + b + ' is invalid --- must be a valid JS identifier which is not a reserved name.')
} else {
asName = b
}
return ''
})
var arr = str.split(' in ')
var kv = arr[0].match(rargs)
if (kv.length === 1) {//确保avalon._each的回调有三个参数
kv.unshift('$key')
}
binding.expr = arr[1]
binding.keyName = kv[0]
binding.valName = kv[1]
binding.signature = avalon.makeHashCode('for')
if (asName) {
binding.asName = asName
}
},
init: function (watcher) {
var node = watcher.node
if (node.nodeType === 11) {
watcher.fragment = node
var begin = watcher.begin
delete watcher.begin
} else {
begin = createAnchor('msfor:' + watcher.origExpr)
var end = createAnchor('msfor-end:')
var p = node.parentNode
p.insertBefore(begin, node)
p.replaceChild(end, node)
var f = createFragment()
f.appendChild(node)
watcher.fragment = f
var cb = node.getAttribute('data-for-rendered')
if (cb) {
watcher.forCb = createGetter(cb)
}
}
watcher.node = begin
watcher.end = watcher.node.nextSibling
watcher.fragment.appendChild(createAnchor(watcher.signature))
watcher.cache = {}
watcher.update = function () {
var newVal = this.value = this.get()
var traceIds = createFragments(this, newVal)
var callback = this.callback
if (this.oldTrackIds !== traceIds) {
this.oldTrackIds = traceIds
callback.call(this.context, newVal)
}
}
},
update: function (node, value) {
if (!this.preFragments) {
mountList(this)
} else {
diffList(this)
updateList(this)
}
if (this.forCb) {
this.forCb()
}
}
})
function getTraceKey(item) {
var type = typeof item
return item && type === 'object' ? item.$hashcode : type + ':' + item
}
//创建一组fragment的虚拟DOM
function createFragments(watcher, obj) {
if (isObject(obj)) {
var array = isArray(obj)
var ids = []
var fragments = [], i = 0
avalon.each(obj, function (key, value) {
var k = array ? getTraceKey(value) : key
fragments.push(new Fragment(k, value, i++))
ids.push(k)
})
if (watcher.fragments) {
watcher.preFragments = watcher.fragments
watcher.fragments = fragments
} else {
watcher.fragments = fragments
}
return ids.join(';;')
} else {
return NaN
}
}
function mountList(watcher) {
var f = createFragment()
watcher.fragments.forEach(function (fragment, index) {
FragmentDecorator(fragment, watcher, index)
saveInCache(watcher.cache, fragment)
f.appendChild(fragment.dom)
})
watcher.end.parentNode.insertBefore(f, watcher.end)
}
function diffList(watcher) {
var cache = watcher.cache
var newCache = {}
var fuzzy = []
var list = watcher.preFragments
list.forEach(function (el) {
el._destory = true
})
watcher.fragments.forEach(function (c, index) {
var fragment = isInCache(cache, c.key)
//取出之前的文档碎片
if (fragment) {
delete fragment._destory
fragment.oldIndex = fragment.index
fragment.index = index // 相当于 c.index
fragment.vm[watcher.keyName] = index
saveInCache(newCache, fragment)
} else {
//如果找不到就进行模糊搜索
fuzzy.push(c)
}
})
fuzzy.forEach(function (c) {
var fragment = fuzzyMatchCache(cache, c.key)
if (fragment) {//重复利用
fragment.oldIndex = fragment.index
fragment.key = c.key
var val = fragment.val = c.val
var index = fragment.index = c.index
fragment.vm[watcher.valName] = val
fragment.vm[watcher.keyName] = index
delete fragment._destory
} else {
fragment = FragmentDecorator(c, watcher, c.index)
list.push(fragment)
}
saveInCache(newCache, fragment)
})
watcher.fragments = list
list.sort(function (a, b) {
return a.index - b.index
})
watcher.cache = newCache
}
function updateList(watcher) {
var before = watcher.node
var parent = before.parentNode
var list = watcher.fragments
for (var i = 0, item; item = list[i]; i++) {
if (item._destory) {
list.splice(i, 1)
i--
item.destory()
continue
}
if (item.ordexIndex !== item.index) {
if (item.dom && !item.dom.childNodes.length) {
item.move()
}
parent.insertBefore(item.dom, before.nextSibling)
}
before = item.split
}
}
function Fragment(key, val, index) {
this.name = '#document-fragment'
this.key = key
this.val = val
this.index = index
}
Fragment.prototype = {
destory: function () {
this.move()
this.boss.destroy()
for (var i in this) {
this[i] = null
}
},
move: function () {
var pre = this.split
var f = this.dom
var list = [pre]
var w = this.watcher
var a = 99999
do {
pre = pre.previousSibling
if (!pre || pre === w.node || pre.nodeValue === w.signature) {
break
}
list.unshift(pre)
} while (--a)
list.forEach(function (el) {
f.appendChild(el)
})
return f
}
}
/**
*
* @param {type} fragment
* @param {type} watcher
* @param {type} index
* @returns { key, val, index, oldIndex, watcher, dom, split, boss, vm}
*/
function FragmentDecorator(fragment, watcher, index) {
var dom = fragment.dom = watcher.fragment.cloneNode(true)
fragment.split = dom.lastChild
fragment.watcher = watcher
fragment.vm = observeItemObject(watcher.vm, {
data: new function () {
var data = {}
data[watcher.keyName] = fragment.index
data[watcher.valName] = fragment.val
if (watcher.asName) {
data[watcher.asName] = []
}
return data
}
})
fragment.index = index
fragment.boss = avalon.scan(dom, fragment.vm)
return fragment
}
// 新位置: 旧位置
function isInCache(cache, id) {
var c = cache[id]
if (c) {
var arr = c.arr
/* istanbul ignore if*/
if (arr) {
var r = arr.pop()
if (!arr.length) {
c.arr = 0
}
return r
}
delete cache[id]
return c
}
}
//[1,1,1] number1 number1_ number1__
function saveInCache(cache, component) {
var trackId = component.key
if (!cache[trackId]) {
cache[trackId] = component
} else {
var c = cache[trackId]
var arr = c.arr || (c.arr = [])
arr.push(component)
}
}
var rfuzzy = /^(string|number|boolean)/
var rkfuzzy = /^_*(string|number|boolean)/
function fuzzyMatchCache(cache) {
var key
for (var id in cache) {
var key = id
break
}
if (key) {
return isInCache(cache, key)
}
}
avalon.directive('widget', {
delay: true,
priority: 4,
init: function (watcher) {
var node = watcher.node
var is = node.getAttribute('is')
var component = avalon.components[is]
if (component) {
var slots = {}, soleSlot
if (component.soleSlot) {
soleSlot = avalon.scan(emptyNode(node), watcher.vm)
} else {
avalon.each(node.childNodes, function (el) {
var name = el.getAttribute('slot')
if (name) {
slots[name] = avalon.scan(el, watcher.vm)
}
})
}
var opt = watcher.value
if (isObject(watcher.value)) {
var def = avalon.mix({}, component.defaults)
for (var i in def) {
def[i] = opt[i]
}
if (opt.id) {
def.$id = opt.id
}
var vm = avalon.define(def)
var div = document.createElement('div')
div.innerHTML = component.template
var boss = avalon.scan(div, vm)
var com = div.children[0]
var els = com.querySelectorAll('slot')
var push = Array.prototype.push
if (soleSlot) {
push.apply(boss.directives, soleSlot.directives)
replaceNode(soleSlot.node, els[0])
} else {
avalon.each(function (el) {
var name = el.getAttribute('name')
replaceNode(slots[name].node, el)
push.apply(boss.directives, slots[name].directives)
})
}
replaceNode(com, node)
watcher.node = com
watcher.comBoss = boss
}
}
},
update: function (node, value) {
},
destory: function () {
this.comBoss.destory()
}
})
avalon.components = {}
avalon.component = function (name, component) {
/**
* template: string
* defaults: object
* soleSlot: string
*/
avalon.components[name] = component
}
})()