jQueryUI 的Weiget写法

JqueryUI的Weiget写法

• JUI中的Weiget写法

//这里的的factory其实就是 `function($){......}`
(function (factory) {
    if (typeof define === "function" && define.amd) {
        //Amd 异步加载模块
        define('jui/forms/jformCommands', [
            "jquery",
            "jqueryui",
            "./jinput",
            "../lists/jlistCommands"
        ], factory);
        //因为如果支持异步加载，这factory函数的入参 `$` 就会被翻译为 `jQuery`
    } else {
        //jQuery 就是Window.jQuery就是一个全局变量
        factory(jQuery);
    }
}(function ($) {
    //这里是jQueryUI的Weiget写法
    $.widget("jui.jformCommands", $.jui.jinput, {
        options: {
            isInput: false,
            commands: {}
        },
        _inputRender: function () {
            var that = this, opts = this.options;
            this.$inputWrapper.jlistCommands(opts.commands);
        }
    });
}));

• jQueryUI的Weiget写法

(function ($) {
    // utils fuction
    function foo() {}

    $.widget('命名空间.插件名', $.继承插件的命名空间.插件名,{
        /* snip */ 
        //public方法首字符不是_
        //private方法首字符是_
    });
})(jQuery); 

• jQueryUI的Weiget的使用方法

var instance = $('<div>');
instance.mywidget('publicFunction'); // work
instance.mywidget('_privateFunction'); // silently fail
instance.data('mywidget')._privateFunction(); // work
$.mynamespace.mywidget.prototype._privateFunction(); // work

• jQueryUI的Weiget的options

//定义options
options: {
    field1: 'default',
    function1: function () {
        console.log('default option function1');
    }
//调用options中的option
$('#id').jformCommands('option','isInput',true);