JavaScript 플러그인 개발 튜토리얼(5)_javascript 기술
- WBOY원래의
- 2016-05-16 16:16:361228검색
1, 오프닝 분석
안녕하세요 여러분! 처음 두 기사에서는 "jQuery를 사용하여 플러그인을 개발하는 방법"과 절차적 디자인과 객체 지향 디자인을 결합하여 플러그인을 디자인하는 방법에 대해 주로 이야기했습니다. 두 가지 방법 모두 장점과 단점이 있습니다. 이봐요, 말도 안 돼요. 말을 줄이고 요점만 말하세요. 실제 렌더링을 직접 업로드하세요:
보시다시피 이것은 드롭다운 메뉴 플러그인입니다. 일상적인 개발 과정에서 시스템이 제공하는 기능이 때로는 별로 아름답지 않고 기능이 제한되어 있다는 느낌을 주어 사용자에게 불편을 줄 수 있습니다.
체험 형태와 사용자 상호작용이 별로 좋지 않아서 오늘은 Hey Hey를 시뮬레이션해보겠습니다. 아래에서 자세히 분석해 보겠습니다.
(2), 예시분석
(1) 먼저 이 플러그인의 기능을 확인하세요. 플러그인이 호출되는 방식과 구성 매개변수 설명을 살펴보겠습니다. 다음 코드:
$(함수(){
var itemSelector = new ItemSelector($("#item-selector"),{
currentText: "항목을 선택하세요" ,
항목: [
{
텍스트: "자바스크립트" ,
값: "js" ,
비활성화 : "1"
~ {
텍스트: "Css" ,
값: "css" ,
비활성화 : "0"
~ {
텍스트: "Html" ,
값: "html" ,
비활성화 : "0"
}
] ,
mode: "0", // "1"인 경우 체크박스 다중 선택 모드를 지원합니다
변경: 함수(값){
// 여기에 코드를 입력하세요
}
}) ;
itemSelector.init() ;
setTimeout(함수(){
console.log(itemSelector.getCurrentValue()); // 현재 선택된 항목을 가져오기 위한 테스트
},2000) ;
"var itemSelector = new ItemSelector()"에는 두 개의 매개변수가 포함되어 있습니다. 첫 번째는 dom 노드 객체이고, 두 번째는 플러그인 매개변수 옵션입니다. "currentText"는 " ItemSelector" 플러그인입니다. 설명합니다.
"items"는 텍스트 설명 및 옵션 값을 포함하여 "ItemSelector" 항목의 속성을 포함하는 배열입니다. "disabled"는 목록 항목의 가시성을 나타내고, 0은 표시를 나타내고, 1은 표시할 수 없음을 나타냅니다.
"change"는 선택 시 작업 콜백 함수를 나타내며, 옵션 데이터가 매개변수 형태로 반환됩니다.
(2), 관련된 기능은 무엇입니까
표시 가능한 렌더링은 다음과 같습니다.
표시 불가능한 렌더링은 다음과 같습니다.
둘의 차이점은 표시할 수 없는 상태 데이터는 반환되지 않으며, 플로팅하면 아무런 효과가 없다는 것입니다.
3) 학습용 전체 코드 이 코드는 디렉토리 구조 및 관련 파일을 포함하여 테스트되었습니다.
(1),html
빅 베어 {{bb}} - DXJ UI ------ ItemSelector
> ~
~ ~ ~ ~ > ~ >
(2), CSS
/* 항목 선택기 */
#항목 선택기 {
여백 : 0 자동;
너비 : 220px ;
오버플로:숨김;
테두리:2px 실선 #ccc;
}
#item-selector .title {
테두리 하단:1px 단색 #ccc;
오버플로:숨김;
}
#item-selector .title div {
너비:190px;
테두리:0px ;
색상:#999;
글꼴 계열: arial ;
글꼴 크기: 14px;
높이:28px;
줄 높이:28px;
부동:왼쪽;
커서:포인터;
}
#item-selector .title 범위 {
디스플레이:블록;
높이:30px;
줄 높이:30px;
너비:29px;
부동:왼쪽;
텍스트 정렬:가운데;
테두리 왼쪽:1px 단색 #ccc;
커서:포인터;
}
#item-selector .content {
너비 : 220px ;
오버플로:숨김;
}
#item-selector .content .items {
오버플로:숨김;
}
#item-selector .content .items div {
왼쪽 패딩:20px;
너비 : 200px ;
높이:32px;
줄 높이:32px;
글꼴 모음: "微软雅黑" ;
글꼴 크기: 14px;
글꼴 두께:굵게;
커서:포인터;
}
.item-hover {
배경:#3385ff;
색상:#fff;
}
(3)，"ItemSelector.js"
함수 ItemSelector(elem,opts){
this.elem = 요소 ;
this.opts = 선택 ;
} ;
var ISProto = ItemSelector.prototype ;
ISProto.getElem = 함수(){
this.elem을 반환하세요 ;
} ;
ISProto.getOpts = 함수(){
this.opts를 반환하세요 ;
} ;
/* 데이터 조작*/
ISProto._setCurrent = 함수(현재){
this.getOpts()["현재"] = 현재 ;
} ;
ISProto.getCurrentValue = 함수(현재){
return this.getOpts()["현재"] ;
} ;
/* 데이터 조작*/
ISProto.init = 함수(){
var that = this ;
this.getOpts()["current"] = null ; // 数据游标
this._setItemValue(this.getOpts()["currentText"]) ;
var itemsElem = that.getElem().find(".content .items") ;
this.getElem().find(".title div").on("click",function(){
itemsElem.toggle() ;
}) ;
this.getElem().find(".title 범위").on("클릭",function(){
itemsElem.toggle() ;
}) ;
$.each(this.getOpts()["items"],function(i,item){
item["id"] = (new Date().getTime()).toString() ;
that._render(항목) ;
}) ;
} ;
ISProto._setItemValue = 함수(값){
this.getElem().find(".title div").text(value)
} ;
ISProto._render = 함수(항목){
var that = this ;
var itemElem = $("")
.text(항목["텍스트"])
.attr("id",item["id"]) ;
if("0" == 항목["비활성화됨"]){
itemElem.on("클릭",function(){
var onChange = that.getOpts()["change"] ;
that.getElem().find(".content .items").hide() ;
that._setItemValue(item["text"]) ;
that._setCurrent(항목) ;
onChange && onChange(항목) ;
})
.mouseover(함수(){
$(this).addClass("item-hover") ;
})
.mouseout(함수(){
$(this).removeClass("item-hover") ;
}) ;
}
그렇지 않으면{
itemElem.css("color","#ccc").on("click",function(){
that.getElem().find(".content .items").hide() ;
that._setItemValue(item["text"]) ;
}) ;
}
itemElem.appendTo(this.getElem().find(".content .items")) ;
} ;
（4），最后总结
(1) ，면向对象적 思考方式합리분리析功能需求。
(2),以类的方来组织我们的插件逻辑。
(3), 不断寀(3), 不断设计进行实例, 如何进行审过对 不要设计过島, 要游刃有余, 推荐过程化设计与면向对象思想设计상합합。
（4），下篇文章中会扩能，比如“모드”这个属性，为"1"时支持checkbox多选模式，现在只是默认下拉模式。
本文先到这里了，后续我们再继续讨论，希望小伙伴们能够喜欢本系列文章。