2017年2月8號,今天是年后第一天班,暫無任務,閑來無事,想想去年也寫過幾個插件,卻說不上原理。。。寫過CSS,也記憶不是很清晰。。。;了解過node,socket等,也需要進一步學習。再翻翻之前寫的幾篇博客,竟有些慶幸,還好有部分爛筆頭的記錄,不然以我的腦瓜子,早拋到九霄云外去了。今年一定定期記錄些,用于復習回憶。
首先,還是復習一下插件的知識!
插件開發,我們一般運用面向對象的思維方式,為什么采用面向對象?
(function($){
})(jQuery);
解析為
var jq=function($);
jq(jQuery);
首先我們來看一種不是采用面向對象的思路。
以下內容摘自:https://www.codePRoject.com/articles/291290/how-to-write-plugin-in-jquery
(function( $ ) { $.fn.myPlugin = function() { // Do your awesome plugin stuff here this.fadeOut('normal'); };})( jQuery ); Plugin for Multiple Elements
(function ($) { $.fn.hoverElement = function () { return this.each(function () { $(this).hover( function () { $(this).addClass('hoverTextSel'); }, function () { $(this).removeClass('hoverTextSel'); } ); // end of Hover event }); // end for each }; // end of functions})(jQuery);Now you can perform multiple actions in one series.
$(".hoverText2").hoverElement().css({'color':'red'});Customization
(function ($) { $.fn.textHover = function (options) { var defaultVal = { Text: 'Your mouse is over', ForeColor: 'red', BackColor: 'gray' }; var obj = $.extend(defaultVal, options); return this.each(function () { var selObject = $(this); var oldText = selObject.text(); var oldBgColor = selObject.css("background-color"); var oldColor = selObject.css("color"); selObject.hover(function () { selObject.text(obj.Text); selObject.css("background-color", obj.BackColor); selObject.css("color", obj.ForeColor); }, function () { selObject.text(oldText); selObject.css("background-color", oldBgColor); selObject.css("color", oldColor); } ); }); }})(jQuery); 參考鏈接:http://www.111cn.net/wy/jquery/71895.htm
為什么要有面向對象的思維,因為如果不這樣,你可能需要一個方法的時候就去定義一個function,當需要另外一個方法的時候,再去隨便定義一個function,同樣,需要一個變量的時候,毫無規則地定義一些散落在代碼各處的變量。不方便維護,也不夠清晰。當然,這些問題在代碼規模較小時是體現不出來的。
如果將需要的重要變量定義到對象的屬性上,函數變成對象的方法,當我們需要的時候通過對象來獲取,一來方便管理,二來不會影響外部命名空間,因為所有這些變量名還有方法名都是在對象內部。
參考鏈接:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
接下來列舉一種面向對象的插件開發框架模板
/* * tableUI 0.1
* Date: 2010-03-30 * 使用tableUI可以方便地將表格提示使用體驗。先提供的功能有奇偶行顏色交替,鼠標移上高亮顯示 */
;(function($){var Guide = function(elem,ops){this.options = $.extend({//默認的showTab:true,back:function(){ return true; next:function(){ return true; }, finish:function(){ } },ops); this.$elem = $(elem); this._init();}var fn = {_init: function () {}}Guide.prototype = fn;$.guide = function(pelem,ops){var guide = new Guide(pelem,ops);return guide;}})(jQuery);問題1:為什么使用prototype???
新聞熱點
疑難解答