개발자(WEB 프런트엔드 JavaScript 개발)로서 비표준 개발은 향후 코드 유지 관리를 어렵게 할 뿐만 아니라 팀 협력에도 도움이 되지 않으며 일반적으로 코드 보안 및 실행에도 문제를 가져옵니다. 능률. 내 개발 작업에서 나는 표준에 따라 개발하지 않은 동료들과 함께 일했습니다. 그와 함께 일하는 것은 "즐거운" 일이라고 말할 수 없습니다. 이제 이 글을 쓰는 목적은 여러분과 약간의 경험을 공유하는 것뿐만 아니라 미래의 파트너에게 참고 자료가 되기를 바라는 것입니다. 물론 제가 말하는 내용이 비과학적이라면 각계각층의 선배님들께서 조언을 해주시기를 바랍니다. 다양한 표준 요구 사항은 아래 하위 항목에 나열되어 있습니다. 이러한 요구 사항은 모두 동료의 코딩 문제에 대해 제안된 것입니다. 많은 업계에서 동의한 다른 표준은 다시 언급되지 않을 수 있습니다.
1. 코드 압축 후 오류가 없는지 확인
대형 JavaScript 프로젝트의 경우 일반적으로 제품이 출시되면 프로젝트에 포함된 모든 JavaScript 파일이 압축됩니다. Google Closure Compiler Service를 사용하여 코드를 압축하세요. jQuery의 새 버전은 코드를 압축하기 위해 이 도구로 전환했습니다. 이렇게 하면 일반적으로 개발 중에 작성된 주석이 제거되고 모든 공백과 줄바꿈이 제거되며 원래의 긴 변수 이름도 짧은 이름으로 대체됩니다. 변수 이름은 파일 다운로드 속도를 높이는 동시에 웹 사이트 액세스로 인해 발생하는 추가 데이터 트래픽을 줄이는 데 사용됩니다. 적어도 압축된 코드는 복원하더라도 여전히 좋지 않습니다. 코드를 올바르게 압축하려면 일반적으로 명령문이 정상적으로 세미콜론으로 끝나야 하고 중괄호도 엄격하게 끝나야 합니다. 특정 요구 사항도 압축 도구의 요구 사항에 따라 달라집니다. 그래서 처음에 규격대로 하지 않으면 압축이 잘못 된 후에 다시 돌아가서 오류를 찾는 것은 시간낭비일 것입니다.
2. 코드가 특정 IDE의 자동 서식 지정 기능을 전달할 수 있는지 확인
일반적으로 Aptana Studio와 같은 보다 완전한 개발 도구에는 코드 "자동 서식 지정" 기능이 있습니다. 함수 도움말 줄 바꿈, 들여쓰기 및 공백과 같은 통일된 코드 배열을 달성하려면 왼쪽 중괄호 {가 새 줄을 시작해야 하는지 여부와 같이 원하는 형식 지정 표준을 설정할 수 있습니다. 이 요구 사항을 달성하는 목적은 개발 팀 구성원이 코드 복사본을 가져와 IDE를 사용하여 읽기에 좋아하거나 익숙한 스타일로 자동 형식을 지정할 수 있도록 하는 것입니다. 동료는 다른 모듈의 개발 프로세스에도 사용해야 하는 공통 메소드를 작성했기 때문에 귀하의 코드를 읽어야 합니다. 달성할 수 없는 간단한 API 문서입니다.
3. 표준 문서 주석 사용
이 요구 사항은 가장 기본적인 것으로 간주되며, 이는 메서드 호출 지점에서 메서드의 특정 매개 변수 전달 프롬프트를 보는 데 도움이 되며 생성될 수도 있습니다. 지원 문서 도구 사용 html 또는 다른 형식의 개발 문서는 다른 팀 구성원이 읽을 수 있습니다. jsdoc-toolkit을 사용해 볼 수 있습니다. 자동으로 생성된 API가 facebook.com 애플리케이션과 같은 개방형 플랫폼에서 제공되는 경우 문서는 전 세계 모든 개발자에게 공개됩니다. 또한, 완전한 주석을 작성하면 팀 구성원이 매개변수 설명을 통해 귀하가 작성한 메소드의 구현 세부사항을 쉽게 알 수 있습니다. 물론, 향후 코드 유지 관리도 용이하게 해주기 때문에 프로젝트 규모가 아무리 크더라도 오랜만에 돌아가서 무언가를 변경하면 그 당시 작성한 코드가 무엇인지 잊지 않을 것입니다.
4. 표준화되고 의미 있는 변수 이름을 사용하세요.
표준적이고 의미 있는 변수 이름을 사용하면 코드의 가독성을 높일 수 있습니다. 다른 사람들이 이해하기 쉽습니다. 사실 대규모 프로젝트를 개발할 때 누구나 상대적으로 많은 양의 코드를 작성하게 되는데, 표준 명명을 사용하면 나중에 시스템을 업그레이드하거나 새로운 기능을 추가할 때 코드를 다시 볼 때 명확하고 이해하기 쉽습니다. 앞으로 추가되면 코드를 수정하는 것이 훨씬 쉬워질 것입니다. 원래 작성한 코드를 지금은 이해할 수 없다는 사실을 결국 알게 된다면 그것은 큰 농담이 될 것입니다.
물론 다음과 같이 의미 있는 변수 이름과 표준 이름 지정을 사용하십시오. var me = this는 var self = this만큼 좋지 않을 수 있습니다. 왜냐하면 self는 Python의 키워드이고 self는 Python의 키워드이기 때문입니다. Python 이것은 일반 언어에서의 사용법입니다. 다음 예를 다시 살펴보세요. s를 추가하는 것이 추가하지 않는 것보다 확실히 더 과학적입니다. 이렇게 하면 변수 이름이 복수 숫자, 어쩌면 배열 등을 저장한다는 것을 알 수 있습니다.
var li = document.getElementsByTagName('li') var lis = document.getElementsByTagName('li')
5. 편향된 구문을 사용하지 마세요
동적 스크립팅 언어로서 JavaScript의 유연성은 장점이자 단점입니다. 우리 모두 알고 있듯이 동적 언어 개발자는 수준에 따라 요구 사항이 다릅니다. 동일한 기능을 구현하더라도 코드 사양이나 구문에 큰 차이가 있습니다. 무슨 일이 있어도 모두가 해야 할 일은 코딩을 표준화하고 실수를 피하는 것이지, 단순한 문제를 복잡하게 만들지 않고, 코드 가독성 원칙을 위반하지 않는 것입니다.
예를 들어, typeof(b) == 'string' && Alert(b)는 다음과 같이 if (typeof(b) == 'string') Alert(b)로 변경되어야 합니다. 이전 사용법, && 연산자 구문 분석 메커니즘 사용: && 앞의 명령문이 false를 반환하는 것으로 감지되면 코드 최적화 측면에서 가장 가능성이 높은 상황이 먼저 판단된다는 점도 언급되어 있습니다. 조건이 적다면 이런 식으로 작성해도 괜찮지만, 조건이 많아 문장이 길면 코드의 가독성이 상당히 떨어지게 됩니다.
또 다른 예: +function(a){var p = a;}( 'a')는 다음으로 변경되어야 합니다: (function(a){var p = a;})( 'a'), 실제로 함수 앞의 + 기호는 함수가 포함된 () 괄호와 동일한 효과를 갖습니다. 둘 다 작업의 우선 순위를 지정하는 역할을 합니다. 후자는 다양한 오염을 방지하는 일반적이고 이해하기 쉬운 방법입니다. JavaScript 프레임워크는 후자의 방법을 사용합니다.
다음과 같이 코드의 가독성을 줄이는 또 다른 예에 대해 이야기해 보겠습니다. function getPostionTxt(type){return type == 2 ? "Wild" : (type == 3 ? "Mall" : (type == 4 ? "복사" : null));}는 다음과 같이 변경되어야 합니다: function getPostionTxt(type){var typeData={"2":"Wild","3":"Mall","4":"Copy "};if ( typeData[type])는 typeData[type]을 반환하고, 그렇지 않으면 null을 반환합니다.}. type이 0부터 시작하는 연속적인 정수라면 배열을 직접 사용하는 것이 더 간단합니다. 이전의 다층 삼항 표현식 중첩을 보고 나면 어지럽지 않으신가요?
6. 구문의 비할당 부분에는 한자가 나오지 않아야 합니다
이는 프로그램 운영에 영향을 미치지는 않지만 분명히 업계 표준을 따른다는 것을 대부분의 사람들이 알고 있다고 생각합니다. 물론 우리는 개발을 위해 "쉬운 언어"를 사용하지 않습니다. 이 문제에 관해서는 원래 얘기하고 싶지 않았지만 이런 일을 한 사람을 만났는데, 그 사람의 영어가 너무 나빠서 적어도 병음은 사용할 수 있어서 그런 것인지는 모르겠습니다. 번역 도구를 돕는 것도 좋은 선택입니다. 다음과 같은 예를 들어 강의하는데
this.user['name'] = 'Zhang San' 또는 this.user.name = 'Zhang San'
7. 함수에 대해 고정된 수의 매개변수를 명확하게 정의하십시오.
고정된 수의 매개변수를 갖는 함수는 매개변수를 얻기 위해 인수를 사용하지 않습니다. 따라서 정의한 메소드에 더 많은 스크립트가 포함되어 있는 경우 메소드가 허용하는 매개변수와 매개변수 수를 한눈에 볼 수는 없습니다. 예를 들면 다음과 같습니다.
var $ = function(){return document.getElementById(arguments[0]);}应该改成：var $ = function(elemID){return document.getElementById(elemID);}8. 동적 이벤트 바인딩에 열중하지 마세요.
addEventListener를 사용하거나 jQuery를 사용하는 등 이벤트를 동적으로 바인딩할 수 있다는 것을 알고 있더라도 바인딩을 사용하면 XHTML을 더 깔끔하게 만들 수 있지만 일반적으로 DOM 노드에 직접 이벤트를 작성하는 것이 좋습니다. 이렇게 하면 코드를 쉽게 볼 수 있기 때문입니다. 간단히 말해서, 버튼이나 링크를 클릭할 때 어떤 메소드 스크립트가 호출되는지를 아는 것이 더 쉽습니다.
9. 코드와 XHTML 간의 결합을 줄입니다.
다른 스크립트 코드를 호출하기 위해 DOM의 일부 콘텐츠 특성에 너무 많이 의존하지 말고 메소드를 정의해야 합니다. 그런 다음 DOM에서 호출하면 DOM이 버튼이든 링크이든 메서드 호출이 동일합니다. 예를 들어 다음 구현에는 분명히 문제가 있습니다. 🎜>위 예시는 실제로 함수 내에서 처리됩니다. 위의 글처럼 두 가지를 두 가지 함수로 나누어야 하는데, 링크가 버튼으로 바뀌면 예를 들어
10. 一个函数应该返回统一的数据类型
因为JavaScrip是弱类型的，在编写函数的时候有些人对于返回类型的处理显得比较随便，我觉得应该像强类型语言那样返回，看看下面的两个例子：
function getUserName(userID)
{
if (data[userID])
return data[userID];
else
return false;
}
应该改为：
function getUserName(userID)
{
if (data[userID])
return data[userID];
else
return "";
}这个方法如果在C#中定义，我们知道它准备返回的数据类型应该是字符串，所以如果没有找到这个数据我们就应该返回空的字符串，而不是返回布尔值或其它不合适的类型。这并没有影响到函数将来的调用，因为返回的空字符串在逻辑判断上可被认作"非"，即与false一样，除非我们使用全等于"==="或typeof进行判断。
11. 规范定义JSON对象，补全双引号
使用标准肯定是有好处的，那么为什么还是有人不使用标准呢？我想这可能是懒或习惯问题。也许还会有人跟我说，少写引号可以减轻文件体积，我认为这有道理但不是重点。对于服务器返回的JSON数据，使用标准结构可以利用Firefox浏览器的JSONView插件方便查看（像查看XML那样树形显示），另外你如果使用jQuery做开发，最新版本jQuery1.4+是对JSON格式有更高要求的，具体的可以自己查阅jQuery更新文档。比如：{name:"Tom"}或{'name':'Tom'}都应该改成{"name":"Tom"}。
12. 不在文件中留下未来确定不再使用的代码片段
当代码调整或重构后，之前编写的不再使用的代码应该及时删除，如果认为这些代码还有一定利用价值可以把它们剪切到临时文件中。留在项目中不仅增加了文件体积，这对团队其它成员甚至自己都起到一定干扰作用，怕将来自己看回代码都搞不懂这方法是干什么的，是否有使用过。当然可以用文档注释标签@deprecated把这个方法标识为不推荐的。
13. 不重复定义其他团队成员已经实现的方法
对于大型项目，一般会有部分开发成员实现一些通用方法，而另外一些开发成员则要去熟悉这些通用方法，然后在自己编写模块遇到有调用的需要就直接调用，而不是像有些开发者喜欢"单干"，根本不会阅读这些通用方法文档，在自己代码中又写了一遍实现，这不仅产生多余的代码量，当然也是会影响团队开发效率的，这是没有团队合作精神的表现，是重复造轮子的悲剧。
比如在通用类文件Common.js有定义function $(elemID){return document.getElementById(elemID)}那么就不应该在Mail.js中再次出现这一功能函数的重复定义，对于一些复杂的方法更应该如此。
14. 调用合适的方法
当有几个方法都可以实现同类功能的时候，我们还是要根据场景选择使用最合适的方法。下面拿jQuery框架的两个AJAX方法来说明。如果确定服务器返回的数据是JSON应该直接使用$.getJSON，而不是使用$.get得到数据再用eval函数转成JSON对象。如果因为本次请求要传输大量的数据而不得以使用$.post也应该采用指定返回数据类型（设置dataType参数）的做法。如果使用$.getJSON，在代码中我们一眼能看出本次请求服务器返回的是JSON。
温馨提示：jQuery1.4后，如果服务器有设置数据输出的ContentType，比如ASP.NET C#设置 Response.ContentType = "application/json"，那么$.get将与$.getJSON的使用没有什么区别。
15. 使用合适的控件存储合适的数据
페이지를 다운로드한 후 나중에 사용할 수 있도록 누군가가 DIV를 사용하여 다음과 같이 JSON 데이터를 저장한 것을 발견했습니다.
실제로 window 개체를 사용하여 일부 데이터를 저장할 수도 있습니다. 위의 예와 같이 AJAX 요청 페이지에 이러한 스크립트 블록을 직접 포함할 수 있습니다. <script>window.userData = { " name":"Tom "};</script>, AJAX 요청 콜백 함수에서 $( "#MyDiv ").html(data)가 실행되면 이 변수를 창에서 즉시 사용할 수 있습니다. 첫 번째 방법을 채택하면 eval(document.getElementById("UserData").innerHTML) 이 불가피합니다. 창 개체에 많은 양의 데이터가 저장되어 있는 경우 사용하지 않을 때 데이터를 수동으로 정리해야 하며, 브라우저를 새로 고치거나 다시 시작할 때까지 사라지지 않으므로 메모리 오버헤드가 증가합니다.
16. 코드 최적화 작업을 절대 무시하지 마세요
코드 최적화는 모든 프로그래머가 달성해야 할 목표이자 프로그래머의 영원한 추구이기도 합니다. 코드를 작성할 때, 함수 구현을 서둘러서는 안 되며, 코드의 실행 효율성이 높아지도록 코드를 어떻게 작성해야 할지 고민해야 합니다.
예: getElementById를 정의하는 단축 메소드 functoin $(elemID){return document.getElementById(elemID)}가 있다고 가정하면 누군가 $("MyDiv").parentChild(와 같은 코드를 작성할 수 있습니다. $("MyDiv")) 실제로 여기에서는 두 개의 getElementById DOM 검색이 수행됩니다. var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv). 다행히 getElementById의 DOM 검색은 상대적으로 빠릅니다. getElementsByTagName으로 변경한다면 최적화에 좀 더 주의를 기울여야 합니다. jQuery 개발팀은 또한 모든 사람에게 이 문제에 주의를 기울일 것을 상기시켰습니다.
물론 코드 최적화 스킬 역시 개인의 지속적인 축적이 필요합니다. 한 친구가 웹사이트 백엔드 코드를 작성할 때 자신의 웹사이트가 Xeon 쿼드 코어 서버를 사용하기 때문에 최적화를 고려할 필요가 없다고 말한 적이 있습니다. 저는 이것이 터무니없다고 생각했습니다.
17. 계획 문서를 분석하고 객체 지향 방법을 사용하여 인터페이스를 정의하고 코드를 구성할 수 있습니다.
이 능력은 모든 프로그래머에게 매우 중요하며, 중요도를 결정하는 요소이기도 합니다. 프로그래머의 수준을 고려하십시오. 좋은 프로그래머는 요구사항을 구체화하고 이를 다양한 클래스로 추상화한 다음, 코드 구조가 명확하고, 읽기 쉽고, 유지 관리하기 쉽고, 너무 절차적이거나 지저분하지 않도록 순서대로 코드를 작성할 수 있는 사람입니다.
위 내용은 표준화된 자바스크립트 코드 작성 방법입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
