Import modules in JavaScript

Question

Import modules in JavaScript

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (2 votes)

3

I'm trying to import a module into JavaScript. In python , because it's simple, you just import what you want with import .

In javascript apparently also seems simple. In my case, I'm trying to implement the example that comes out in Using JavaScript code modules

However, I get this error in google chrome Uncaught ReferenceError: Components is not defined . What will I be doing wrong?

my_module.jsm

var EXPORTED_SYMBOLS = ["foo", "bar"];

function foo() {
  return "foo";
}

var bar = {
  name : "bar",
  size : 3
};

var dummy = "dummy";

test.js

Components.utils.import("resource://my_module.jsm");

alert(foo());         // displays "foo"
alert(bar.size + 3);  // displays "6"
alert(dummy);         // displays "dummy is not defined" because 'dummy' was not exported from the module

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <h1>hola</h1>
    <script src="test.js"></script>
  </body>
</html>

javascript

asked by Javier Cárdenas 05.02.2016 в 03:07

source

3 answers

3

Forget about Components , it is not standard, but I propose an alternative where YES it is possible to import another JavaScript file using standard media, this truco that I learned in original SO:

// declaras un función que agregue el script a la cabecera del HTML
// y te notifique cuando el archivo termino de cargarse
function import(url, callback)
{
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    // compatibilidad cross browser 
    script.onreadystatechange = callback;
    script.onload = callback;
    head.appendChild(script);
}

// ... así se usa

import("url/del/archivo.js", function() {
  // aqui ya se cargo el script, de forma global, como cualquier otro.
});

Almost as easy as an import in pyton , only it is asynchronous: P

By the way, you also have jQuery.getScript() , or even using Ajax to load JavaScript code.

There are ways that work in all browsers.

By the way, Components will not work in Chrome or other browsers, is not part of the current standard (Living standard).

This is done for jsm , which is modular javascript, a Gecko piece for extend Firefox.

answered by 05.02.2016 в 04:30

2

Components is not standard, however you could use ES6 and Babel + Webpack to make the imports .

answered by 05.02.2016 в 21:04

Browse Json array in Angularjs Share div content on Facebook

score 2 · Accepted Answer

Components is not standard and its use in web development is not recommended according to the Mozilla Developer Network (MDN) site.

Translation of the page on the object Components in MDN :

Non-standard

This feature is not standard and is not in plans to be standard. Do not use in web pages in production: it will not work for all users. There may also be many incompatibilities and their behavior may change in the future.

Attention:

This object is not designed to run with chrome privileges. Expose this object to the web was an error. If you use this object on your website, your page can be broken at any time! In the current versions of Firefox only a few interfaces required for its operation are active. Do not use Components !