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);