JavaScript插件编写经验-CSDN博客

本文链接：https://blog.csdn.net/qq_36657997/article/details/80900684

最近跟着boss学习手写js插件，插件功能是通过简单配置，完成一个企业的主页制作。

代码如下：

/**
*
*/
;
(function($, window, document, undefined) {
var pluginName = "omHomePageEditor";
var defaults = {
id : "",
ownerId : "",
basicpropsheet : "",
propsheet : "",
height : 0,
parent : "",
};

var Editor = function(element, options) {
this.element = element;
this.options = $.extend({
id : "",
ownerId : "",
basicpropsheet : "",
propsheet : "",
height : 0,
parent : "",
}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.currObject = null;
this.stack = new CommandStack();
this.basicpropsheet = options.basicpropsheet;
this.propsheet = options.propsheet;
this.init(options);
this.createToolbar(options);
this.loading(options);
};

Editor.prototype.init = function(options) {

var homePage = new HomePageTemplate();
homePage.id = options.id;
this.currObject = homePage;
console.log(this.propsheet);

this.editorPanel = document.createElement("DIV");

};

Editor.prototype.loadPage = function(skinId,imgURL,orgTitle,newsText){

if ($(maincontent).firstPagePane != undefined) {
var board = $(maincontent).firstPagePane({
id : "firstPagePane",
parent : this,
});
this.firstPagePane = board.data("firstPagePane");
}

if ($(maincontent).orgInformationPane != undefined) {
var board = $(maincontent).orgInformationPane({
id : "orgInformationPane",
parent : this,
});
this.orgInformationPane = board.data("orgInformationPane");
}

if ($(maincontent).orgProductsPane != undefined) {
var board = $(maincontent).orgProductsPane({
id : "orgProductsPane",
parent : this,
});
this.orgProductsPane = board.data("orgProductsPane");
}

if ($(maincontent).orgNewsPanel != undefined) {
var board = $(maincontent).orgNewsPanel({
id : "orgNewsPanel",
parent : this,
});
this.orgNewsPanel = board.data("orgNewsPanel");
}

};

Editor.prototype.loading = function(options) {
$("#progressbar").show();

var that = this;

$("#progressbar").show();
$.getJSON(omservices.api("26"),{
orgId:options.owner,
}).complete(function (data){
if(data.responseJSON!=null){
that.loadData(data.responseJSON);
}
$("#progressbar").hide();
});

};

Editor.prototype.getDirty = function() {
return this.stack.isDirty();
};

Editor.prototype.saveObject = function() {
this.stack.save();
};

Editor.prototype.loadData = function(jsonobj) {

};

Editor.prototype.createToolbar = function(options) {

};

Editor.prototype.createButtonGroup = function(parent) {

};

Editor.prototype.createGroup = function(parent) {
return group;
};

Editor.prototype.createTool = function(group, id, title, style, fonttag,
fontclass) {
button.appendChild(icon);
return button;
};

Editor.prototype.enableButton = function(button) {
button.removeAttribute("disabled");
};

Editor.prototype.disableButton = function(button) {
button.setAttribute("disabled", "true");
};

Editor.prototype.setPropertySheet = function() {

// basic property setting
if (this.basicpropsheet != null) {
this.basicpropsheet.tabId = this.options.id;
this.basicpropsheet.setSheet(this.currObject);
}
// advanced property setting.
if (this.propsheet != null) {
this.propsheet.tabId = this.options.id;
this.propsheet.setSheet(this.currObject);
}
};

Editor.prototype.handleEvent = function(e) {
switch (e.type) {
case "click":
this.doClick(e);
break;
case "change":
this.doChange(e);
break;
}
};

Editor.prototype.doChangeContent = function() {
map[this.currObject.id].stack.execute(new HomePageChangeCmd(
this.currObject));
};

Editor.prototype.doChange = function(evt) {

};

Editor.prototype.addUpdateHomePage = function(homePage) {
this.currObject = homePage;
this.setPropertySheet();
};

Editor.prototype.doClick = function(evt) {

};

Editor.prototype.hiddenAll = function(){

}

Editor.prototype.loadPane = function(item) {
this.hiddenAll();

};

$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, pluginName)) {
$.data(this, pluginName, new Editor(this, options));
} else if ($.isFunction(Plugin.prototype[options])) {
$.data(this, pluginName)[options]();
}
});
};

})(jQuery, window, document);

个人认为这样写插件的好处是：

类似java中类的编写，非常好读，并且条理清晰。

这一段定义了js插件的名称，以及基本参数。

var pluginName = "omHomePageEditor";
var defaults = {
id : "",
ownerId : "",
basicpropsheet : "",
propsheet : "",
height : 0,
parent : "",
};

这一段类比java中的构造函数，js插件的初始化

var Editor = function(element, options) {
this.element = element;
this.options = $.extend({
id : "",
ownerId : "",
basicpropsheet : "",
propsheet : "",
height : 0,
parent : "",
}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.currObject = null;
this.stack = new CommandStack();
this.basicpropsheet = options.basicpropsheet;
this.propsheet = options.propsheet;
this.init(options);
this.createToolbar(options);
this.loading(options);
};

这一段代码，个人理解就像java中的单例模式

$.fn[pluginName] = function(options) {
return this.each(function() {
if (!$.data(this, pluginName)) {
$.data(this, pluginName, new Editor(this, options));
} else if ($.isFunction(Plugin.prototype[options])) {
$.data(this, pluginName)[options]();
}
});
};

拥有上述基本元素，一个js插件基本算是完整了，其余的方法酌情添加即可

以下链接对于学习js插件很有帮助

http://www.shouce.ren/api/view/a/15086

http://wiki.jikexueyuan.com/project/javascript-design-patterns/jquery-pattern.html

https://blog.csdn.net/shaonaozu/article/details/12588989