ES6 Modules命名空间导入

// circle.js
export { name, draw, reportArea, reportPerimeter };

// main.js
import * as Circle from './modules/circle.js';

// draw a circle
let circle1 = Circle.draw(myCanvas.ctx, 75, 200, 100, 'green');
Circle.reportArea(circle1.radius, reportList);
Circle.reportPerimeter(circle1.radius, reportList);

这将获取Circle .js中所有可用的导出，并使它们作为对象Circle的成员可用，有效地为其提供了自己的名称空间。

我认为对于这样一个简单的问题，你们都使用了太多的代码。 没必要为它回购。 这是一个单线函数。

namespace => namespace.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);

试试吧:

//——定义—— Const namespace = name => name.split(".")。减少(下)(最后,= >(去年[下]=(去年[下一个 ] || {})), 窗口); //——使用---- Const c =命名空间("a.b.c"); c.MyClass = class MyClass {}; //—参见---- Console.log ("a: "， a);

因为您可能会编写不同的JavaScript文件，然后在应用程序中组合或不组合它们，所以每个文件都需要能够恢复或构造名称空间对象，而不会破坏其他文件的工作……

一个文件可能打算使用命名空间namespace.namespace1:

namespace = window.namespace || {};
namespace.namespace1 = namespace.namespace1 || {};

namespace.namespace1.doSomeThing = function(){}

另一个文件可能想要使用命名空间namespace2:

namespace = window.namespace || {};
namespace.namespace2 = namespace.namespace2 || {};

namespace.namespace2.doSomeThing = function(){}

这两个文件可以共存，也可以分开而不会发生碰撞。

在将我的几个库移植到不同的项目中，并且不得不不断更改顶级(静态命名的)名称空间之后，我转而使用这个小的(开源的)帮助函数来定义名称空间。

global_namespace.Define('startpad.base', function(ns) {
    var Other = ns.Import('startpad.other');
    ....
});

关于好处的描述在我的博客文章中。您可以在这里获取源代码。

我非常喜欢的一个好处是模块之间相对于加载顺序的隔离。你可以在加载外部模块之前引用它。当代码可用时，将填充您获得的对象引用。

我最近最喜欢的图案是这样的:

Var命名空间=(函数(){ //暴露给公众 返回{ internalA, c: internalC ｝ //所有私有 ／** *完整的JSDoc * / 函数internalA() { / /…… ｝ ／** *完整的JSDoc * / 函数internalB() { / /…… ｝ ／** *完整的JSDoc * / 函数internalC() { / /…… ｝ ／** *完整的JSDoc * / 函数internalD() { / /…… ｝ }) ();

当然，return可以在后面，但是如果后面只有函数声明，那么就更容易看到名称空间是关于什么的，以及暴露了什么API。

在这种情况下使用函数表达式的模式导致不遍历整个代码就无法知道公开了哪些方法。

下面是Stoyan Stefanov在他的JavaScript Patterns一书中是如何做到这一点的，我发现这本书非常好(它还展示了他如何做注释，允许自动生成API文档，以及如何向自定义对象的原型添加一个方法):

/**
* My JavaScript application
*
* @module myapp
*/

/** @namespace Namespace for MYAPP classes and functions. */
var MYAPP = MYAPP || {};

/**
* A maths utility
* @namespace MYAPP
* @class math_stuff
*/
MYAPP.math_stuff = {

    /**
    * Sums two numbers
    *
    * @method sum
    * @param {Number} a First number
    * @param {Number} b Second number
    * @return {Number} Sum of the inputs
    */
    sum: function (a, b) {
        return a + b;
    },

    /**
    * Multiplies two numbers
    *
    * @method multi
    * @param {Number} a First number
    * @param {Number} b Second number
    * @return {Number} The inputs multiplied
    */
    multi: function (a, b) {
        return a * b;
    }
};

/**
* Constructs Person objects
* @class Person
* @constructor
* @namespace MYAPP
* @param {String} First name
* @param {String} Last name
*/
MYAPP.Person = function (first, last) {

    /**
    * First name of the Person
    * @property first_name
    * @type String
    */
    this.first_name = first;

    /**
    * Last name of the Person
    * @property last_name
    * @type String
    */
    this.last_name = last;
};

/**
* Return Person's full name
*
* @method getName
* @return {String} First name + last name
*/
MYAPP.Person.prototype.getName = function () {
    return this.first_name + ' ' + this.last_name;
};