JavaScript_javascriptスキルの代替記述方法の詳細説明

JavaScript はインターネット用のスクリプト言語です。

JavaScript は、デザインの改善、フォームの検証、ブラウザの検出、Cookie の作成などを目的として、何百万もの Web ページで使用されています。

JavaScript は、インターネット上で最も人気のあるスクリプト言語です。

JavaScriptは使いやすいです!きっと気に入っていただけるでしょう！

JavaScript は柔軟な構文を備えたインタープリタ型スクリプト言語であり、さまざまな人が同じ関数をさまざまな方法で作成できます。 JavaScript コードを整理して、他の人が自分が単純ではないことを一目でわかるようにするにはどうすればよいでしょうか?あなたのコードを読んだ後、他の人が「まだこのように書くことができますね」と叫ぶことを本当に楽しみにしていますか?

匿名関数を記述する N 通りの方法

JS の匿名関数は、関数名を宣言せずに自己実行する関数です。形式は次のとおりです。

(function(){})();

実際、プロジェクトではよく先頭に「;」を追加します。

;function(){}();

JS の構文上、セミコロンは省略できますが、この仕組みにより予期しないエラーが発生する可能性もあります。オンラインになった後にコードを 1 つのファイルにマージおよび圧縮することによって発生する構文エラーを避けるために、「;」を追加すると不明なエラーを回避できます。

しかし、他の人のライブラリやプラグインで次のように書かれた匿名関数を見かけることがあります:

+function(){}();

ここでの「+」は演算子であり、演算子の優先度が非常に高いので、右側の関数宣言と括弧（実際の関数の書き方）が直接実行されます。実際、先頭に「+」記号を付けるだけでなく、「-」、「!」、「~」、「++」などの演算子も使用できます。これは拡張された紹介にすぎません。具体的な記述方法はチームの統一基準に依存します。

Math.ceil() と Math.floor の丸めを放棄する

他のコードでこれら 2 つの記号 ~~ と |0 を見たことがあるかもしれません。実行結果を見てください:

>> var a1 = 1.23
>> ~~a1
1
>> var a2 = 2.345
>> a2|0
2
>> var a3 = -3.45
>> ~~a3
-3
>> var a4 = -4.5
>> a4|0
-4

この書き方はオリジナルではなく、この別の書き方を分析し説明するために引用されているだけであることに注意してください。簡単に説明すると、~ はビットごとの否定演算子で、小数点以下の桁をすべて破棄して浮動小数点数を整数に変換できます。正の整数は符号なし 16 進値に変換できます。次に、それを再度否定 (~~) して、元の整数を取得します。あなたがあまりにも意図的で、方法を調整することを好まない場合、それは最適化だと思いますか?

注: 厳密な丸め演算を行う必要がある場合は、この方法を慎重に使用する必要があります。その場合でも、Math 関数を使用する必要があります。

if と else だけではありません

if-else を使用した条件判断は非常に明確なロジックですが、処理されるデータ量が大きくない場合はあまり簡潔に見えません:

if (a===1) { //此处强烈建议用严格等于符号“===”，不会进行类型转换
a=2
} else if (a===3) {
a=4
} else {
a=5
}

コードをスリム化するための || と && の使用を見てください:

((a===1)&&(true,a=2))||((a===3)&&(true,a=4))||(a=5)

たった 1 ステップで完了し、成功的に体重を減らしましょう。 || と && では、原理が非常に単純であることは言うまでもありませんが、ここで使用されているカンマ演算子は引き続き三項演算子に置き換えることができます。

(a===1 )? a=2:( (a===3) ? (a=4) : (a=5) )

この書き方は構造が単純化されているように見えますが、他の人がコードを読むのは少し難しくなります。

toString を使用して、煩わしい文字列のスプライシング DOM 構造を置き換えます

DOM 構造を動的に生成したい場合は、通常次のように実装します。

var template = "<div>" 
+ "<h2 id="title">{title}</h2>"
+ "<div class='content' yAttr=''>{content}</div>"
+ "</div>"

さまざまな属性やパラメータを追加すると、大小の引用符が混同され、エラーが報告されやすくなります。ただし、ES6 では、この問題を解決するためにテンプレート文字列を提供しています。

のように記述できます。

var template = <div> 
<h2 id="title">{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div>

しかし、問題は ES6 がまだ正式に登場していないことです... 心配しないでください。暗闇の中での当惑は function.toString で解決できます。

var rComment = /\/\*([\s\S]*?)\*\//;
// multiply string 
function ms(fn){ 
return fn.toString().match(rComment)[1]
}; 
ms(function(){/* 
<div> 
<h2 id="title">{title}</h2> 
<div class='content' yAttr=''>{content}</div> 
</div> */
})

ここでの出力は、前の文字列出力と同じです。フロントエンド プログラマは、独自の DOM 構造に注意するだけで済みます。

AMD モジュールのサポートを追加、プロンプト コード B ボックス 作成したコードの AMD (非同期モジュール定義) モジュール仕様を宣言して、他のユーザーが AMD 仕様を通じてモジュールを直接ロードできるようにします。他のユーザーが仕様を通じてモジュールをロードしない場合は、通常のグローバルを返すこともできます。潔く反対する。 jQueryUI がどのように書かれているかを見てみましょう:

(function( factory ) { 
if ( typeof define === "function" && define.amd ) { 
// AMD模式。且依赖"jQuery"这个插件 
define( [ "jquery" ], factory ); } 
else { 
// 浏览器全局模式 
factory( jQuery ); 
} 
}(function( $ ) { 
// 这里放模块代码 
return $.widget; 
}));

AMD モジュール構造を変更して、コードをブラウザ側でのスクリプト依存関係の読み込みに適したものにします。他の人がコードを見たときに、あなたがプロの開発者であることがわかるように、この形式でコードを作成します。

最適なメソッドを継承 JavaScript の柔軟性には、大小合わせて 10 を超える継承メソッドがあります。それぞれの記述方法には異なる利点と欠点があります。ここでは、一般的に使用される継承メソッドを例に挙げます。

这种这种方法实际上是将Child.prototype和Parent.prototype中保存的指针指向了同一个对象，所以子对象原型中扩展一些属性以便之后继续继承的话，父对象的原型也会被改写。所以为了解决这个问题，尝试借用一个临时构造器的写法：

function Empty(){}
Empty.prototype = Parent.prototype;
Child.prototype = new Empty();
Child.prototype.constructor = Child;

这样父对象的自身属性和原型方法得到保护。“最优”有点夸大，但是是相比较而言的。相信每个人都有自己的写法，还有借用call和apply实现属性继承的优缺点，篇幅有限不一一介绍。

总结

上述所有的JavaScript的另类写法，一些是为了程序易懂或者效率提高的语法糖，这样的做法是比较可取的，比如前面所说的省略if-else的做法。一些是为了提升我们代码的兼容性和性能，比如AMD和继承的方式。……本人菜鸟一枚，上述内容肯定还有不全和没解释透彻的地方以后再补充。

以上内容是针对JavaScript的另类写法的相关介绍，希望对大家有所帮助！