javascript - 在串联期间如何管理依赖关系？

Question

到目前为止，我一直将所有 JS 文件附加在一起并一次加载它们，效果很好。我一直在使用咕噜声来加载它们。但是，我注意到一件事是订单很重要。如果我有一个继承链，例如 Entity => Character => Player，我需要先加载 Entity.js。

如何控制附加顺序和管理依赖项？或者这是 RequireJS 的工作？

Answer 1

使用模块打包器，例如 Browserify , Webpack或 RequireJS .

使用 browserify/webpack(或 commonjs 加载器和 requirejs):

player.js

var Character = require('./character')
function Player() { Character.call(this) }
inherits(Player, Character)
module.exports = Player

character.js

var Entity = require('./entity')
function Character() { Entity.call(this) }
inherits(Character, Entity)
module.exports = Character

entity.js

function Entity() {}
module.exports = Entity

app.js

var Player = require('./player')
var player = new Player()

---

或者如果您更喜欢 AMD 和 requirejs(或使用 Browserify/webpack AMD 转换):

player.js

define(['./character'], function(Character) {
  function Player() { Character.call(this) }
  inherits(Player, Character)
  return Player
})

character.js

define(['./entity'], function(Entity) {
  function Character() { Entity.call(this) }
  inherits(Character, Entity)
  return Character
})

entity.js

define(function() {
  function Entity() {}
  return Entity
})

app.js

require(['./player'], function(Player) {
  var player = new Player()
})

这里值得注意的是 webpack 可以同时加载同步和异步模块:var sync = require('./sync') 和 require (['./async'], function(async) {})。

同时将 inherits 替换为您喜欢的任何原型(prototype)继承方法。我更喜欢 node.js 的:http://nodejs.org/api/util.html#util_util_inherits_constructor_superconstructor或 https://npmjs.org/package/inherits

---

ES6，javascript 的下一个版本，有一个模块语法规范。所以在未来的某个时候，适当的模块加载将内置到语言中。它可能看起来像这样:

import Character from "character"
function Player() { Character.call(this) }
inherits(Player, Character)
export default = Player

也有用于 webpack 和 requirejs 的加载器以这种语法加载模块:ES6 Module Transpiler (不推荐使用 Babel 和 Esperanto )和 es6-loader (已弃用，取而代之的是 babel-loader)。

编辑:es6ify现在支持与 browserify 一起使用的 es6 模块语法。

---

在我看来，连接模块已经过时了。使用模块 bundler 并打开通往它们提供的许多美妙事物的大门。