最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - CommonJS - How can I combine jquery and a jquery-plugin into the $ namespace - Stack Overflow

programmeradmin0浏览0评论

What I'm trying to do is adapt my jQuery-plugin to work with jQuery on Node.js.

From what I understand, CommonJS in it's most basic form requires a library to be wrapped in a closure, and that closure should be made available as a parameter of an 'exports' parameter. That way, the code is neatly contained in its own namespace (via a named variable) and doesn't pollute the global namespace.

jQuery itself should fall under the '$' namespace.

Ala:

var $ = require(jquery);

But my plugin should also fit under the '$' namespace.

Plugin code:

(function( $ ) {
  // plugin code goes here
})(jquery);

exports.jquery = jquery // will this work?

Ex:

var $ = require(jquery);
$ = require(jquery-csv.js); // will this work?

To work in the browser, everything is setup to be callable from the '$' namespace even though my modules are setup as a sub-namespace of '$' (ie '$.csv').

Is there a standard way to do multiple requires on a single namespace? If not, there a viable alternative (ex doing a shallow copy on the plugin code)?

Note: The anonymous function wrapper follows the standard jquery guidelines.

Note: This fix will be applied to the jquery-csv plugin.

What I'm trying to do is adapt my jQuery-plugin to work with jQuery on Node.js.

From what I understand, CommonJS in it's most basic form requires a library to be wrapped in a closure, and that closure should be made available as a parameter of an 'exports' parameter. That way, the code is neatly contained in its own namespace (via a named variable) and doesn't pollute the global namespace.

jQuery itself should fall under the '$' namespace.

Ala:

var $ = require(jquery);

But my plugin should also fit under the '$' namespace.

Plugin code:

(function( $ ) {
  // plugin code goes here
})(jquery);

exports.jquery = jquery // will this work?

Ex:

var $ = require(jquery);
$ = require(jquery-csv.js); // will this work?

To work in the browser, everything is setup to be callable from the '$' namespace even though my modules are setup as a sub-namespace of '$' (ie '$.csv').

Is there a standard way to do multiple requires on a single namespace? If not, there a viable alternative (ex doing a shallow copy on the plugin code)?

Note: The anonymous function wrapper follows the standard jquery guidelines.

Note: This fix will be applied to the jquery-csv plugin.

Share Improve this question asked Oct 3, 2012 at 21:05 Evan PlaiceEvan Plaice 14.2k6 gold badges78 silver badges95 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 2

You should require jQuery inside your plugin:

var $ = require("jquery");

This is also the technique in UMD (Universal Module Definition), a standard for both CommonJS and AMD.

Also see the example for a jQuery plugin with UMD

Easiest way I can think of doing something like this would be doing something like the following:

var $ = require("jquery");
require("jquery-csv")($);

That also means you can just do something like this:

module.exports = exports = function (jquery) {
    //You modify the jquery object here.
};

Modification of the $ object should be done in accordance to jQuery plugins remendations. I will believe you are already aware of them for what you said.

I'm sure someone will e up with a smarter way :) but this should work for now. You could also just return a modified jquery object and then assign it to the $ object on the scope in which you originally included the module.

The answer turned out to be simpler than I thought...

var $ = jQuery = require('jquery');
require('./jquery.csv.js');

Calling 'require' without assigning it to a variable/namespace acts the same as a script import (ie it can manipulate objects that exist in the global namespace).

The first line takes care of properly initializing jquery. Once that's done, jquery-csv can modify the existing '$' namespace the same way it does in the browser.

The second assignment 'jQuery' is necessary because that's where jquery-csv grabs the reference to the 'jquery' instance. This could probably be shortened to only assign to '$' but 'jQuery' is the value that the plugin guidelines specify for referencing the library.

发布评论

评论列表(0)

  1. 暂无评论