최고의 JS 코드 작성을 위한 14가지 팁_javascript 팁
- WBOY원래의
- 2016-05-16 18:12:25797검색
프로그래밍 코드를 작성할 때 개발자마다 의견이 다를 수 있습니다. 하지만 항상 참고하는 것이 좋습니다. 여기 Javascript Toolbox에서 제공하는 최고의 JS 코딩 팁 14가지가 있습니다.
1. 항상 var를 사용하세요
JavaScript에서 변수는 전역 범위이거나 함수 범위입니다. var 키워드를 사용하는 것이 변수를 간결하고 명확하게 유지하는 데 중요합니다. 전역 또는 함수 수준 변수를 선언할 때는 항상 var 키워드를 앞에 추가하세요. 다음 예에서는 이를 수행하지 않을 때 발생하는 잠재적인 문제를 강조합니다.
Var를 사용하지 않아 발생하는 문제
var i=0; // This is good - creates a global variable
function test() {
for (i=0; i<10; i++) {
alert("Hello World!");
}
}
test();
alert(i); // The global variable i is now 10!
function 변수의 i 변수는 var를 사용하여 함수 수준 변수로 만들지 않기 때문에, 이 예에서는 전역 변수를 참조합니다. 전역 변수를 선언할 때 항상 var를 사용하는 것이 일반적인 관행이지만, 함수 범위 변수를 정의하려면 var를 사용하는 것이 중요합니다. 다음 두 가지 방법은 기능적으로 동일합니다.
올바른 기능
function test() {
var i=0;
for (i=0; i10; i++) {
alert("Hello World!");
}
}
올바른 기능
function test() {
for (var i=0; i10; i++) {
alert("Hello World!");
}
}
2. 브라우저 감지 대신 기능 감지
브라우저 버전을 검색하고 사용자가 사용 중인 클라이언트에 따라 다양한 작업을 수행하도록 일부 코드가 작성되었습니다. 이는 일반적으로 매우 나쁜 습관입니다. 더 나은 접근 방식은 기능 감지를 사용하는 것입니다. 이전 브라우저에서 지원하지 않을 수 있는 고급 기능을 사용하기 전에 먼저 (브라우저에) 이 기능이나 기능이 있는지 확인한 후 사용하십시오. 해당 기능을 알고 있더라도 브라우저 버전만 감지하는 것이 좋습니다. 여기에서 이 문제를 다룬 심층 기사를 찾을 수 있습니다.
예:
if (document.getElementById) {
var element = document.getElementById('MyId');
}
else {
alert('Your browser lacks the capabilities required to run this script!');
}
3. 대괄호 표기를 사용하세요
실행 시 액세스가 결정되거나 기호를 사용하여 액세스할 수 없는 개체 속성을 포함하는 경우 대괄호 표기법을 사용합니다. 숙련된 Javascript 프로그래머가 아닌 경우 항상 대괄호를 사용하는 것이 좋습니다.
객체의 속성은 두 가지 고정된 방법, 즉 . 표기법과 [ ] 대괄호 표기법으로 액세스됩니다.
.기보
MyObject.property
[ ] 대괄호 표기
MyObject["속성"]
. 기호를 사용하세요. 속성 이름은 하드 코드이므로 실행 중에 변경할 수 없습니다. [ ] 대괄호를 사용하면 속성 이름은 속성 이름에서 계산된 문자열입니다. 문자열은 하드 코드일 수도 있고, 변수일 수도 있으며, 문자열 값을 다시 호출하는 함수일 수도 있습니다. 실행 중에 속성 이름이 생성되는 경우 value1″, value2″, value3″과 같은 속성이 있고 변수 i=2를 사용하여
에 액세스하려면 대괄호가 필요합니다.이것은 작동합니다:
MyObject["값" i]
이는 허용되지 않습니다:
MyObject.value i
그리고 일부 서버 측 환경(PHP, Struts 등)에서는 Form 양식에 [ ] 숫자가 추가되어 Form 양식이 서버 측에서 배열로 처리되어야 함을 나타냅니다. 이 경우 [ ] 기호가 포함된 필드를 참조하기 위해 . 기호를 사용하면 작동하지 않습니다. 왜냐하면 [ ]는 Javascript 배열을 참조하기 위한 구문이기 때문입니다. 따라서 [ ] 표기가 필요합니다:
이것은 작동합니다:
formref.elements["이름[]"]
이것은 허용되지 않습니다:
formref.elements.name[]
[ ] 대괄호 표기법의 권장 사용은 (분명히) 필요할 때 항상 사용된다는 의미입니다. 반드시 사용해야 할 필요가 없는 경우에는 개인의 취향과 관습에 따라 결정됩니다. 경험에 따르면 표준 개체 속성에 액세스하려면 . 표기법을 사용하고 페이지 정의 개체 속성에 액세스하려면 [ ] 대괄호 표기법을 사용하는 것이 좋습니다. 따라서 document["getElementById"]()는 [ ] 대괄호 표기법을 완벽하게 유효하게 사용하지만 getElementById는 DOM 사양에 정의된 표준 문서 객체 속성이기 때문에 구문상으로는 document.getElementById()가 선호됩니다. 이 두 표기법을 혼합하면 코드에서 표준 객체 속성과 컨텍스트에 의해 정의되는 속성 이름이 명확해집니다.
document.forms["myformname"].elements["myinput"].value
여기서 양식은 문서의 표준 속성이며 양식 이름 myformname은 페이지에 의해 정의됩니다. 동시에 요소 및 값 속성은 사양에 의해 정의된 표준 속성입니다. 그리고 myinput은 페이지에 의해 정의됩니다. 이 페이지의 구문은 이해하기 매우 쉽습니다(코드 내용). 따라야 할 권장 관용어이지만 엄격한 원칙은 아닙니다.
4. 평가를 피하세요
Javascript에서 eval() 함수는 실행 중에 임의의 코드를 실행하는 메서드입니다. 거의 모든 경우에 eval을 사용하면 안 됩니다. 그것이 귀하의 페이지에 있다면 귀하가 하는 일을 수행하는 더 좋은 방법이 있습니다. 예를 들어, eval은 대괄호 표기법을 사용하는 방법을 모르는 프로그래머가 자주 사용합니다.
원칙적으로 Eval은 악마입니다(Eval은 악마입니다). 숙련된 개발자가 아니고 자신의 상황이 예외라는 것을 알고 있지 않다면 사용하지 마세요.
5. 양식 및 양식 요소를 올바르게 참조
모든 HTML 양식에는 이름 속성이 있어야 합니다. XHTML 문서의 경우 name 속성은 필수가 아니지만 Form 태그에는 해당 id 속성이 있어야 하며 document.getElementById()를 사용하여 참조해야 합니다. document.forms[0]과 같은 인덱스 방법을 사용하여 양식을 참조하는 것은 거의 모든 경우에 나쁜 습관입니다. 일부 브라우저는 form이라는 이름의 문서 요소를 사용 가능한 양식 속성으로 처리합니다. 이는 신뢰할 수 없으므로 사용해서는 안 됩니다.
다음 예에서는 대괄호를 사용하여 양식 입력에 대한 잘못된 참조를 방지하는 방법과 올바른 개체 참조 방법을 보여줍니다.
올바른 인용 양식 입력:
document.forms["formname"].elements["inputname"]
나쁜 접근 방식:
문서.양식이름.입력이름
함수에서 두 개의 양식 요소를 참조하려는 경우 더 나은 접근 방식은 먼저 양식 개체를 참조하고 이를 변수에 저장하는 것입니다. 이렇게 하면 양식에 대한 참조를 확인하기 위해 반복되는 쿼리를 피할 수 있습니다.
var formElements = document.forms["mainForm"].elements;
formElements["input1"].value="a";
formElements["input2"].value="b";
onChange 또는 기타 유사한 이벤트 처리 방법을 사용할 때 항상 함수에 대한 참조를 통해 입력 요소 자체를 참조하는 것이 좋습니다. 모든 입력 요소는 포함된 양식에 대한 참조를 전달합니다.
입력 유형="텍스트" 이름="주소" onChange="확인(this)"
함수 유효성 검사(input_obj) {
//이 요소가 포함된 양식 참조
var theform = input_obj.form;
// 이제 하드코드를 사용하지 않고도 양식 자체를 참조할 수 있습니다
if (theform.elements["city"].value=="") {
경고("오류");
}
}
양식 요소를 참조하여 양식 속성에 액세스하려면 이 페이지에서 특정 이름을 가진 모든 양식을 참조하는 하드 코드가 포함되지 않은 함수를 작성할 수 있습니다. 함수를 재사용할 수 있으므로 이는 매우 좋은 방법입니다.
6 피하세요
Javascript의 with 문은 범위 앞에 개체를 삽입하므로 모든 속성/변수 참조는 먼저 개체에 대해 확인됩니다. 이는 반복 참조를 피하기 위한 지름길로 자주 사용됩니다.
사용 예:
(document.forms["mainForm"].elements) {
input1.value = "정크";
input2.value = "정크";
}
그러나 문제는 프로그래머가 input1 또는 input2가 실제로 Form 요소 배열의 속성으로 처리되었는지 확인할 방법이 없다는 것입니다. 먼저 해당 이름으로 속성을 확인하고, 속성이 없으면 범위를 계속(아래로) 진행합니다. 마지막으로 input1과 input2를 전역 개체에서 하나의 전역 개체로 처리하려고 시도하는데 오류가 발생합니다.
해결 방법은 참조를 생성하여 참조 개체를 줄이고 이를 사용하여 이러한 참조를 해결하는 것입니다.
참조 사용:
var 요소 = document.forms["mainForm"].elements;
elements.input1.value = "정크";
elements.input2.value = "정크";
7. 앵커에 javascript 대신 onclick 사용: 의사 프로토콜
태그에서 자바스크립트 코드를 실행하려면 자바스크립트 대신 onclick을 선택하세요. 의사 프로토콜; onclick을 사용하여 실행되는 자바스크립트 코드는 true 또는 false를 반환해야 합니다(또는 evalues가 true 또는 false가 아닌 표현식을 반환해야 함). 내가 이해하는 방법은 다음과 같습니다. 태그 자체를 반환하려면 true 또는 false보다 우선 순위가 높은 표현식입니다. true가 반환되면 앵커의 href가 false인 경우 일반 링크로 처리됩니다. 반환되면 href가 무시됩니다. 이것이 바로 onclick이 처리하는 코드 끝에 return false가 포함되는 이유입니다.
올바른 구문:
a href="javascript_required.html"go/a
이 예에서는 클릭하면 doSomething() 함수(페이지 모서리에 정의됨)가 호출됩니다. JavaScript가 활성화된 브라우저에서는 href에 액세스할 수 없습니다. javascript_required.html 문서는 Javascript가 필요하지만 사용자가 이를 활성화하지 않았음을 경고할 수 있는 브라우저에만 로드됩니다. 일반적으로 사용자가 Javascript 지원을 켰는지 확인하면 작업을 단순하게 유지하기 위해 링크에 href=#만 포함됩니다. 이 관행은 권장되지 않습니다. 일반적으로 자바스크립트를 활성화하지 않고 로컬 반환 페이지를 제공하는 것이 좋습니다.
때때로 많은 사람들이 사례별로 링크에 액세스하고 싶어합니다. 예를 들어, 사용자가 양식 페이지 중 하나를 떠나 변경된 사항이 없는지 먼저 확인하려는 경우입니다. 이 경우 onclick은 링크를 따라야 하는지 여부를 묻는 쿼리를 반환하는 함수에 액세스합니다.
조건부 링크 액세스:
a href="/"홈/a
함수 유효성 검사() {
return 프롬프트("이 페이지를 종료하시겠습니까?");
}
在这个实例中，validate() 函数必须只返回 ture 或 false。ture 的时候用户将被允许问题 home 页面，或 false 的时候链接不被访问。这个例子提示确认（其行为），以访问 ture 或 false，这完全由用户点击确实或者取消决定。
下面是一些不应该的例子。如果你在自己的页面中看到下面这样的代码，这是不正确的，需要被修改：
什么是不应该做的：
a href="javascript:doSomething()"link/a
a href="#"link/a
a href="#"link/a
a href="#"link/a
8. 使用一元 + 号运算符使类型转向Number
在Javascript中，+号运算符同时充当数学加号和连接符。这会在form表单的域值相加时出现问题，例如，因为Javascript是 一个弱类型语言，form 域的值将会被当作数组来处理，而你把它们+一起的时候，+将被当成连接符，而非数学加号。
有问题的例子:
form name="myform" action="[url]"
input type="text" name="val1" value="1"
input type="text" name="val2" value="2"
/form
function total() {
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"].value);
alert(total); // This will alert 3
}
9. 避免 document.all
document.all 是由Microsoft 的 IE 所引进的，并不是一个标准的 Javascript DOM 特性。尽管大多数新的浏览器支持它以支持依赖于它的糟糕代码，（而）还有很多浏览器是不支持的。
并没有理由其他方法都不适用，而一个老的IE浏览器（5.0）需要支持，而在Javascript中使用 document.all 作为一个折衷方法。 你并不需要使用 document.all 来检测其是不是IE浏览器，因为其他浏览器现在一般都支持。
只把 document.all 当做最后的选择：
if (document.getElementById) {
var obj = document.getElementById("myId");
}
else if (document.all) {
var obj = document.all("myId");
}
一些使用 document.all 的原则：
•同尝试其他方法
•当其作为最后的选择
•当需要支持 5.0 版本以下的 IE 浏览器
•总是使用 if (document.all) { } 来查看是否支持.
10. 不要在脚本代码块中使用HTML注释
在 Javascript 的旧日子（1995）里，诸如 Netscape 1.0 的一些浏览器并不支持或认识 script 标签。所以，当 Javascript 第一次被发布，需要有一个技术来让实些代码不被当做文本显示于旧版浏览器上。有一个hack 是在代码中使用 HTML 注释来隐藏这些代码。
使 HTML 注释并不好：
script language="javascript" !-- // code here //-- /script
在今天，没有任何一个常用的浏览器会忽略掉 script 标签。因此，再没必要隐藏 Javascript 源代码。事实上，它还可以因为下面的理由，被认为是无益的：
•在 XHTML 文档中，源代码将向所有浏览器隐藏并被渲染成无用的（内容）；
•– 在 HTML 注释并不允许 ，这个会让任何递减操作将失效。
11. 避免乱用全局命名空间
一般很少需要全部变量和函数。全局使用将可能导致 Javascript 源文件文档冲突，和代码中止。因此，一个好的做法是在一个全局命名空间内采用函数性的封装。有多个方法可以完成这个任务，有此相对比较复杂。最简单的方法 是创建一个全局对象，并把属性和方法指派给这个对象：
创建一个命名空间：
var MyLib = {}; // global Object cointainer
MyLib.value = 1;
MyLib.increment = function() { MyLib.value++; }
MyLib.show = function() { alert(MyLib.value); }
MyLib.value=6;
MyLib.increment();
MyLib.show(); // alerts 7
命名空间也可以使用 Closures（闭包?） 来创建，并且 Private Member Variables （私有变量?） 也可以伪装于 Javascript中。
12. 避免同步的 ajax 调用
当使用Ajax请求时，你要么选择异步模式，要么使用同步模式。当浏览器行为可以继续执行，异步模式将请求放在后台执行，同步模式则会等待请求完成后才继续。
应该避免同步模式做出的请求。这些请求将会对用户禁用浏览器，直至请求返回。一旦服务器忙，并需要一段时间来完成请求，用户的浏览器（或者 OS）将不能做任何其他的事，直至请求超时。
如果你觉得自己的情况需要同步模式，最大的可能是你需要时间来重新想一下你的设计。很少（如果有的话）实际上需要同步模式的 Ajax 请求。
13. 使用 JSON
当需要将数据结构存储成纯文本，或者通过 Ajax 发送/取回数据结构，尽可能使用 JSON 代替 XML。JSON (JavaScript Object Notation) 是一个更简洁有效的数据存储格式，并且不依赖任何语言（and is a language-neutral）。
14. 使用正确的 script 标签
不造成在 script 中的使用LANGUAGE 属性。一个合适的方式是创建如下的 Javascript 代码块：
<script type="text/javascript"> // code here </script>