初心者のためのJavaScriptの実践的な使い方

1. == の代わりに === を使用することをお勧めします

JavaScript では、===|!== と ==|!= の 2 つの等価演算子を使用します。一般に、比較のベスト プラクティスは前者のグループを使用することであると考えられています。演算子.

「2 つのオペランドの型と値が同じ場合、=== 比較の結果は true、!== 比較の結果は false。」の本質です。 JavaScript 言語

ただし、= = と != を使用すると、異なる型のオペランドを比較するときに問題が発生します。この場合、この一連の演算子はオペランド値に対して無駄なキャストを実行しようとします。 Eval それは悪いと同義です

JavaScript に詳しくない人のために説明すると、関数 "evel" を使用すると JavaScript コンパイラにアクセスでき、文字列パラメータを "eval" に渡すことができます。

これにより、スクリプトのパフォーマンスが大幅に低下するだけでなく、大量のプレーン テキストを渡す可能性があるため、セキュリティ上のリスクも発生します。

3.怠惰な手

奇数の場合、ほとんどの中括弧とセミコロンを省略しても、ほとんどのブラウザは次のコード スニペットを正しく保存できます:

if(someVarianbleExists)
x = false

ただし、このコードをもう一度考えてください:

if(someVariableExists)
 
x=false
anotherFunctionCall();

前のコードは次と同等であると考えてください:

if(someVariableExists){
x = false;
anotherFunctionCall();

コード内のインデントが中括弧の機能を模倣していることにも気づいたはずです。言うまでもなく、これは非常にひどい行為であり、絶対に避けるべきです。中括弧を省略する唯一の方法は次のとおりです。括弧は 1 行のステートメント内にありますが、この状況でも非常に物議を醸しています。

if(2 + 2 ===4) return"nicely done";

常に将来のことを考えてください

将来のある時点で、さらに追加する必要がある場合この if ステートメントにはコマンドが多すぎるので、どうすればよいでしょうか。この問題に対処するには、

4 を書き直すしかありません。 JS Lint

JSLint は Douglas Crockford によって書かれています。スクリプトをデバッガーにコピーするだけで、コード内の明らかな問題やエラーがすぐに検出されます

」JSLint は JavaScript ソース コードのコピーを取得し、コードをスキャンします。問題が見つかった場合は、その問題とソース コード内のおおよその位置を説明するメッセージが返されますが、JSLint では、スタイルの習慣や構造上の問題が検出されない場合もあります。コードが正しいかどうかを証明するのではなく、問題を見つけるために別の目を提供するだけです。

スクリプト コードの作成を完了する前に、JSLint を 1 回実行して、愚かなエラーが発生しないようにします。ページの下部にあるスクリプト

このヒントは、このシリーズの以前の記事でも推奨されているため、ここにその情報を直接貼り付けておきます

ベスト プラクティスの主な目的は、ユーザーができるだけ早くページを読み込むことです。スクリプトを読み込むとき、ブラウザはスクリプト ファイル全体が読み込まれるまで続行できません。そのため、ユーザーは進行状況に気づくまでに長時間待つ必要があります。 JS ファイルの目的は、機能を追加することだけです。たとえば、ボタンをクリックした後、それらのファイルを本文の終了タグの前に配置します。これは間違いなくベスト プラクティスです。 For ステートメントの外側で変数を宣言します

長い 'for' ステートメントを実行する場合は、解釈エンジンに必要なことだけを実行させます

例:

悪い習慣:

<p>And now you know my favorite kinds of corn. </p> <script type="text/javascript" src="path/to/file.js?1.1.11">
</script> <script type="text/javascript" src="path/to/anotherFile.js?1.1.11"></script> </body> </html>

上記のコード スニペットの各反復に注意してください。配列の長さをチェックする必要があり、そのたびに DOM ツリーを走査して「コンテナ」要素を見つける必要があります。これはなんと非効率なことでしょう!!!

より良いアプローチ

for(var i = 0; i < someArray.length; i++) {     
var container = document.getElementById(&#39;container&#39;);     
container.innerHtml += &#39;my number: &#39; + i;     
console.log(i); }

7. 文字列を構築する最速の方法

配列またはオブジェクトを反復処理する必要がある場合は、常に手元にある 'for' ステートメントを使用するのではなく、創造力を発揮して、仕事を完了する最速の方法を見つけてください。

ar container = document.getElementById('container'); 
for(var i = 0, len = someArray.length; i < len; i++) {     
container.innerHtml += &#39;my number: &#39; + i;     
console.log(i); }

」ベンチマーク; あなたは私を信頼するだけです（または自分でテストしてください） - これが断然最速の方法です。 「

ネイティブ メソッド (join() など) を使用すると、抽象化レベルの背後で何が起こっているかに関係なく、通常は非ネイティブ メソッドよりもはるかに高速です。

8. グローバル変数を削減します

グローバルなものを 1 つのオブジェクトにカプセル化することで、単一の名前空間は、他のアプリケーション、コンポーネント、コード ライブラリとの混乱を招く可能性を大幅に減らすことができます

var arr = [&#39;item 1&#39;, &#39;item 2&#39;, &#39;item 3&#39;, ...]; var list = &#39;<ul><li>&#39; + arr.join(&#39;</li><li>&#39;) + &#39;</li></ul>&#39;;

より良いアプローチ

 var name = 'jeffrey';
var lastname = 'way';
function doSomething(){...}
console.log()

9. コードにコメントを付けます

最初は不要に思えるかもしれませんが、信じてください。できる限りコードにコメントを付けたいと考えています。数か月後にプロジェクトに戻ってきたときに、コードの各行について最初の考えを簡単に理解できないことに気付いた場合はどうでしょうか。あなたの同僚の中で、コードを変更する必要がある人はいますか? 常に、コードの重要な部分にコメントすることを忘れないでください

JavaScript が無効になっている場合の対処方法を常に検討してください。ページでは JavaScript が有効になっているので、これについては心配する必要はありません。しかし、これは大きな間違いです。

你曾花时间去看过关闭JavaScript后你的漂亮的花动态哦是什么样么?也许他会完全破坏你的站点.按照以往经验,设计你的站点是应假设将会禁用JavaScript,那么,一旦你这样做了,那么开始渐进的增强你的网页布局吧!

11.不要传递字符串给"SetInterval"或"SetTimeout"

考虑一下如下代码:

etInterval( "document.getElementById('container').innerHTML += 'my new number: ' + i", 3000 );

 这段代码不仅抵消,而且其行为与"eval"函数相同.永远不要传给字符串给SetInterval和SetTimeout.相反,颍川地一个函数名.

setInterval(someFunction, 3000);

12.不要使用"with"语句

乍一看,'with'语句似乎是个聪明的想法.基本概念是他们能够为深度嵌套对象提供一种简写方式,例如...

with (being.person.man.bodyparts) {     arms = true;     legs = true; }

取代如下写法

being.person.man.bodyparts.arms = true; being.person.man.bodyparts.legs = true;

很不幸,经过一些测试,会发现这种简写在设置新成员时表现非常糟糕.作为替代.你应该使用var.

var o = being.person.man.bodyparts; o.arms = true; o.legs = true;

13 使用{}而不是new Object()

JavaScript中有很多种穿件对象的方式.也许更传统的方式是使用''new''构造器.像这样:

var o = new Object(); o.name = 'Jeffrey'; o.lastname = 'Way'; o.someFuncion = function() {     console.log(this.name); }

然而,这种方式因其行为并不是我们所想的那样而被认为是"糟糕的实践".相反,我推荐你使用更健壮的对象字面方法.

更好的写法 

var o = {     name: 'Jeffrey',     lastName: 'Way',     someFunction: function() {         console.log(this.name);     } };

注意如果你只是想简单地创建个空对象,{}就派上用场了.

var o = {};

对象字面量使我们能够编写支持很多特性的代码,并对代码的实现者来说代码仍然相对直观,不需要直接调用构造器或维护传递给函数的参数的正确顺序,等等.

14.使用[]而不是New Array()

这同样适用于创建一个新数组

过去的写法

var a = new Array(); a[0] = 'Joe'; a[1] = 'Plumber';

更好的写法 var a = ['Joe', 'Plumber'];

Javascript中一个常见的错误是需要数组时使用对象或需要对象时使用数组,规则很简单:当属姓名是小的连续整数时,你应该使用数组,否则,使用对象

15.一长串变量? 省略''var''关键字,使用逗号替代

var someItem = 'some string'; var anotherItem = 'another string'; var oneMoreItem = 'one more string';

更好的写法

var someItem = 'some string',     anotherItem = 'another string',     oneMoreItem = 'one more string';

相当的不言自明,我不知道这里是否有任何真正的速度提升,但是它使你的代码更加简洁了.

16.始终,始终使用分号

技术上来说,大多数浏览器都允许你省略一些分号

var someItem = 'some string' function doSomething() {     return 'something' }

话虽如此,但这是一种非常糟糕的做法,可能导致更大的问题,问题查找起来也更困难

更好的写法

var someItem = 'some string'; function doSomething() {     return 'something'; }

 18.For in 语句

遍历对象内的成员时,你也会得到方法函数,为了解决这个问题,应始终将你的代码包装在一个if语句中来过滤信息

for(key in object) {     if(object.hasOwnProperty(key)) {         ... then do something...     } }

19.使用firebug的''Timer''特性来优化代码

需要一种快速简单地方法来检测一个操作花费多长时间么?

使用Firebug的timer特性记录结果

function TimeTracker() {     console.time("MyTimer");     for(x=5000; x > 0; x--){}     console.timeEnd("MyTimer"); }

20.读书 面向对象的JavaScript

•               JavaScript：语言精粹

•                学习jQuery 1.3

•               学习JavaScript

 

 21.自执行函数(self-executing functions)

相比调用函数,当页面加载或调用父函数时,让函数自动执行会简单些.简单地将你的函数包装在圆括号内,并添加额外的一对圆括号,其本质上就调用了这个函数

(function doSomething() {     return {         name: 'jeff',         lastName: 'way'     };  })();

22.原始(raw)javascript代码的执行速度始终快于使用代码库

 Javascript代码库,如jQuery和mootools,能够为你节省大量的编码时间--特别是使用ajax操作.话虽如此,适中谨记代码库的执行速度适中是比不上原始JavaScript代码的(假设了代码的正确性)

jQuery的each方法来做遍历非常赞,但使用原生for语句适中会快一些

23.crockford的json.parse

虽然JavaScript 2 应该有一个内置的json解析器,但我们仍旧需要自己实现.Douglas Crockford，JSON的创造者，已经实现了一个解析器供你使用。可以从这里下载。

简单地导入该脚本,你就能获得一个新的json全局对象,用于解析你的.json文件.

var response = JSON.parse(xhr.responseText); 
var container = document.getElementById('container'); 
for(var i = 0, len = response.length; i < len; i++) {     
container.innerHTML += &#39;<li>&#39; + response[i].name + &#39; : &#39; + response[i].email + &#39;</li>&#39;;
 }

24.删除''language''

在script标签内最常见的language属性,现在已经不用了  

以上が初心者のためのJavaScriptの実践的な使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。