1

关于一个页面上有多个板：

在对图形进行编码时，对变量使用命名约定很方便，例如滑块的名称。默认情况下，Javascript 提供一个全局命名空间，因此如果您在一个页面上有多个板，则必须避免名称冲突。推荐的方法是什么？

4

1 回答 1

1

[注意：stackoverflow 支持问答式的自我回答。这是一个预期的回答你自己的问题]

这是一个通用的 Javascript 问题。

虽然 Javascript 最初旨在为每个网页提供一个全局命名空间，但幸运的是，它的功能集提供了一种解决方法。

在 Javascript 的上下文中，实现此解决方法的常用方法称为立即调用函数表达式 (IIFE)。

(function() {
  var board = JXG.JSXGraph.initBoard('jxgbox1' {/* ... */});
  var a = board.create('point', [0, 0]);
})();

Javascript具有函数范围。使用 IIFE 可以利用该功能：IIFE 创建了一个范围。该范围内的函数可以访问页面（因此板将放置在标识符为“jsxbox1”的 div 中），但 IIFE 内的变量与全局命名空间是分开的。

在谈论一般的编程语言时，这种创建单独范围的模式称为“闭包”。


两块板的最小示例

 (function() {
     var board = JXG.JSXGraph.initBoard('jxgbox1' {/* ... */});
     var a = board.create('point', [0, 0]);
 })();
 (function() {
     var board = JXG.JSXGraph.initBoard('jxgbox2' {/* ... */});
     var a = board.create('point', [0, 0]);
 })();

值得注意的是：
传递参数的选项同样适用于 IIFE：

最小的例子：

 (function(divID) {
     var board = JXG.JSXGraph.initBoard(divID, {/* ... */});
     var a = board.create('point', [0, 0]);
 })('jxgbox1');
 (function(divID) {
     var board = JXG.JSXGraph.initBoard(divID, {/* ... */});
     var a = board.create('point', [0, 0]);
 })('jxgbox2');


关键字'var'

这里关键字'var'是必要的。当创建变量时不使用关键字“var”，Javascript 引擎将遍历作用域链。如果在作用域链中的任何地方都找不到该变量，则将在全局命名空间中创建该变量。如果 Javascript 引擎确实在作用域链中找到了变量，它将使用现有变量。当使用关键字“var”时，不会遍历作用域链。

于 2020-05-03T20:57:19.040 回答