搜尋

首頁  >  問答  >  主體

javascript - 自己開發jQuery插件能不能實作一個插件裡有多個功能

RT!
例如,寫一個插件,裡面有選項卡功能,有輪播圖功能,有彈窗功能等等
當然不需要這些功能都很強大,只是為了把這些功能集合起來,方便使用的時候呼叫就可以了
我的思路是:
用var methods = {...} 包裹起來,裡面的... 代表N各小功能。
如:

var methods = {
    nTab: function(options) {
        return this.each(function() {
            var defaults = { ... }; // 每增加一个功能就要多写一遍这个
            settings = $.extend({}, defaults, options);
            // 执行代码
        }
    },
    slide: function(options) {
        return this.each(function() {
            var defaults = { ... };  // 每增加一个功能就要多写一遍这个
            settings = $.extend({}, defaults, options);
            // 执行代码
        }
    }
    // N个小功能代码 ...
}
$.fn.pluginName = function() {
    var method = arguments[0];

    if(methods[method]) {
        method = methods[method];
        arguments = Array.prototype.slice.call(arguments, 1);
    } else if( typeof(method) == 'object' || !method ) {
        method = methods.init;
    } else {
        $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
        return this;
    }

    return method.apply(this, arguments);

}

目前自己照這種方法寫了一個插件,裡麵包含了一些自己常會用到的js特效,但總覺得這樣寫不好,但不知道需要做哪些改進,還請走過路過的前輩指點一下啊,謝謝!

不知道有沒有人也有跟我一樣的需求,大家都是怎麼來實現的?

phpcn_u1582phpcn_u15822731 天前1105

全部回覆(3)我來回復

  • 大家讲道理

    大家讲道理2017-07-05 11:02:48

    你這就是要自己寫個庫的節奏啊!你現在的想法類似 jQuery EasyUI,它的每個元件都對應一個 $.fn.() 方法,這個方法第的一個參數是元件方法名,之後是這個方法的參數,例如

    $("#id1").panel("show")

    這就是呼叫的 panel 元件的 show 方法。

    這種寫法用慣也挺好,但是有個問題,就是很難在編輯器中實作語法提示。

    另外一種方式是MiniUI 的方式,它是透過一個特定的方法(mini.get())來根據DOM 取得一個元件控制對象,然後跟使用普通對像一樣來使用這個對象進行相關的元件操作。如

    var panel = mini.get("id1");
    panel.show();

    兩種方式應該都能實現你的想法,差別就在於封裝一個函數(方法)介面和封裝一個物件介面的差別

    回覆
    0
  • 欧阳克

    欧阳克2017-07-05 11:02:48

    感覺你想做的是一個函式庫,包含了一些自己常用的功能。可以參考下這個項目的結構

    回覆
    0
  • PHP中文网

    PHP中文网2017-07-05 11:02:48

    怎麼感覺你那個不是插件,更像ui組合

    回覆
    0
  • 取消回覆