1. 개방 분석
이전 두 기사에서는 주로 jQuery에서 플러그인을 개발하는 방법과 프로세스 디자인을 객체 지향적 사고 설계와 결합하는 방법에 대해 이야기했습니다.
플러그인을 설계하는 방법? 두 가지 방법은 서로의 강점과 약점으로부터 배울 수있는 고유 한 장점과 단점이 있습니다. 이 일련의 기사는 학습 지향적이며 모든 사람들이 특정 시나리오를 사용하는 방법을 결정합니다. 따라서 오늘이 기사에서 시작하여 예제를 사용하여 얕은 곳에서 깊이까지 자체 플러그인 라이브러리를 개발할 것입니다. 헤헤 헤 (Hehehe), 덜 말도 안되는 말을하고 요점에 도달하십시오. 실제 렌더링 직접 :
당신은 그것을 볼 수 있습니다. 이것은 탭 플러그인입니다. 우리는 매일 단일 페이지 응용 프로그램 ( "스파")을 만들 때이를 발견 할 수 있습니다. 오늘의 예를 들어합시다.
우리는 BS 구조를 기반으로 한 시스템을 구축합니다. BS 구조는 구성 시스템의 모든 구성 요소 인 여러 모듈로 구성됩니다. 이 플러그인을 통해 모듈을 효과적으로 관리 할 수 있습니다
경험 양식 및 사용자 상호 작용을 아래에서 자세히 분석하겠습니다.
(ii), 사례 분석
(1) 먼저이 플러그인이하는 일을 결정하십시오. 플러그인의 통화 메소드와 구성 매개 변수 설명을 살펴 보겠습니다. 다음 코드 :
코드 사본은 다음과 같습니다.
bigbear.ui.createtab ($ ( "#tab"), {
ButtonText : "모듈 추가",
결과: [
{
텍스트 : "마법사 프롬프트",
URL : "help.html",
showclose : "0",
상태 : "1"
},
{
텍스트 : "학생 정보",
URL : "info.html",
showclose : "1",
상태 : "1"
},
{
텍스트 : "학생 분류",
URL : "category.html",
showclose : "1",
상태 : "1"
},
{
텍스트 : "Big Bear {{bb}}",
URL : "bb.html",
showclose : "1",
상태 : "1"
},
{
텍스트 : "베타 테스트 모듈",
URL : "test.html",
showclose : "1",
상태 : "1"
}
]]
});
"bigbear.ui.createtab"에는 두 개의 매개 변수가 포함되어 있습니다. 첫 번째는 dom 노드 객체이고 두 번째는 플러그인 매개 변수 옵션입니다. "ButtonText"는 "탭"플러그인의 작업 버튼에 대한 텍스트 설명을 나타냅니다.
"결과"는 텍스트 설명을 포함하여 탭 항목의 속성을 포함하는 배열입니다. 탭 항목을 클릭 할 때 요청하는 데 사용되는 URL은 "showclose"는 탭 옵션이 닫기 버튼을 표시하는지 여부를 나타냅니다.
"상태"는 기본적으로 옵션의 상태를 나타내며, 각각 1-Open 및 0-Open으로 표시되는 폐쇄 상태가있을 수 있습니다.
(2) 관련된 기능은 무엇입니까?
선택적 매개 변수를 통해 관련 옵션 항목은 다음과 같이 동적으로 생성됩니다.
코드 사본은 다음과 같습니다.
bigbear.ui.createtab ($ ( "#tab"), {
ButtonText : "모듈 추가",
결과: [
{
텍스트 : "jQuery 소스 코드 분석",
URL : "help.html",
showclose : "0",
상태 : "1"
},
{
텍스트 : "큰 곰 {{bb}}}",
URL : "bb.html",
showclose : "1",
상태 : "1"
}
]]
});
효과는 다음과 같습니다.
다음 효과와 같이 옵션 옵션을 자유롭게 추가하고 삭제할 수 있습니다.
위의 그림은 이러한 상황 중 하나를 보여줍니다. 모듈이 없으면 메시지가 표시됩니다.
이것은 두 번째 사례이며, 이전에 삭제 된 것들을 복원 할 수 있습니다.
(iii), 학습을위한 완전한 코드 ,이 코드는 디렉토리 구조 및 관련 파일을 포함하여 테스트되었습니다.
(1), HTML
코드 사본은 다음과 같습니다.
<body>
<div>
빅 베어 {{bb}}-dxj ui ------ 탭
</div>
<div>
<div id = "탭">
<div>
<div>
+ 학생 정보 추가
</div>
<div>
<!-<div> <span> x </span> 환영 페이지 </div>
<div> <span> x </span> 사용자 관리 </div>
<div> <span> x </span> bigbear </div>->
</div>
</div>
<div>
</div>
<div>
<!-<div>
<div> <span> 이름 : </span> <입력 유형 = "text"/> </div>
<div> <span> 참고 : </span> <textarea> </textarea> </div>
</div> <div> <입력 유형 = "버튼"값 = "저장"/> </div>
->
</div>
</div>
</div>
</body>
(2), CSS 파일 코드
코드 사본은 다음과 같습니다.
.dxj-ui-hd {
패딩 : 0px;
여백 : 0 Auto;
마진 탑 : 30px;
너비 : 780px;
높이 : 60px;
라인 높이 : 60px;
배경 : #3385ff;
색상 : #ffff;
Font-Family : "Microsoft Yahei";
글꼴 크기 : 28px;
텍스트 정렬 : 센터;
글꼴 중량 : 대담한;
}
.dxj-ui-bd {
패딩 : 0px;
여백 : 0 Auto;
너비 : 778px;
패딩 탑 : 30px;
패딩 바닥 : 30px;
오버플로 : 숨겨진;
테두리 : 1px 고체 #3385ff;
}
.dxj-ui-bd #tab {
패딩 : 0px;
여백 : 0 Auto;
너비 : 720px;
오버플로 : 숨겨진;
}
.dxj-ui-bd #tab .title {
너비 : 720px;
오버플로 : 숨겨진;
국경 바닥 : 2px 고체 #3385ff;
}
.dxj-ui-bd #tab .title .adder {
너비 : 160px;
높이 : 32px;
라인 높이 : 32px;
배경 : #DC143C;
색상 : #ffff;
Font-Family : "Microsoft Yahei";
글꼴 크기 : 14px;
텍스트 정렬 : 센터;
글꼴 중량 : 대담한;
플로트 : 왼쪽;
커서 : 포인터;
}
.dxj-ui-bd #tab .title .items {
높이 : 32px;
마진 왼쪽 : 20px;
너비 : 540px;
오버플로 : 숨겨진;
플로트 : 왼쪽;
}
.dxj-ui-bd #tab .title .items div {
패딩 : 0px;
마진 왼쪽 : 10px;
너비 : 96px;
높이 : 32px;
라인 높이 : 32px;
배경 : #3385ff;
색상 : #ffff;
글꼴 패밀리 : arial;
글꼴 크기 : 12px;
텍스트 정렬 : 센터;
위치 : 상대;
플로트 : 왼쪽;
커서 : 포인터;
}
.dxj-ui-bd #tab .title .items div span.del {
너비 : 16px;
높이 : 16px;
라인 높이 : 16px;
디스플레이 : 블록;
배경 : #DC143C;
위치 : 절대;
오른쪽 : 0;
상단 : 0;
커서 : 포인터;
}
.dxj-ui-bd #tab .content {
너비 : 716px;
패딩 탑 : 30px;
오버플로 : 숨겨진;
테두리 : 2px 고체 #3385ff;
테두리 탑 : 0px;
Min-Height : 130px;
텍스트 정렬 : 센터;
}
.dxj-ui-bd #tab .content 테이블 {
여백 : 0 Auto;
}
.dxj-ui-bd #tab .content div.c {
패딩 탑 : 20px;
왼쪽 패딩 : 20px;
배경 : #eee;
높이 : 140px;
}
.dxj-ui-bd #tab .content div.c .input-content {
마진-탑 : 10px;
글꼴 패밀리 : arial;
글꼴 크기 : 12px;
}
.dxj-ui-bd #tab .console-panel {
너비 : 716px;
패딩 탑 : 20px;
패딩 바닥 : 20px;
오버플로 : 숨겨진;
테두리 : 2px 고체 #3385ff;
테두리 탑 : 0px;
국경 바닥 : 2px 고체 #3385ff;
배경 : #fff;
디스플레이 : 없음;
}
.활동적인 {
글꼴 중량 : 대담한;
}
(3), JS 코드는 다음과 같습니다.
코드 사본은 다음과 같습니다.
$ (function () {
bigbear.ui.createtab ($ ( "#tab"), {
ButtonText : "모듈 추가",
결과: [
{
텍스트 : "마법사 프롬프트",
URL : "help.html",
showclose : "0",
상태 : "1"
},
{
텍스트 : "학생 정보",
URL : "info.html",
showclose : "1",
상태 : "1"
},
{
텍스트 : "학생 분류",
URL : "category.html",
showclose : "1",
상태 : "1"
},
{
텍스트 : "Big Bear {{bb}}",
URL : "bb.html",
showclose : "1",
상태 : "1"
},
{
텍스트 : "베타 테스트 모듈",
URL : "test.html",
showclose : "1",
상태 : "1"
}
]]
});
});
(기능 ($) {
var win = 창;
var bb = win.bigbear = win.bigbear || {
UI : {}
};
var ui = bb.ui = {};
var 탭 = 함수 (elem, opts) {
this.elem = elem;
this.opts = opts;
};
var tabproto = tab.prototype;
tabproto._deleteitem = function (항목) {
var that = this;
this.getElem (). find ( ". title .items div")
.eq (항목 [ "index"])
.fadeout (function () {
that._resetContent ();
that._updatestatus (항목);
that._triggeritem (항목 [ "index"] + 1);
that.getElem (). find ( ". title .adder"). trigger ( "click");
});
};
tabproto._triggeritem = function (다음) {
var nextstatus = this._getstatus (다음);
var 항목 = this.getElem (). find ( ". title .items div");
다음 = 항목 .eq (다음);
if (next.size () && "1"== Nextstatus) {// 후속 DOM 노드가 존재합니다.
다음. 트리거 ( "클릭");
}
또 다른{
items.eq (0) .trigger ( "클릭");
}
};
tabproto._getStatus = function (index) {
var status = "";
$ .Each (this.getOpts () [ "result"], function (i, item) {
if (index == item [ "index"]) {
상태 += 항목 [ "상태"];
거짓을 반환합니다.
}
});
반환 상태;
};
tabproto._updatestatus = function (항목) {
var 상태 = 항목 [ "상태"];
항목 [ "상태"] = ( "1"== 상태)? "0": "1";
};
tabproto.init = function () {
var that = this;
this.getElem (). find ( ". title .adder")
.Text ( " +" + this.getOpts () [ "ButtonText"]))
.on ( "클릭", function () {
that._toggleconsolepanel (function () {
var root = that.getElem (). find ( ". console-panel"). empty ();
$ .Each (that.getOpts () [ "result"], function (i, item) {
if ( "0"== 항목 [ "상태"]) {
var elem = $ ( "<div Style = 'float : 왼쪽';> </div>")
.Data ( "항목", 항목)
.appendto (루트);
$ ( "<input type = 'radio'name = 'addMod'/>") .appendto(ELEM);
$ ( "<span> </span>"). 텍스트 (항목 [ "text"]). 부록 (elem);
}
});
if (root.find ( "div"). size ()) {
$ ( "<input type = 'button'value = 'module add module'style = 'margin-left : 20px'/>")
.on ( "클릭", function () {
var data = root.find ( "입력 [type = radio] : checked"). parent (). data ( "item");
that._updatestatus (데이터);
that.getElem (). find ( ". title .items div"). eq (data [ "index"]). fadein (). trigger ( "click");
that.getElem (). find ( ". title .adder"). trigger ( "click");
})
.appendto (루트);
}
또 다른{
root.text ( "아직 추가 할 항목 없음!");
}
});
});
$ .Each (this.getOpts () [ "result"], function (i, item) {
항목 [ "index"] = i;
that._render (항목);
});
this.getElem (). find ( ". title .items div")
.eq (0)
.Trigger ( "클릭"); // 하나가 있어야한다고 가정합니다. 그렇지 않으면 플러그인이 의미가 없습니다!
};
tabproto._toggleconsolepanel = function (콜백) {
this.getElem (). find ( ". console-panel"). slideToggle (function () {
$ .isfunction (콜백) && 콜백 ();
});
};
tabproto._resetContent = function () {
this.getElem (). find ( ". content"). html ( "");
};
tabproto._setContent = function (html) {
this.getElem (). find ( ". content"). html (html);
};
tabproto._getContent = function (url) {
return $ .ajax ({
URL : URL
});
};
tabproto._render = function (data) {
var that = this;
var item = $ ( "<div> </div>")
.Text (data [ "text"])
.on ( "클릭", function () {
that._setCurrent (data [ "index"]);
that._getContent (data [ "url"]). done (function (result) {
that._setContent (결과);
})
.fail (function () {
새 오류를 던지십시오 ( "순 오류!");
});
})
.appendto (this.getElem (). find ( ". title .items"));
if ( "1"== data [ "showClose"]) {
$ ( "<span class = 'del'> x </span>")
.on ( "클릭", function () {
if (win.confirm ( "이 항목이 삭제됩니까?")) {
that._deleteitem (데이터);
거짓을 반환합니다. // 거품을 멈 춥니 다
}
})
.appendto (항목);
}
};
tabproto._setCurrent = function (index) {
var items = this.getElem (). find ( ". title .items div"). removeClass ( "active");
items.eq (index) .addclass ( "active");
var contents = this.getElem (). find ( ". content .c"). hide ();
contents.eq (index) .show ();
};
tabproto.getelem = function () {
이 this.elem;
};
tabproto.getopts = function () {
this.opts를 반환합니다.
};
ui.createtab = function (elem, opts) {
var 탭 = 새 탭 (Elem, Opts);
tab.init ();
리턴 탭;
};
}) (jQuery);
(iv), 최종 요약
(1) 객체 지향적 사고 방식에서 기능적 요구 사항에 대한 합리적인 분석.
(2), 플러그인 로직을 수업 방식으로 구성하십시오.
(3) 위의 예를 지속적으로 재구성하는데,이를 합리적으로 재구성하는 방법은 무엇입니까? 과도하게 설계하지 마십시오. 권장 방법은 프로세스 설계와 객체 지향적 사고 설계를 결합하는 것입니다.
(4) 탭의 옵션이 위의 예에서 별도의 클래스로 독립적으로 분류 될 수 있는지 생각해보십시오. 예를 들어 "항목", "탭"클래스를 수정하는 방법은 무엇입니까? 질문으로 생각하십시오. . .
위는이 기사의 전체 내용입니다. 앞으로이 플러그인을 계속 개선 할 것입니다. 이 기사가 마음에 들면 엄지 손가락을주세요.