1. 개방 분석
안녕하세요 여러분! 이 시리즈의 시작 (JavaScript 플러그인 개발 자습서 1)을 아직도 기억하십니까? 주로 "jQuery에서 플러그인을 개발하는 방법"에 대한 이야기를 들려줍니다.
그래서 오늘 우리는 어제의 질문으로 플러그인 개발 여행을 계속할 것입니다. 이전 질문은 다음과 같습니다.
(1) 프로젝트 기술 선택 및 이러한 플러그인의 교체가 있으면 "jQuery"메커니즘에 의존하면 이전에 쓴 플러그인이 사용되지 않을 것입니다 (jQuery가 사용되지 않았다고 가정)는 어떻게 리팩터링 하는가?
(2) 플러그인의 주요 논리를 리팩토링하면 어떻게 구성할까요?
자, 질문이있는 오늘 기사를 배우자.
우선, 나는 "jQuery 플러그인 방법"을 거부하지 않으며 둘째, "jQuery 플러그인이 다음과 같은 장점이 있습니다"와 같은 다른 관점에서 문제를 분석해야합니다.
(1) 모든 코드를 폐쇄에 넣습니다 (즉각적인 실행 함수). 현재 폐쇄는 개인 범위와 동일합니다. 외부는 내부 정보에 액세스 할 수 없으며 글로벌 변수의 오염이 없습니다.
(2), a) 글로벌 의존성을 피하십시오. b) 타사 피해를 피하십시오. c) jQuery 연산자 '$'및 'jQuery'와 호환됩니다.
그래서 우리는 코드를 어떤 방식으로 구성 할 것인가, 객체 지향 아이디어 (OOP)는 무엇입니까? 아니면 프로세스 기반 아이디어로 진행해야합니까? 아니면 둘의 조합입니까? 하하하, 계속 지켜봐. . . . . .
2. 어제의 예를 재구성하십시오
다음은 어제 JS 부분의 소스 코드 부분입니다.
코드 사본은 다음과 같습니다.
(기능 ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
reture this.each (function () {
var elem = $ (this);
elem.find ( "span"). 텍스트 (opts [ "title"]);
$ .get (opts [ "url"], function (data) {
elem.find ( "div"). 텍스트 (data [ "text"]);
});
});
};
$ .fn.bigbear.defaults = {
제목 : "이것은 간단한 테스트입니다",
URL : "data.json"
};
}) (jQuery);
단계별로 분석하겠습니다.
먼저이 플러그인의 기능을 결정하십시오
(1), 우리가 설정 한 제목 텍스트 정보를 표시하십시오.
(2) 비동기 수단을 통해 컨텐츠 정보를 동적으로 얻습니다.
괜찮은! 요구 사항이 명확하다면 쉽게 논의 할 수 있습니다. 위의 코드에서 논리가 느슨하고 프로세스 기반 사고가 명백하다는 것을 알기가 어렵지 않으므로 첫 번째 단계는 기능 요구 사항을
수업 방식으로 효과적으로 조직하십시오. 다음과 같이 리팩토링 된 코드를보십시오.
코드 사본은 다음과 같습니다.
$ (function () {
$ ( "#bb"). bigbear ();
});
(기능 ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
reture this.each (function () {
var elem = $ (this);
var bb = 새로운 빅 베어 (Elem, Opts);
bb.getElem (). trigger ( "data");
});
};
$ .fn.bigbear.defaults = {
제목 : "이것은 간단한 테스트입니다",
URL : "data.json"
};
}) (jQuery);
기능 bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
이 this.elem;
};
bbproto.getopts = function () {
this.opts를 반환합니다.
};
bbproto.init = function () {
var that = this;
this.getElem (). on ( "data", function () {
that._settitle (that.getOpts () [ "title"]);
$ .get (that.getOpts () [ "url"], function (result) {
that.getElem (). find ( "div"). text (result [ "text"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). find ( "span"). 텍스트 (텍스트);
};
하하하, 더 많은 코드가 있습니까? 실제로이 방법은 객체 지향적 관점에서 문제를보고 먼저 기능 요구 사항을 분석 한 다음 클래스를 설계하는 것입니다. 우리가 한 번에 잘 설계하는 것은 불가능하지만.
그러나 문제의 관점이 바뀌었고, 코드는 더 읽기 쉬워졌으며, 우리의 목적을 달성 할 수 있도록 더 잘 유지할 수 있습니다.
다음은 아래와 같이 "bootstrap"js 섹션에서 발췌 한 관련 소스 코드 구현입니다.
클래스를 통해 플러그인의 주요 논리를 유지하는 유사한 구현 방법도 있음을 알기가 어렵지 않습니다.
(iii), 새로운 기능을 추가하고 추가 클래스를 소개합니다
이제 수요가 증가했으며 경험에 약간의 변화가 필요하며 데이터를로드 할 때 "로드"효과가 있습니다.
구현 아이디어는 다음과 같습니다. 원래 컨텐츠 영역에서 텍스트를 "로드 데이터 ..."라는 단어로 설정 한 다음 다음과 같이 새로운 클래스를 소개합니다.
코드 사본은 다음과 같습니다.
함수 오버레이 () {
};
var olproto = 오버레이. 프로로 타입;
olproto.show = function () {};
olproto.hide = function () {};
// 특정 구현을 기록하지 않습니다
좋아, 마스크 레이어가 이미 존재한다. 어떻게 지금 그것을 통합 할 수 있습니까? 다음과 같이 조합으로 액세스합니다.
코드 사본은 다음과 같습니다.
기능 bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.overlay = 새로운 오버레이 ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
이 this.elem;
};
bbproto.getopts = function () {
this.opts를 반환합니다.
};
bbproto.init = function () {
var that = this;
var loadingText = "데이터 로딩 ....";
this.getElem (). on ( "data", function () {
that._settitle (that.getOpts () [ "title"]);
that.overlay.show ();
that.getElem (). find ( "div"). text (loadingText);
$ .get (that.getOpts () [ "url"], function (result) {
that.overlay.hide ();
that.getElem (). find ( "div"). text (result [ "text"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). find ( "span"). 텍스트 (텍스트);
};
이것은 단지 우리의 기능의 끝을위한 것입니다. 이런 식으로 작성된 플러그인이 첫 번째 버전보다 훨씬 낫다고 생각합니다. 물론 이것은 최적의 구현이 아니며 세부 사항에서 지속적으로 리팩토링해야하지만이 방법은 플러그인을 개발하는 선택적인 방법입니다.
다음은 전체 코드입니다.
코드 사본은 다음과 같습니다.
$ (function () {
$ ( "#bb"). bigbear ();
});
(기능 ($) {
$ .fn.bigbear = function (opts) {
opts = $ .extend ({}, $. fn.bigbear.defaults, opts);
reture this.each (function () {
var elem = $ (this);
var bb = 새로운 빅 베어 (Elem, Opts);
bb.getElem (). trigger ( "data");
});
};
$ .fn.bigbear.defaults = {
제목 : "이것은 간단한 테스트입니다",
URL : "data.json"
};
}) (jQuery);
기능 bigbear (elem, opts) {
this.elem = elem;
this.opts = opts;
this.overlay = 새로운 오버레이 ();
this.init ();
};
var bbproto = bigbear.prototype;
bbproto.getelem = function () {
이 this.elem;
};
bbproto.getopts = function () {
this.opts를 반환합니다.
};
bbproto.init = function () {
var that = this;
var loadingText = "데이터 로딩 ....";
this.getElem (). on ( "data", function () {
that._settitle (that.getOpts () [ "title"]);
that.overlay.show ();
that.getElem (). find ( "div"). text (loadingText);
$ .get (that.getOpts () [ "url"], function (result) {
that.overlay.hide ();
that.getElem (). find ( "div"). text (result [ "text"]);
});
});
};
bbproto._settitle = function (text) {
this.getElem (). find ( "span"). 텍스트 (텍스트);
};
함수 오버레이 () {
};
var olproto = 오버레이. 프로로 타입;
olproto.show = function () {};
olproto.hide = function () {};
// 특정 구현을 기록하지 않습니다
이 기사는 지금은 끝났습니다. JavaScript의 플러그인 개발에 대한 새로운 이해가 있습니까?