자바스크립트 코드도 아름다운 구현 방법이 될 수 있습니다_자바스크립트 기술

1. 코드를 단순화하세요
짧은 작성 방법을 사용하면 입력되는 문자 수는 물론 파일 크기도 줄어듭니다. 간단한 방식으로 작성된 대부분의 코드는 실행 효율성이 약간 향상됩니다.
1.1 일반 객체 정의 단순화: var obj = new Object(); 대신 var obj = {}; 사용
var arr = new Array(); if 단순화 문 삼항 연산자는
var Score = 60, grade
if (score < 60) {
grade = "failed"와 같이 할당 및 값 연산만 포함하는 if 문을 효과적으로 단순화할 수 있습니다. ;
} else {
등급 = “합격”;
은 다음과 같이 단순화할 수 있습니다.
var 점수 = 60; var grade = “실패” : "Pass";
삼항 연산자도 중첩을 지원하지만 중첩 수준이 너무 높으면 프로그램의 가독성에 영향을 미치므로 이 측면을 더 고려해야 합니다.
1.3 JSON 사용 JSON은 경량 데이터 형식으로 매우 간단한 구조 정의에 처음으로 반영됩니다.
var obj = {};
obj.p1 = 'a';
obj.p2 = 'b';
obj.p3 = 'c'

var obj = {
p1 : 'a',
p2 : 'b',
p3 : 'c'

}
2. 🎜>
인터넷에는 효율성 최적화 관련 기사가 많이 돌아다니고 있고, 좀 더 전문적인 Javascript 책에서도 이에 대해 많이 이야기하고 있기 때문에 여기서는 거의 언급되지 않는 몇 가지만 소개합니다. 2.1 루프 본문 단순화 루프의 효율성은 루프 본문에 따라 크게 결정됩니다. 이에 비해 for 또는 while 사용의 차이는 너무 작습니다. 특정 요소 배치에 이벤트를 추가하는 기능을 가진 다음 코드를 생각해 보세요.



코드 복사

코드는 다음과 같습니다. function addEvent(elems, eventName, handler) { for (var i = 0, len = elems.length; i < len; i ) {

if (window. attachmentEvent) {

elems[i].attachEvent("on" eventName, handler);
} else if (window.addEventListener) {
elems[i].addEventListener(eventName, handler, false);
}
}
}


루프가 실행될 때마다 window 객체의 attachmentEvent 또는 addEventListener가 존재하는지 판단하게 됩니다. 한 번만 판단하며, ""on" eventName" 문자열 연결도 반복적으로 수행됩니다. 최적화는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.function addEvent( elems, eventName, handler) { var i = -1, len = elems.length;

if (window.attachEvent) {

eventName = “on” eventName; len) {
elems[i].attachEvent(eventName, handler)
}
} else if (window.addEventListener) {
while ( i < len) {
elems[ i].addEventListener(eventName , handler, false);
}
}
}


2.2 Javascript에서 작업을 수행할 때 맞춤 함수 대신 기본 함수를 사용해 보세요. 내장 유형 변수를 사용하려면 먼저 이 작업에 대한 기본 메서드가 있는지 확인해야 합니다.
배열의 복사본을 만들려면 어떻게 하시겠습니까? 배열 요소를 반복하여 하나씩 다른 배열에 할당하는 것이 유일한 방법인 것 같습니다. 실제로 네이티브 Array.prototype.slice는 복사 목적을 달성할 수 있습니다. 이 메서드는 원래 배열에 영향을 주지 않고 배열에서 선택한 요소를 반환합니다. 매개변수가 비어 있으면 모든 요소가 반환됩니다.
Array.prototype.slice는 배열은 아니지만

코드 복사

코드는 다음과 같습니다. 인수: 인수: function test() { alert(Array.prototype.slice.call(arguments)); >}

test(1, 2, 3); // "1,2,3" 출력

Firefox에서는 HtmlCollection에서도 작동할 수 있습니다. 불행히도 IE에서는 작동하지 않습니다.
또 다른 예는 배열 정렬입니다. 일반적인 상황에서는 다른 정렬 알고리즘을 작성할 필요가 없으며 기본 Array.prototype.sort만으로 충분합니다. 정렬 방법에는 비교되는 두 요소 중 어느 것이 앞에 있고 어느 것이 뒤에 있는지를 결정하는 함수인 매개변수가 하나만 있습니다. 기본값은 문자 순서로 정렬하는 것입니다. 예를 들어 11이 2보다 먼저 순위가 매겨집니다. 숫자 크기별로 정렬하려면 다음과 같이 작성할 수 있습니다.

코드 복사


코드는 다음과 같습니다.

var arr = [11, 2, 0, 12, 33]; arr.sort( function(a, b) { return a - b; }

);

객체의 속성별로 정렬할 수도 있습니다.




코드 복사

코드는 다음과 같습니다. 다음:

var arr = [
{ id : 11 },
{ id : 0 },
{ id : 22 }
]; >function(a, b) {
return a.id - b.id;
}
);


2.3 배열 중복 제거 Array 유형은 중복 제거 방법을 제공하지 않습니다. 배열에서 중복 요소를 제거하려면 다음과 같은 방법을 직접 생각해야 합니다.

코드 복사 코드는 다음과 같습니다. 다음:

function Unique(arr) {

var result = [], isRepeated
for (var i = 0, len = arr.length; i < len; i ) {
isRepeated = false;
for (var j = 0, len = result.length; j < len; j ) {
if (arr[i] == result[j]) {
isRepeated = true ;
break;
}
}
if (!isRepeated) {
result.push(arr[i])
}
}
return result;
}


일반적인 아이디어는 배열 요소를 다른 배열로 하나씩 전송하는 것입니다. 요소가 중복되는지 확인하세요. , 직접 폐기하십시오. 중첩 루프에서 볼 수 있듯이 이 방법은 매우 비효율적입니다. 해시테이블 구조를 사용하여 기존 요소를 기록하면 내부 루프를 피할 수 있습니다. Javascript에서 해시 테이블을 구현하는 것은 매우 간단합니다.

코드 복사 코드는 다음과 같습니다. 다음:

function Unique(arr) {

var result = [], hash = {}
for (var i = 0, elem; (elem = arr[i] ) != null; i ) {
if (!hash[elem]) {
result.push(elem)
hash[elem] = true; >return result;
}



3. 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다.

개발 중이든 이후든 코드를 명확하게 유지하고 읽기 쉬우면 코드를 더 빠르고 정확하게 수정하는 데 도움이 됩니다.

3.1 HTML 문자열 연결 프론트엔드 개발을 하는 친구들은 이런 문제로 인해 어려움을 겪은 적이 있을 거라 생각합니다. HTML을 연결할 때 혐오스러운 작은따옴표와 큰따옴표 때문에 어지러워집니다. 예:
element.innerHTML = '' text ''; 다음은 문자열 형식 지정 함수입니다.



코드 복사

코드는 다음과 같습니다. String.format = function(str) { var args = 인수, re = new RegExp("%([1-" args.length " ]) ", "g"); return String(str).replace(

re,

function($1, $2) {
return args[$2];
}
)
};


호출 방법은 매우 간단합니다.

코드 복사

코드는 다음과 같습니다.element.innerHTML = String.format('%3', url, msg, text)

는 %n을 n번째 매개변수입니다. 이렇게 하면 훨씬 더 명확해질 것입니다.

3.2 프로그램에 대한 구성 구성 개체를 만듭니다. Java 또는 C# 프로그램을 작성할 때 일반적으로 XML에서 프로그램의 구성 정보를 읽습니다. Javascript에서는 구성 정보를 위해 XML을 사용하는 것이 비용 효율적이지 않습니다. 한편으로는 추가 XML 파일을 요청하거나 XML 문자열을 XML 객체로 변환해야 합니다. 더 복잡하고 길어졌습니다. 경량 JSON이 최선의 선택입니다.
프로그램의 상수는 Ajax 요청의 URL, 특정 작업의 프롬프트 등과 같은 Config 구성 개체에 배치되어야 합니다. 예:

코드 복사

코드는 다음과 같습니다. var Config = { ajaxUrl : "test.jsp", successTips : "요청 완료"

}

구성 수가 많은 경우 구성 유형에 따라 레이어를 하나 더 중첩할 수 있습니다. 예:

코드 복사

코드는 다음과 같습니다. var Config = { url : { src1 : “test1 .jsp”,

src2 : “test2.jsp”,

.
.
},
팁: {
src1Suc: "요청 1 완료",
src2Suc: "요청 2 완료",
.
}
}

구성은 보기 및 수정이 쉽도록 프로그램 앞에 배치되어야 합니다.