그러나 스크립트가 비교적 긴 경우 주소 표시줄에 큰 부분을 복사해야 하는데 이는 매우 보기 흉하고 스크립트를 수정하기가 쉽지 않습니다. 따라서 일반적으로 스크립트는 별도의 파일에 먼저 작성된 후 javascript: 형식으로 페이지에 동적으로 로드됩니다. 많은 웹 플러그인이 이 방법을 사용하여 로드됩니다.
일반적으로 동적 로딩을 구현하기 위해 가장 간단한 코드를 사용합니다.
javascript:var o=document.createElement('script');o.src='...';document.body.appendChild(o);void(0)
물론 플러그인을 로딩하는 데에는 이 정도면 충분합니다. 그러나 얼마 전 약간 수정된 방법을 보았고 이 코드가 얼마나 짧을 수 있는지 궁금해졌습니다!
그의 코드는 거의 동일하지만 더 엄격합니다.
javascript:(function(o){o.src='...';document.body.appendChild(o)})(document.createElement('script'));void(0)
코드가 이전보다 길어졌지만 잠재적인 충돌을 피하기 위해 변수는 클로저에 배치되었습니다. 그리고 document.createElement를 클로저의 매개변수로 사용하면 var 단어가 영리하게 저장됩니다.
할 일이 없어서 코드를 합리화하고 합리화할 수 있을지 고민했습니다. 그런데 js의 다양한 기능을 검토해 보세요.
물론, 먼저 주소 표시줄 로딩 스크립트에 따라야 할 몇 가지 기본 규칙이 있습니다.
1. 전역 변수를 도입하지 마세요
2. 주류 브라우저와 호환됩니다
3. 로딩 프로세스는 페이지에 영향을 미치지 않습니다.
> 전역 변수에 영향을 주지 않으며, 개인 변수를 숨기기 위해 클로저를 사용해야 합니다.
> 코드 길이만 늘리세요.
> 단순히 innerHTML을 사용하여 요소를 추가하면 기존 요소가 새로 고쳐질 수 있습니다.
그래서 단계별로 분석을 시작했습니다.
당연히 가장 먼저 떠오르는 것은 익명 폐쇄에 대한 요구입니다.
일반적으로 (function(){})() 형식으로 익명 클로저를 호출합니다. 빨간색 우선순위 괄호는 필수입니다. 그렇지 않으면 잘못된 구문입니다.
그러나 다른 형식을 사용할 수도 있습니다: function(){}() 앞의 숫자는 -!~ 및 기타 단항 연산자로 대체될 수 있습니다. 하지만 이는 1바이트 차이에 불과하다.
또 다른 분명한 점은 void(0)의 매개변수를 클로저 호출 표현식으로 대체할 수 있다는 것입니다. void는 단순한 키워드이지만 함수와 유사한 기능을 갖고 있으며 모든 매개변수에 대해 정의되지 않은 값을 반환합니다. void가 없으면 주소 표시줄에서 javascript:를 실행한 후 페이지는 모두가 봤어야 하는 스크립트 표현식 반환 값이 됩니다.
그래서 눈에 띄게 관찰한 결과 3글자가 살짝 줄어들었습니다.
javascript:void( function(o){ o.src ='...';document.body.appendChild(o)}(document.createElement('script')))
그러나 위의 내용은 피상적인 관찰입니다. 이제 꼼꼼히 분석해 보겠습니다.
클로저를 사용하는 이유는 변수와 페이지 간의 충돌을 방지하기 위한 것입니다. 그럼 변수를 사용하지 않는 것이 가능한가요? 변수를 피하는 유일한 방법은 연결된 작업을 사용하는 것입니다. 이전 작업의 반환 값을 다음 작업의 매개 변수로 사용합니다. 이 코드에는 스크립트 요소 생성/스크립트 요소 src 할당/스크립트 요소 추가의 총 3가지 작업이 있습니다. W3C 매뉴얼을 주의 깊게 참고하세요. DOM.appendChild는 요소를 추가할 수 있을 뿐만 아니라 반환 값도 이 요소입니다. src 할당 순서와 요소 추가 순서는 바뀔 수 있습니다. 따라서 체인 연산을 사용하여 클로저와 변수에 완전히 작별 인사를 할 수 있습니다.
javascript:void(document.body.appendChild(document.createElement('script')).src='...')
이번 단계에서는 19자를 간소화했습니다!
계속해서 관찰해 보겠습니다. 위 코드에는 두 개의 문서가 나타납니다. 대신 짧은 변수를 사용하면 단어 수를 줄일 수 있습니다. 하지만 변수를 사용하면 충돌이 발생하므로 클로저를 다시 사용해야 합니다. . . 주의 깊게 기억해 보면, js에는 일반적으로 권장하지 않는 것이 있습니다: with. 네, 그를 사용하면 이 문제를 해결할 수 있습니다. 나에게 필요한 것은 (문서){...}뿐입니다. 코드가 한 줄뿐이므로 중괄호 쌍도 제거할 수 있습니다. 그래서 4글자가 더 줄었습니다.
javascript: with( document)void(body.appendChild(createElement('script')).src='...')
void가 더 이상 가장 바깥쪽 레이어에 있지 않다는 점은 주목할 가치가 있습니다. if 및 for와 마찬가지로 더 이상 표현식이 아니라 명령문입니다.
이때 코드의 모든 문장에는 고유한 책임이 있으며, 반복되는 단어도 찾을 수 없습니다. 좀 더 날씬해질 수 있을까요? 굳이 찾으려면 이 놈에게서 공허하게 찾아야 한다. 이를 제거하면 주소 표시줄이 실행된 후 페이지가 스크립트 요소의 src 문자가 됩니다. 당연히 삭제할 수 없습니다. 하지만 경고와 같이 변경하려고 시도할 수 있습니다. 대화 상자 이후에는 페이지가 그대로 유지됩니다.
앞서 언급했듯이 void의 기능은 정의되지 않은 값만 반환하는 것이고, Alert에는 반환 값이 없습니다. 여기서는 JavaScript와 다른 언어의 차이점에 대해 이야기해야 합니다. 다른 언어에서는 함수/프로시저에 대한 개념이 거의 두 가지입니다. 프로시저는 반환 값이 없는 함수입니다. 하지만 js는 다릅니다. js에서는 모든 함수에 반환 값이 있습니다. "반환 값 없음"도 반환 값이며 정의되지 않습니다. 따라서 Alert와 void는 동일한 반환 값(undefine)을 갖습니다. 주소 표시줄이 실행되고 결과가 그것인 한 페이지는 점프하지 않지만 false, 0, null, NaN 등과 같은 다른 것들은 작동하지 않습니다.
따라서 표현식을 정의되지 않은 상태로 반환하기만 하면 되지만 void()보다 짧아야 합니다. 정의되지 않은 상수를 생성하려면 리터럴 상수 외에도 값을 반환하지 않는 함수를 호출하거나 객체에 존재하지 않는 속성에 액세스해야 합니다. 우리는 가능한 한 간략하게 설명하고 싶습니다. 페이지에서 jQuery를 사용하는 경우 $.X를 사용하여 정의되지 않은 결과를 얻을 수 있습니다. 그러나 jq가 없으면 $ 변수가 존재하는지 여부를 보장할 수 없습니다. 충분히 짧은 전역 변수를 찾을 수 없으므로 json을 사용하여 [] 또는 {}와 같은 익명 변수를 만든 다음 [].X와 같이 존재하지 않는 속성에 액세스할 수 있습니다. 따라서 void와 작별 인사를 할 수 있습니다.
javascript:with( document)body.appendChild(createElement('script')).src='...';[].X
이렇게 하면 1바이트가 줄어듭니다. 코드를 병합하고 >javascript:with(document)[][body.appendChild(createElement('script')).src='...']
코드 복사
코드는 다음과 같습니다.
javascript:with(document)0[body.appendChild(createElement('script')).src='...']
를 사용하면 스크립트의 URL을 단축할 수 있습니다. 예:
복사 code
코드는 다음과 같습니다.
javascript:with(document)0[body.appendChild(createElement('script')).src='http: //goo.gl/ QPp29']
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
