JavaScript 良好实践 : remove inline onsubmit(), 全局变量

Question

我正在学习 JavaScript 的良好实践(顺便说一句，如果您有关于它的文章推荐我，我将不胜感激 :D)并且我有一些问题:

1. onsubmit()、onclick() 和其他内联函数
2. 当变量是global时我应该怎么做
3. open() 方法

关于1和2

我的 HTML 页面中有一个表单，我是这样使用的:

<form name="myForm" onsubmit="myFunction();">

内联 JS 是一种不好的做法，我必须将其删除。所以，我删除了 onsubmit="myFunction();" 并添加到我的 JS(在外部文件中):

var form = document.myForm;

form.onsubmit = function myFunction() { /* codes hidden here */ };

但是……

1. 为什么我的代码不工作？我之前必须使用 window.onload 吗？有时我不知道什么时候应该使用它。

2. 一旦我读到我不应该声明全局变量(如上面的 form)。那么在那种情况下我怎样才能创建一个局部变量呢？

约3

3. 在一个函数中，我生成一个 URL，用户点击一个按钮将其打开。但我读到 open() 是一个不好的做法。这是真的？如果是，如何更换？

Answer 1

当声明:

var form = document.myForm;

被评估，表单必须存在于 DOM 中，否则 form 将是未定义的。如果上面是在头部，那么当代码被执行并且赋值时，表单几乎肯定不会存在。

任何依赖于 DOM 元素的值都应该在 DOM 加载后分配。确保这一点的最简单方法是将脚本紧接在结束 body 标记之前。

还有其他方法可以在 DOMReady 事件(或类似事件)上加载脚本或等待窗口的 load 事件，但这可能会导致元素可见和脚本运行之间出现延迟。

form.onsubmit = function myFunction() { /* codes hidden here */ };

如果 form 未定义，你就有麻烦了……:-(

给全局变量起一个不太可能与标准全局冲突的名称也是一个好主意(有很多这样的名称，例如，许多浏览器将所有元素名称和 ID 放入引用元素的全局变量中以兼容古老的 IE 代码)，所以最好做类似的事情:

var formElement = document.forms['myForm'];

或者更好的是，保持你的全局变量数量尽可能少(零是可能的，但并不总是明智的)。例如你可以这样做:

window.onload = function() {
  var form = document.myForm;
  form.onsubmit = function myFunction() { /* codes hidden here */ };
}

在头部的代码中。或类似 Kyle Weller 的答案接近结束 body 标签。