자바스크립트 코딩 규칙

규칙 없음, 규칙 없음 JavaScript는 유연성을 제공하지만 제어되지 않는 변수 및 액세스도 제공하므로 이를 제한하려면 규칙을 사용해야 합니다. 성숙한 팀이든 새로운 팀이든 규칙은 달라야 합니다. 생각은 도약할 수 있지만 코드는 계속해서 통제되어야 합니다. 물론 모든 규칙은 특정 인지 기반을 기반으로 하며 객체 지향 JavaScript의 기반은 필수적입니다. 그렇지 않으면 아무것도 논의할 수 없습니다.

변수 및 메소드 제어:
모듈 개발에서는 독립적인 전역 변수 및 전역 메소드의 저장을 허용하지 않습니다. 해당 모듈의 "네임스페이스"에는 변수 및 메소드만 배치할 수 있습니다. 이에 대한 설명은 이 문서를 참조하세요. 정말 귀찮은데 익명함수를 활용해 보시는 건 어떨까요?
자바 코드
(function() {
var value = 'xxx';
var func = function() {...};
})()

모듈화에는 코드 문화에 대한 엄격한 제어가 필요합니다. 이는 코드 유지 관리 및 사용자 정의 가능성의 측면일 뿐만 아니라 JavaScript 엔진이 사용 후 적시에 속성과 메서드를 재활용할 수 있도록 해줍니다.

Js 코드
String.prototype.func = new function(){...};과 같은 모듈 코드에서 네이티브 개체를 오염시키는 것은 허용되지 않습니다.

이러한 코드는 제어되어야 합니다. 예를 들어, common.js에 균일하게 배치되고 엄격하게 보호됩니다.

데이터 저장 제약:
일반 변수, 프로토타입 변수 및 함수 변수를 나누어 정복하세요. 메소드 이름은 모두 대문자로 시작해야 합니다. 변수 이름은 여전히 ​​낙타 명명법을 따릅니다.
Java 코드
function T(name ){
T.prototype._instance_number++;
this.name = name;
this.showName=function(){
Alert(this.name) }
};
T.prototype = {
_instance_number:0,
getInstanceNum: function(){
return T.prototype._instance_number;
}
>
var t = new T("PortalONE");
t.showName();
new T("Again")
alert(t.getInstanceNum()); : 2

여기서 의도적으로 한 가지 작업이 수행되었습니다. T 내부의 속성과 프라이빗 메서드는 캡슐화를 잘 구현하는 밑줄로 시작합니다(위 코드에서 t.instanceNum을 사용하는 경우 이 값에 액세스할 수 없습니다). 코드를 이해할 수 없다면 JavaScript의 객체지향적 특성을 빠르게 살펴보세요 :). JavaScript는 상속과 다형성을 구현하기 위해 클로저와 프로토타입을 제공합니다. 리팩토링에서 이를 적용하는 방법은 다음 장에서 설명하겠습니다. 또한 Array, Ajax 데이터 유형과 같은 JavaScript의 기본 객체를 사용하는 데 우선순위를 둡니다. JSON의 경우 숨겨진 필드를 사용하지 마세요. 또한 일반적으로 DOM 개체를 마음대로 확장할 수 없습니다.
모듈 간 통신의 경우: 모듈 간 통신은 모듈 간 결합을 의미하며, 이는 엄격하게 피해야 합니다. 통신 방법은 일반적으로 메서드 수준 속성이나 모듈 수준 프로토타입 변수를 사용합니다.

DOM 조작 규칙:
모듈 코드에서는 일반적으로 DOM 조작을 모듈 js로 분리해야 합니다. 다음과 같이 DOM 모델에 시간에 따라 트리거되는 함수를 명시적으로 작성하는 것은 피해야 합니다.
< ;div onclick="xxx" />
JQuery의 바인드 기반 메서드 시리즈를 사용하면 동작 로직이 분리된 후 HTML 태그 새로 고침을 완전히 볼 수 있습니다.
DOM 객체는 일반적으로 ID로 액세스되며 때로는 이름으로 DOM 트리를 너무 많이 그리고 불합리하게 탐색하는 것은 프런트엔드 성능을 유지하는 데 있어 금기시됩니다.

CSS 스타일 제어:
(1) style="xxx"를 거부하려고 합니다. 주요 목적은 스타일을 테마 스타일 시트로 통합하는 것입니다. 물론 테마 스타일 시트도 저장됩니다. 모듈. 다양한 언어를 사용자 정의하고 다양한 스타일을 전환하면 편리합니다.
(2) JavaScript의 스타일 조작을 표준화합니다. 이상적으로는 잘 캡슐화된 UI는 스타일 컬렉션을 자유롭게 대체할 수 있습니다.

위 내용은 빙산의 일각이라고 볼 수 있지만, 실제 프로젝트에서는 개발 과정에서 점차 다듬어지고 개선되어야 합니다.