The modularization of jquery plugin in Seajs and its calling method

Reprinted from: Http://my.oschina.net/briviowang/blog/208587#OSC_h3_1

The jquery plugin essentially hangs the namespace on a global jquery or Jquery.fn rather than a module defined with define.
This extension mechanism of jquery is a bit of a conflict with the modularity requirements of module independence, and the isolation of modules.

The number of jquery plug-ins, we do not intend to do a lot of conversion work, modular and modular, and even change the way the plug-in calls,
This brings little value to development. You only want to implement automatic dependency management via the module loader, load on demand, and use it in a natural way.

1. Modular approach to common jquery plugins

The jquery plugin is returned as a function with a jquery parameter that the caller completes the initialization of the plugin.

Take the Jquery-themeswitch plugin as an example, the plugin relies on the Jquery.cookie plugin.

/* Jquery-themeswitch.js */define (function (require) {return function (jquery) {//Initialize the dependent module require ('./jquery first).        Cookie ') (jQuery); Put plugin code here}//end of function});

2.jquery Modular Post-call mode

The following demo has a relative path to the module reference, and the actual business development can be renamed by using the alias provided by Seajs

(1) Internal use of the module

var $ = require ('./libs/jquery ');    Require ('./libs/jquery-themeswitch ') ($);         Require ('./libs/jquery-ui ') ($);        The demo involves the jquery UI component $ (document). Ready (function () {//) run the Code $ (' #elem ') when the DOM is loaded. Themeswitcher ();    ...    } ...

(2) in the script snippet

Seajs.use (['./libs/jquery ', './libs/jquery-themeswitcher ', './lib/jquery-ui '], function ($, themeswitcher,jquery               UI) {Themeswitcher ($);        init jquery plugin jQueryUI ($);   $ (function () {//dom) is another way to invoke $ (' #elem '). Themeswitcher () ...}); });

Pros and cons comparison:

Advantages:
* Rely on Management automation
* Supports multiple versions of jquery usage. (Do you need this advantage?) )

Disadvantages:
* Once require (' plugin ') ($) is called, the plugin is reinitialized once
* Call mode is not very convenient, the calling code is not very intuitive

Tip: You can add a Cachedplugins object in jquery to hold the loaded plug-in module ID to prevent repeated loading

3. Another type of plug-in modularity

Let's say we get rid of the jquery multi-version support and have each jquery plug-in module return $ to see if the code is more natural to call.
In addition, each module can only be compiled once, using this feature, we can also make each plug-in will only be initialized once.

Description: The module compilation process is the process of building the exports of the module.

Also take Themeswitcher as an example:

Jquery-theme-switcher.js

Define (function (Require, exports, module) {var jQuery = require ('./jquery ');    Require ('./jquery-cookie '); Put plugin in code here return jQuery;});

(1) Internal use of the module

Require ('./libs/jquery-ui '); You can not handle the return value var $ = require ('./libs/jquery-themeswitch ')//Return or $ $ (function () {$ (' #elem '). Themeswitche     R ();    }); ...

(2) in the script snippet

Seajs.use (['./libs/jquery-themeswitcher ', './lib/jquery-ui '],function ($) {$ (function () {$ (' #elem '). them   Eswitcher () ...}); });

4. Simplifying references to jquery plugins

If you use more plug-ins, you can also simplify the reference to the jquery plugin in this way.
Define a Myjquery.js

Define (function (require) {require (' some-plugin1 ');  The dependent plugin require (' some-plugin2 ') will be loaded automatically;    If you can't remember the dependencies, there's no effect on repeating require.      Require (' some-plugin3 ');  return require (' Some-plugin '); Each plug-in module will return $ and take the last one to return. });

In other business code, you just need to introduce your own custom-made myjquery.js.
Be careful not to introduce too many modules into the file to avoid impacting performance, and other infrequently used plugins can be loaded on demand.

Main.js

Define (function (require) {var $ = require ('./myjquery '); All your custom loaded plugins have been initialized//do something});

The modularization of jquery plugin in Seajs and its calling method posted 2 year ago (2014-03-15 23:15) Read (2173) | Comments (0) 2 People collection This article, I want to collect likes 0

[Listen to the Cloud Python probe] Send the Swiss Army back pack to send the Thunder Snake mouse set!

Catalogue [-]

• 1. Modular approach to common jquery plugins
• 2.jquery Modular Post-call mode
• 3. Another type of plug-in modularity
• 4. Simplifying references to jquery plugins

The jquery plugin essentially hangs the namespace on a global jquery or Jquery.fn rather than a module defined with define.
This extension mechanism of jquery is a bit of a conflict with the modularity requirements of module independence, and the isolation of modules.

The number of jquery plug-ins, we do not intend to do a lot of conversion work, modular and modular, and even change the way the plug-in calls,
This brings little value to development. You only want to implement automatic dependency management via the module loader, load on demand, and use it in a natural way.

1. Modular approach to common jquery plugins

The jquery plugin is returned as a function with a jquery parameter that the caller completes the initialization of the plugin.

Take the Jquery-themeswitch plugin as an example, the plugin relies on the Jquery.cookie plugin.

/* Jquery-themeswitch.js */define (function (require) {return function (jquery) {//Initialize the dependent module require ('./jquery first).        Cookie ') (jQuery); Put plugin code here}//end of function});

2.jquery Modular Post-call mode

The following demo has a relative path to the module reference, and the actual business development can be renamed by using the alias provided by Seajs

(1) Internal use of the module

var $ = require ('./libs/jquery ');    Require ('./libs/jquery-themeswitch ') ($);         Require ('./libs/jquery-ui ') ($);        The demo involves the jquery UI component $ (document). Ready (function () {//) run the Code $ (' #elem ') when the DOM is loaded. Themeswitcher ();    ...    } ...

(2) in the script snippet

Seajs.use (['./libs/jquery ', './libs/jquery-themeswitcher ', './lib/jquery-ui '], function ($, themeswitcher,jquery               UI) {Themeswitcher ($);        init jquery plugin jQueryUI ($);   $ (function () {//dom) is another way to invoke $ (' #elem '). Themeswitcher () ...}); });

Pros and cons comparison:

Advantages:
* Rely on Management automation
* Supports multiple versions of jquery usage. (Do you need this advantage?) )

Disadvantages:
* Once require (' plugin ') ($) is called, the plugin is reinitialized once
* Call mode is not very convenient, the calling code is not very intuitive

Tip: You can add a Cachedplugins object in jquery to hold the loaded plug-in module ID to prevent repeated loading

3. Another type of plug-in modularity

Let's say we get rid of the jquery multi-version support and have each jquery plug-in module return $ to see if the code is more natural to call.
In addition, each module can only be compiled once, using this feature, we can also make each plug-in will only be initialized once.

Description: The module compilation process is the process of building the exports of the module.

Also take Themeswitcher as an example:

Jquery-theme-switcher.js

Define (function (Require, exports, module) {var jQuery = require ('./jquery ');    Require ('./jquery-cookie '); Put plugin in code here return jQuery;});

(1) Internal use of the module

Require ('./libs/jquery-ui '); You can not handle the return value var $ = require ('./libs/jquery-themeswitch ')//Return or $ $ (function () {$ (' #elem '). Themeswitche     R ();    }); ...

(2) in the script snippet

Seajs.use (['./libs/jquery-themeswitcher ', './lib/jquery-ui '],function ($) {$ (function () {$ (' #elem '). them   Eswitcher () ...}); });

4. Simplifying references to jquery plugins

If you use more plug-ins, you can also simplify the reference to the jquery plugin in this way.
Define a Myjquery.js

Define (function (require) {require (' some-plugin1 ');  The dependent plugin require (' some-plugin2 ') will be loaded automatically;    If you can't remember the dependencies, there's no effect on repeating require.      Require (' some-plugin3 ');  return require (' Some-plugin '); Each plug-in module will return $ and take the last one to return. });

In other business code, you just need to introduce your own custom-made myjquery.js.
Be careful not to introduce too many modules into the file to avoid impacting performance, and other infrequently used plugins can be loaded on demand.

Main.js

Define (function (require) {var $ = require ('./myjquery '); All your custom loaded plugins have been initialized//do something});

The modularization of jquery plugin in Seajs and its calling method