> 웹 프론트엔드 > JS 튜토리얼 > Js Components_javascript 기술의 일부 작성 방법

Js Components_javascript 기술의 일부 작성 방법

WBOY
풀어 주다: 2016-05-16 18:20:00
원래의
1166명이 탐색했습니다.

오늘 Rank의 기사 javascript script control topic을 읽었는데 갑자기 JS 구성 요소를 작성하는 방법이나 사람들의 다양한 코딩 스타일을 요약하고 싶었습니다.

먼저 Prototype에 쓴 글을 살펴보겠습니다.

코드를 복사하세요 코드는 다음과 같습니다. 🎜>
var Class = {
create: function() {
return function() { this.init.apply(this, 인수) }
}
}
var A = 클래스 .create();
A.prototype = {
init: function(msg) {
this.msg = msg;
},
fn: function( ) {
경고(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의 초기화를 함수 A(msg)에 넣을 수도 있습니다. {this.msg=msg;}. 간단히 말해서, 이렇게 호출하는 것은 번거롭고 매개변수는 고정되어 있고 대응된다는 것을 알게 될 것입니다.
Class.create를 많이 만들고 싶지 않거나 호출이 불편하다면 Prototype에서 var Class = {...}와 var A = Class.create();를 병합하세요. 가져오기:



코드 복사 코드는 다음과 같습니다. function A() {
this.init.apply(this, 인수);
}
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.create()를 실행합니다. 물론, 각 구성 요소에 대해 this.init.apply(this, 인수)를 작성하는 데에는 아무런 문제가 없습니다. 또한, 프로토타입 메소드를 함께 작성할 것인지, 별도로 작성할 것인지도 개인 취향입니다. 캡슐화의 관점에서는 이들을 결합하는 것이 더 좋지만 때로는 분리하는 것이 더 명확할 수도 있습니다. 예를 들어 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"); fn1();


A가 생성한 객체를 임시 변수 _this에 넣어야 합니다. 왜냐하면 런타임 시 privateFn1의 함수 본문에 있는 this는 실제로 {fn1:...,fn2이기 때문입니다. :...} 익명 개체와 마찬가지로 this.hasOwnProperty("fn1")을 사용하여 테스트할 수 있습니다. 이는 런타임에만 의미가 있는 것입니다. 또한 이 메서드의 각 객체에는 privateFn1 및 privateFn2의 복사본이 있는데 이는 그다지 좋지 않습니다.

(계속해서 다양한 프레임워크에 대한 몇 가지 작성 방법에 대해 설명합니다.)
저자: JayChow
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿