js 구성 요소 작성

오늘 rank 의 javascript 스 크 립 트 컨트롤 topic 를 보 았 습 니 다. 갑자기 JS 구성 요 소 를 쓰 는 방법 을 정리 하거나 다른 사람의 coding style 을 말 하고 싶 습 니 다.
먼저 Prototype 의 쓰 기 를 살 펴 보 겠 습 니 다.
코드 는 다음 과 같 습 니 다:

var Class = {
create: function() {
return function() { this.init.apply(this, arguments); }
}
}
var A = Class.create();
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A("myMsg");
a.fn();

만약 당신 이 위의 많은 Class. create 같은 것 을 좋아 하지 않 는 다 면, 당신 도 이렇게 할 수 있 습 니 다.
코드 는 다음 과 같 습 니 다:

function A() { } //var A = function(){}
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A();
a.init("myMsg");
a.fn();

물론 this. msg 의 초기 화 를 function A (msg) {this. msg = msg;} 에 넣 을 수도 있 습 니 다.한 마디 로 하면 이렇게 호출 하 는 것 이 매우 번 거 롭 고 매개 변 수 는 고정 적 으로 대응 하 는 것 을 발견 할 수 있 을 것 이다.
만약 당신 이 많은 Class. create 를 만 들 고 싶 지도 않 고, 호출 이 불편 하지 도 않다 면, Prototype 의 var Class = {...} 과 var A = Class. create () 를;합쳐서획득:
코드 는 다음 과 같 습 니 다:

function A() {
this.init.apply(this, arguments);
}
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function() {
alert(this.msg);
}
}
var a = new A("myMsg");
a.fn();

깨끗 해 보이 지만 라 이브 러 리 에 구성 요소 가 많다 면 모든 구성 요 소 는 this. init. apply (this, arguments) 를 한 번 씩 써 야 합 니 다.Class. create 를 사용 하면 Class 를 하나 쓰 고 각 구성 요소 가 Class. create () 를 실행 하면 됩 니 다.물론 모든 구성 요 소 는 this. init. apply (this, arguments) 를 한 번 씩 씁 니 다.나 쁠 것 도 없 으 니 개인의 취향 에 달 려 있다.또한 원형 을 쓰 는 방법 은 합 치 는 것 이 좋 을 지 나 누 어 쓰 는 것 이 좋 을 지 개인 적 인 취향 입 니 다. 포장 의 측면 에서 합 치 는 것 이 좋 지만 분리 하 는 것 이 가끔 더 뚜렷 합 니 다.예 를 들 어 A. prototype. init = function (msg) {...} A. prototype. fn = function () {...}
그리고 이렇게 구성 요 소 를 쓰 는 것 을 좋아 하 는 사람 도 있다.
코드 는 다음 과 같 습 니 다:

var A = function(msg) {
this.msg = msg;
var _this = this;
var privateFn1 = function() {
alert(_this.msg);
}
var privateFn2 = function() {
alert(_this.msg);
}
return { fn1: privateFn1, fn2: privateFn2 };
}
var a = new A("myMsg");
a.fn1();

여 기 는 A 구조의 대상 this 를 임시 변수 에 넣 어야 합 니 다this 중 입 니 다. 실행 할 때 privateFn 1 의 함수 내 this 는 실제 {fn1:..., fn2:...} 과 같은 익명 의 대상 이기 때문에 this. hasOwnProperty ("fn1") 로 테스트 할 수 있 습 니 다.this 는 운행 할 때 만 의미 가 있 는 것 이다.또한 이 방법 은 대상 마다 privateFn 1 과 privateFn 2 의 사본 이 있 는데 이런 방법 은 그다지 좋 지 않다.