JavaScript는 모든 규칙을 어깁니다.

트위터의 프론트엔드 엔지니어인 Angus Croll은 베를린에서 열린 JSConf 컨퍼런스에서 "Break all the Rulez"라는 제목으로 연설했습니다. 주로 우리가 일반적으로 잘못되었다고 생각하고 사용해서는 안 되지만 실제로는 유용한 몇 가지 사항에 대해 이야기합니다. 미국 자바스크립트의 아버지인 앵거스 크롤(Angus Croll)의 강의 노트(링크)를 읽고 나면 대부분의 견해에 동의한다고 밝혔습니다(아직도 문제가 있는 것 같나요?).
더 이상의 설명 없이 아래 핵심만 간단히 번역하겠습니다.

with 문
사용하지 않는 이유는 무엇인가요?
1. 예상치 못한 실행 결과, 전역 변수가 암시적으로 생성될 수 있습니다.
2. 클로저 범위 확인이 너무 많은 시간을 소비합니다
3. 어떤 사람들은 ES5의 엄격 모드가 암시적인 전역 변수 생성(var 없이)을 방지하여 with의 문제를 줄일 수 있다고 말합니다. 그러나...
엄격 모드는 with를 사용할 수 없습니다.
그렇게 말하는 이유는 무엇입니까? 유용할까요?
1. 브라우저 개발자 도구 빌드

//Chrome 개발자 도구
IS._evaluateOn =
function(evalFunction, obj, 표현식) {
IS._ensureCommandLineAPIInstalled( );
표현식 =
"with (window._inspectorCommandLineAPI) {
with (window) { " + 표현식 + " } }";
return evalFunction.call(obj, 표현식);
}
2. 블록 수준 범위 시뮬레이션

//예, 여전히 오래된 문제입니다.
var addHandlers = function(nodes) {
for (var i = 0; i < ; node.length; i++) {
노드[i].onclick =
function(e) {alert(i);}
}
};

/ /당신
var addHandlers = function(nodes) {
for (var i = 0; i < node.length; i++) {
node[i].onclick = function 외부에서 함수를 래핑하여 이 문제를 해결할 수 있습니다. (i) {
       return function(e) {alert(i);};
           (i) with'를 사용하여 블록 수준 범위를 시뮬레이션합니다.
var addHandlers = function(nodes) {
for (var i = 0; i < node.length; i++) {
with ({i:i}) {
노드[i].onclick =
function(e) {alert(i) ;}
}
}
};
eval 문
왜 사용하지 않나요?
1. 코드 삽입
2. 클로저 최적화를 수행할 수 없습니다
3. . 사후 컴파일
왜 유용합니까?
1. JSON.parse를 사용할 수 없는 경우
Stack Overflow에서 누군가가 말했습니다:
"JavaScript의 eval은 안전하지 않습니다. json.org에서 JSON 파서를 사용하세요. JSON을 구문 분석하려면"
다른 사람이 말했습니다:
"JSON을 구문 분석하는 데 eval을 사용하지 마세요! Douglas가 작성한 json2.js를 사용하세요!"
하지만:

// JSON2.js에서

if (/^[],:{}s]*$/
.test(text.replace(/*regEx*/, '@')
.replace(/*regEx */, ']')
.replace(/*regEx*/, '')) ) {
j = eval('(' + text + ')');
}
2. 브라우저의 JavaScript 콘솔은 Webkit 콘솔 또는 JSBin의 eval
을 사용하여 구현됩니다.

>(function () {
console.log(String(arguments.callee. caller))
})()

function eval( ) {
[네이티브 코드]
}
John Resig가 말했습니다:
“eval과 with는 멸시되고 오용됩니다. , 대부분의 JavaScript 프로그래머가 공개적으로 비난하지만 올바르게 사용하면 다른 기능으로는 구현할 수 없는 멋진 코드를 작성할 수 있습니다."
함수 생성자
왜 유용한가요?
1 . 도메인 내에서 예측 가능한 방식으로 실행됩니다
2. 전역 변수만 동적으로 생성할 수 있습니다
3. 클로저 최적화 문제는 없습니다
jQuery의 ParseJSON

// jQuery parseJSON

// http://json.org/json2.js에서 가져온 논리
if (rvalidchars.test(data.replace(rvalidescape,"@")
.replace( rvalidtokens, "]")
.replace( rvalidbraces,""))) {

return ( new Function( "return " + data ) )();
}
2.Underscore.js의 문자열 보간

//from _.template

// 변수가 지정되지 않은 경우
// 데이터 값을 ​​안에 넣습니다. 로컬 범위.
if ( !settings.variable)
source = 'with(obj||{}){n' + source + '}n';

//..

var render = new Function(
settings.variable || 'obj', '_', source);
== 연산자
왜 사용하지 않나요?
1. 양쪽 피연산자를 같은 유형으로 변환
왜 유용한가요?
1. 양쪽 피연산자를 동일한 유형으로 강제 변환
2. >//이렇게 작성하기 귀찮나요?
if ((x === null) || (x === undefine))

//이렇게 작성해도 됩니다
if (x == null)
3. 양쪽의 피연산자 유형이 명백히 동일한 경우 사용

typeof thing == "function"; //typeof 연산자는 확실히 문자열을 반환합니다. >myArray.length == 2;
myString.indexOf('x') == 0; //indeOf 메서드는 반드시 숫자를 반환합니다.
True 값은 반드시 ==true일 필요는 없으며, false 값일 필요는 없습니다. ==false

if ("감자") {
"감자" == true; //false
}
배열 생성자
왜 사용하지 않나요?
1.new Array()도 나쁘나요? JSLint에서는 [] 사용을 권장합니다.
이것이 왜 유용한가요?

//
의 프로토타입.js 확장에서 //String.prototype
function times(count) {
return count < 1 ?
'' : new Array(count + 1).join(this);
}
' me'.times(10); //"memememememememememe"
기타
네이티브 프로토타입 객체를 확장하지 마세요
(예를 들어 5개의 shim이 모두 이 작업을 수행합니다)
for/in이 To를 트래버스할 때 항상 이 작업을 수행합니다. hasOwnProperty를 사용하세요
(객체 프로토타입을 확장하지 않고는 이 작업을 수행할 필요가 없습니다)
모든 var 문을 맨 위에 배치하세요
(for 문은 초기화 표현식에 배치하는 것이 더 좋습니다)
이전에 함수를 선언하려면 호출
(구현 세부 사항이 우선일 때 사용)
쉼표 연산자 사용 안 함
(여러 표현식 사용 시 사용 가능)
항상parseInt 사용 두 번째 매개 변수를 10으로 지정
( 문자열이 '0'이나 'x'로 시작하지 않으면 필요하지 않습니다.)
번역자 노트
이렇게 말하다 보니 저도 한 가지 생각이 나네요. 오해하는 게 바로 탈출입니다. 인터넷에서는 "Escape를 사용하지 마세요"라고 말합니다.
왜 유용하다고 하나요?
1. Escape는 더 많은 문자를 이스케이프하고, 후자의 두 기능으로 이스케이프해야 하는 경우도 있습니다.
ASCII 문자 이스케이프() encodeURI() encodeURIComponent()
! %21 !
# %23 # %23
$ %24 $ %24
& %26 & %26
' %27 ' '
( %28 ( (
) %29 ) )
+ + + %2B
, %2C , %2C
/ / / %2F
: %3A
; %3B ; %3B
= %3D = %3D
? %3F
@ @ %40
~ %7E ~~
2. 일반적으로 base64에서 사용되는 UTF8 인코딩으로 변환합니다.
escape는 utf16으로 인코딩된 문자열을 이스케이프하는 것과 동일하며, encodeURIComponent는 먼저 utf16 문자열을 utf8 인코딩으로 변환한 다음 이스케이프하는 것과 같습니다.
encodeURIComponent(str) === escape(UTF16ToUTF8(str))
UTF16ToUTF8(str)을 추론할 수 있습니다 === unescape( encodeURIComponent( str )
그런 다음 훨씬 더 간단한 base64 인코딩에 사용할 수 있습니다. btoa와 atob에는 호환성 문제가 있습니다.

function base64Encode(str) {
return btoa(unescape (encodeURIComponent(str)));
}

function base64Decode(str) {
return decodeURIComponent(escape(atob(str)));
}