yox
Version:
A lightweight mvvm framework
1,892 lines (1,854 loc) • 156 kB
JavaScript
/**
* yox.js v1.0.0-alpha.408
* (c) 2017-2023 musicode
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Yox = factory());
}(this, (function () { 'use strict';
var VNODE_TYPE_TEXT = 1;
var VNODE_TYPE_COMMENT = 2;
var VNODE_TYPE_ELEMENT = 3;
var VNODE_TYPE_FRAGMENT = 5;
var VNODE_TYPE_SLOT = 7;
var DIRECTIVE_MODEL = 'model';
var DIRECTIVE_CUSTOM = 'o';
var MODEL_PROP_DEFAULT = 'value';
var HOOK_BEFORE_CREATE = 'beforeCreate';
var HOOK_AFTER_CREATE = 'afterCreate';
var HOOK_BEFORE_RENDER = 'beforeRender';
var HOOK_AFTER_RENDER = 'afterRender';
var HOOK_BEFORE_MOUNT = 'beforeMount';
var HOOK_AFTER_MOUNT = 'afterMount';
var HOOK_BEFORE_UPDATE = 'beforeUpdate';
var HOOK_AFTER_UPDATE = 'afterUpdate';
var HOOK_BEFORE_DESTROY = 'beforeDestroy';
var HOOK_AFTER_DESTROY = 'afterDestroy';
var HOOK_BEFORE_PROPS_UPDATE = 'beforePropsUpdate';
/**
* 为了压缩，定义的常量
*/
var TRUE = true;
var FALSE = false;
var NULL = null;
var UNDEFINED = void 0;
var RAW_TRUE = 'true';
var RAW_FALSE = 'false';
var RAW_UNDEFINED = 'undefined';
var RAW_FILTER = 'filter';
var RAW_COMPONENT = 'component';
var RAW_DIRECTIVE = 'directive';
var RAW_TRANSITION = 'transition';
var RAW_FUNCTION = 'function';
var RAW_LENGTH = 'length';
var RAW_WILDCARD = '*';
var RAW_DOT = '.';
var NODE_TYPE_ELEMENT = 1;
var NODE_TYPE_TEXT = 3;
var NODE_TYPE_COMMENT = 8;
/**
* Single instance for window in browser
*/
var WINDOW = typeof window !== RAW_UNDEFINED ? window : UNDEFINED;
/**
* Single instance for document in browser
*/
var DOCUMENT = typeof document !== RAW_UNDEFINED ? document : UNDEFINED;
/**
* tap 事件
*
* 非常有用的抽象事件，比如 pc 端是 click 事件，移动端是 touchend 事件
*
* 这样只需 on-tap="handler" 就可以完美兼容各端
*
* 框架未实现此事件，通过 Yox.dom.addSpecialEvent 提供给外部扩展
*
*/
var EVENT_TAP = 'tap';
/**
* 点击事件
*/
var EVENT_CLICK = 'click';
/**
* 输入事件
*/
var EVENT_INPUT = 'input';
/**
* 变化事件
*/
var EVENT_CHANGE = 'change';
/**
* 唯一内置的特殊事件：model
*/
var EVENT_MODEL = 'model';
/**
* Single instance for noop function
*/
var EMPTY_FUNCTION = function () {
/** yox */
};
/**
* 空对象，很多地方会用到，比如 `a || EMPTY_OBJECT` 确保是个对象
*/
var EMPTY_OBJECT = Object.freeze({});
/**
* 空数组
*/
var EMPTY_ARRAY = Object.freeze([]);
/**
* 空字符串
*/
var EMPTY_STRING = '';
/**
* 日志等级
*/
var LOG_LEVEL_DEBUG = 1;
var LOG_LEVEL_INFO = 2;
var LOG_LEVEL_WARN = 3;
var LOG_LEVEL_ERROR = 4;
var LOG_LEVEL_FATAL = 5;
/**
* 当前是否是源码调试，如果开启了代码压缩，empty function 里的注释会被干掉
* 源码模式默认选 INFO，因为 DEBUG 输出的日志太多，会导致性能急剧下降
*/
var LOG_LEVEL_DEFAULT = /yox/.test(EMPTY_FUNCTION.toString()) ? LOG_LEVEL_INFO : LOG_LEVEL_WARN;
/**
* 外部可配置的对象
*/
var PUBLIC_CONFIG = {
leftDelimiter: '{',
rightDelimiter: '}',
uglifyCompiled: FALSE,
minifyCompiled: FALSE,
logLevel: LOG_LEVEL_DEFAULT,
};
/**
* Check if value is a function.
*
* @param value
* @return
*/
function func(value) {
return typeof value === RAW_FUNCTION;
}
/**
* Check if value is an array.
*
* @param value
* @return
*/
function array$1(value) {
return Array.isArray(value);
}
/**
* Check if value is an object.
*
* @param value
* @return
*/
function object$1(value) {
// 低版本 IE 会把 null 当作 object
return value !== NULL && typeof value === 'object';
}
/**
* Check if value is a string.
*
* @param value
* @return
*/
function string$1(value) {
return typeof value === 'string';
}
/**
* Check if value is a number.
*
* @param value
* @return
*/
function number(value) {
return typeof value === 'number' && !isNaN(value);
}
/**
* Check if value is boolean.
*
* @param value
* @return
*/
function boolean(value) {
return value === TRUE || value === FALSE;
}
/**
* Check if value is numeric.
*
* @param value
* @return
*/
function numeric(value) {
return !isNaN(value - parseFloat(value));
}
var is = /*#__PURE__*/Object.freeze({
__proto__: null,
func: func,
array: array$1,
object: object$1,
string: string$1,
number: number,
boolean: boolean,
numeric: numeric
});
/**
* 任性地执行一个函数，不管它有没有、是不是
*
* @param fn 调用的函数
* @param context 执行函数时的 this 指向
* @param args 调用函数的参数，多参数时传入数组
* @return 调用函数的返回值
*/
function execute (fn, context, args) {
return array$1(args)
? fn.apply(context, args)
: context !== UNDEFINED
? fn.call(context, args)
: args !== UNDEFINED
? fn(args)
: fn();
}
var CustomEvent = function(type, originalEvent) {
// 这里不设置命名空间
// 因为有没有命名空间取决于 Emitter 的构造函数有没有传 true
// CustomEvent 自己无法决定
this.type = type;
this.phase = CustomEvent.PHASE_CURRENT;
if (originalEvent) {
this.originalEvent = originalEvent;
}
};
CustomEvent.is = function (event) {
return event instanceof CustomEvent;
};
/**
* 阻止事件的默认行为
*/
CustomEvent.prototype.preventDefault = function () {
var instance = this;
if (!instance.isPrevented) {
var originalEvent = instance.originalEvent;
if (originalEvent) {
originalEvent.preventDefault();
}
instance.isPrevented = TRUE;
}
return instance;
};
/**
* 停止事件广播
*/
CustomEvent.prototype.stopPropagation = function () {
var instance = this;
if (!instance.isStoped) {
var originalEvent = instance.originalEvent;
if (originalEvent) {
originalEvent.stopPropagation();
}
instance.isStoped = TRUE;
}
return instance;
};
CustomEvent.prototype.prevent = function () {
return this.preventDefault();
};
CustomEvent.prototype.stop = function () {
return this.stopPropagation();
};
CustomEvent.PHASE_CURRENT = 0;
CustomEvent.PHASE_UPWARD = 1;
CustomEvent.PHASE_DOWNWARD = -1;
/**
* 遍历数组
*
* @param array
* @param callback 返回 false 可停止遍历
* @param reversed 是否逆序遍历
*/
function each$2(array, callback, reversed) {
var length = array.length;
if (length) {
if (reversed) {
for (var i = length - 1; i >= 0; i--) {
if (callback(array[i], i) === FALSE) {
break;
}
}
}
else {
for (var i$1 = 0; i$1 < length; i$1++) {
if (callback(array[i$1], i$1) === FALSE) {
break;
}
}
}
}
}
function nativePush(array, item) {
array[array.length] = item;
}
function nativeUnshift(array, item) {
array.unshift(item);
}
/**
* 添加
*
* @param array
* @param value
* @param action
*/
function addItem(array, value, action) {
if (array$1(value)) {
each$2(value, function (item) {
action(array, item);
});
}
else {
action(array, value);
}
}
/**
* 往后加
*
* @param array
* @param target
*/
function push(array, target) {
addItem(array, target, nativePush);
}
/**
* 往前加
*
* @param array
* @param target
*/
function unshift(array, target) {
addItem(array, target, nativeUnshift);
}
/**
* 数组项在数组中的位置
*
* @param array 数组
* @param target 数组项
* @param strict 是否全等判断，默认是全等
* @return 如果未找到，返回 -1
*/
function indexOf$1(array, target, strict) {
var result = -1;
each$2(array, function (item, index) {
if (strict === FALSE ? item == target : item === target) {
result = index;
return FALSE;
}
});
return result;
}
/**
* 获取数组最后一项
*
* @param array 数组
* @return
*/
function last(array) {
var length = array.length;
if (length > 0) {
return array[length - 1];
}
}
/**
* 弹出数组最后一项
*
* 项目里用的太多，仅用于节省字符...
*
* @param array 数组
* @return 弹出的数组项
*/
function pop(array) {
var length = array.length;
if (length > 0) {
return array.pop();
}
}
/**
* 删除数组项
*
* @param array 数组
* @param item 待删除项
* @param strict 是否全等判断，默认是全等
* @return 删除的数量
*/
function remove$1(array, target, strict) {
var result = 0;
each$2(array, function (item, index) {
if (strict === FALSE ? item == target : item === target) {
array.splice(index, 1);
result++;
}
}, TRUE);
return result;
}
/**
* 数组是否包含 item
*
* @param array 数组
* @param target 可能包含的数组项
* @param strict 是否全等判断，默认是全等
* @return
*/
function has$2(array, target, strict) {
return indexOf$1(array, target, strict) >= 0;
}
/**
* 把类数组转成数组
*
* @param array 类数组
* @return
*/
function toArray(array) {
return array$1(array)
? array
: execute(EMPTY_ARRAY.slice, array);
}
/**
* 把数组转成对象
*
* @param array 数组
* @param key 数组项包含的字段名称，如果数组项是基本类型，可不传
* @param value
* @return
*/
function toObject(array, key, value) {
var result = {};
each$2(array, function (item) {
result[key ? item[key] : item] = value || item;
});
return result;
}
/**
* 把数组合并成字符串
*
* @param array
* @param separator
* @return
*/
function join$1(array, separator) {
return array.join(separator);
}
/**
* 用于判断长度大于 0 的数组
*
* @param array
* @return
*/
function falsy$2(array) {
return !array$1(array) || !array.length;
}
var array = /*#__PURE__*/Object.freeze({
__proto__: null,
each: each$2,
push: push,
unshift: unshift,
indexOf: indexOf$1,
last: last,
pop: pop,
remove: remove$1,
has: has$2,
toArray: toArray,
toObject: toObject,
join: join$1,
falsy: falsy$2
});
function toString (target, defaultValue) {
return target != NULL && target.toString
? target.toString()
: defaultValue !== UNDEFINED
? defaultValue
: EMPTY_STRING;
}
function isNative (target) {
return func(target)
&& toString(target).indexOf('[native code]') >= 0;
}
var createPureObject = function () {
var obj = Object.create(NULL);
return {
get: function(key) {
return obj[key];
},
set: function(key, value) {
obj[key] = value;
},
has: function(key) {
return key in obj;
},
keys: function() {
return Object.keys(obj);
}
};
};
/**
* 缓存一个参数的函数调用结果
*
* @param fn 需要缓存的函数
* @return 带缓存功能的函数
*/
function createOneKeyCache(fn) {
var cache = createPureObject();
return function (key) {
var hit = cache.get(key);
if (hit !== UNDEFINED) {
return hit;
}
var value = fn(key);
cache.set(key, value);
return value;
};
}
/**
* 缓存两个参数的函数调用结果
*
* @param fn 需要缓存的函数
* @return 带缓存功能的函数
*/
function createTwoKeyCache(fn) {
var cache = createPureObject();
return function (key1, key2) {
var hit1 = cache.get(key1);
if (hit1) {
var hit2 = hit1.get(key2);
if (hit2) {
return hit2;
}
}
else {
hit1 = createPureObject();
cache.set(key1, hit1);
}
var value = fn(key1, key2);
hit1.set(key2, value);
return value;
};
}
var camelizePattern = /-([a-z])/gi, hyphenatePattern = /\B([A-Z])/g, capitalizePattern = /^[a-z]/;
/**
* 连字符转成驼峰
*
* @param str
* @return 驼峰格式的字符串
*/
var camelize = createOneKeyCache(function (str) {
return str.replace(camelizePattern, function (_, $1) {
return upper($1);
});
});
/**
* 驼峰转成连字符
*
* @param str
* @return 连字符格式的字符串
*/
var hyphenate = createOneKeyCache(function (str) {
return str.replace(hyphenatePattern, function (_, $1) {
return '-' + lower($1);
});
});
/**
* 首字母大写
*
* @param str
* @return
*/
var capitalize = createOneKeyCache(function (str) {
return str.replace(capitalizePattern, upper);
});
/**
* 重复字符串
*
* @param str
* @param count 重复次数
* @return
*/
function repeat(str, count) {
return join$1(new Array(count + 1), str);
}
/**
* 清除两侧空白符
*
* @param str
* @return 清除两侧空白符的字符串
*/
function trim(str) {
return falsy$1(str)
? EMPTY_STRING
: str.trim();
}
/**
* 截取字符串
*
* @param str
* @param start
* @param end
* @return
*/
function slice(str, start, end) {
return number(end)
? start === end
? EMPTY_STRING
: str.slice(start, end)
: str.slice(start);
}
/**
* 获取子串的起始位置
*
* @param str
* @param part
* @param start
* @return
*/
function indexOf(str, part, start) {
return str.indexOf(part, start !== UNDEFINED ? start : 0);
}
/**
* 获取子串的起始位置
*
* @param str
* @param part
* @param end
* @return
*/
function lastIndexOf(str, part, end) {
return str.lastIndexOf(part, end !== UNDEFINED ? end : str.length);
}
/**
* str 是否以 part 开头
*
* @param str
* @param part
* @return
*/
function startsWith(str, part) {
return indexOf(str, part) === 0;
}
/**
* str 是否以 part 结束
*
* @param str
* @param part
* @return
*/
function endsWith(str, part) {
var offset = str.length - part.length;
return offset >= 0 && lastIndexOf(str, part) === offset;
}
/**
* 获取某个位置的字符
*/
function charAt(str, index) {
return str.charAt(index || 0);
}
/**
* 获取某个位置的字符编码
*/
function codeAt(str, index) {
return str.charCodeAt(index || 0);
}
/**
* 大写格式
*/
function upper(str) {
return str.toUpperCase();
}
/**
* 小写格式
*/
function lower(str) {
return str.toLowerCase();
}
/**
* str 是否包含 part
*
* @param str
* @param part
* @return 是否包含
*/
function has$1(str, part) {
return indexOf(str, part) >= 0;
}
/**
* str 转成 value 为 true 的 map
*
* @param str
* @param separator
*/
function toMap(str, separator) {
var map = Object.create(NULL);
each$2(str.split(separator || ','), function (item) {
map[item] = TRUE;
});
return map;
}
/**
* 判断长度大于 0 的字符串
*
* @param str
* @return
*/
function falsy$1(str) {
return !string$1(str) || !str.length;
}
var string = /*#__PURE__*/Object.freeze({
__proto__: null,
camelize: camelize,
hyphenate: hyphenate,
capitalize: capitalize,
repeat: repeat,
trim: trim,
slice: slice,
indexOf: indexOf,
lastIndexOf: lastIndexOf,
startsWith: startsWith,
endsWith: endsWith,
charAt: charAt,
codeAt: codeAt,
upper: upper,
lower: lower,
has: has$1,
toMap: toMap,
falsy: falsy$1
});
var dotPattern = /\./g, asteriskPattern = /\*/g, doubleAsteriskPattern = /\*\*/g;
/**
* 判断 keypath 是否以 prefix 开头，如果是，返回匹配上的前缀长度，否则返回 -1
*
* @param keypath
* @param prefix
* @return
*/
var match = createTwoKeyCache(function (keypath, prefix) {
if (keypath === prefix) {
return prefix.length;
}
prefix += RAW_DOT;
return startsWith(keypath, prefix)
? prefix.length
: -1;
});
var getKeypathTokens = createOneKeyCache(function (keypath) {
return indexOf(keypath, RAW_DOT) < 0
? [keypath]
: keypath.split(RAW_DOT);
});
/**
* 遍历 keypath 的每个部分
*
* @param keypath
* @param callback 返回 false 可中断遍历
*/
function each$1(keypath, callback) {
var tokens = string$1(keypath) ? getKeypathTokens(keypath) : keypath;
for (var i = 0, lastIndex = tokens.length - 1; i <= lastIndex; i++) {
if (callback(tokens[i], i, lastIndex) === FALSE) {
break;
}
}
}
/**
* 遍历 keypath 的每个部分
*
* @param keypath1
* @param keypath2
*/
var join = createTwoKeyCache(function (keypath1, keypath2) {
return keypath1 && keypath2
? keypath1 + RAW_DOT + keypath2
: keypath1 || keypath2;
});
/**
* 是否模糊匹配
*
* @param keypath
*/
var isFuzzy = createOneKeyCache(function (keypath) {
return has$1(keypath, RAW_WILDCARD);
});
var getFuzzyPattern = createOneKeyCache(function (pattern) {
return new RegExp(("^" + (pattern
.replace(dotPattern, '\\.')
.replace(asteriskPattern, '(\\w+)')
.replace(doubleAsteriskPattern, '([\.\\w]+?)')) + "$"));
});
/**
* 模糊匹配 keypath
*
* @param keypath
* @param pattern
*/
var matchFuzzy = createTwoKeyCache(function (keypath, pattern) {
var result = keypath.match(getFuzzyPattern(pattern));
return result
? result[1]
: UNDEFINED;
});
/**
* 全局 value holder，避免频繁的创建临时对象
*/
var holder = {
value: UNDEFINED
};
/**
* 获取对象的 key 的数组
*
* @param object
* @return
*/
function keys(object) {
return Object.keys(object);
}
/**
* 遍历对象
*
* @param object
* @param callback 返回 false 可停止遍历
*/
function each(object, callback) {
for (var key in object) {
if (callback(object[key], key) === FALSE) {
break;
}
}
}
/**
* 扩展对象
*
* @return
*/
function extend(original, object) {
each(object, function (value, key) {
original[key] = value;
});
return original;
}
/**
* 合并对象
*
* @return
*/
function merge(object1, object2) {
return object1 && object2
? extend(extend({}, object1), object2)
: object1 || object2;
}
/**
* 拷贝对象
*
* @param object
* @param deep 是否需要深拷贝
* @return
*/
function copy(object, deep) {
var result = object;
if (array$1(object)) {
if (deep) {
result = [];
each$2(object, function (item, index) {
result[index] = copy(item, deep);
});
}
else {
result = object.slice();
}
}
else if (object$1(object)) {
result = {};
each(object, function (value, key) {
result[key] = deep ? copy(value, deep) : value;
});
}
return result;
}
function getCallback(value) {
// 如果是计算属性，取计算属性的值
return func(value.get)
? value.get()
: value;
}
/**
* 从对象中查找一个 keypath
*
* 返回值是空时，表示没找到值
*
* @param object
* @param keypath
* @return
*/
function get(object, keypath, callback) {
var result = object;
each$1(keypath, function (key, index, lastIndex) {
if (result != NULL) {
// 先直接取值
var value = result[key],
// 紧接着判断值是否存在
// 下面会处理计算属性的值，不能在它后面设置 hasValue
hasValue = value !== UNDEFINED;
// 为什么不用 hasValue 判断呢？
// 因为这里需要处理的 value 要么是函数，要么是对象，基础类型无需加工
if (value) {
// 如果数据中没有计算属性，也可以自定义
value = (callback || getCallback)(value);
}
if (index === lastIndex) {
if (hasValue) {
holder.value = value;
result = holder;
}
else {
result = UNDEFINED;
}
}
else {
result = value;
}
}
else {
result = UNDEFINED;
return FALSE;
}
});
return result;
}
/**
* 为对象设置一个键值对
*
* @param object
* @param keypath
* @param value
* @param autofill 是否自动填充不存在的对象，默认自动填充
*/
function set(object, keypath, value, autofill) {
var next = object;
each$1(keypath, function (key, index, lastIndex) {
if (index === lastIndex) {
next[key] = value;
}
else if (next[key]) {
next = next[key];
}
else if (autofill) {
next = next[key] = {};
}
else {
return FALSE;
}
});
}
/**
* 对象是否包含某个 key
*
* @param object
* @param key
* @return
*/
function has(object, key) {
// 不用 hasOwnProperty，性能差
return object[key] !== UNDEFINED;
}
/**
* 是否是空对象
*
* @param object
* @return
*/
function falsy(object) {
return !object$1(object)
|| array$1(object)
|| !keys(object).length;
}
var object = /*#__PURE__*/Object.freeze({
__proto__: null,
keys: keys,
each: each,
extend: extend,
merge: merge,
copy: copy,
get: get,
set: set,
has: has,
falsy: falsy
});
/**
* 外部可用这些常量
*/
var DEBUG = LOG_LEVEL_DEBUG;
var INFO = LOG_LEVEL_INFO;
var WARN = LOG_LEVEL_WARN;
var ERROR = LOG_LEVEL_ERROR;
var FATAL = LOG_LEVEL_FATAL;
/**
* 是否有原生的日志特性，没有必要单独实现
*/
var nativeConsole = typeof console !== RAW_UNDEFINED ? console : NULL,
/**
* console 样式前缀
* ie 和 edge 不支持 console.log 样式
*/
stylePrefix = WINDOW && /edge|msie|trident/i.test(WINDOW.navigator.userAgent)
? EMPTY_STRING
: '%c',
/**
* 日志打印函数
*/
printLog = nativeConsole
? stylePrefix
? function (tag, msg, style) {
nativeConsole.log(stylePrefix + tag, style, msg);
}
: function (tag, msg) {
nativeConsole.log(tag, msg);
}
: EMPTY_FUNCTION;
/**
* 全局调试开关
*/
function getLogLevel() {
var ref = PUBLIC_CONFIG;
var logLevel = ref.logLevel;
if (logLevel >= DEBUG && logLevel <= FATAL) {
return logLevel;
}
return LOG_LEVEL_DEFAULT;
}
function getStyle(backgroundColor) {
return ("background-color:" + backgroundColor + ";border-radius:12px;color:#fff;font-size:10px;padding:3px 6px;");
}
/**
* 打印 debug 日志
*
* @param msg
*/
function debug(msg, tag) {
if (getLogLevel() <= DEBUG) {
printLog(tag || 'Yox debug', msg, getStyle('#999'));
}
}
/**
* 打印 info 日志
*
* @param msg
*/
function info(msg, tag) {
if (getLogLevel() <= INFO) {
printLog(tag || 'Yox info', msg, getStyle('#2db7f5'));
}
}
/**
* 打印 warn 日志
*
* @param msg
*/
function warn(msg, tag) {
if (getLogLevel() <= WARN) {
printLog(tag || 'Yox warn', msg, getStyle('#f90'));
}
}
/**
* 打印 error 日志
*
* @param msg
*/
function error(msg, tag) {
if (getLogLevel() <= ERROR) {
printLog(tag || 'Yox error', msg, getStyle('#ed4014'));
}
}
/**
* 致命错误，中断程序
*
* @param msg
*/
function fatal(msg, tag) {
if (getLogLevel() <= FATAL) {
throw new Error(("[" + (tag || 'Yox fatal') + "]: " + msg));
}
}
var logger = /*#__PURE__*/Object.freeze({
__proto__: null,
DEBUG: DEBUG,
INFO: INFO,
WARN: WARN,
ERROR: ERROR,
FATAL: FATAL,
debug: debug,
info: info,
warn: warn,
error: error,
fatal: fatal
});
var Emitter = function(ns) {
this.ns = ns || FALSE;
this.listeners = {};
};
/**
* 发射事件
*
* @param type 事件名称或命名空间
* @param args 事件处理函数的参数列表
* @param filter 自定义过滤器
*/
Emitter.prototype.fire = function (type, args, filter) {
var instance = this, event = string$1(type) ? instance.toEvent(type) : type, list = instance.listeners[event.type], isComplete = TRUE;
if (list) {
// 避免遍历过程中，数组发生变化，比如增删了
list = list.slice();
// 判断是否是发射事件
// 如果 args 的第一个参数是 CustomEvent 类型，表示发射事件
// 因为事件处理函数的参数列表是 (event, data)
var customEvent = args && CustomEvent.is(args[0])
? args[0]
: UNDEFINED;
// 这里不用 array.each，减少函数调用
for (var i = 0, length = list.length; i < length; i++) {
var options = list[i];
// 命名空间不匹配
if (!matchNamespace(event.ns, options)
// 在 fire 过程中被移除了
|| !has$2(list, options)
// 传了 filter，则用 filter 判断是否过滤此 options
|| (filter && !filter(event, args, options))) {
continue;
}
var result = execute(options.listener, options.ctx, args);
// 执行次数
options.num = options.num ? (options.num + 1) : 1;
// 注册的 listener 可以指定最大执行次数
if (options.num === options.max) {
instance.off(event.type, {
ns: event.ns,
listener: options.listener,
});
}
// 如果没有返回 false，而是调用了 customEvent.stop 也算是返回 false
if (customEvent) {
if (result === FALSE) {
customEvent.prevent().stop();
}
else if (customEvent.isStoped) {
result = FALSE;
}
}
if (result === FALSE) {
isComplete = FALSE;
break;
}
}
}
return isComplete;
};
/**
* 注册监听
*
* @param type
* @param listener
*/
Emitter.prototype.on = function (type, listener) {
var instance = this, listeners = instance.listeners, options = func(listener)
? { listener: listener }
: listener;
if (object$1(options) && func(options.listener)) {
if (!string$1(options.ns)) {
var event = instance.toEvent(type);
options.ns = event.ns;
type = event.type;
}
push(listeners[type] || (listeners[type] = []), options);
}
};
/**
* 取消监听
*
* @param type
* @param listener
*/
Emitter.prototype.off = function (type, listener) {
var instance = this, listeners = instance.listeners;
if (type) {
var filter = instance.toFilter(type, listener), each$1 = function (list, name) {
each$2(list, function (item, index) {
if (matchListener(filter.listener, item) && matchNamespace(filter.ns, item)) {
list.splice(index, 1);
}
}, TRUE);
if (!list.length) {
delete listeners[name];
}
};
if (filter.type) {
if (listeners[filter.type]) {
each$1(listeners[filter.type], filter.type);
}
}
// 按命名空间过滤，如 type 传入 .ns
else if (filter.ns) {
each(listeners, each$1);
}
}
else {
// 清空
instance.listeners = {};
}
};
/**
* 是否已监听某个事件
*
* @param type
* @param listener
*/
Emitter.prototype.has = function (type, listener) {
var instance = this, listeners = instance.listeners, filter = instance.toFilter(type, listener), result = TRUE, each$1 = function (list) {
each$2(list, function (item) {
if (matchListener(filter.listener, item) && matchNamespace(filter.ns, item)) {
return result = FALSE;
}
});
return result;
};
if (filter.type) {
if (listeners[filter.type]) {
each$1(listeners[filter.type]);
}
}
else if (filter.ns) {
each(listeners, each$1);
}
return !result;
};
/**
* 把事件类型解析成命名空间格式
*
* @param type
*/
Emitter.prototype.toEvent = function (type) {
// 这里 ns 必须为字符串
// 用于区分 event 对象是否已完成命名空间的解析
var event = {
type: type,
ns: EMPTY_STRING,
};
// 是否开启命名空间
if (this.ns) {
var index = indexOf(type, RAW_DOT);
if (index >= 0) {
event.type = slice(type, 0, index);
event.ns = slice(type, index + 1);
}
}
return event;
};
Emitter.prototype.toFilter = function (type, listener) {
var filter;
if (listener) {
filter = func(listener)
? { listener: listener }
: listener;
}
else {
filter = {};
}
if (string$1(filter.ns)) {
filter.type = type;
}
else {
var event = this.toEvent(type);
filter.type = event.type;
filter.ns = event.ns;
}
return filter;
};
/**
* 判断 options 是否能匹配 listener
*
* @param listener
* @param options
*/
function matchListener(listener, options) {
return listener
? listener === options.listener
: TRUE;
}
/**
* 判断 options 是否能匹配命名空间
*
* 如果 namespace 和 options.ns 都不为空，则需完全匹配
*
* 如果他们两个其中任何一个为空，则不判断命名空间
*
* @param namespace
* @param options
*/
function matchNamespace(namespace, options) {
var ns = options.ns;
return ns && namespace
? ns === namespace
: TRUE;
}
var nextTick;
// IE (10+) 和 node
if (typeof setImmediate === RAW_FUNCTION && isNative(setImmediate)) {
nextTick = setImmediate;
}
// 用 MessageChannel 去做 setImmediate 的 polyfill
// 原理是将新的 message 事件加入到原有的 dom events 之后
// 兼容性 IE10+ 和其他标准浏览器
if (typeof MessageChannel === RAW_FUNCTION && isNative(MessageChannel)) {
nextTick = function (fn) {
var channel = new MessageChannel();
channel.port1.onmessage = fn;
channel.port2.postMessage(1);
};
}
else {
nextTick = setTimeout;
}
var nextTick$1 = nextTick;
var shared;
var NextTask = function(hooks) {
var instance = this;
instance.tasks = [];
instance.hooks = hooks || EMPTY_OBJECT;
};
/**
* 全局单例
*/
NextTask.shared = function () {
return shared || (shared = new NextTask());
};
/**
* 在队尾添加异步任务
*/
NextTask.prototype.append = function (func, context) {
var instance = this;
var tasks = instance.tasks;
push(tasks, {
fn: func,
ctx: context
});
if (tasks.length === 1) {
nextTick$1(function () {
instance.run();
});
}
};
/**
* 在队首添加异步任务
*/
NextTask.prototype.prepend = function (func, context) {
var instance = this;
var tasks = instance.tasks;
unshift(tasks, {
fn: func,
ctx: context
});
if (tasks.length === 1) {
nextTick$1(function () {
instance.run();
});
}
};
/**
* 清空异步队列
*/
NextTask.prototype.clear = function () {
this.tasks.length = 0;
};
/**
* 立即执行异步任务，并清空队列
*/
NextTask.prototype.run = function () {
var instance = this;
var tasks = instance.tasks;
var hooks = instance.hooks;
var length = tasks.length;
if (length) {
instance.tasks = [];
if (hooks.beforeTask) {
hooks.beforeTask();
}
for (var i = 0; i < length; i++) {
execute(tasks[i].fn, tasks[i].ctx);
}
if (hooks.afterTask) {
hooks.afterTask();
}
}
};
/**
* 节流调用
*
* @param fn 需要节制调用的函数
* @param delay 调用的时间间隔，单位毫秒
* @param immediate 是否立即触发
* @return 节流函数
*/
function debounce (fn, delay, immediate) {
var timer;
return function () {
if (!timer) {
var args = toArray(arguments);
if (immediate) {
execute(fn, UNDEFINED, args);
}
timer = setTimeout(function () {
timer = UNDEFINED;
if (!immediate) {
execute(fn, UNDEFINED, args);
}
}, delay);
}
};
}
// vnode.data 内部使用的几个字段
var VNODE = '$vnode';
var LOADING = '$loading';
var LEAVING = '$leaving';
var MODEL_CONTROL = '$model_control';
var MODEL_DESTROY = '$model_destroy';
var EVENT_DESTROY = '$event_destroy';
var DIRECTIVE_HOOKS = '$directive_hooks';
var DIRECTIVE_UPDATING = '$directive_updating';
function addEvent$1(api, element, component, data, key, lazy, event) {
var name = event.name;
var listener = event.listener;
if (lazy) {
var value = lazy[name] || lazy[EMPTY_STRING];
if (value === TRUE) {
name = EVENT_CHANGE;
}
else if (value > 0) {
listener = debounce(listener, value,
// 避免连续多次点击，主要用于提交表单场景
// 移动端的 tap 事件可自行在业务层打补丁实现
name === EVENT_CLICK || name === EVENT_TAP);
}
}
if (component) {
if (event.isNative) {
var target = component.$el;
api.on(target, name, listener);
return function () {
api.off(target, name, listener);
};
}
// event 有 ns 和 listener 两个字段，满足 ThisListenerOptions 的要求
component.on(name, event);
data[EVENT_DESTROY + key] = function () {
component.off(name, event);
delete data[EVENT_DESTROY + key];
};
}
else {
api.on(element, name, listener);
data[EVENT_DESTROY + key] = function () {
api.off(element, key, listener);
delete data[EVENT_DESTROY + key];
};
}
}
function afterCreate$5(api, vnode) {
var events = vnode.events;
if (events) {
var element = vnode.node, component = vnode.component, lazy = vnode.lazy, data = vnode.data;
for (var key in events) {
addEvent$1(api, element, component, data, key, lazy, events[key]);
}
}
}
function afterUpdate$4(api, vnode, oldVNode) {
var newEvents = vnode.events, oldEvents = oldVNode.events;
if (newEvents !== oldEvents) {
var element = vnode.node, component = vnode.component, lazy = vnode.lazy, data = vnode.data;
if (oldEvents) {
var newValue = newEvents || EMPTY_OBJECT;
for (var key in oldEvents) {
if (!newValue[key]) {
var destroy = data[EVENT_DESTROY + key];
if (destroy) {
destroy();
}
}
}
}
if (newEvents) {
var oldValue = oldEvents || EMPTY_OBJECT;
for (var key$1 in newEvents) {
var event = newEvents[key$1], oldEvent = oldValue[key$1];
if (!oldEvent) {
addEvent$1(api, element, component, data, key$1, lazy, event);
}
else if (event.value !== oldEvent.value) {
var destroy$1 = data[EVENT_DESTROY + key$1];
if (destroy$1) {
destroy$1();
}
addEvent$1(api, element, component, data, key$1, lazy, event);
}
else if (oldEvent.runtime && event.runtime) {
oldEvent.runtime.execute = event.runtime.execute;
event.runtime = oldEvent.runtime;
}
}
}
}
}
function beforeDestroy$3(api, vnode) {
var events = vnode.events, data = vnode.data;
if (events) {
for (var key in events) {
var destroy = data[EVENT_DESTROY + key];
if (destroy) {
destroy();
}
}
}
}
var eventHook = /*#__PURE__*/Object.freeze({
__proto__: null,
afterCreate: afterCreate$5,
afterUpdate: afterUpdate$4,
beforeDestroy: beforeDestroy$3
});
function debounceIfNeeded(fn, lazy) {
// 应用 lazy
return lazy && lazy !== TRUE
? debounce(fn, lazy)
: fn;
}
var inputControl = {
set: function(node, value) {
node.value = toString(value);
},
sync: function(node, keypath, context) {
context.set(keypath, node.value);
},
}, radioControl = {
set: function(node, value) {
node.checked = node.value === toString(value);
},
sync: function(node, keypath, context) {
if (node.checked) {
context.set(keypath, node.value);
}
},
}, checkboxControl = {
set: function(node, value) {
node.checked = array$1(value)
? has$2(value, node.value, FALSE)
: !!value;
},
sync: function(node, keypath, context) {
var value = context.get(keypath);
if (array$1(value)) {
if (node.checked) {
context.append(keypath, node.value);
}
else {
context.removeAt(keypath, indexOf$1(value, node.value, FALSE));
}
}
else {
context.set(keypath, node.checked);
}
},
}, selectControl = {
set: function(node, value) {
var multiple = node.multiple;
var options = node.options;
for (var i = 0, length = options.length; i < length; i++) {
if (multiple) {
options[i].selected = has$2(value, options[i].value, FALSE);
}
else if (options[i].value == value) {
node.selectedIndex = i;
return;
}
}
if (!multiple) {
node.selectedIndex = -1;
}
},
sync: function(node, keypath, context) {
var multiple = node.multiple;
var options = node.options;
if (multiple) {
var values = [];
for (var i = 0, length = options.length; i < length; i++) {
if (options[i].selected) {
values.push(options[i].value);
}
}
context.set(keypath, values);
}
else {
context.set(keypath, options[node.selectedIndex].value);
}
},
};
function addModel(api, element, component, data, vnode) {
var context = vnode.context;
var model = vnode.model;
var lazy = vnode.lazy;
var nativeAttrs = vnode.nativeAttrs;
var keypath = model.keypath;
var value = model.value;
var lazyValue = lazy && (lazy[DIRECTIVE_MODEL] || lazy[EMPTY_STRING]);
if (component) {
var viewBinding = component.$model, viewSyncing = debounceIfNeeded(function (newValue) {
context.set(keypath, newValue);
}, lazyValue);
component.watch(viewBinding, viewSyncing);
data[MODEL_DESTROY] = function () {
component.unwatch(viewBinding, viewSyncing);
delete data[MODEL_DESTROY];
};
}
else {
var control = vnode.tag === 'select'
? selectControl
: inputControl,
// checkbox,radio,select 监听的是 change 事件
eventName = EVENT_CHANGE;
if (control === inputControl) {
var type = nativeAttrs && nativeAttrs.type;
if (type === 'radio') {
control = radioControl;
}
else if (type === 'checkbox') {
control = checkboxControl;
}
// 如果是输入框，则切换成 model 事件
// model 事件是个 yox-dom 实现的特殊事件
// 不会在输入法组合文字过程中得到触发事件
else if (lazyValue !== TRUE) {
eventName = EVENT_MODEL;
}
}
var sync = debounceIfNeeded(function () {
control.sync(element, keypath, context);
}, lazyValue);
api.on(element, eventName, sync);
control.set(element, value);
data[MODEL_CONTROL] = control;
data[MODEL_DESTROY] = function () {
api.off(element, eventName, sync);
delete data[MODEL_DESTROY];
delete data[MODEL_CONTROL];
};
}
}
function afterCreate$4(api, vnode) {
var model = vnode.model;
if (model) {
addModel(api, vnode.node, vnode.component, vnode.data, vnode);
}
}
function afterUpdate$3(api, vnode, oldVNode) {
var data = vnode.data, newModel = vnode.model, oldModel = oldVNode.model;
if (newModel) {
var element = vnode.node, component = vnode.component;
if (!oldModel) {
addModel(api, element, component, data, vnode);
}
else if (newModel.keypath !== oldModel.keypath) {
data[MODEL_DESTROY]();
addModel(api, element, component, data, vnode);
}
else {
if (component) {
component.set(component.$model, newModel.value);
}
else {
var control = data[MODEL_CONTROL];
if (control) {
control.set(element, newModel.value);
}
}
}
}
else if (oldModel) {
data[MODEL_DESTROY]();
}
}
function beforeDestroy$2(api, vnode) {
var data = vnode.data, destroy = data[MODEL_DESTROY];
if (destroy) {
destroy();
}
}
var modelHook = /*#__PURE__*/Object.freeze({
__proto__: null,
afterCreate: afterCreate$4,
afterUpdate: afterUpdate$3,
beforeDestroy: beforeDestroy$2
});
function afterCreate$3(api, vnode) {
var nativeAttrs = vnode.nativeAttrs;
if (nativeAttrs) {
var element = vnode.node;
for (var name in nativeAttrs) {
api.setAttr(element, name, nativeAttrs[name]);
}
}
}
function afterUpdate$2(api, vnode, oldVNode) {
var newNativeAttrs = vnode.nativeAttrs, oldNativeAttrs = oldVNode.nativeAttrs;
if (newNativeAttrs !== oldNativeAttrs) {
var element = vnode.node;
if (newNativeAttrs) {
var oldValue = oldNativeAttrs || EMPTY_OBJECT;
for (var name in newNativeAttrs) {
if (oldValue[name] === UNDEFINED
|| newNativeAttrs[name] !== oldValue[name]) {
api.setAttr(element, name, newNativeAttrs[name]);
}
}
}
if (oldNativeAttrs) {
var newValue = newNativeAttrs || EMPTY_OBJECT;
for (var name$1 in oldNativeAttrs) {
if (newValue[name$1] === UNDEFINED) {
api.removeAttr(element, name$1);
}
}
}
}
}
var nativeAttrHook = /*#__PURE__*/Object.freeze({
__proto__: null,
afterCreate: afterCreate$3,
afterUpdate: afterUpdate$2
});
function afterCreate$2(api, vnode) {
var nativeStyles = vnode.nativeStyles;
if (nativeStyles) {
var elementStyle = vnode.node.style;
for (var name in nativeStyles) {
api.setStyle(elementStyle, name, nativeStyles[name]);
}
}
}
function afterUpdate$1(api, vnode, oldVNode) {
var newNativeStyles = vnode.nativeStyles, oldNativeStyles = oldVNode.nativeStyles;
if (newNativeStyles !== oldNativeStyles) {
var elementStyle = vnode.node.style;
if (newNativeStyles) {
var oldValue = oldNativeStyles || EMPTY_OBJECT;
for (var name in newNativeStyles) {
if (oldValue[name] === UNDEFINED
|| newNativeStyles[name] !== oldValue[name]) {
api.setStyle(elementStyle, name, newNativeStyles[name]);
}
}
}
if (oldNativeStyles) {
var newValue = newNativeStyles || EMPTY_OBJECT;
for (var name$1 in oldNativeStyles) {
if (newValue[name$1] === UNDEFINED) {
api.removeStyle(elementStyle, name$1);
}
}
}
}
}
var nativeStyleHook = /*#__PURE__*/Object.freeze({
__proto__: null,
afterCreate: afterCreate$2,
afterUpdate: afterUpdate$1
});
function callDirectiveCreate(data, vnode, directive) {
data[DIRECTIVE_HOOKS + directive.name] = directive.create(vnode.component || vnode.node, directive, vnode);
}
function callDirectiveHook(data, vnode, directive, hookName) {
var hooks = data[DIRECTIVE_HOOKS + directive.name], hook = hooks && hooks[hookName];
if (hook) {
hook(directive, vnode);
}
}
function genetateDirectiveHook(hookName) {
return function (api, vnode) {
var directives = vnode.directives;
if (directives) {
var data = vnode.data;
for (var name in directives) {
callDirectiveHook(data, vnode, directives[name], hookName);
}
}
};
}
function afterCreate$1(api, vnode) {
var directives = vnode.directives;
if (directives) {
var data = vnode.data;
for (var name in directives) {
callDirectiveCreate(data, vnode, directives[name]);
}
}
}
function beforeUpdate$1(api, vnode, oldVNode) {
var newDirectives = vnode.directives, oldDirectives = oldVNode.directives, data = vnode.data;
// 先触发 beforeDestroy 比较符合直觉
if (oldDirectives) {
var newValue = newDirectives || EMPTY_OBJECT;
for (var name in oldDirectives) {
if (newValue[name] === UNDEFINED) {
callDirectiveHook(data, vnode, oldDirectives[name], 'beforeDestroy');
}
}
}
if (newDirectives) {
var oldValue = oldDirectives || EMPTY_OBJECT, updatingDirectives = [];
for (var name$1 in newDirectives) {
var directive = newDirectives[name$1];
if (oldValue[name$1] === UNDEFINED) {
callDirectiveCreate(data, vnode, directive);
}
else if (directive.value !== oldValue[name$1].value) {
callDirectiveHook(data, vnode, directive, 'beforeUpdate');
updatingDirectives.push(directive);
}
}
data[DIRECTIVE_UPDATING] = updatingDirectives;
}
}
function afterUpdate(api, vnode, oldVNode) {
var data = vnode.data;
if (data) {
var directives = data[DIRECTIVE_UPDATING];
if (directives) {
for (var i = 0, length = directives.length; i < length; i++) {
callDirectiveHook(data, vnode, directives[i], 'afterUpdate');
}
data[DIRECTIVE_UPDATING] = UNDEFINED;
}
}
}
var afterMount = genetateDirectiveHook('afterMount');
var beforeDestroy$1 = genetateDirectiveHook('beforeDestroy');
var directiveHook = /*#__PURE__*/Object.freeze({
__proto__: null,
afterCreate: afterCreate$1,
beforeUpdate: beforeUpdate$1,
afterUpdate: afterUpdate,
afterMount: afterMount,
beforeDestroy: beforeDestroy$1
});
function afterCreate(api, vnode) {
var ref = vnode.ref;
if (ref) {
var context = vnode.context;
var $refs = context.$refs;
if (!$refs) {