yox
Version:
A lightweight mvvm framework
2,555 lines • 70.5 kB
JavaScript
/**
* yox.js v1.0.0-alpha.408
* (c) 2017-2023 musicode
* Released under the MIT License.
*/
/**
* 为了压缩，定义的常量
*/
const TRUE = true;
const FALSE = false;
const NULL = null;
const UNDEFINED = void 0;
const RAW_UNDEFINED = 'undefined';
const RAW_FUNCTION = 'function';
const RAW_LENGTH = 'length';
const RAW_WILDCARD = '*';
const RAW_DOT = '.';
/**
* Single instance for window in browser
*/
const WINDOW = typeof window !== RAW_UNDEFINED ? window : UNDEFINED;
/**
* Single instance for noop function
*/
const EMPTY_FUNCTION = function () {
/** yox */
};
/**
* 空对象，很多地方会用到，比如 `a || EMPTY_OBJECT` 确保是个对象
*/
const EMPTY_OBJECT = Object.freeze({});
/**
* 空数组
*/
const EMPTY_ARRAY = Object.freeze([]);
/**
* 空字符串
*/
const EMPTY_STRING = '';
/**
* 日志等级
*/
const LOG_LEVEL_DEBUG = 1;
const LOG_LEVEL_INFO = 2;
const LOG_LEVEL_WARN = 3;
const LOG_LEVEL_ERROR = 4;
const LOG_LEVEL_FATAL = 5;
/**
* 当前是否是源码调试，如果开启了代码压缩，empty function 里的注释会被干掉
* 源码模式默认选 INFO，因为 DEBUG 输出的日志太多，会导致性能急剧下降
*/
const LOG_LEVEL_DEFAULT = /yox/.test(EMPTY_FUNCTION.toString()) ? LOG_LEVEL_INFO : LOG_LEVEL_WARN;
/**
* 外部可配置的对象
*/
const 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();
}
class CustomEvent {
/**
* 构造函数
*
* 可以传事件名称，也可以传原生事件对象
*/
constructor(type, originalEvent) {
// 这里不设置命名空间
// 因为有没有命名空间取决于 Emitter 的构造函数有没有传 true
// CustomEvent 自己无法决定
this.type = type;
this.phase = CustomEvent.PHASE_CURRENT;
if (originalEvent) {
this.originalEvent = originalEvent;
}
}
static is(event) {
return event instanceof CustomEvent;
}
/**
* 阻止事件的默认行为
*/
preventDefault() {
const instance = this;
if (!instance.isPrevented) {
const { originalEvent } = instance;
if (originalEvent) {
originalEvent.preventDefault();
}
instance.isPrevented = TRUE;
}
return instance;
}
/**
* 停止事件广播
*/
stopPropagation() {
const instance = this;
if (!instance.isStoped) {
const { originalEvent } = instance;
if (originalEvent) {
originalEvent.stopPropagation();
}
instance.isStoped = TRUE;
}
return instance;
}
prevent() {
return this.preventDefault();
}
stop() {
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) {
const { length } = array;
if (length) {
if (reversed) {
for (let i = length - 1; i >= 0; i--) {
if (callback(array[i], i) === FALSE) {
break;
}
}
}
else {
for (let i = 0; i < length; i++) {
if (callback(array[i], i) === 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) {
let 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) {
const { length } = array;
if (length > 0) {
return array[length - 1];
}
}
/**
* 弹出数组最后一项
*
* 项目里用的太多，仅用于节省字符...
*
* @param array 数组
* @return 弹出的数组项
*/
function pop(array) {
const { length } = array;
if (length > 0) {
return array.pop();
}
}
/**
* 删除数组项
*
* @param array 数组
* @param item 待删除项
* @param strict 是否全等判断，默认是全等
* @return 删除的数量
*/
function remove(array, target, strict) {
let 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) {
let 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,
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;
}
let createPureObject = function () {
const obj = Object.create(NULL);
return {
get(key) {
return obj[key];
},
set(key, value) {
obj[key] = value;
},
has(key) {
return key in obj;
},
keys() {
return Object.keys(obj);
}
};
};
/**
* 缓存一个参数的函数调用结果
*
* @param fn 需要缓存的函数
* @return 带缓存功能的函数
*/
function createOneKeyCache(fn) {
const cache = createPureObject();
return function (key) {
const hit = cache.get(key);
if (hit !== UNDEFINED) {
return hit;
}
const value = fn(key);
cache.set(key, value);
return value;
};
}
/**
* 缓存两个参数的函数调用结果
*
* @param fn 需要缓存的函数
* @return 带缓存功能的函数
*/
function createTwoKeyCache(fn) {
const cache = createPureObject();
return function (key1, key2) {
let hit1 = cache.get(key1);
if (hit1) {
const hit2 = hit1.get(key2);
if (hit2) {
return hit2;
}
}
else {
hit1 = createPureObject();
cache.set(key1, hit1);
}
const value = fn(key1, key2);
hit1.set(key2, value);
return value;
};
}
const camelizePattern = /-([a-z])/gi, hyphenatePattern = /\B([A-Z])/g, capitalizePattern = /^[a-z]/;
/**
* 连字符转成驼峰
*
* @param str
* @return 驼峰格式的字符串
*/
const camelize = createOneKeyCache(function (str) {
return str.replace(camelizePattern, function (_, $1) {
return upper($1);
});
});
/**
* 驼峰转成连字符
*
* @param str
* @return 连字符格式的字符串
*/
const hyphenate = createOneKeyCache(function (str) {
return str.replace(hyphenatePattern, function (_, $1) {
return '-' + lower($1);
});
});
/**
* 首字母大写
*
* @param str
* @return
*/
const 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) {
const 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) {
const 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
});
const dotPattern = /\./g, asteriskPattern = /\*/g, doubleAsteriskPattern = /\*\*/g;
/**
* 判断 keypath 是否以 prefix 开头，如果是，返回匹配上的前缀长度，否则返回 -1
*
* @param keypath
* @param prefix
* @return
*/
const match = createTwoKeyCache(function (keypath, prefix) {
if (keypath === prefix) {
return prefix.length;
}
prefix += RAW_DOT;
return startsWith(keypath, prefix)
? prefix.length
: -1;
});
const 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) {
const tokens = string$1(keypath) ? getKeypathTokens(keypath) : keypath;
for (let i = 0, lastIndex = tokens.length - 1; i <= lastIndex; i++) {
if (callback(tokens[i], i, lastIndex) === FALSE) {
break;
}
}
}
/**
* 遍历 keypath 的每个部分
*
* @param keypath1
* @param keypath2
*/
const join = createTwoKeyCache(function (keypath1, keypath2) {
return keypath1 && keypath2
? keypath1 + RAW_DOT + keypath2
: keypath1 || keypath2;
});
/**
* 是否模糊匹配
*
* @param keypath
*/
const isFuzzy = createOneKeyCache(function (keypath) {
return has$1(keypath, RAW_WILDCARD);
});
const getFuzzyPattern = createOneKeyCache(function (pattern) {
return new RegExp(`^${pattern
.replace(dotPattern, '\\.')
.replace(asteriskPattern, '(\\w+)')
.replace(doubleAsteriskPattern, '([\.\\w]+?)')}$`);
});
/**
* 模糊匹配 keypath
*
* @param keypath
* @param pattern
*/
const matchFuzzy = createTwoKeyCache(function (keypath, pattern) {
const result = keypath.match(getFuzzyPattern(pattern));
return result
? result[1]
: UNDEFINED;
});
/**
* 全局 value holder，避免频繁的创建临时对象
*/
const holder = {
value: UNDEFINED
};
/**
* 获取对象的 key 的数组
*
* @param object
* @return
*/
function keys(object) {
return Object.keys(object);
}
/**
* 遍历对象
*
* @param object
* @param callback 返回 false 可停止遍历
*/
function each(object, callback) {
for (let 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) {
let 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) {
let result = object;
each$1(keypath, function (key, index, lastIndex) {
if (result != NULL) {
// 先直接取值
let 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) {
let 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
});
/**
* 外部可用这些常量
*/
const DEBUG = LOG_LEVEL_DEBUG;
const INFO = LOG_LEVEL_INFO;
const WARN = LOG_LEVEL_WARN;
const ERROR = LOG_LEVEL_ERROR;
const FATAL = LOG_LEVEL_FATAL;
/**
* 是否有原生的日志特性，没有必要单独实现
*/
const 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() {
const { logLevel } = PUBLIC_CONFIG;
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
});
class Emitter {
constructor(ns) {
this.ns = ns || FALSE;
this.listeners = {};
}
/**
* 发射事件
*
* @param type 事件名称或命名空间
* @param args 事件处理函数的参数列表
* @param filter 自定义过滤器
*/
fire(type, args, filter) {
let 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)
const customEvent = args && CustomEvent.is(args[0])
? args[0]
: UNDEFINED;
// 这里不用 array.each，减少函数调用
for (let i = 0, length = list.length; i < length; i++) {
let options = list[i];
// 命名空间不匹配
if (!matchNamespace(event.ns, options)
// 在 fire 过程中被移除了
|| !has$2(list, options)
// 传了 filter，则用 filter 判断是否过滤此 options
|| (filter && !filter(event, args, options))) {
continue;
}
let 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
*/
on(type, listener) {
const instance = this, listeners = instance.listeners, options = func(listener)
? { listener: listener }
: listener;
if (object$1(options) && func(options.listener)) {
if (!string$1(options.ns)) {
const event = instance.toEvent(type);
options.ns = event.ns;
type = event.type;
}
push(listeners[type] || (listeners[type] = []), options);
}
}
/**
* 取消监听
*
* @param type
* @param listener
*/
off(type, listener) {
const instance = this, listeners = instance.listeners;
if (type) {
const 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
*/
has(type, listener) {
let 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
*/
toEvent(type) {
// 这里 ns 必须为字符串
// 用于区分 event 对象是否已完成命名空间的解析
const event = {
type,
ns: EMPTY_STRING,
};
// 是否开启命名空间
if (this.ns) {
const index = indexOf(type, RAW_DOT);
if (index >= 0) {
event.type = slice(type, 0, index);
event.ns = slice(type, index + 1);
}
}
return event;
}
toFilter(type, listener) {
let filter;
if (listener) {
filter = func(listener)
? { listener: listener }
: listener;
}
else {
filter = {};
}
if (string$1(filter.ns)) {
filter.type = type;
}
else {
const 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) {
const { ns } = options;
return ns && namespace
? ns === namespace
: TRUE;
}
let 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) {
const channel = new MessageChannel();
channel.port1.onmessage = fn;
channel.port2.postMessage(1);
};
}
else {
nextTick = setTimeout;
}
var nextTick$1 = nextTick;
let shared;
class NextTask {
constructor(hooks) {
const instance = this;
instance.tasks = [];
instance.hooks = hooks || EMPTY_OBJECT;
}
/**
* 全局单例
*/
static shared() {
return shared || (shared = new NextTask());
}
/**
* 在队尾添加异步任务
*/
append(func, context) {
const instance = this, { tasks } = instance;
push(tasks, {
fn: func,
ctx: context
});
if (tasks.length === 1) {
nextTick$1(function () {
instance.run();
});
}
}
/**
* 在队首添加异步任务
*/
prepend(func, context) {
const instance = this, { tasks } = instance;
unshift(tasks, {
fn: func,
ctx: context
});
if (tasks.length === 1) {
nextTick$1(function () {
instance.run();
});
}
}
/**
* 清空异步队列
*/
clear() {
this.tasks.length = 0;
}
/**
* 立即执行异步任务，并清空队列
*/
run() {
const instance = this, { tasks, hooks } = instance, { length } = tasks;
if (length) {
instance.tasks = [];
if (hooks.beforeTask) {
hooks.beforeTask();
}
for (let i = 0; i < length; i++) {
execute(tasks[i].fn, tasks[i].ctx);
}
if (hooks.afterTask) {
hooks.afterTask();
}
}
}
}
// 下面这些值需要根据外部配置才能确定
// 保留字，避免 IE 出现 { class: 'xx' } 报错
toMap('abstract,goto,native,static,enum,implements,package,super,byte,export,import,private,protected,public,synchronized,char,extends,int,throws,class,final,interface,transient,yield,let,const,float,double,boolean,long,short,volatile,default');
const STATUS_INIT = 1;
const STATUS_FRESH = 2;
const STATUS_DIRTY = 3;
function runGetter(instance) {
const { input, getter } = instance;
instance.value = input
? getter.apply(UNDEFINED, input)
: getter();
}
function runOutput(instance) {
const { value, output } = instance;
return output
? output(value)
: value;
}
class Deps {
constructor() {
this.map = {};
this.list = [];
}
add(observer, dep) {
const deps = this.map[observer.id] || (this.map[observer.id] = {});
if (!deps[dep]) {
deps[dep] = observer;
this.list.push([
observer, dep
]);
}
}
watch(watcher) {
const { list } = this;
if (list) {
for (let i = 0, length = list.length; i < length; i++) {
list[i][0].watch(list[i][1], watcher);
}
}
}
unwatch(watcher) {
const { list } = this;
if (list) {
for (let i = 0, length = list.length; i < length; i++) {
list[i][0].unwatch(list[i][1], watcher);
}
}
}
}
/**
* 计算属性
*
* 可配置 cache、deps, get、set 等
*/
class Computed {
constructor(keypath, cache, sync, input, output, getter, setter, onChange) {
const instance = this;
instance.status = STATUS_INIT;
instance.keypath = keypath;
instance.cache = cache;
instance.input = input;
instance.output = output;
instance.setter = setter;
instance.getter = getter;
instance.onChange = onChange;
instance.watcherOptions = {
sync,
watcher() {
instance.refresh();
}
};
}
/**
* 读取计算属性的值
*/
get() {
const instance = this, { status, watcherOptions } = instance;
// 禁用缓存
if (!instance.cache) {
runGetter(instance);
}
// 减少取值频率，尤其是处理复杂的计算规则
else if (status !== STATUS_FRESH) {
// 如果写死了依赖，则不需要收集依赖
if (instance.staticDeps) {
runGetter(instance);
}
// 自动收集依赖
else {
let { dynamicDeps } = instance;
// 清空上次收集的依赖
if (dynamicDeps) {
dynamicDeps.unwatch(watcherOptions.watcher);
}
instance.dynamicDeps = UNDEFINED;
const lastComputed = Computed.current;
// 开始收集新的依赖
Computed.current = instance;
runGetter(instance);
// 取值完成，恢复原值
Computed.current = lastComputed;
dynamicDeps = instance.dynamicDeps;
if (dynamicDeps) {
dynamicDeps.watch(watcherOptions);
}
}
}
if (status !== STATUS_FRESH) {
instance.status = STATUS_FRESH;
}
return runOutput(instance);
}
set(value) {
const { setter } = this;
if (setter) {
setter(value);
}
else if (func(value)) {
this.getter = value;
this.refresh();
}
}
refresh() {
const oldValue = this.value;
this.status = STATUS_DIRTY;
const newValue = this.get();
if (newValue !== oldValue) {
this.onChange(this.keypath, newValue, oldValue);
}
}
addStaticDeps(observer, deps) {
const staticDeps = this.staticDeps || (this.staticDeps = new Deps());
for (let i = 0, length = deps.length; i < length; i++) {
staticDeps.add(observer, deps[i]);
}
staticDeps.watch(this.watcherOptions);
}
addDynamicDep(observer, dep) {
// 动态依赖不能在这直接 watch
// 只有当计算属性的依赖全部收集完了，才能监听该计算属性的所有依赖
// 这样可保证依赖最少的计算属性最先执行 watch，当依赖变化时，它也会最早触发 refresh
const deps = this.dynamicDeps || (this.dynamicDeps = new Deps());
deps.add(observer, dep);
}
}
function toNumber (target, defaultValue) {
return numeric(target)
? +target
: defaultValue !== UNDEFINED
? defaultValue
: 0;
}
function readValue (source, keypath) {
if (source == NULL || keypath === EMPTY_STRING) {
return source;
}
const result = get(source, keypath);
if (result) {
return result.value;
}
}
/**
* 对比新旧字符串
*
* @param newValue
* @param oldValue
* @param callback
*/
function diffString (newValue, oldValue, callback) {
const newIsString = string$1(newValue), oldIsString = string$1(oldValue);
if (newIsString || oldIsString) {
callback(RAW_LENGTH, newIsString ? newValue.length : UNDEFINED, oldIsString ? oldValue.length : UNDEFINED);
return TRUE;
}
}
/**
* 对比新旧数组
*
* @param newValue
* @param oldValue
* @param callback
*/
function diffArray (newValue, oldValue, callback) {
const newIsArray = array$1(newValue), oldIsArray = array$1(oldValue);
if (newIsArray || oldIsArray) {
const newLength = newIsArray ? newValue.length : UNDEFINED, oldLength = oldIsArray ? oldValue.length : UNDEFINED;
callback(RAW_LENGTH, newLength, oldLength);
for (let i = 0, length = Math.max(newLength || 0, oldLength || 0); i < length; i++) {
callback(
// 把 number 转成 string
EMPTY_STRING + i, newIsArray ? newValue[i] : UNDEFINED, oldIsArray ? oldValue[i] : UNDEFINED);
}
return TRUE;
}
}
/**
* 对比新旧对象
*
* @param newValue
* @param oldValue
* @param callback
*/
function diffObject (newValue, oldValue, callback) {
const newIsObject = object$1(newValue), oldIsObject = object$1(oldValue);
if (newIsObject || oldIsObject) {
const diffed = createPureObject(), newObject = newIsObject ? newValue : EMPTY_OBJECT, oldObject = oldIsObject ? oldValue : EMPTY_OBJECT;
if (newIsObject) {
for (let key in newObject) {
const value = newObject[key];
if (value !== oldObject[key]) {
// 保证遍历 oldObject 时不会再次触发
diffed.set(key, TRUE);
callback(key, value, oldObject[key]);
}
}
}
if (oldIsObject) {
for (let key in oldObject) {
const value = oldObject[key];
if (diffed.get(key) === UNDEFINED && value !== newObject[key]) {
callback(key, newObject[key], value);
}
}
}
}
}
/**
* 递归对比
*/
function diffRecursion(keypath, newValue, oldValue, fuzzyKeypaths, fuzzyKeypathLength, callback) {
const diff = function (subKey, subNewValue, subOldValue) {
if (subNewValue !== subOldValue) {
const newKeypath = join(keypath, subKey);
for (let i = 0; i < fuzzyKeypathLength; i++) {
const fuzzyKeypath = fuzzyKeypaths[i];
if (matchFuzzy(newKeypath, fuzzyKeypath) !== UNDEFINED) {
callback(fuzzyKeypath, newKeypath, subNewValue, subOldValue);
}
}
diffRecursion(newKeypath, subNewValue, subOldValue, fuzzyKeypaths, fuzzyKeypathLength, callback);
}
};
diffString(newValue, oldValue, diff)
|| diffArray(newValue, oldValue, diff)
|| diffObject(newValue, oldValue, diff);
}
function diffWatcher (keypath, newValue, oldValue, watcher, isRecursive, callback) {
let fuzzyKeypaths;
// 遍历监听的 keypath，如果未被监听，则无需触发任何事件
for (const watchKeypath in watcher) {
// 模糊监听，如 users.*.name
if (isFuzzy(watchKeypath)) {
// 如果当前修改的是 users.0 整个对象
// users.0 和 users.*.name 无法匹配
// 此时要知道设置 users.0 到底会不会改变 users.*.name 需要靠递归了
// 如果匹配，则无需递归
if (matchFuzzy(keypath, watchKeypath) !== UNDEFINED) {
callback(watchKeypath, keypath, newValue, oldValue);
}
else if (isRecursive) {
if (fuzzyKeypaths) {
fuzzyKeypaths.push(watchKeypath);
}
else {
fuzzyKeypaths = [watchKeypath];
}
}
}
// 不是模糊匹配，直接通过前缀匹配
else {
// 比如监听的是 users.0.name，此时修改 users.0，则直接读出子属性值，判断是否相等
const length = match(watchKeypath, keypath);
if (length >= 0) {
const subKeypath = slice(watchKeypath, length), subNewValue = readValue(newValue, subKeypath), subOldValue = readValue(oldValue, subKeypath);
if (subNewValue !== subOldValue) {
callback(watchKeypath, watchKeypath, subNewValue, subOldValue);
}
}
}
}
// 存在模糊匹配的需求
// 必须对数据进行递归
// 性能确实会慢一些，但是很好用啊，几乎可以监听所有的数据
if (fuzzyKeypaths) {
diffRecursion(keypath, newValue, oldValue, fuzzyKeypaths, fuzzyKeypaths.length, callback);
}
}
// 避免频繁创建对象
const optionsHolder = {
watcher: EMPTY_FUNCTION,
};
/**
* 格式化 watch options
*
* @param options
*/
function formatWatcherOptions (options, immediate) {
const isWatcher = func(options);
if (isWatcher) {
optionsHolder.watcher = options;
optionsHolder.immediate = immediate === TRUE;
return optionsHolder;
}
return options;
}
let guid = 0;
/**
* 观察者有两种观察模式：
*
* 1. 同步监听
* 2. 异步监听
*
* 对于`计算属性`这种需要实时变化的对象，即它的依赖变了，它需要立即跟着变，否则会出现不一致的问题
* 这种属于同步监听
*
* 对于外部调用 observer.watch('keypath', listener)，属于异步监听，它只关心是否变了，而不关心是否是立即触发的
*/
class Observer {
constructor(data, context, nextTask) {
const instance = this;
instance.id = guid++;
instance.data = data || {};
instance.context = context || instance;
instance.nextTask = nextTask || new NextTask();
instance.syncEmitter = new Emitter();
instance.asyncEmitter = new Emitter();
instance.asyncOldValues = {};
instance.asyncKeypaths = {};
instance.onComputedChange = function (keypath, newValue, oldValue) {
instance.diff(keypath, newValue, oldValue);
};
}
/**
* 获取数据
*
* @param keypath
* @param defaultValue
* @param depIgnore
* @return
*/
get(keypath, defaultValue, depIgnore) {
const instance = this, { data } = instance, currentComputed = Computed.current;
// 传入 '' 获取整个 data
if (keypath === EMPTY_STRING) {
return data;
}
// 调用 get 时，外面想要获取依赖必须设置是谁在收集依赖
// 如果没设置，则跳过依赖收集
if (currentComputed && !depIgnore) {
currentComputed.addDynamicDep(instance, keypath);
}
const result = get(data, keypath);
return result
? result.value
: defaultValue;
}
/**
* 更新数据
*
* @param keypath
* @param value
*/
set(keypath, value) {
const instance = this, { data } = instance, setValue = function (keypath, newValue) {
const oldValue = instance.get(keypath);
if (newValue === oldValue) {
return;
}
let next;
each$1(keypath, function (key, index, lastIndex) {
if (index === 0) {
const item = data[key];
if (item && item instanceof Computed) {
if (lastIndex === 0) {
item.set(newValue);
}
else {
// 这里 next 可能为空
next = item.get();
}
}
else {
if (lastIndex === 0) {
data[key] = newValue;
}
else {
next = data[key] || (data[key] = {});
}
}
return;
}
if (next) {
if (index === lastIndex) {
next[key] = newValue;
}
else {
next = next[key] || (next[key] = {});
}
}
});
instance.diff(keypath, newValue, oldValue);
};
if (string$1(keypath)) {
setValue(keypath, value);
}
else if (object$1(keypath)) {
for (let key in keypath) {
setValue(key, keypath[key]);
}
}
}
/**
* 同步调用的 diff，用于触发 syncEmitter，以及唤醒 asyncEmitter
*
* @param keypath
* @param newValue
* @param oldValue
*/
diff(keypath, newValue, oldValue) {
let instance = this, { syncEmitter, asyncEmitter, asyncOldValues, asyncKeypaths } = instance,
/**
* 我们认为 $ 开头的变量是不可递归的
* 比如浏览器中常见的 $0 表示当前选中元素
* DOM 元素是不能递归的
*/
isRecursive = codeAt(keypath) !== 36;
diffWatcher(keypath, newValue, oldValue, syncEmitter.listeners, isRecursive, function (watchKeypath, keypath, newValue, oldValue) {
syncEmitter.fire({
type: watchKeypath,
ns: EMPTY_STRING,
}, [
newValue,
oldValue,
keypath,
]);
});
/**
* 此处有坑，举个例子
*
* observer.watch('a', function () {})
*
* observer.set('a', 1)
*
* observer.watch('a', function () {})
*
* 这里，第一个 watcher 应该触发，但第二个不应该，因为它绑定监听时，值已经是最新的了
*/
diffWatcher(keypath, newValue, oldValue, asyncEmitter.listeners, isRecursive, function (watchKeypath, keypath, newValue, oldValue) {
// 这里是为了解决上面说的坑
const options = asyncEmitter.listeners[watchKeypath];
for (let i = 0, length = options.length; i < length; i++) {
options[i].count++;
}
if (!asyncKeypaths[keypath]) {
asyncOldValues[keypath] = oldValue;
asyncKeypaths[keypath] = {};
}
asyncKeypaths[keypath][watchKeypath] = TRUE;
if (!instance.pending) {
instance.pending = TRUE;
instance.nextTask.append(function () {
if (instance.pending) {
instance.diffAsync();
}
});
}
});
}
/**
* 异步触发的 diff
*/
diffAsync() {
const instance = this, { asyncEmitter, asyncOldValues, asyncKeypaths } = instance;
instance.pending = UNDEFINED;
instance.asyncOldValues = {};
instance.asyncKeypaths = {};
for (let keypath in asyncOldValues) {
const args = [
instance.get(keypath),
asyncOldValues[keypath],
keypath,
], keypaths = asyncKeypaths[keypath], hasChange = args[0] !== args[1], filterWatcher = function (event, args, options) {
// 前面递增了 count
// 这里要递减 count
// count > 0 表示前面标记了该监听器需要响应此次变化
if (options.count) {
// 采用计数器的原因是，同一个 options 可能执行多次
// 比如监听 user.*，如果同批次修改了 user.name 和 user.age
// 这个监听器会调用多次，如果第一次执行就把 count 干掉了，第二次就无法执行了
options.count--;
// 新旧值不相等才能触发监听器
return hasChange;
}
};
for (let watchKeypath in keypaths) {
asyncEmitter.fire({
type: watchKeypath,
ns: EMPTY_STRING,
}, args, filterWatcher);
}
}
}
/**
* 添加计算属性
*
* @param keypath
* @param options
*/
addComputed(keypath, options) {
let instance = this, context = instance.context, cache = TRUE, sync = TRUE, deps, input, getter, setter, output;
// 这里用 bind 方法转换一下调用的 this
// 还有一个好处，它比 call(context) 速度稍快一些
if (func(options)) {
getter = options.bind(context);
}
else if (object$1(options)) {
const computedOptions = options;
if (boolean(computedOptions.cache)) {
cache = computedOptions.cache;
}
if (boolean(computedOptions.sync)) {
sync = computedOptions.sync;
}
if (array$1(computedOptions.deps)) {
deps = computedOptions.deps;
}
// 参数列表必须是长度大于 0 的数组
if (!falsy$2(computedOptions.input)) {
input = computedOptions.input;
}
if (func(computedOptions.output)) {
output = computedOptions.output;
}
if (func(computedOptions.get)) {
getter = computedOptions.get.bind(context);
}
if (func(computedOptions.set)) {
setter = computedOptions.set.bind(context);
}
}
if (getter) {
const computed = new Computed(keypath, cache, sync, input, output, getter, setter, instance.onComputedChange);
if (cache && deps) {
computed.addStaticDeps(instance, deps);
}
return instance.data[keypath] = computed;
}
}
/**
* 移除计算属性
*
* @param keypath
*/
removeComputed(keypath) {
delete this.data[keypath];
}
/**
* 监听数据变化
*
* @param keypath
* @param watcher
* @param immediate
*/
watch(keypath, watcher, immediate) {
const instance = this, { context, syncEmitter, asyncEmitter } = instance, addWatcher = function (keypath, options) {
const emitter = options.sync ? syncEmitter : asyncEmitter,
// formatWatcherOptions 保证了 options.watcher 一定存在
listener = {
ns: EMPTY_STRING,
listener: options.watcher,
ctx: context,
count: 0,
};
if (options.once) {
listener.max = 1;
}
emitter.on(keypath, listener);
if (options.immediate) {
options.watcher.call(context, instance.get(keypath), UNDEFINED, keypath);
}
};
if (string$1(keypath)) {
addWatcher(keypath, formatWatcherOptions(watcher, immediate));
}
else {
for (let key in keypath) {
addWatcher(key, formatWatcherOptions(keypath[key]));
}
}
}
/**
* 取消监听数据变化
*
* @param keypath
* @param watcher
*/
unwatch(keypath, watcher) {
this.syncEmitter.off(keypath, watcher);
this.asyncEmitter.off(keypath, watcher);
}
/**
* 取反 keypath 对应的数据
*
* 不管 keypath 对应的数据是什么类型，操作后都是布尔型
*
* @param keypath
* @return 取反后的布尔值
*/
toggle(keypath) {
const value = !this.get(keypath);
this.set(keypath, value);
return value;
}
/**
* 递增 keypath 对应的数据
*
* 注意，最好是整型的加法，如果涉及浮点型，不保证计算正确
*
* @param keypath 值必须能转型成数字，如果不能，则默认从 0 开始递增
* @param step 步进值，默认是 1
* @param max 可以递增到的最大值，默认不限制
*/
increase(keypath, step, max) {
const value = toNumber(this.get(keypath), 0) + (step || 1);
if (!number(max) || value <= max) {
this.set(keypath, value);
return value;
}
}
/**
* 递减 keypath 对应的数据
*
* 注意，最好是整型的减法，如果涉及浮点型，不保证计算正确
*
* @param keypath 值必须能转型成数字，如果不能，则默认从 0 开始递减
* @param step 步进值，默认是 1
* @param min 可以递减到的最小值，默认不限制
*/
decrease(keypath, step, min) {
const value = toNumber(this.get(keypath), 0) - (step || 1);
if (!number(min) || value >= min) {
this.set(keypath, value);
return value;
}
}
/**
* 在数组指定位置插入元素
*
* @param keypath
* @param item
* @param index
*/
insert(keypath, item, index) {
let list = this.get(keypath);
list = array$1(list) ? list.slice() : [];
const { length } = list;
if (index === TRUE || index === length) {
list.push(item);
}
else if (index === FALSE || index === 0) {
list.unshift(item);
}
else if (index > 0 && index < length) {
list.splice(index, 0, item);
}
else {
return;
}
this.set(keypath, list);
return TRUE;
}
/**
* 在数组尾部添加元素
*
* @param keypath
* @param item
*/
append(keypath, item) {
return this.insert(keypath, item, TRUE);
}
/**
* 在数组首部添加元素
*
* @param keypath
* @param item
*/
prepend(keypath, item) {
return this.insert(keypath, item, FALSE);
}
/**
* 通过索引移除数组中的元素
*
* @param keypath
* @param index
*/
removeAt(keypath, index) {
let list = this.get(keypath);
if (array$1(list)
&& index >= 0
&& index < list.length) {
list = list.slice();
list.splice(index, 1);
this.set(keypath, list);
return TRUE;
}
}
/**
* 直接移除数组中的元素
*
* @param keypath
* @param item
*/
remove(keypath, item) {
let list = this.get(keypath);
if (array$1(list)) {
list = list.slice();
if (remove(list, item)) {
this.set(keypath, list);
return TRUE;
}
}
}
/**
* 拷贝任意数据，支持深拷贝
*
* @param data
* @param deep
*/
copy(data, deep) {
return copy(data, deep);
}
/**
* 销毁
*/
destroy() {
const instance = this;
instance.syncEmitter.off();
instance.asyncEmitter.off();
instance.nextTask.clear();
instance.data = {};
}
}
class Yox {
constructor(options) {
const instance = this, $options = options || EMPTY_OBJECT;
// 为了冒泡 HOOK_BEFORE_CREATE 事件，必须第一时间创建 emitter
// 监听各种事件
// 支持命名空间
instance.$emitter = new Emitter(TRUE);
if ($options.events) {
instance.on($options.events);
}
let { data, props, vnode, propTypes, computed, methods, watchers, extensions, } = $options;
instance.$options = $options;
if (extensions) {
extend(instance, extensions);
}
// 数据源，默认值仅在创建组件时启用
const source = props ? copy(props) : {};
// 先放 props
// 当 data 是函数时，可以通过 this.get() 获取到外部数据
const observer = instance.$observer = new Observer(source, instance, instance.$nextTask = new NextTask());
if (computed) {
each(computed, function (options, keypath) {
observer.addComputed(keypath, options);
});
}
const extend$1 = func(data) ? data.call(instance, options) : data;
if (object$1(extend$1)) {
each(extend$1, function (value, key) {
source[key] = value;
});
}
if (methods) {
each(methods, function (method, name) {
instance[name] = method;
});
}
if (watchers) {
observer.watch(watchers);
}
}
/**
* 定义组件对象
*/
static define(options) {
return options;
}
/**
* 安装插件
*
* 插件必须暴露 install 方法
*/
static use(plugin) {
plugin.install(Yox);
}
/**
* 因为组件采用的是异步更新机制，为了在更新之后进行一些操作，可使用 nextTick
*/
static nextTick(task, context) {
NextTask.shared().append(task, context);
}
/**
* 编译模板，暴露出来是为了打包阶段的模板预编译
*/
static compile(template, stringify) {
{
return template;
}
}
/**
* 注册全局指令
*/
static directive(name, directive) {
}
/**
* 注册全局过渡动画
*/
static transition(name, transition) {
}
/**
* 注册全局组件
*/
static component(name, component) {
}
/**
* 注册全局过滤器
*/
static filter(name, filter) {
}
/**
* 注册全局方法
*/
static method(name, method) {
if (string$1(name) && !method) {
return YoxPrototype[name];
}
{
setResourceSmartly(YoxPrototype, name, method);
}
}
/**
* 取值
*/
get(keypath, defaultValue) {
return this.$observer.get(keypath, defaultValue);
}
/**
* 设值
*/
set(keypath, value) {
// 组件经常有各种异步改值，为了避免组件销毁后依然调用 set
// 这里判断一下，至于其他方法的异步调用就算了，业务自己控制吧
const { $observer } = this;
if ($observer) {
$observer.set(keypath, value);
}
}
/**
* 监听事件，支持链式调用
*/
on(type, listener) {
addEventSmartly(this, type, listener);
return this;
}
/**
* 监听一次事件，支持链式调用
*/
once(type, listener) {
addEventSmartly(this, type, listener, TRUE);
return this;
}
/**
* 取消监听事件，支持链式调用
*/
off(type, listener) {
this.$emitter.off(type, listener);
return this;
}
/**
* 发射事件
*/
fire(type, data, downward) {
// 外部为了使用方便，fire(type) 或 fire(type, data) 就行了
// 内部为了保持格式统一
// 需要转成 Event，这样还能知道 target 是哪个组件
const instance = this, { $emitter, $parent, $children } = instance;
// 生成事件对象
let event;
if (CustomEvent.is(type)) {
event = type;
}
else if (string$1(type)) {
event = new CustomEvent(type);
}
else {
const emitterEvent = type;
event = new CustomEvent(emitterEvent.type);
event.ns = emitterEvent.ns;
}
// 先解析出命名空间，避免每次 fire 都要解析
if (event.ns === UNDEFINED) {
const emitterEvent = $emitter.toEvent(event.type);
event.type = emitterEvent.type;
event.ns = emitterEvent.ns;
}
// 告诉外部是谁发出的事件
if (!event.target) {
event.target = instance;
}
// 事件参数列表
let args = [event],
// 事件是否正常结束（未被停止冒泡）
isComplete;
// 比如 fire('name', true) 直接向下发事件
if (object$1(data)) {
push(args, data);
}
else if (data === TRUE) {
downward = TRUE;
}
// 向上发事件会经过自己
// 如果向下发事件再经过自己，就产生了一次重叠
// 这是没有必要的，而且会导致向下发事件时，外部能接收到该事件，但我们的本意只是想让子组件接收到事件
isComplete = downward && event.target === instance
? TRUE
: $emitter.fire(event, args);
if (isComplete) {
if (downward) {
if ($children) {
event.phase = CustomEvent.PHASE_DOWNWARD;
each$2($children, function (child) {
return isComplete = child.fire(event, data, TRUE);
});
}
}
else if ($parent) {
event.phase = CustomEvent.PHASE_UPWARD;
isComplete = $parent.fire(event, data);
}
}
return isComplete;
}
/**
* 监听数据变化，支持链式调用
*/
watch(keypath, watcher, immediate) {
this.$observer.watch(keypath, watcher, immediate);
return this;
}
/**
* 取消监听数据变化，支持链式调用
*/
unwatch(keypath, watcher) {
this.$observer.unwatch(keypath, watcher);
return this;
}
/**
* 加载组件，组件可以是同步或异步，最后会调用 callback
*
* @param name 组件名称
* @param callback 组件加载成功后的回调
*/
loadComponent(name, callback) {
}
/**
* 创建子组件
*
* @param options 组件配置
* @param vnode 虚拟节点
*/
createComponent(options, vnode) {
{
return this;
}
}
/**
* 注册当前组件级别的指令
*/
directive(name, directive) {
}
/**
* 注册当前组件级别的过渡动画
*/
transition(name, transition) {
}
/**
* 注册当前组件级别的组件
*/
component(name, component) {
}
/**
* 注册当前组件级别的过滤器
*/
filter(name, filter) {
}
/**
* 对于某些特殊场景，修改了数据，但是模板的依赖中并没有这一项
* 而你非常确定需要更新模板，强制刷新正是你需要的
*/
forceUpdate(props) {
}
/**
* 把模板抽象语法树渲染成 virtual dom
*/
render() {
}
/**
* 更新 virtual dom
*
* @param vnode
* @param oldVNode
*/
update(vnode, oldVNode) {
}
/**
* 校验组件参数
*
* @param props
*/
checkProp(key, value) {
}
/**
* 销毁组件
*/
destroy() {
const instance = this, { $parent, $options, $emitter, $observer } = instance;
$observer.destroy();
// 发完 after destroy 事件再解绑所有事件
$emitter.off();
instance.$el = UNDEFINED;
}
/**
* 因为组件采用的是异步更新机制，为了在更新之后进行一些操作，可使用 nextTick
*/
nextTick(task) {
this.$nextTask.append(task, this);
}
/**
* 取反 keypath 对应的数据
*
* 不管 keypath 对应的数据是什么类型，操作后都是布尔型
*/
toggle(keypath) {
return this.$observer.toggle(keypath);
}
/**
* 递增 keypath 对应的数据
*
* 注意，最好是整型的加法，如果涉及浮点型，不保证计算正确
*
* @param keypath 值必须能转型成数字，如果不能，则默认从 0 开始递增
* @param step 步进值，默认是 1
* @param max 可以递增到的最大值，默认不限制
*/
increase(keypath, step, max) {
return this.$observer.increase(keypath, step, max);
}
/**
* 递减 keypath 对应的数据
*
* 注意，最好是整型的减法，如果涉及浮点型，不保证计算正确
*
* @param keypath 值必须能转型成数字，如果不能，则默认从 0 开始递减
* @param step 步进值，默认是 1
* @param min 可以递减到的最小值，默认不限制
*/
decrease(keypath, step, min) {
return this.$observer.decrease(keypath, step, min);
}
/**
* 在数组指定位置插入元素
*
* @param keypath
* @param item
* @param index
*/
insert(keypath, item, index) {
return this.$observer.insert(keypath, item, index);
}
/**
* 在数组尾部添加元素
*
* @param keypath
* @param item
*/
append(keypath, item) {
return this.$observer.append(keypath, item);
}
/**
* 在数组首部添加元素
*
* @param keypath
* @param item
*/
prepend(keypath, item) {
return this.$observer.prepend(keypath, item);
}
/**
* 通过索引移除数组中的元素
*
* @param keypath
* @param index
*/
removeAt(keypath, index) {
return this.$observer.removeAt(keypath, index);
}
/**
* 直接移除数组中的元素
*
* @param keypath
* @param item
*/
remove(keypath, item) {
return this.$observer.remove(keypath, item);
}
/**
* 拷贝任意数据，支持深拷贝
*
* @param data
* @param deep
*/
copy(data, deep) {
return this.$observer.copy(data, deep);
}
}
/**
* core 版本
*/
Yox.version = "1.0.0-alpha.408";
/**
* 方便外部共用的通用逻辑，特别是写插件，减少重复代码
*/
Yox.is = is;
Yox.array = array;
Yox.object = object;
Yox.string = string;
Yox.logger = logger;
Yox.Event = CustomEvent;
Yox.Emitter = Emitter;
/**
* 外部可配置的对象
*/
Yox.config = PUBLIC_CONFIG;
const YoxPrototype = Yox.prototype;
// 内置方法，外部不可覆盖
toObject(keys(YoxPrototype));
function setResourceItem(registry, name, value, options) {
if (options && options.format) {
value = options.format(value);
}
registry[name] = value;
}
function setResourceSmartly(registry, name, value, options) {
if (string$1(name)) {
setResourceItem(registry, name, value, options);
}
else {
each(name, function (value, key) {
setResourceItem(registry, key, value, options);
});
}
}
function addEvent(instance, options, once) {
instance.$emitter.on(options.type, {
listener: options.listener,
ns: options.ns,
max: once ? 1 : -1,
ctx: instance,
});
}
function addEventSmartly(instance, type, listener, once) {
const { $emitter } = instance;
if (string$1(type)) {
addEvent(instance, $emitter.toFilter(type, listener), once);
}
else if (array$1(type)) {
each$2(type, function (filter) {
addEvent(instance, filter, once);
});
}
else {
each(type, function (value, key) {
addEvent(instance, $emitter.toFilter(key, value), once);
});
}
}
export default Yox;
//# sourceMappingURL=yox.esm.js.map