JavaScript插件编写经验

最近跟着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