이 기사에서는 JavaScript 코드를 작성할 때 따라야 할 14 가지 규칙에 대해 설명합니다. 다음과 같이 참조에 대해 공유하십시오.
1. 항상 'var'를 사용하십시오.
JavaScript에서 변수는 전 세계적으로 또는 기능적입니다. "var"키워드를 사용하는 것은 변수를 간결하고 명확하게 유지하는 열쇠입니다. 글로벌 또는 함수 수준 인 변수를 선언 할 때 "var"키워드는 항상 우선해야합니다. 다음 예는 그렇게하지 않는 잠재적 문제를 강조합니다.
var를 사용하지 않음으로써 발생하는 문제
var i = 0; // 이것은 양호합니다 - 글로벌 변수 함수 test () {for (i = 0; i <10; i ++) {alert ( "hello world!");}} test (); Alert (i); // 글로벌 변수 i는 이제 10입니다!가변 함수의 변수 i는 var를 사용하여 함수 수준 변수로 만들지 않기 때문에이 예에서는 전역 변수를 참조합니다. 항상 VAR을 사용하여 글로벌 변수를 선언하는 것은 많은 실습이지만 VAR을 사용하여 기능 전체 변수를 정의하는 것이 중요합니다. 다음 두 가지 방법은 기능적으로 동일합니다.
올바른 기능
함수 test () {var i = 0; for (i = 0; i <10; i ++) {alert ( "Hello World!");}}올바른 기능
함수 test () {for (var i = 0; i <10; i ++) {alert ( "Hello World!");}}2. 브라우저 감지 대신 기능 감지
일부 코드는 브라우저 버전을 발견하고 사용자가 사용하는 클라이언트를 기반으로 다른 동작을 수행하도록 작성되었습니다. 이것은 일반적으로 매우 나쁜 연습입니다. 더 나은 접근 방식은 기능 감지를 사용하고, 이전 브라우저가 지원하지 않는 고급 기능을 사용하기 전에이 기능이나 기능이 있는지 여부를 먼저 감지하는 것입니다. 이것은 개별적으로 브라우저 버전이 성능을 알고 있더라도 더 잘 나타납니다. 이 문제를 http://www.jibbering.com/faq/faq_notes/not_browser_detect.html에서 깊이 논의하는 기사를 찾을 수 있습니다.
예:
if (document.getElementById) {var element = document.getElementById ( 'myid');} else {alert ( '브라우저는이 스크립트를 실행하는 데 필요한 기능이 부족합니다!');}3. 사각형 브래킷 표기법을 사용하십시오
액세스는 실행에 의해 결정되거나 ""로 액세스 할 수없는 객체 속성을 포함합니다. 사인, 사각형 브래킷 표기법이 사용됩니다. 숙련 된 JavaScript 프로그래머가 아니라면 항상 사각형 괄호를 사용하는 것이 좋은 방법입니다.
객체의 속성은 두 가지 고정 된 방법으로 액세스됩니다. "."명사 및 "[]"사각형 브래킷 표기법 :
"." 표기법 :
myObject.property
"[]"스퀘어 브래킷 표기법 :
myObject [ "속성"]
"."를 사용하십시오. 부호, 속성 이름은 하드 코드이며 실행 중에 변경할 수 없습니다. "[]"사각형 브래킷을 사용하면 속성 이름은 속성 이름을 계산하는 것입니다. 문자열은 하드 코드, 변수 또는 문자열 값을 다시 호출하는 함수이어야합니다. 실행 중에 속성 이름이 생성되면 사각형 브래킷이 필요합니다. "value1", "value2"및 "value3"과 같은 속성이있는 경우 변수 i = 2를 사용하여 액세스하려면
이것은 실행할 수 있습니다 :
myObject [ "value"+i]
이것은 다음과 같을 수 없다 : 이것은 다음과 같 수 없다 : 이것은 다음과 같 수 없다 : 이것은 다음과 같다 : 이것은 다음과 같다 : 이것은 다음과 같다 : 이것은 다음과 같다.
myObject.Value+i
또한 일부 서버 측 환경 (PHP, Struts 등)에서 양식 양식은 [] 숫자로 첨부되어 양식이 서버 측의 배열로 처리되어야 함을 나타냅니다. 이런 식으로 "." []가 JavaScript 배열을 참조하기위한 구문이기 때문에 [] 표시가 포함 된 필드를 참조하는 서명. 따라서 [] 표기법이 필요합니다.
이것은 실행할 수 있습니다 :
formref.elements [ "name []"]
이것은 다음과 같을 수 없다 : 이것은 다음과 같 수 없다 : 이것은 다음과 같 수 없다 : 이것은 다음과 같다 : 이것은 다음과 같다 : 이것은 다음과 같다 : 이것은 다음과 같다.
formref.elements.name []
"[]"사각형 브래킷 표기법의 권장 사용은 필요할 때 항상 사용됨을 의미합니다. 그것은 그것을 사용해야 할 필요가 없을 때 개인적 선호와 습관입니다. 좋은 경험적 원칙은 ""를 사용하는 것입니다. 표준 객체 속성에 액세스하고 "[]"사각형 브래킷 표기법을 사용하여 페이지에서 정의 된 객체 속성에 액세스하는 표기법. 이런 식으로, 문서 [ "getElementById"] ()는 완벽하게 실현 가능합니다. 이 두 가지 표기법을 표준 객체 속성이고 어떤 속성 이름이 컨텍스트에 의해 정의되는지를 코드에서 명확하게 표시합니다.
document.forms [ "myformname"]. 요소 [ "myInput"]. 값
여기서 Forms는 문서의 표준 속성이며 MyFormName이 페이지에서 정의됩니다. 동시에 요소와 값 속성은 모두 사양에 의해 정의 된 표준 속성입니다. MyInput은 페이지에서 정의됩니다. 이 페이지는 사람들이 이해하기 쉽게 만드는 구문 (코드의 내용)이며 권장되는 관용구이지만 엄격한 원칙은 아닙니다.
4. '평가'를 피하십시오
javaScript에서 eval () 함수는 실행 중에 임의 코드를 실행하는 메소드입니다. 거의 모든 경우에 평가를 사용해서는 안됩니다. 페이지에 나타나면, 당신이하고있는 일에 더 좋은 방법이 있음을 의미합니다. 예를 들어, 평가는 일반적으로 사각형 브래킷 표기법을 사용하는 것을 모르는 프로그래머가 사용합니다.
원칙적으로, "Eval은 악 (Eval is Evil) (Eval is Devil). 경험이 풍부한 개발자이고 상황이 예외라는 것을 아는 것이 아니라면 사용하지 마십시오.
5. 형태와 형태 요소에 대한 참조를 올바르게합니다
모든 HTML 양식에는 이름 속성이 있어야합니다. XHTML 문서의 경우 이름 속성이 필요하지 않지만 양식 태그에는 해당 ID 속성이 있어야하며 Document.GetElementById ()로 참조해야합니다. Document.forms [0]과 같은 인덱싱 메소드를 참조 양식에 사용하는 것은 거의 모든 경우에 나쁜 관행입니다. 일부 브라우저는 양식을 사용 가능한 양식 속성으로 사용하여 문서에 명명 된 요소를 처리합니다. 이것은 신뢰할 수 없으며 사용해서는 안됩니다.
다음 예제는 제곱 브래킷과 올바른 오브젝트 참조 방법을 사용하여 양식 입력의 잘못된 참조를 방지하는 방법을 보여줍니다.
수정 참조 양식 입력 :
document.forms [ "formname"]. 요소 [ "inputname"]
나쁜 접근 :
document.formname.inputName
함수에서 두 가지 양식 요소를 참조하려면 양식 개체를 먼저 참조하여 변수에 저장하는 것이 좋습니다. 양식 참조를 해결하기 위해 중복 쿼리를 피할 수 있습니다.
var formelements = document.forms [ "mainform"]. elements; formelements [ "input1"]. value = "a"; formelements [ "input2"]. value = "b";
OnChange 또는 기타 유사한 이벤트 처리 방법을 사용하는 경우 입력 요소 자체를 항목을 통해 항상 함수에 참조하는 것이 좋습니다. 모든 입력 요소는 다음을 포함하는 양식 양식을 참조합니다.
<입력 유형 = "텍스트"이름 = "주소"onchange = "validate (this)">
function validate (input_obj) {// 참조 formvar이 요소 = input_obj.form; // 이제 하드 코드를 사용하지 않고 양식 자체를 참조 할 수 있습니다. if (form.elements [ "city"]. value == "") {alert ( "error");}}양식 요소를 참조하여 양식의 속성에 액세스하면이 페이지의 특정 이름을 가진 양식을 참조하는 하드 코드가 포함되지 않은 함수를 작성할 수 있습니다. 기능이 재사용 될 수 있기 때문에 이것은 매우 좋은 관행입니다.
'with'를 피하십시오
JavaScript의 선언은 범위의 프론트 엔드에 객체를 삽입하므로 객체에 따라 속성/변수에 대한 모든 참조가 먼저 해결됩니다. 이것은 종종 중복 참조를 피하기 위해 바로 가기로 사용됩니다.
사용의 예 :
with (document.forms [ "mainform"]. elements) {input1.value = "Junk"; input2.value = "Junk";}그러나 문제는 프로그래머가 입력 1 또는 입력 2가 실제로 폼 요소 배열의 속성으로 해결되었는지 확인하는 방법이 없다는 것입니다. 먼저이 이름 값으로 속성을 감지하고 찾을 수없는 경우이 범위를 계속 감지합니다 (아래쪽). 마지막으로, 입력 1과 input2를 글로벌 객체로 취급하려고 시도하며, 이는 오류로 끝납니다.
해결 방법은 참조를 줄이고이 참조를 해결하는 데 사용하는 객체를 만드는 것입니다.
참조 사용 :
var elements = document.forms [ "mainform"]. elements.input1.value = "Junk"; elements.input2.value = "Junk";
7. "javaScript : pseudo-protocol"대신 앵커에서 "onclick"을 사용하십시오.
<a> 태그에서 JavaScript 코드를 트리거하려면 JavaScript 대신 OnClick을 선택하십시오 : pseudo-protocol; OnClick을 사용하여 실행하는 JavaScript 코드는 ture 또는 false (또는 평가보다 표현을 참 또는 거짓으로 평가하는 것보다 표현식을 반환해야합니다. 거짓이면 HREF는 무시됩니다. 그렇기 때문에 "거짓 리턴"입니다. OnClick에서 처리 한 코드의 끝에 종종 포함됩니다.
올바른 구문 :
다음과 같이 코드를 복사하십시오. <a href = "// www.vevb.com"onclick = "dosomething (); return false;"> go </a>
이 경우 클릭하면 "dosomething ()"함수 (페이지 모서리에 정의 됨)가 호출됩니다. HREF는 JavaScript 지원 브라우저에서 액세스 할 수 없습니다. 문서 javaScript_Required.html은 브라우저에로드되어 필요한 JavaScript를 사용자가 활성화하지 못한 JavaScript를 상기시킬 수 있습니다. 일반적으로 사용자가 JavaScript 지원을 가능하게 할 때 가능한 한 가능한 한 링크에는 href = "#"만 포함됩니다. 그리고이 접근법은 권장되지 않습니다. 일반적으로 좋은 접근 방식이 있습니다. JavaScript를 사용하지 않고 지역으로 돌아 오는 페이지를 제공 할 수 있습니다.
때로는 많은 사람들이 상황에 따라 링크를 방문하기를 원합니다. 예를 들어, 사용자가 양식 페이지 중 하나를 남겨두고 먼저 아무것도 변경되지 않도록 확인하려는 경우. 이 경우 OnClick은 링크를 따라야하는지 쿼리를 반환하는 함수에 액세스합니다.
조건부 링크 액세스 :
<a href = "/"onclick = "return validate ();"> home </a>
function validate () {return prompt ( "이 페이지를 종료 하시겠습니까?");}이 경우 validate () 함수는 ture 또는 false 만 반환해야합니다. 사용자가 ture에 있으면 사용자는 홈페이지를 발행하거나 링크에 액세스하지 않으면 허용됩니다. 이 예제는 확인 (그 행동)이 "실제"또는 "취소"를 클릭하는 사용자가 전적으로 결정합니다.
다음은 "해야 할 것"의 몇 가지 예입니다. 페이지에 다음 코드가 표시되면 올바르지 않아 수정해야합니다.
해야 할 일 :
<a href = "javaScript : dosomething ()"> link </a> <a href = "// www.vevb.com/#"onclick = "dosomething ()"> link </a> <a href = "// www.vevb.com/#"onclick = "javascript : dosom <; href = "// www.vevb.com/#"onclick = "javaScript : dosomething (); return false;"> link </a>
8. 단수 '+'연산자를 사용하여 유형을 숫자로 바꿉니다.
JavaScript에서 "+"사인 연산자는 수학적 플러스 부호와 커넥터 역할을합니다. 양식 양식의 필드 값이 함께 추가 될 때 문제가 발생할 수 있습니다. 예를 들어, JavaScript는 약한 유형 언어이므로 Form 필드의 값은 배열로 처리되며, 함께 가져 가면 "+"는 수학적 플러스 부호가 아닌 커넥터로 취급됩니다.
문제의 예 :
<form name = "myform"action = "[url]"> <input type = "text"name = "val1"value = "1"> <input type = "text"name = "val2"value = "2"> </form>
함수 총 () {var theform = document.forms [ "myform"]; var total = theform.elements [ "val1"]. value + theform.elements [ "val2"]. value; alert (total); // 이것은 "12"가 팝업되지만 원하는 것은 3!}입니다.이 문제를 해결하기 위해 JavaScript는 이러한 값을 숫자로 처리하도록하려면 프롬프트가 필요합니다. "+"부호를 사용하여 배열을 숫자로 변환 할 수 있습니다. "+"표지판으로 변수 또는 표현식을 제시하면 숫자로 처리되며 수학 "+"가 성공적으로 적용될 수 있습니다.
수정 된 코드 :
function total () {var theform = document.forms [ "myform"]; var total = (+theform.elements [ "val1"]. value)+(+theform.elements [ "val2"]. // 이것은 3} 경고합니다.9. 문서를 피하십시오
Document.all은 Microsoft의 IE에 의해 소개되었으며 표준 JavaScript DOM 기능이 아닙니다. 대부분의 새로운 브라우저는 IT에 의존하는 잘못된 코드를 지원하기 위해 지원하지만 (및) 지원하지 않는 많은 브라우저가 있습니다.
다른 방법이 적용되지 않는 이유는 없으며 이전 IE 브라우저 (<5.0)가 지원이 필요하며 문서는 JavaScript에서 트레이드 오프로 사용됩니다. 다른 브라우저가 일반적으로이를 지원하기 때문에 IE 브라우저인지 여부를 감지하기 위해 문서를 사용할 필요가 없습니다.
Onlok Document.all은 마지막 선택입니다.
if (document.getElementById) {var obj = document.getElementById ( "myid");} else if (document.all) {var obj = document.all ( "myid");}문서를 사용하기위한 몇 가지 원칙.
다른 방법을 시도하십시오
그것이 마지막 선택 일 때
버전 5.0 이하의 IE 브라우저를 지원 해야하는 경우
항상 "if (document.all) {}"을 사용하여 지원되는지 확인하십시오.
10. 스크립트 코드 블록에서 HTML 주석을 사용하지 마십시오.
JavaScript (1995)의 예전에는 NetScape 1.0과 같은 일부 브라우저가 <cript> 태그를 지원하거나 인식하지 못했습니다. 따라서 JavaScript가 처음 출시되었을 때 이전 브라우저에 실제 코드가 텍스트로 표시되는 것을 방해하는 기술이있었습니다. 코드에서 HTML 주석을 사용하여 이러한 코드를 숨기는 "해킹"이 있습니다.
html 댓글 만들기 좋지 않습니다.
<script language = "javaScript"> <!-// code here //-> </script>
오늘날 일반적으로 사용되는 브라우저는 <cript> 태그를 무시하지 않습니다. 따라서 더 이상 JavaScript 소스 코드를 숨길 필요가 없습니다. 실제로 다음과 같은 이유로 도움이되지 않는 것으로 간주 될 수 있습니다.
XHTML 문서에서 소스 코드는 모든 브라우저에서 숨겨져 쓸모없는 (컨텐츠)로 렌더링됩니다.
HTML 의견은 허용되지 않으므로 감소 작업이 무효화됩니다.
11. 글로벌 네임 스페이스를 무차별 적으로 사용하지 마십시오
일반적으로 모든 변수와 함수는 거의 필요하지 않습니다. 글로벌 사용으로 인해 JavaScript 소스 파일 문서 충돌 및 코드 중단이 발생할 수 있습니다. 따라서 모범 사례는 글로벌 네임 스페이스 내에서 기능적 캡슐화를 채택하는 것입니다. 이 작업을 완료하는 방법에는 여러 가지가 있습니다.이 작업은 비교적 복잡합니다. 가장 쉬운 방법은 글로벌 객체를 만들고이 객체에 속성과 메소드를 할당하는 것입니다.
네임 스페이스 생성 :
var mylib = {}; // 글로벌 객체 conlaymyLib.value = 1; myLib.increment = function () {mylib.value ++;} mylib.show = function () {alert (mylib.value);} mylib.value = 6; mylib.increment (); mylib.show (); // 알림 7네임 스페이스는 클로저를 사용하여 만들 수 있으며 개인 회원 변수는 JavaScript로 위장 할 수도 있습니다.
12. 동기식 'Ajax'호출을 피하십시오
"ajax"요청을 사용하는 경우 비동기 모드를 선택하거나 동기 모드를 사용합니다. 브라우저 동작을 계속 실행할 수 있으면 비동기 모드는 요청을 백그라운드에 배치하고 동기 모드는 계속해서 요청이 완료 될 때까지 기다립니다.
동기화 모드에서 작성된 요청은 피해야합니다. 이 요청은 요청이 돌아올 때까지 사용자에게 브라우저를 비활성화합니다. 서버가 바쁘고 요청을 완료하는 데 약간의 시간이 걸리면 사용자의 브라우저 (또는 OS)는 요청이 시간이 초과 될 때까지 다른 작업을 수행 할 수 없습니다.
상황에 동기화 모드가 필요하다고 생각되면 가장 큰 가능성은 디자인을 다시 생각하는 데 시간이 필요하다는 것입니다. 드물게 동기 모드의 AJAX 요청이 실제로 필요합니다.
13. JSON 사용
데이터 구조를 일반 텍스트에 저장하거나 AJAX를 통해 데이터 구조를 보내거나 검색 해야하는 경우 가능한 한 XML 대신 JSON을 사용하십시오. JSON (JavaScript 객체 표기법)은보다 간결하고 효율적인 데이터 저장 형식이며 어떤 언어에도 의존하지 않으며 (언어 중립적입니다).
14. 올바른 <cript> 태그를 사용하십시오
<cript>에서 언어 속성의 사용은 선호되지 않습니다. 적절한 방법은 다음 JavaScript 코드 블록을 만드는 것입니다.
<script type = "text/javaScript"> // code </script>
추신 : 위의 코드는 형식화되지 않았으며 형식화 된 코드는 일반적으로 읽고 이해하기가 더 쉽습니다. 다음은 향후 개발에 사용할 수있는 몇 가지 온라인 형식 및 압축 도구입니다.
온라인 자바 스크립트 코드 미화 및 서식 도구 :
http://tools.vevb.com/code/js
자바 스크립트 코드 미화/압축/서식/암호화 도구 :
http://tools.vevb.com/code/jscompress
JSMIN Online JS 압축 도구 :
http://tools.vevb.com/code/jsmincompress
JSON 코드 온라인 서식/미화/압축/편집/변환 도구 :
http://tools.vevb.com/code/jsoncodeformat
JavaScript 관련 컨텐츠에 대한 자세한 내용은이 사이트의 주제를 확인하십시오. "JavaScript 스위칭 효과 및 기술 요약", "JavaScript 검색 알고리즘 기술 요약", "JavaScript 애니메이션 효과 및 기술 요약", "Javascript 오류 및 디버깅 기술의 요약" "JavaScript 기술의 요약" "" "요약" "", Malgority Sknickes의 요약 "". JavaScript Traversal 알고리즘 및 기술 "및"JavaScript 수학 연산 사용 요약 "
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.