Главная → Программирование → by

Основные шаблоны плагин JQuery

Я иногда пишу о реализации дизайн patterns в JavaScript.Они отличный способ опираясь на проверенные подходы к решению общих проблем развития, и я думаю, что есть много выгод от их использования.Но в то время как известные наличие модели полезны, другая сторона развития, могли бы извлечь выгоду из своего набора шаблонов проектирования: JQuery плагинов.Официальный JQuery Плагин авторской guide предлагается отличная отправная точка для попадания в написании плагинов и виджетов, но давайте это further.

Плагин развития развивалась на протяжении последних нескольких лет.Мы больше не есть только один способ написания плагинов, но многие.На самом деле, некоторые модели могли бы работать лучше для конкретной задачи или компонента, чем others.

Некоторые разработчики, возможно, пожелают использовать JQuery UI Виджет factory, он отлично подходит для сложных, гибких компонентов пользовательского интерфейса.Некоторые не могут.Некоторые хотели бы структурировать свои плагины больше похож модулей (по аналогии с модулем шаблон) или использовать более формальный модуль формата, такие как AMD (определение асинхронного модуля) .Некоторые, возможно, хотят, чтобы их плагины, чтобы использовать силу прототипных наследства.Некоторые, возможно, захотите использовать пользовательские события или / опубликования общаться с плагинов для остальной части их приложения.И так on.

Я начал думать о плагине моделей, заметив ряд усилий, чтобы создать один-размер-подходит-всем JQuery плагин шаблона.Хотя такие шаблонные это отличная идея в теории, реальность такова, что мы редко писать плагины в одной фиксированной образом, используя один шаблон все time.

Давайте предположим, что вы уже пробовали свои силы в написании собственных плагинов JQuery в какой-то момент, и вы чувствуете себя комфортно воедино то, что работает.Это функциональный.Он делает то, что он должен делать, но, возможно, вы чувствуете, что могла бы быть организована лучше.Может быть, это могла бы быть более гибкой и могла бы решить больше вопросов.Если это звучит знакомо, и вы не уверены в том, различия между многими из различных моделей плагин jQuery, то вы можете найти то, что я должен сказать, helpful.

Мой совет не будет предоставлять решения для каждой возможной модели, но она будет охватывать популярных моделей, которые разработчики используют в wild.

Примечание: Это сообщение предназначено для среднего и продвинутого разработчиков.Если вы не чувствуете, что вы готовы к этому только еще, я счастлив рекомендовать официальный JQuery Plugins/Authoring руководство, __ Бен Alman по 25 | Плагин стиль guide и Реми Шарпа “ Признаки плохоПисьменные JQueryPlugin “.

Patterns

JQuery плагинов очень мало определенные правила, которые одна из причин невероятного разнообразия в том, как они реализуются.На самом базовом уровне, вы можете написать плагин просто путем добавления новых свойств функции ~ JQuery по 23 | объекта, а именно: 

$.fn.myPluginName = function() {
    // your plugin logic
};

Это отличная возможность для компактности, но следующий будет лучше фундамент для построения на: 

(function( $ ){
  $.fn.myPluginName = function() {
    // your plugin logic
  };
})( jQuery );

Здесь мы обернули наш плагин логики в анонимной функции.Чтобы убедиться, что наше использование $ знак как сокращение создает никаких конфликтов между JQuery и других библиотек JavaScript, мы просто передать его в это замыкание, которое отображает его в знак доллара, таким образом гарантируя, что он не может повлиять наничего вне сферы его execution.

Альтернативный способ, чтобы написать эту картину было бы использовать $.extend, которая позволяет определить несколько функций сразу, а иногда больше смысла семантически: 

(function( $ ){
    $.extend($.fn, {
        myplugin: function(){
            // your plugin logic
        }
    });
})( jQuery );

Мы могли бы сделать гораздо больше, чтобы улучшить все это, и первая полная картина, мы будем рассматривать сегодня, легкая модель, охватывает некоторые лучшие практики, которые мы можем использовать для основных повседневных развитие плагина и, учитывающаяраспространенные ошибки, которые нужно посмотреть for.

Некоторые Быстрые Notes

Вы можете найти все модели с этого поста в этой GitHub repository.

В то время как большинство моделей ниже будет объяснено, я рекомендую прочитать в комментариях в коде, потому что они будут предлагать более понять, почему определенные виды практики являются лучшими.

Я должен также упомянуть, что все это было бы невозможно без предыдущей работы, ввод и советам других членов JQuery сообщества.Я перечислил их баннер с каждым шаблоном, так что вы можете прочитать на их индивидуальные работы, если interested.

Легкий Start

Давайте начнем наш обзор моделей с чем-то, что следующим основным лучших практик (в том числе в JQuery плагин редактирования руководства).Эта модель идеально подходит для разработчиков, которые являются новыми для разработки плагинов или кто просто хочет чего-то добиться простыми (например, полезность плагина).Этот легкий старт использует следующее:

  • Общие лучших практик, таких как точка с запятой перед вызовом функции; window, document, undefined передаются в качестве аргументов, и присоединение к JQuery стиль основного guidelines.
  • Основных умолчанию object.
  • Простой конструктор плагин для логики, связанные с начальным создание и назначение элемента, который работает with.
  • Расширение вариантов с defaults.
  • Легкая оболочка вокруг конструктор, который помогает избежать проблем, таких как множественные instantiations.
/*!
 * jQuery lightweight plugin boilerplate
 * Original author: @ajpiano
 * Further changes, comments: @addyosmani
 * Licensed under the MIT license
 */


// the semi-colon before the function invocation is a safety 
// net against concatenated scripts and/or other plugins 
// that are not closed properly.
;(function ( $, window, document, undefined ) {
    
    // undefined is used here as the undefined global 
    // variable in ECMAScript 3 and is mutable (i.e. it can 
    // be changed by someone else). undefined isn't really 
    // being passed in so we can ensure that its value is 
    // truly undefined. In ES5, undefined can no longer be 
    // modified.
    
    // window and document are passed through as local 
    // variables rather than as globals, because this (slightly) 
    // quickens the resolution process and can be more 
    // efficiently minified (especially when both are 
    // regularly referenced in your plugin).

    // Create the defaults once
    var pluginName = 'defaultPluginName',
        defaults = {
            propertyName: "value"
        };

    // The actual plugin constructor
    function Plugin( element, options ) {
        this.element = element;

        // jQuery has an extend method that merges the 
        // contents of two or more objects, storing the 
        // result in the first object. The first object 
        // is generally empty because we don't want to alter 
        // the default options for future instances of the plugin
        this.options = $.extend( {}, defaults, options) ;
        
        this._defaults = defaults;
        this._name = pluginName;
        
        this.init();
    }

    Plugin.prototype.init = function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element 
        // and this.options
    };

    // A really lightweight plugin wrapper around the constructor, 
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
        return this.each(function () {
            if (!$.data(this, 'plugin_' + pluginName)) {
                $.data(this, 'plugin_' + pluginName, 
                new Plugin( this, options ));
            }
        });
    }

})( jQuery, window, document );

Далее Reading

“Complete” Factory

В то время как авторская руководство является прекрасным введением в плагине развития, он не предлагает большое количество удобств для скрывая от общих задач, сантехника, что мы имеем дело с на регулярной basis.

JQuery завод Widget UI представляет собой решение этой проблемы, которое поможет вам создавать сложные, плагины состоянием на основе принципов объектно-ориентированного.Это также облегчает общение с экземпляром вашего плагина, обфускации число повторяющихся задач, которые вы должны были бы код при работе с основными plugins.

В случае, если вы еще не сталкивались раньше, стоит состоянием плагинов отслеживать их текущее состояние, а также позволяет изменить свойства плагина после того, как она была initialized.

Одна из больших вещей о Widget завода является то, что большинство JQuery библиотеки пользовательского интерфейса фактически использует его в качестве базы для своих компонентов.Это означает, что если вы ищете для дальнейших указаний относительно структуры за пределами этого шаблона, вы не должны выходить за рамки JQuery UI repository.

Вернуться к узорами.Это JQuery шаблонный интерфейс делает следующее:

  • Охватывает практически все поддерживаются стандартные методы, такие как включение events.
  • В том числе комментарии для всех методов, используемых, так что вы никогда не уверены, где логика должна поместиться в вашем plugin.
/*!
 * jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @addyosmani
 * Further changes: @peolanha
 * Licensed under the MIT license
 */


;(function ( $, window, document, undefined ) {

    // define your widget under a namespace of your choice
    //  with additional parameters e.g. 
    // $.widget( "namespace.widgetname", (optional) - an 
    // existing widget prototype to inherit from, an object 
    // literal to become the widget's prototype ); 

    $.widget( "namespace.widgetname" , {

        //Options to be used as defaults
        options: {
            someValue: null
        },

        //Setup widget (eg. element creation, apply theming
        // , bind events etc.)
        _create: function () {

            // _create will automatically run the first time 
            // this widget is called. Put the initial widget 
            // setup code here, then you can access the element 
            // on which the widget was called via this.element. 
            // The options defined above can be accessed 
            // via this.options this.element.addStuff();
        },

        // Destroy an instantiated plugin and clean up 
        // modifications the widget has made to the DOM
        destroy: function () {

            // this.element.removeStuff();
            // For UI 1.8, destroy must be invoked from the 
            // base widget
            $.Widget.prototype.destroy.call(this);
            // For UI 1.9, define _destroy instead and don't 
            // worry about 
            // calling the base widget
        },

        methodB: function ( event ) {
            //_trigger dispatches callbacks the plugin user 
            // can subscribe to
            // signature: _trigger( "callbackName" , [eventObject], 
            // [uiObject] )
            // eg. this._trigger( "hover", e /*where e.type == 
            // "mouseenter"*/, { hovered: $(e.target)});
            this._trigger('methodA', event, {
                key: value
            });
        },

        methodA: function ( event ) {
            this._trigger('dataChanged', event, {
                key: value
            });
        },

        // Respond to any changes the user makes to the 
        // option method
        _setOption: function ( key, value ) {
            switch (key) {
            case "someValue":
                //this.options.someValue = doSomethingWith( value );
                break;
            default:
                //this.options[ key ] = value;
                break;
            }

            // For UI 1.8, _setOption must be manually invoked 
            // from the base widget
            $.Widget.prototype._setOption.apply( this, arguments );
            // For UI 1.9 the _super method can be used instead
            // this._super( "_setOption", key, value );
        }
    });

})( jQuery, window, document );

Далее Reading

Пространства имен и вложенные Namespacing

Пространства имен вашего кода образом, чтобы избежать столкновений с другими объектами и переменные в глобальном пространстве имен.Они важны, потому что вы хотите защитить ваш плагин от разрушения в случае, если другой скрипт на странице используется та же переменная или плагин имена, как ваш.Как хороший гражданин глобального пространства имен, вы также должны сделать все возможное, чтобы не мешать скрипты других разработчиков от исполнения из-за той же issues.

JavaScript на самом деле не имеют встроенную поддержку пространств имен, как делают другие языки,но у него есть объекты, которые могут быть использованы для достижения аналогичного эффекта.Используя объект верхнего уровня, имя пространства имен, вы можете легко проверить существование другого объекта на странице с таким же названием.Если такой объект не существует, то определить ее, если она существует, то мы просто продолжим его с нашим plugin.

Объекты (или, скорее, объект литералов) может быть использован для создания вложенных пространств имен, например, namespace.subnamespace.pluginName и так далее.Но для простоты, пространства имен шаблонных ниже должна дать вам все, что нужно для начала работы с этими concepts.

/*!
 * jQuery namespaced 'Starter' plugin boilerplate
 * Author: @dougneiner
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

;(function ( $ ) {
    if (!$.myNamespace) {
        $.myNamespace = {};
    };

    $.myNamespace.myPluginName = function ( el, myFunctionParam, options ) {
        // To avoid scope issues, use 'base' instead of 'this'
        // to reference this class from internal events and functions.
        var base = this;

        // Access to jQuery and DOM versions of element
        base.$el = $(el);
        base.el = el;

        // Add a reverse reference to the DOM object
        base.$el.data( "myNamespace.myPluginName" , base );

        base.init = function () {
            base.myFunctionParam = myFunctionParam;

            base.options = $.extend({}, 
            $.myNamespace.myPluginName.defaultOptions, options);

            // Put your initialization code here
        };

        // Sample Function, Uncomment to use
        // base.functionName = function( paramaters ){
        // 
        // };
        // Run initializer
        base.init();
    };

    $.myNamespace.myPluginName.defaultOptions = {
        myDefaultValue: ""
    };

    $.fn.mynamespace_myPluginName = function 
        ( myFunctionParam, options ) {
        return this.each(function () {
            (new $.myNamespace.myPluginName(this, 
            myFunctionParam, options));
        });
    };

})( jQuery );

Далее Reading

Custom События Для Pub / Sub (с виджетом завод)

Вы, возможно, использовали наблюдателей (Pub / Sub) узор в прошлом для разработки асинхронных приложений JavaScript.Основная идея здесь в том, что элементы будут публиковать уведомления о событии, когда что-то интересное происходит в вашем приложении.Другие элементы, то подписаться или прослушивания этих событий и реагировать соответствующим образом.Это приводит к логике ваше заявление будет значительно больше отделена (которая всегда хорошо)

В JQuery, у нас есть эта идея, что пользовательские события предоставляют встроенные средства для осуществления публикации и подписки система, которая очень похожа на наблюдателя узор.Таким образом, bind('eventType') функционально эквивалентно выполнению subscribe('eventType'), и trigger('eventType') примерно эквивалентно publish('eventType').

Некоторые разработчики могли бы рассмотреть JQuery системные события как имеющие слишком много накладных расходов, которые будут использоваться в качестве публикации и подписки система, но она была спроектирована, чтобы быть как солидный и надежный для большинства случаев использования.В следующем JQuery UI шаблон фабрики виджетов, мы будем реализовывать основные пользовательские основе событий / опубликования шаблон, что позволяет нашим плагином, чтобы подписаться на уведомления о событиях от остальной части нашего приложения, которое публикует them.

/*!
 * jQuery custom-events plugin boilerplate
 * Author: DevPatch
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

// In this pattern, we use jQuery's custom events to add 
// pub/sub (publish/subscribe) capabilities to widgets. 
// Each widget would publish certain events and subscribe 
// to others. This approach effectively helps to decouple 
// the widgets and enables them to function independently.

;(function ( $, window, document, undefined ) {
    $.widget("ao.eventStatus", {
        options: {

        },
        
        _create : function() {
            var self = this;

            //self.element.addClass( "my-widget" );

            //subscribe to 'myEventStart'
            self.element.bind( "myEventStart", function( e ) {
                console.log("event start");
            });

            //subscribe to 'myEventEnd'
            self.element.bind( "myEventEnd", function( e ) {
                console.log("event end");
            });

            //unsubscribe to 'myEventStart'
            //self.element.unbind( "myEventStart", function(e){
                ///console.log("unsubscribed to this event"); 
            //});
        },

        destroy: function(){
            $.Widget.prototype.destroy.apply( this, arguments );
        },
    });
})( jQuery, window , document );

//Publishing event notifications
//usage: 
// $(".my-widget").trigger("myEventStart");
// $(".my-widget").trigger("myEventEnd");

Далее Reading

Прототипных наследование с DOM-объект Bridge Pattern

В JavaScript, мы не имеем традиционное представление о классах, которые вы найдете в других классических языков программирования, но у нас есть прототипныхнаследования.С прототипных наследование, объект наследует от другого объекта.И мы можем применить это понятие к JQuery плагин development.

Alex Sexton __ и 4 | Скотт Gonzalez посмотрели на эту тему в подробностях.В общем, они обнаружили, что для организованной модульных развития, четко отделяя объект, который определяет логику плагин плагин поколения процесс сам по себе может быть полезным.Преимуществом является то, что тестирование кода плагин становится легче, и вы также можете настроить способ, которым вещи работают за кулисами, не меняя таким образом, что любой объект API, вы реализовали являются used.

В предыдущем посте Секстон на эту тему, он реализует мост, который позволяет подключить общую логику к конкретной плагин, который мы реализовали в шаблоне ниже.Еще одним преимуществом этой модели является то, что вам не придется постоянно повторять тот же самый код инициализации плагина, обеспечивая тем самым концепций развития DRY сохраняется.Некоторые разработчики также могут найти эту модель легче читать, чем others.

/*!
 * jQuery prototypal inheritance plugin boilerplate
 * Author: Alex Sexton, Scott Gonzalez
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */


// myObject - an object representing a concept that you want 
// to model (e.g. a car)
var myObject = {
  init: function( options, elem ) {
    // Mix in the passed-in options with the default options
    this.options = $.extend( {}, this.options, options );

    // Save the element reference, both as a jQuery
    // reference and a normal reference
    this.elem  = elem;
    this.$elem = $(elem);

    // Build the DOM's initial structure
    this._build();

    // return this so that we can chain and use the bridge with less code.
    return this;
  },
  options: {
    name: "No name"
  },
  _build: function(){
    //this.$elem.html('<h1>'+this.options.name+'</h1>');
  },
  myMethod: function( msg ){
    // You have direct access to the associated and cached
    // jQuery element
    // this.$elem.append('<p>'+msg+'</p>');
  }
};


// Object.create support test, and fallback for browsers without it
if ( typeof Object.create !== 'function' ) {
    Object.create = function (o) {
        function F() {}
        F.prototype = o;
        return new F();
    };
}


// Create a plugin based on a defined object
$.plugin = function( name, object ) {
  $.fn[name] = function( options ) {
    return this.each(function() {
      if ( ! $.data( this, name ) ) {
        $.data( this, name, Object.create(object).init( 
        options, this ) );
      }
    });
  };
};

// Usage:
// With myObject, we could now essentially do this:
// $.plugin('myobj', myObject);

// and at this point we could do the following
// $('#elem').myobj({name: "John"});
// var inst = $('#elem').data('myobj');
// inst.myMethod('I am a method');

Далее Reading

JQuery UI Widget завод Bridge

Если вам понравилась идея создания плагинов на основе объектов в последний шаблон дизайна, то вы можете быть заинтересованы в методе найти в JQuery завод Widget UI называется $.widget.bridge.Этот мост служит в основном в качестве среднего слоя между объектом JavaScript, созданный с помощью $.widget API и JQuery, обеспечивая более встроенных решений для достижения объектно-ориентированного плагин определению.Фактически, мы можем создать динамическую плагинов с помощью пользовательского constructor.

Кроме того, $.widget.bridge обеспечивает доступ к ряду других возможностей, включая следующие:

  • Как государственные, так и частные методы обрабатываются, как можно было бы ожидать в классическом ООП (то есть публичные методы подвергаются, в то время как звонки на частные методы не возможно);
  • Автоматическая защита от нескольких инициализации;
  • Автоматическая генерация экземпляров переданный объект, и хранение их в пределах внутренних ~ 35 выбор в | кэш;
  • Параметры могут быть изменены после initialization.

Для получения дополнительной информации о том, как использовать этот образец, посмотрите на комментарии в шаблонный ниже: 

/*!
 * jQuery UI Widget factory "bridge" plugin boilerplate
 * Author: @erichynds
 * Further changes, additional comments: @addyosmani
 * Licensed under the MIT license
 */



// a "widgetName" object constructor
// required: this must accept two arguments,
// options: an object of configuration options
// element: the DOM element the instance was created on
var widgetName = function( options, element ){
  this.name = "myWidgetName";
  this.options = options;
  this.element = element;
  this._init();
}


// the "widgetName" prototype
widgetName.prototype = {
    
    // _create will automatically run the first time this 
    // widget is called
    _create: function(){
        // creation code
    },

    // required: initialization logic for the plugin goes into _init
    // This fires when your instance is first created and when 
    // attempting to initialize the widget again (by the bridge)
    // after it has already been initialized.
    _init: function(){
        // init code
    },

    // required: objects to be used with the bridge must contain an 
    // 'option'. Post-initialization, the logic for changing options
    // goes here. 
    option: function( key, value ){
        
        // optional: get/change options post initialization
        // ignore if you don't require them.
        
        // signature: $('#foo').bar({ cool:false });
        if( $.isPlainObject( key ) ){
            this.options = $.extend( true, this.options, key );
        
        // signature: $('#foo').option('cool'); - getter
        } else if ( key && typeof value === "undefined" ){
            return this.options[ key ];
            
        // signature: $('#foo').bar('option', 'baz', false);
        } else {
            this.options[ key ] = value;
        }
        
        // required: option must return the current instance. 
        // When re-initializing an instance on elements, option 
        // is called first and is then chained to the _init method.
        return this;  
    },

    // notice no underscore is used for public methods
    publicFunction: function(){ 
        console.log('public function');
    },

    // underscores are used for private methods
    _privateFunction: function(){ 
        console.log('private function');
    }
};


// usage:

// connect the widget obj to jQuery's API under the "foo" namespace
// $.widget.bridge("foo", widgetName);

// create an instance of the widget for use
// var instance = $("#elem").foo({
//     baz: true
// });

// your widget instance exists in the elem's data
// instance.data("foo").element; // => #elem element

// bridge allows you to call public methods...
// instance.foo("publicFunction"); // => "public method"

// bridge prevents calls to internal methods
// instance.foo("_privateFunction"); // => #elem element

Далее Reading

JQuery Мобильные виджеты с factory

JQuery мобильный структуры, которая поощряет разработку вездесущий веб-приложений, которые работают как на популярных мобильных устройствах и платформах и на рабочем столе.Вместо написания уникальных приложений для каждого устройства или ОС, необходимо просто написать код один раз и она в идеале должна работать на многих A-, B-и C-класса браузерах, в moment.

Основы за JQuery мобильной также может быть применен к плагинов и виджетов развития, как видно на некоторые из основных JQuery мобильных виджетов, используемых в официальных набор библиотек.Что интересно здесь то, что хотя есть очень маленькие, тонкие различия в написании “мобильных” оптимизированные виджеты, если вы знакомы с использованием JQuery завод Widget UI, вы должны быть в состоянии начать писать эти права away.

Мобильная оптимизированный виджет ниже, имеет ряд интересных различий, чем стандартный виджет пользовательского интерфейса картину мы видели ранее:

  • $.mobile.widget ссылается как существующих прототипов виджетов, из которых к наследованию.Для стандартных виджетов, проходящих через любое такое прототип не является необходимым для основной разработки, но с помощью этого JQuery мобильных конкретного прототипа виджет предоставляет доступ к внутренним далее “опции” formatting.
  • Вы заметите в _create() руководство по официальному JQuery мобильных виджетов обрабатывать элемент выбора, выбирают для ролевой подход, который лучше соответствует JQM наценки.Это вовсе не означает, что стандартный выбор не рекомендуется, только то, что этот подход может иметь больше смысла, учитывая структуру JQM pages.
  • Правила также предоставляются в форме комментария для применения ваших методов плагина на pagecreate, а также для выбора плагина приложение через данные ролей и данных attributes.
/*!
 * (jQuery mobile) jQuery UI Widget-factory plugin boilerplate (for 1.8/9+)
 * Author: @scottjehl
 * Further changes: @addyosmani
 * Licensed under the MIT license
 */

;(function ( $, window, document, undefined ) {

    //define a widget under a namespace of your choice
    //here 'mobile' has been used in the first parameter
    $.widget( "mobile.widgetName", $.mobile.widget, {

        //Options to be used as defaults
        options: {
            foo: true,
            bar: false
        },

        _create: function() {
            // _create will automatically run the first time this 
            // widget is called. Put the initial widget set-up code 
            // here, then you can access the element on which 
            // the widget was called via this.element
            // The options defined above can be accessed via 
            // this.options

            //var m = this.element,
            //p = m.parents(":jqmData(role='page')"),
            //c = p.find(":jqmData(role='content')")
        },

        // Private methods/props start with underscores
        _dosomething: function(){ ... },

        // Public methods like these below can can be called 
                // externally: 
        // $("#myelem").foo( "enable", arguments );

        enable: function() { ... },

        // Destroy an instantiated plugin and clean up modifications 
        // the widget has made to the DOM
        destroy: function () {
            //this.element.removeStuff();
            // For UI 1.8, destroy must be invoked from the 
            // base widget
            $.Widget.prototype.destroy.call(this);
            // For UI 1.9, define _destroy instead and don't 
            // worry about calling the base widget
        },

        methodB: function ( event ) {
            //_trigger dispatches callbacks the plugin user can 
            // subscribe to
            //signature: _trigger( "callbackName" , [eventObject],
            //  [uiObject] )
            // eg. this._trigger( "hover", e /*where e.type == 
            // "mouseenter"*/, { hovered: $(e.target)});
            this._trigger('methodA', event, {
                key: value
            });
        },

        methodA: function ( event ) {
            this._trigger('dataChanged', event, {
                key: value
            });
        },

        //Respond to any changes the user makes to the option method
        _setOption: function ( key, value ) {
            switch (key) {
            case "someValue":
                //this.options.someValue = doSomethingWith( value );
                break;
            default:
                //this.options[ key ] = value;
                break;
            }

            // For UI 1.8, _setOption must be manually invoked from 
            // the base widget
            $.Widget.prototype._setOption.apply(this, arguments);
            // For UI 1.9 the _super method can be used instead
            // this._super( "_setOption", key, value );
        }
    });

})( jQuery, window, document );

//usage: $("#myelem").foo( options );


/* Some additional notes - delete this section before using the boilerplate.

 We can also self-init this widget whenever a new page in jQuery Mobile is created. jQuery Mobile's "page" plugin dispatches a "create" event when a jQuery Mobile page (found via data-role=page attr) is first initialized.

We can listen for that event (called "pagecreate" ) and run our plugin automatically whenever a new page is created.

$(document).bind("pagecreate", function (e) {
    // In here, e.target refers to the page that was created 
    // (it's the target of the pagecreate event)
    // So, we can simply find elements on this page that match a 
    // selector of our choosing, and call our plugin on them.
    // Here's how we'd call our "foo" plugin on any element with a 
    // data-role attribute of "foo":
    $(e.target).find("[data-role='foo']").foo(options);

    // Or, better yet, let's write the selector accounting for the configurable 
    // data-attribute namespace
    $(e.target).find(":jqmData(role='foo')").foo(options);
});

That's it. Now you can simply reference the script containing your widget and pagecreate binding in a page running jQuery Mobile site, and it will automatically run like any other jQM plugin.
 */

RequireJS И Jquery UI Widget Factory

RequireJS это сценарий загрузчик, который обеспечивает чистое решение для инкапсуляции логики приложения в управляемые модули.Он способен загружать модули в правильном порядке (через его порядок плагинов); это упрощает процесс объединения скрипты через его отличным оптимизатором, и она предоставляет средства для определения зависимостей модулей для каждого модуля basis.

Джеймс Берк написал …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Главная → Программирование → by

Comments are closed.