最高の JS コードを書くための 14 のヒント_javascript のヒント

onChange または他の同様のイベント処理メソッドを使用する場合、常に関数への参照を通じて入力要素自体を参照することをお勧めします。すべての入力要素には、それを含むフォームへの参照が含まれます:

form 要素を参照してフォームのプロパティにアクセスするには、このページ上の特定の名前を持つフォームを参照するハード コードを含まない関数を作成できます。関数が再利用可能になるため、これは非常に良い習慣です。

6

JavaScript の with ステートメントはスコープの先頭にオブジェクトを挿入するため、プロパティ/変数の参照は最初にオブジェクトに対して解決されます。これは、繰り返しの参照を避けるためのショートカットとしてよく使用されます:

使用例:

しかし、問題は、input1 または input2 が実際に Form 要素配列の属性として扱われたかどうかをプログラマが検証する方法がないことです。まず、それらの名前でプロパティをチェックし、見つからない場合はスコープを (下に) 進めます。最後に、input1 と input2 をグローバル オブジェクト内の 1 つのグローバル オブジェクトとして処理しようとしますが、エラーが発生します。

回避策は、参照を作成して参照されるオブジェクトを減らし、それを使用してこれらの参照を解決することです。

参照を使用します:

7. アンカー内で JavaScript の代わりに onclick を使用します: 擬似プロトコル

タグ内で Javascript コードをトリガーしたい場合は、JavaScript: pseudo-protocol の代わりに onclick を選択します。onclick を使用して実行される Javascript コードは true または false (または evalues よりも true または false を返す式) を返す必要があります。翻訳する必要がありますか? これは私が理解している方法です: true または false よりも優先度の高い式]) タグ自体を返します: true が返された場合、false が返された場合、アンカーの href は一般リンクとして扱われます。返された場合、href は無視されます。このため、onclick によって処理されるコードの最後に return false; が含まれることがよくあります。

正しい構文:

a href="javascript_required.html"go/a

この例では、クリックされると doSomething() 関数 (ページの隅に定義されています) が呼び出されます。 Javascript が有効になっているブラウザでは、href にアクセスすることはできません。ドキュメント javascript_required.html は、JavaScript が必要であるがユーザーが有効にしていないことを警告できるブラウザにのみロードされます。通常、ユーザーが Javascript サポートを有効にしていることを確認する場合、物事をシンプルにするために、リンクには href=# のみが含まれます。 この習慣は推奨されません。通常、JavaScript を有効にせずにローカルに戻るページを提供することをお勧めします。

場合によっては、多くの人が状況に応じてリンクにアクセスしたいことがあります。たとえば、ユーザーがフォーム ページの 1 つから離れようとしていて、何も変更されていないことを確認するために最初に検証したい場合です。この場合、onclick はリンクをたどるべきかどうかのクエリを返す関数にアクセスします:

条件付きリンク アクセス:

在这个实例中，validate() 函数必须只返回 ture 或 false。ture 的时候用户将被允许问题 home 页面，或 false 的时候链接不被访问。这个例子提示确认（其行为），以访问 ture 或 false，这完全由用户点击确实或者取消决定。

　　下面是一些不应该的例子。如果你在自己的页面中看到下面这样的代码，这是不正确的，需要被修改：

　　什么是不应该做的：

8. 使用一元 + 号运算符使类型转向Number
　　在Javascript中，+号运算符同时充当数学加号和连接符。这会在form表单的域值相加时出现问题，例如，因为Javascript是 一个弱类型语言，form 域的值将会被当作数组来处理，而你把它们+一起的时候，+将被当成连接符，而非数学加号。

　　有问题的例子:

form name="myform" action="[url]"
input type="text" name="val1" value="1"
input type="text" name="val2" value="2"
/form

function total() {
var theform = document.forms["myform"];
var total = theform.elements["val1"].value + theform.elements["val2"].value;
alert(total); // 这个将会弹出 "12", 但你想要的是 3!
}

解决这个问题，Javascript 需要一个提示来让它把这些值当做数字来处理。你可以使用+号来把数组转换成数字。给变量或者表达式前置一个+号将会强制其当作一个数字来处理，而这也将使得数学+得以成功应用。

　　修改好的代码：

function total() {
var theform = document.forms["myform"];
var total = (+theform.elements["val1"].value) + (+theform.elements["val2"].value);
alert(total); // This will alert 3
}

9. 避免 document.all
　　document.all 是由Microsoft 的 IE 所引进的，并不是一个标准的 Javascript DOM 特性。尽管大多数新的浏览器支持它以支持依赖于它的糟糕代码，（而）还有很多浏览器是不支持的。

　　并没有理由其他方法都不适用，而一个老的IE浏览器（5.0）需要支持，而在Javascript中使用 document.all 作为一个折衷方法。 你并不需要使用 document.all 来检测其是不是IE浏览器，因为其他浏览器现在一般都支持。

　　只把 document.all 当做最后的选择：

if (document.getElementById) {
var obj = document.getElementById("myId");
}
else if (document.all) {
var obj = document.all("myId");
}

一些使用 document.all 的原则：

•同尝试其他方法
•当其作为最后的选择
•当需要支持 5.0 版本以下的 IE 浏览器
•总是使用 if (document.all) { } 来查看是否支持.
　　10. 不要在脚本代码块中使用HTML注释
　　在 Javascript 的旧日子（1995）里，诸如 Netscape 1.0 的一些浏览器并不支持或认识 script 标签。所以，当 Javascript 第一次被发布，需要有一个技术来让实些代码不被当做文本显示于旧版浏览器上。有一个hack 是在代码中使用 HTML 注释来隐藏这些代码。

　　使 HTML 注释并不好：

script language="javascript"
!--
// code here
//--
/script

在今天，没有任何一个常用的浏览器会忽略掉 script 标签。因此，再没必要隐藏 Javascript 源代码。事实上，它还可以因为下面的理由，被认为是无益的：

•在 XHTML 文档中，源代码将向所有浏览器隐藏并被渲染成无用的（内容）；
•– 在 HTML 注释并不允许 ，这个会让任何递减操作将失效。
　　11. 避免乱用全局命名空间
　　一般很少需要全部变量和函数。全局使用将可能导致 Javascript 源文件文档冲突，和代码中止。因此，一个好的做法是在一个全局命名空间内采用函数性的封装。有多个方法可以完成这个任务，有此相对比较复杂。最简单的方法 是创建一个全局对象，并把属性和方法指派给这个对象：

　　创建一个命名空间：

var MyLib = {}; // global Object cointainer
MyLib.value = 1;
MyLib.increment = function() { MyLib.value++; }
MyLib.show = function() { alert(MyLib.value); }

MyLib.value=6;
MyLib.increment();
MyLib.show(); // alerts 7

命名空间也可以使用 Closures（闭包?） 来创建，并且 Private Member Variables （私有变量?） 也可以伪装于 Javascript中。

12. 避免同步的 ajax 调用

　　当使用Ajax请求时，你要么选择异步模式，要么使用同步模式。当浏览器行为可以继续执行，异步模式将请求放在后台执行，同步模式则会等待请求完成后才继续。

　　应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器，直至请求返回。一旦服务器忙，并需要一段时间来完成请求，用户的浏览器（或者 OS）将不能做任何其他的事，直至请求超时。

　　如果你觉得自己的情况需要同步模式，最大的可能是你需要时间来重新想一下你的设计。很少（如果有的话）实际上需要同步模式的 Ajax 请求。

13. 使用 JSON

　　当需要将数据结构存储成纯文本，或者通过 Ajax 发送/取回数据结构，尽可能使用 JSON 代替 XML。JSON (JavaScript Object Notation) 是一个更简洁有效的数据存储格式，并且不依赖任何语言（and is a language-neutral）。

14. 使用正确的 script 标签

　　不造成在 script 中的使用LANGUAGE 属性。一个合适的方式是创建如下的 Javascript 代码块：

<script type="text/javascript">
// code here
</script>