Question

我是javascript的新手，我在foopackage.bar文件中编写了一个小型库。我想使用HTML中的.js文件中定义的类，我发现大多数javascript库（例如jQuery）将使用浏览器提供的.js对象公开它的组件。

我正在使用ES6和webpack来管理js库，所以我想知道有没有办法将js函数暴露给浏览器而不会污染 window对象？< / p>

例如，我在js文件中有以下代码：

window

我想在HTML中使用这样的图表：

class ChartControl {

    constructor(element) {
        element.addEventListener('mousedown', this.on_mouse_down)
        element.addEventListener('mousemove', this.on_mouse_move)
        element.addEventListener('mouseup', this.on_mouse_up)
        this.element = element
    }

    on_mouse_down(event) {  }

    on_mouse_move(event) {  }

on_mouse_up(event) { }

}

Answer 1

使用AMD表示法导出库：

define(() => {
    // You library here
    const myLib = {
        foo: 'bar'
    };

    return myLib;
});

然后在HTML代码中使用AMD加载程序（例如RequireJS）加载它：

// Don't forget to include a loader js file
require(['http://url.of/your/lib'], myLib => { // the .js suffix of the URL must be omitted
    alert(myLib.foo);
});

window对象将被define和require变量污染，但尽管有多个库，但总有两个变量。

Webpack可以automatically convert a code to the AMD notation。将其添加到Webpack配置文件中：

{
    output: {
        libraryTarget: 'amd'
    }
}

如何在不使用窗口的情况下从html访问函数

1 个答案: