let param = this.config;
// 缓存选择器
let $id = null;
// 要抛给开发者的方法
that.init = function(option) {
// 对直接调用init方法的参数进行合并
param = $.extend(true, {}, param, option);
// 单页多页选择器,如果是单页,这个插件只能在模块里面用, 不能在bui.ready
$id = ui.$(param.id);
// 绑定事件,点击的时候增加激活样式
$id.children("dt").click(function(e) {
var hasActive = $(this).hasClass("active");
if (hasActive) {
$(this).removeClass("active");
} else {
// 加上样式以后会自动对箭头及下一层级展示处理;
$(this).addClass("active");
}
})
return that;
}
// 如果有依赖bui控件,应该在这里写,这样方便外部调用
// that.widgets.loading = ui.loading({
// appendTo: opt.id
// });
// 如果需要销毁的生命周期,则在这里加上.
// that.beforeDestroy = function() {
//
// return that;
// }
// 必须传id
if (!param.id) {
// 抛出错误
ui.showLog("必须传id参数.")
return that;
}
// 默认先初始化一次
return this.init(opt);
}
});
})(window.bui || {}, window.libs);
结语
上面我们示例了一个最简单的插件的开发及使用, 但插件的适应性还不够, 还需要考虑各种扩展性,复杂的场景如何去适应, 比方内容是需要固定高度,选择器换成其它,只展示一个,等各种需求都不能满足, 我们需要考虑更多的场景, 抽取更多的变量作为可配置.
