JavaScript_javascript 스킬의 대체 작성 방법에 대한 자세한 설명

JavaScript는 인터넷용 스크립트 언어입니다!

JavaScript는 수백만 개의 웹페이지에서 디자인 개선, 양식 유효성 검사, 브라우저 감지, 쿠키 생성 등을 위해 사용됩니다.

JavaScript는 인터넷에서 가장 인기 있는 스크립트 언어입니다.

자바스크립트는 사용하기 쉽습니다! 당신은 그것을 좋아할 것입니다!

JavaScript는 유연한 구문을 갖춘 해석된 스크립트 언어로, 다양한 사람들이 동일한 함수를 다양한 방식으로 작성할 수 있습니다. 당신이 단순하지 않다는 것을 다른 사람들이 한눈에 알 수 있도록 JavaScript 코드를 구성하는 방법은 무엇입니까? 당신의 코드를 읽고 나서 다른 사람들이 "아직도 이렇게 쓸 수 있구나"라고 외칠 것을 정말 기대하시나요?

익명 함수를 작성하는 N가지 방법

JS의 익명 함수는 함수 이름을 선언하지 않고 자체 실행되는 함수입니다.

(function(){})();

사실 프로젝트에서는 앞에 ";"를 추가하는 경우가 많습니다.

;function(){}();

JS의 구문상 세미콜론을 생략할 수 있지만 이 메커니즘으로 인해 예상치 못한 오류가 발생할 수도 있습니다. 코드가 온라인 상태가 된 후 하나의 파일로 병합하고 압축하여 발생하는 구문 오류를 방지하려면 ";"을 추가하면 알 수 없는 오류를 방지할 수 있습니다.

그러나 때로는 다른 사람의 라이브러리나 플러그인에서 다음과 같이 작성된 익명 함수를 볼 수 있습니다.

+function(){}();

여기서 "+"는 연산자인데, 연산자의 우선순위가 매우 높기 때문에 오른쪽의 함수 선언과 괄호(실제로는 함수를 쓰는 방식)가 바로 실행됩니다. 실제로 "+" 기호가 앞에 올 수 있을 뿐만 아니라 "-", "!", "~", "++" 등의 연산자도 사용할 수 있습니다. 이는 단지 확장된 소개일 뿐입니다. 구체적인 작성 방법은 팀의 통일된 표준에 따라 다릅니다.

Math.ceil() 및 Math.floor 반올림 포기

아마도 다른 코드에서 ~~ 및 |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)

한 단계만으로 다이어트에 성공하세요. || 및 &&에 사용된 쉼표 연산자는 이해하기 쉽지 않습니다. 이를 삼항 연산자로 대체할 수 있습니다.

(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(Asynchronous Module Definition) 모듈 사양을 선언하면 다른 사람들이 AMD 사양을 통해 당신의 모듈을 직접 로드할 수 있습니다. 우아하게 반대하세요. jQueryUI가 어떻게 작성되는지 살펴보겠습니다.

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

코드를 브라우저 측에서 스크립트 종속성 로드에 더 적합하게 만들려면 AMD 모듈 구조를 변경하세요. 다른 사람들이 코드를 볼 때 귀하가 전문 개발자임을 알 수 있도록 이 형식으로 코드를 작성하세요.

최적 방식 상속

JavaScript의 유연성에는 크고 작은 10가지 이상의 상속 방법이 있습니다. 각 작성 방법에는 서로 다른 장점과 단점이 있습니다. 각 방법을 하나씩 나열하지는 않습니다. 일반적으로 사용되는 상속 방법을 예로 들어 보겠습니다.

function Parent() {}
function Child() {}
Child.prototype = Parent.prototype
Child.prototype.constructor = Child ；

这种这种方法实际上是将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的另类写法的相关介绍，希望对大家有所帮助！