흥미로운 UglifyJS

이번에는 흥미로운 UglifyJS를 가져왔습니다. UglifyJS 사용 시 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

압축 코드를 보기 위해 그냥 할 일이 없었던 것은 아니지만, 오늘 제가 직접 코드를 디버깅하면서 흥미를 느꼈습니다. 제가 직접 작성했기 때문에 압축되어 있어도 포맷 후에도 읽기 쉽습니다. 물론, 최소의 첫 번째 기준은 가독성이 아니라 단순성입니다. 그런 다음 코드를 최대한 줄이고 한 줄에 유지하며 공백을 최소화합니다. 우리가 흔히 사용하는 세미콜론은 쉼표로 바뀌고, 짧은 문장은 길고 일관된 문장이 될 것입니다.

1. 함수 즉시 실행

원래는 두 번째 방법으로 작성했는데, uglify에서는 첫 번째 방법(물론 더 짧음)으로 대체했습니다. 실제로 대괄호와 ! 기호의 기능은 함수 부분을 선언이 아닌 표현식으로 변환하는 것입니다. 이런 식으로 바로 실행이 가능하고, 마찬가지로 ~+도 가능합니다.

2.변수 이름Replacement

이것은 당연합니다. 함수 이름, 매개 변수 이름, 변수 이름은 모두 단일 문자로 대체됩니다. '_'

3. Function on top

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이 진행되고 끝에 추가 공백이 있습니다. 왜 이런가요? 중괄호가 없으면 if 코드의 네 부분이 하나의 문장이 됩니다. 여기서 void의 기능은 함수의 반환 값을 지우는 것입니다. 원본 if에는 반환 값이 없기 때문입니다. 이때 로그 메소드에 반환 값이 있는 경우입니다. 그런 다음 load를 호출하면 반환 값을 얻게 됩니다. 이로 인해 간섭이 발생하고 원래 기능의 목적이 무산됩니다. 그래서 공허하게 지웠어요.

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()

원래 네 줄이 한 줄의 코드가 되었습니다.

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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS가 proto Js

h5를 자동으로 일치시켜 웹 기록 기능을 만드는 방법

위 내용은 흥미로운 UglifyJS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!