私が個人的に重要だと思う 9 つの JavaScript プログラミングスキルを共有する

私が個人的に重要だと思う 9 つの JavaScript プログラミングスキルを共有する_JavaScript スキル

WBOY

リリース： 2016-05-16 16:02:02

オリジナル

1267 人が閲覧しました

1. 判断を上手に使う:

jsでは、NaN、unknown、Null、0、""はboolに変換するとfalseになるので、このように書けます。

コードをコピーしますコードは次のとおりです:

if(!obj) {}

は、オブジェクトが false の場合にオブジェクトが行う動作を表します。obj が上記のいずれかである場合、それは false、!false は true であるため、if(obj==null || obj == NaN を指定する必要はありません) ....)。

2. 演算子を上手に使用します:

タイムスタンプを取得するには非常に古典的なトリックがあります。

コードをコピーしますコードは次のとおりです:

var dataspan = new Date()*1;

js は型指定が弱い言語であることがわかっています。Date() は、この文字列を使用して算術演算を実行すると、結果のタイムスタンプが変換されます。

3. 正規表現を上手に使用します:

コードをコピーしますコードは次のとおりです:

/.a/ig.exec('xsas')

//reg オブジェクトを作成して exec メソッドを呼び出すことと同じです。もちろん、test()、match() などの他のメソッドも呼び出すことができます。 

4. 配列の最大値と最小値を取得します:

コードをコピーしますコードは次のとおりです:

var 値 = [1,2,3,40,23];
var max = Math.Max.apply(Math,values);

Max.apply を呼び出し、オブジェクトを Math に設定し、値を渡して最大値を決定します。

5. メモリの最適化:

コードをコピーしますコードは次のとおりです:

関数 p(){this.p='moersing'}; var p1 = 新しい p();
p1.xx 

p1.xx

…..

p1=null; //操作を実行した後、最後に p1 への参照を手動で解放します。 

6. オブジェクトを作成する最も一般的な方法 (プロトタイプモード):

コードをコピーしますコードは次のとおりです:

関数 c(){

This.name ='moersing';

This.age=18;

This.books=['javascript 開発','C# 開発'];

}

c.prototype={ 

displayBookName:function (){ 

foreach(this.books の変数) 

{

document.write(this.books[t]);

}

}

}

プロトタイプ構築パターンの最大の欠点は、参照型の共有であるため、コンストラクターで参照型を定義し、この参照を使用してプロトタイプで一般的なメソッドを定義します。

7. ブロックレベルのスコープとプライベート変数

JavaScript にはブロックレベルのスコープやプライベート変数のようなものはありませんが、いくつかの機能を使用することで、これらの効果をシミュレートできます。

7.1 ブロックレベルのスコープ:

コードをコピーしますコードは次のとおりです:

(関数(){

//ブロックレベルのスコープ

}

)();

匿名関数を括弧で囲みます。私はこれを「関数の標準化」と呼んでいます。つまり、次のような標準関数のように呼び出すことができます。

コードをコピーしますコードは次のとおりです: 変数名 =function(){};

(name)();//これは通常このようには書かれません;

この利点は、関数内の変数に () の外部からアクセスできないことと、ブロックレベルのスコープになることです。このメソッドは通常、プラグインを作成するときに使用され、グローバルに追加の変数を追加しません。 .変数であり、関数の実行後、その内部で定義された変数は破棄されるため、クロージャー機能には問題ありません。

7.2 プライベート変数:

コードをコピーしますコードは次のとおりです:

関数 private()

{ 

var name = 'moersing';

This.getName = function(){

this.name を返します;

}

}

プライベート変数は、実際には関数のスコープを制限 (外部からアクセスできない) として使用し、対応する変数を返すメソッドを定義するだけです。

8.DOM ノードリスト:

nodeList は動的要素です。つまり、ドキュメントに要素を追加すると、nodeList は次のようにリアルタイムで更新されます。

コードをコピーしますコードは次のとおりです:

var alldiv = document.getElementsByTagName('div');

for(var i=0;i
{

var div = document.createElement('div');

div.innerHTML= i.toString();

document.body.appendChild(div);

}

このコードは無限ループを引き起こします。ループ内で div が作成され、appendChild メソッドがそれを body に追加します。その後、すべての alldiv がすぐに更新されるため、i

コードをコピーしますコードは次のとおりです:

var alldiv = document.getElementsByTagName('div');

var len,i;

for(i=0,len=alldiv.length;i
{

var div = document.createElement('div');

div.innerHTML= i.toString();

document.body.appendChild(div);

}

ここに提案があります: 各操作で DOM ツリーのクエリが実行されるため、NodeList を頻繁に操作しないことをお勧めします。

上記で紹介した方法に加えて、HTML5 の新たに追加された API (セレクター API Level1) もこの問題を解決できます。 linq リアルタイムクエリとは何かというと、C# の linq リアルタイムクエリと似ています。今後もブログを更新していきますので、お楽しみに:

コードをコピーしますコードは次のとおりです:

var allDiv= document.querySelectorAll('div');

for(var i=0;i
{

var div = document.createElement('div');

div.innerHTML= i.toString();

document.body.appendChild(div);

}

querySelectorAll には、jquery の $() と同様に、CSS セレクターという 1 つのパラメーターが必要です。返される NodeList は、タイムリーな非動的 DOM コレクションです。

最初に一致した要素を返す querySelector もあります。HTML5 API の詳細については、

を参照してください。

http://www.w3.org/standards/techs/dom#w3c_all

または

https://developer.mozilla.org/zh-CN/docs/Web/API

さらに、HTML5 API に特化したブログも準備中ですので、ご期待ください。

9.DOM パフォーマンス:

そんなバカなことしないでください(やってしまった…)

コードをコピーしますコードは次のとおりです:

for(var i=0;i<10;i )
{
document.querySelector('ul').innerHTML="

" i "