1. 개방 분석
안녕하세요 여러분! 첫 두 기사에서는 주로 "JQuery 's Way"에서 플러그인을 개발하는 방법과 프로세스 디자인과 객체 지향적 사고 설계를 결합하여 플러그인을 설계하는 방법에 대해 이야기합니다. 두 방법 모두 장단점이 있으며 강점과 약점으로부터 배울 수 있습니다. Hehehe, 덜 말도 안되는 이야기를하고 요점에 도달합시다. 실제 렌더링 직접 :
당신은 그것을 볼 수 있습니다. 드롭 다운 메뉴 플러그인입니다. 우리의 일상 개발 에서이 시스템은 때때로 우리가 그다지 아름답 지 않고 기능이 제한되어 있다고 느끼게하여 사용자가
경험 양식과 사용자 상호 작용은별로 좋지 않으므로 오늘 나는 Hehehehehe를 시뮬레이션합니다. 아래에서 자세히 분석 해 봅시다.
(ii), 사례 분석
(1) 먼저이 플러그인이하는 일을 결정하십시오. 플러그인의 통화 메소드와 구성 매개 변수 설명을 살펴 보겠습니다. 다음 코드 :
코드 사본은 다음과 같습니다.
$ (function () {
var itemselector = 새 항목 선거 ($ ( "#item-selector"), {
CurrentText : "항목을 선택하십시오",
항목 : [
{{
텍스트 : "JavaScript",
가치 : "JS",
장애인 : "1"
},
{{
텍스트 : "CSS",
가치 : "CSS",
장애인 : "0"
},
{{
텍스트 : "html",
가치 : "html",
장애인 : "0"
}
],,
모드 : "0", // "1"일 때 확인란 다중 선택 모드를 지원합니다.
변경 : 함수 (값) {
// 코드를 여기에 넣으십시오
}
});
itemselector.init ();
settimeout (function () {
console.log (itemselector.getCurrentValue ()); // 선택한 항목을 먼저 얻는 데 테스트합니다
}, 2000);
"var itemselector = new initempectelector ()"에는 두 개의 매개 변수가 포함되어 있습니다. 첫 번째는 dom 노드 객체이고 두 번째는 플러그인 매개 변수 옵션입니다. "CurrentText"는 "ItemSelector"플러그인의 텍스트 표시 영역에 대한 텍스트 설명을 나타냅니다.
"항목"은 텍스트 설명, 옵션 값, "비활성화"를 포함하여 "항목 선거"항목의 속성을 포함하는 배열입니다. "비활성화"는 목록 항목의 가시성을 나타내고, 0은 디스플레이를 나타내고, 1은 표시되지 않아야합니다.
"Change"는 선택시 작동 콜백 함수를 나타내며 옵션 데이터는 매개 변수 형태로 반환됩니다.
(2) 관련된 기능은 무엇입니까?
표시 할 수있는 렌더링은 다음과 같습니다.
표시 할 수없는 렌더링은 다음과 같습니다.
이 둘의 차이점은 다음과 같습니다. 리베일되지 않은 상태 데이터는 반환되지 않으며 떠 다니는 경우에는 영향을 미치지 않습니다.
3) 전체 코드는 학습을위한 것입니다. 이 코드는 디렉토리 구조 및 관련 파일을 포함하여 테스트되었습니다.
(1), HTML
코드 사본은 다음과 같습니다.
<body>
<div>
Big Bear {{bb}}-dxj ui ------ Itemselector
</div>
<div>
<div id = "Item-Selector">
<div>
<div> </div> <span> ↓ </span>
</div>
<div>
<div>
</div>
</div>
</div>
</div>
</body>
(2), CSS
코드 사본은 다음과 같습니다.
/ * 항목 선택기 */
#항목 선택기 {
여백 : 0 Auto;
너비 : 220px;
오버플로 : 숨겨진;
국경 : 2px Solid #CCC;
}
#item-selector .title {
국경-바닥 : 1px solid #ccc;
오버플로 : 숨겨진;
}
#item-selector .title div {
너비 : 190px;
국경 : 0px;
색상 :#999;
글꼴 패밀리 : arial;
글꼴 크기 : 14px;
높이 : 28px;
라인 높이 : 28px;
플로트 : 왼쪽;
커서 : 포인터;
}
#item-selector .title span {
디스플레이 : 블록;
높이 : 30px;
라인 높이 : 30px;
너비 : 29px;
플로트 : 왼쪽;
텍스트 정렬 : 센터;
왼쪽 경계 : 1px Solid #CCC;
커서 : 포인터;
}
#item-selector .Content {
너비 : 220px;
오버플로 : 숨겨진;
}
#item-selector .content .items {
오버플로 : 숨겨진;
}
#item-selector .content .items div {
왼쪽 패딩 : 20px;
너비 : 200px;
높이 : 32px;
라인 높이 : 32px;
Font-Family : "Microsoft Yahei";
글꼴 크기 : 14px;
글꼴 중량 : 대담한;
커서 : 포인터;
}
.item-hover {
배경 :#3385ff;
색상 : #ffff;
}
(3), "itemselector.js"
코드 사본은 다음과 같습니다.
기능 항목 선거인 (Elem, Opts) {
this.elem = elem;
this.opts = opts;
};
var isproto = itemselector.prototype;
isproto.getelem = function () {
이 this.elem;
};
isproto.getOpts = function () {
this.opts를 반환합니다.
};
/* 데이터 조작*/
ISPROTO._SETCURRENT = 함수 (현재) {
this.getOpts () [ "current"] = current;
};
isproto.getCurrentValue = function (현재) {
reture this.getOpts () [ "current"];
};
/* 데이터 조작*/
isproto.init = function () {
var that = this;
this.getOpts () [ "current"] = null; // 데이터 커서
this._setitemvalue (this.getOpts () [ "currentText"]);
var itemelem = that.getElem (). find ( ". content .items");
this.getElem (). find ( ". title div"). on ( "click", function () {
itemselem.toggle ();
});
this.getElem (). find ( ". 제목 span"). on ( "click", function () {
itemselem.toggle ();
});
$ .Each (this.getOpts () [ "항목"], function (i, item) {
항목 [ "id"] = (새 날짜 (). gettime ()). toString ();
that._render (항목);
});
};
isproto._setitemvalue = 함수 (value) {
this.getElem (). find ( ". title div"). 텍스트 (값)
};
isproto._render = function (항목) {
var that = this;
var itemelem = $ ( "<div> </div>")
.Text (항목 [ "텍스트"])
.attr ( "id", 항목 [ "id"]);
if ( "0"== 항목 [ "disabled"]) {
itemelem.on ( "클릭", function () {
var onchange = that.getOpts () [ "Change"];
that.getelem (). find ( ". content .items"). hide ();
that._setitemvalue (item [ "text"]);
that._setCurrent (항목);
onchange && onchange (항목);
})
.MouseOver (function () {
$ (this) .addclass ( "항목 호버");
})
.mouseout (function () {
$ (this) .removeClass ( "항목 호버");
});
}
또 다른{
itemelem.css ( "색상", "#ccc"). on ( "click", function () {
that.getelem (). find ( ". content .items"). hide ();
that._setitemvalue (item [ "text"]);
});
}
itemelem.appendto (this.getElem (). find ( ". content .items"));
};
(iv), 최종 요약
(1) 객체 지향적 사고 방식에서 기능적 요구 사항에 대한 합리적인 분석.
(2), 플러그인 로직을 수업 방식으로 구성하십시오.
(3) 위의 예를 지속적으로 재구성하는데,이를 합리적으로 재구성하는 방법은 무엇입니까? 과도하게 설계하지 마십시오. 권장 방법은 프로세스 설계와 객체 지향적 사고 설계를 결합하는 것입니다.
(4) 다음 기사는 속성 "모드"와 같은 관련 기능을 확장합니다. "1"인 경우 CheckBox Multi-Select 모드를 지원하지만 이제는 기본 드롭 다운 모드입니다.
이 기사는 먼저 여기에 있으며 나중에 계속 논의 할 것입니다. 이 일련의 기사를 즐길 수 있기를 바랍니다.