0

Which javascript pattern should i use in order to build javascript libraries?

And how can i build with UMD (https://github.com/umdjs/umd) a module that is able to handle node.js, jquery and browsers?

I couldn't figure out how to combine the examples node.js + browser (https://github.com/umdjs/umd/blob/master/jqueryPluginCommonjs.js) with jquery + browser (https://github.com/umdjs/umd/blob/master/commonjsAdapter.js) to jquery + node.js + browser.

3
  • jQuery is not an environment like a browser engine or Node.js. What do you mean? You will hardly build a library that uses jQuery in Node.js
    – Bergi
    Sep 10, 2013 at 13:50
  • 1
    @Bergi jQuery isn't an environment, but jQuery plugins are a module type. So I assume that the OP wants to write a jQuery module which can also be loaded as a commonjs module.
    – Racheet
    Sep 10, 2013 at 13:54
  • Dear max, thank you for your interesting and soooo sweet advice - maybe 3 links in my post aren't enough so i added a 4th in this comment matteoagosti.com/blog/2013/02/24/…
    – inselberg
    Sep 10, 2013 at 14:08

2 Answers 2

1

Sounds like you want this module.

It's very similar to the module pattern I've been using recently that caters for nodeJs, AMD and browser Javascript.

;(function (global) {
  function moduleDefinition(/*dependency*/) {
    'use strict';

    function module() {
      // module code goes here
    }

    return module;

  } if (typeof exports === 'object') {
    // node export
    module.exports = moduleDefinition(/*require('dependency')*/);
  } else if (typeof define === 'function' && define.amd) {
    // amd anonymous module registration
    define([/*'dependency'*/], moduleDefinition);
  } else {
    // browser global
    global.module = moduleDefinition(/*global.dependency*/);
  }
}(this));

For transparency, I think this code came from here.

1

The example in the code you linked looked pretty clear to me. You write your jquery module as if it was an ordinary jquery module into the block at line 21.

(function ($) {
    $.fn.jqueryPluginCommonJs = function () {};
})

The section above that is all about how the file detects which environment it is in, you don't need to touch this bit:

function (factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['jquery'], factory);
    } else if (typeof exports === 'object') {
        // Node/CommonJS
        factory(require('jquery'));
    } else {
        // Browser globals
        factory(jQuery);
    }

Then when your file is complete, you save it as a seperate js file, and then load it into the browser with a script tag, or your nodejs environment with a "require" statement.

Because it's a jQuery plugin, it will only work in the browser if jquery has already been loaded at the time when this code runs, or if jquery is running in nodejs at the time when you require the file. (The nodejs bit of the loader at the top of the file will attempt to load jquery for you in node, but you're still going to have to have installed it with npm).


The reason why everyone is so confused by your question is because its hard to see how using a jquery plugin in vanilla nodejs makes any sense. jQuery is a DOM manipulation library, and by default nodejs has no DOM, so there's nothing that jQuery can help you with.

If you're loading a DOM into nodejs with something like jsDOM, then you should already know how to connect up your DOM to the instance of jQuery that you're "requiring" with this script.

To be honest, if you're having trouble understanding any of the code in the 20 line examples you've posted in your question, it's probably a little early for you to be trying to load a custom jquery module into nodejs.

I'd suggest spending some time really looking at the UMD documentation, until you properly understand everything that is going on there. It's an order of magnitude less complicated than trying to wire a custom jquery module into a DOM in node, and the stuff you learn will help you understand what's really going on in your module when something inevitably goes wrong later down the line.

2
  • My main problem with javascript is that there are a lot of possibilities in order to do same thing. I m spending a lot of time with putting the same code over and over again into new patters/new structures, because of my wrong decisions ;) That's why i was looking for a simple and easy way to use function helloworld() {} the main "environments".
    – inselberg
    Sep 10, 2013 at 14:23
  • I can understand wanting to be able to do a helloworld() in the main "environments." Just be careful trying to use a jquery module in the nodejs environment. jQuery expects a DOM, and node doesn't have one. So unless you're totally clear about what you're doing and where your DOM is, something is going to fail messily.
    – Racheet
    Sep 10, 2013 at 16:04

Not the answer you're looking for? Browse other questions tagged or ask your own question.