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

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 "

";
}

オブジェクトの innerHTML に値を割り当てると、組み込みの C パーサーが呼び出され、文字列が解析されます。これは非常に高速ですが、パフォーマンスがある程度低下するため、行わないことをお勧めします。

こうする方が良い:

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

var ih=null;

for(var i=0;i {
ih ="

" i "

";
}
document.querySelector('ul').innerHTML=ih;

その他のパフォーマンス最適化トピックについては、時間があるときに更新されます。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。