虚拟
vvidget是用于创建统一的JavaScript插件的抽象.
它创建了能处理几个问题的插件:
- 使用单一的命名和选择公约定义所有部件
- 帮助避免通过代码喷出大量随机选择器
- 你总是知道哪些DOM元素携带着这些部件之一
- 可靠地绑定在准备和页面更新的事件上,以初始化ajax装入的元素一次并只一次.
- 帮助管理 PJAX 重装和 HTML 碎片注入
- 嵌入式部件可以容易和安全地被激活
- 从数据属性加载选项 .
- 命名空间不会发生相撞, 因此单个 DOM 元素可以安全地托管多个部件
基本用途
以您首选的配置创建插件构建器实例 :
import widgetSetup from 'widget';
const widget = widgetSetup({ attr: 'ue', data: 'ue-widget' }, 'page-refreshed', 'fragment-refreshed');
// DOM elements with selector of `ue`, or `data-ue-widget` will activate widgets created with this
// config
这个配置让我们在数据属性中描述部件并传递选项:
<div class='simple-widget'
data-ue-widget='widget-name'
data-widget-name-option-one='option1'
data-widget-name-option-two='option2'>
这将映射到我们用匹配名称创建的插件 :
widget('widget-name', function(opts, ready) {
$el = this;
ready(() => {
// teardown
});
}, {
defaults: {},
init: 'nextTick'
});
多个部件
您可以将多个部件附加到同一个 DOM 元素中, 由 分隔带有空格字符的部件名称.
示例
<div data-ue-widget='widget-1 widget-2'></div>
这相当于:
<div ue='widget-1 widget-2'></div>
刷新页面事件
有一个遗留的事件驱动模式,需要触发事件来初始化部件. 这对PJAX和其他页面更新系统有用.
widget('remote-resource', function(opts, ready) {
fetch('/example').then((htmlFragment) => {
this.append(htmlFragment);
this.trigger('fragment-refreshed');
// any widgets nested within the HTML fragment will be activated
});
this.addEventListener('click', fetchData);
ready(() => {
this.removeEventListener('click', fetchData);
});
})
DOM 变异观察员
您也可以选择选择使用突变观察员来检测何时 dOM中增加了新的元素.
import widgetSetup from 'widget';
const widget = widgetSetup({ attr: 'ue', data: 'ue-widget' }, 'page-refreshed', 'fragment-refreshed');
widget.stopWatchingEvents();
widget.startWatchingDOM();