興味深いUglifyJS-jsチュートリアル-php.cn

興味深いUglifyJS

php中世界最好的语言

リリース： 2018-03-16 10:53:13

オリジナル

2100 人が閲覧しました

今回は興味深い UglifyJS をご紹介します。UglifyJS を使用する際の注意点は何ですか?実際の事例を見てみましょう。

圧縮コードを見ることが何もなかったわけではありませんが、今日自分のコードをデバッグしていて面白いことに気づきました。自分で書いたものなので、圧縮されていても整形後も読みやすいです。もちろん、最小値としての最初の基準は読みやすさではなく、単純さです。次に、コードを可能な限り短くし、可能な限り 1 行にまとめ、空白を最小限に抑えます。私たちがよく使うセミコロンがカンマに置き換えられ、短い文章が長くて一貫した文章になります。

1. 関数をすぐに実行します

元々は2番目の方法で書きましたが、uglifyはそれを1番目の方法に置き換えました（もちろん短いです）。実際、括弧と ! 記号の機能は、関数部分を宣言ではなく式に変換することです。このようにするとすぐに実行でき、同様に~ + もできます。

2.変数名置換

これは当然ですが、関数名、パラメータ名、変数名はすべて単一の文字に置き換えられます。「_」の形式のコードでも

3. 先頭の関数

function foo (){} はモジュールの先頭に配置されます。もちろん、これは標準ですが、後でコードのマージを容易にするという別の機能もあることを後で知りました。たとえば、次のように定義すると、

var self=this;function a(){}
self.a=a;function b(){}
self.b=b;return self;

ログイン後にコピー

は次のように置き換えられます:

function a(){}function b(){}var s={}return  s.a={},s.b={},s

ログイン後にコピー

最後の s を見逃すことはできず、戻り値は最後の式の結果に基づいて返されることに注意してください。

  function rt(n) {    return n;
   }  function xx() {      return rt(1), rt(2);
  }

ログイン後にコピー

xx()を実行して2を取得します。rt(2)の後に値を返さない関数がある場合、xx()は未定義になります。

4.bool値の置換

false-->!1  true-->!0

ログイン後にコピー

5.if

if文が最も圧縮されている箇所です。

1) リターンプレフィックス:

 function load() {            if (t) {
                x = false;
                log("error");                return;
            }
            console.log("22")
        }

ログイン後にコピー

たとえば、私の元の関数はおそらく次のようになります。圧縮後は次のようになります。

  if (t) return x =!1,void log("error")

ログイン後にコピー

return が進められ、最後に余分な void があります。どうしてこれなの。中括弧を使用しないと、if コードの 4 つのセクションが 1 つの文になります。ここでの void の機能は、

関数の戻り値を消去することです。元の if には戻り値がないためです。このときlogメソッドに戻り値がある場合。次に、load を呼び出すと戻り値が得られます。これにより干渉が発生し、本来の機能の目的が損なわれます。なのでvoidで消しました。

2) 短絡

     function foo() {            if (!x) {                return;
            }
            console.log("doA");
            console.log("doB");
  }

ログイン後にコピー

圧縮後:

    function f() {
            x || console.log("doA"), console.log("doB");
      }

ログイン後にコピー

これはかなり良いです。同様に:

(x&&y){
 doa();
 dob(); 
}
 doc();  
 -->    x&&y&&(doa(),dob()),doc()

ログイン後にコピー

元の 4 行が 1 行のコードになりました。

3) 行をマージするには、次のようにすることもできます:

    console.log("doA");
    console.log("doB");     if (x>0) {
         console.log("true");
      }

ログイン後にコピー

次のようにマージします:

 if (console.log("doA"), console.log("doB"), x > 0) console.log("true");

ログイン後にコピー

このように書くのはあまり親切ではないかもしれません。ポイントは、if ステートメントの最後の文であるということです。判決文。前回のリターンと合わせて。カンマステートメントを深く理解する必要があります。

4) throw も無視されません

 if (errMsg) {
       util.triggerCallback(fail, "模型验证错误");       throw Error(errMsg);
  }

ログイン後にコピー

圧縮後:

 if (a)  throw x.triggerCallback(o, "模型验证错误"), Error(a)

ログイン後にコピー

ステートメントの順序が変更され、throw は return とみなされます。

5) if else

これは、三項式 a?b:c に置き換えられます。

6. 数値処理

数百、数千は科学表記法 1000 -->1e3 に処理されます。

7. while

var offset = 0;            while (true) {                if (offset >= bufferLength) {                    break;
                }
}

ログイン後にコピー

は次のように置き換えられます。

  for (var n = 0; ; ) {                if (n >= K)                    break
 }

ログイン後にコピー

は非常に優れており、コード行を節約できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Web レコーディング機能を作成するために JS を proto Js に自動的に一致させる方法

以上が興味深いUglifyJSの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

興味深いUglifyJS

1. 関数をすぐに実行します

2.変数名置換

3. 先頭の関数

false-->!1 true-->!0
ログイン後にコピー

5.if

var offset = 0; while (true) { if (offset >= bufferLength) { break; } }
ログイン後にコピー

興味深いUglifyJS

1. 関数をすぐに実行します

2.変数名置換

3. 先頭の関数

false-->!1 true-->!0ログイン後にコピー

5.if

var offset = 0; while (true) { if (offset >= bufferLength) { break; } }ログイン後にコピー

false-->!1 true-->!0
ログイン後にコピー

var offset = 0; while (true) { if (offset >= bufferLength) { break; } }
ログイン後にコピー