this is a self-written method to create div. If you want a module conversation, I don"t know if there is room for optimization. For example, if you want the method to be left as an instance object, how to avoid rewriting the exposed modules init, and now there is no good decoupling between the methods in it
. let modules = (function(w, $) {
let mod = {};
let rootDom = $("-sharpwl-extend");
let className = rootDom.attr("class");
let getClassNameDom = function() {
let _c = className.split(" ");
if (_c[0].indexOf("wl-extend") > -1) {
let _dom = _c[0].split("-");
return _dom[2];
} else {
throw "dom";
}
};
mod.init = function(obj) {
let color = obj.color || "red";
let colorbor = obj.borderColor || "-sharpccc";
let width = obj.width || "200px";
let height = obj.height || "50px";
let domName = getClassNameDom();
createDom(domName, color, colorbor, width, height);
};
let createDom = function(domName, color, colorbor, width, height) {
rootDom.html(`<${domName} id="wl-create-dom"></${domName}>`);
let childrenDom = $("-sharpwl-create-dom");
childrenDom.css({
color: color,
border: `1px solid ${colorbor}`,
width: width + "px",
height: height + "px"
});
$("-sharpwl-extend").append(childrenDom);
};
return mod;
})(window, jQuery);
$(function() {
modules.init({
width: 500,
height: 200,
borderColor: "red"
});
});