JavaScript 플러그인 개발 튜토리얼(3)_javascript 기술

1, 오프닝 분석

이전 두 기사에서는 "jQuery를 활용한 플러그인 개발 방법"과 절차적 디자인과 객체지향 디자인을 결합하는 방법을 주로 다루었습니다

플러그인을 설계하는 방법은 두 가지 모두 장점과 단점이 있습니다. 이 기사 시리즈는 특정 시나리오에서 플러그인을 사용하는 방법을 결정할 수 있습니다. 그래서 오늘 이 글부터 시작하여 예제 형식으로 얕은 것부터 깊은 것까지 자신만의 플러그인 라이브러리를 개발하는 과정을 안내해 드리겠습니다. 야야야, 쓸데없는 소리 그만하고 본론으로 들어가라. 실제 렌더링을 직접 업로드하세요:

보시다시피 이것은 우리가 매일 단일 페이지 애플리케이션("SPA")을 만들 때 접할 수 있는 탭 플러그인입니다.

우리는 여러 모듈로 구성되는 BS 구조를 기반으로 시스템을 구축하고 있습니다. 이 플러그인을 통해 모듈을 효과적으로 관리할 수 있습니다.

의 경험 형태와 사용자 상호작용성을 아래에서 자세히 분석해 보겠습니다.

(2), 예시분석

(1) 먼저 이 플러그인의 기능을 확인하세요. 플러그인이 호출되는 방식과 구성 매개변수 설명을 살펴보겠습니다. 다음 코드:

코드 복사 코드는 다음과 같습니다.

bigbear.ui.createTab($("#tab"),{
​​buttonText: "모듈 추가" ,
결과: [
            {
               텍스트: "가이드 팁" ,
​​​​​​ URL: "help.html",
showClose : "0" ,
상태: "1"
           } ,
            {
               텍스트: "학생 정보" ,
​​​​​​ URL: "info.html",
showClose : "1" ,
상태: "1"
           } ,
            {
               텍스트: "학생 분류" ,
   URL: "category.html" ,
showClose : "1" ,
상태: "1"
           } ,
            {
                 텍스트: "빅 베어 {{bb}}" ,
​​​​​​ URL: "bb.html",
showClose : "1" ,
상태: "1"
           } ,
            {
              텍스트: "베타 테스트 모듈" ,
​​​​​​ URL: "test.html",
showClose : "1" ,
상태: "1"
         }
]
}) ;

"bigbear.ui.createTab"에는 두 개의 매개변수가 포함되어 있습니다. 첫 번째는 dom 노드 개체이고 두 번째는 플러그인 매개변수 옵션입니다. "buttonText"는 "Tab" 플러그에 있는 작업 버튼의 텍스트 설명을 나타냅니다. -안에.

"result"는 텍스트 설명, 탭 항목을 클릭할 때 요청하는 데 사용되는 URL 등 탭 항목의 속성을 포함하는 배열입니다. "showClose"는 탭 옵션이 닫기 버튼을 표시하는지 여부를 나타냅니다.

"상태"는 기본적으로 열려 있고 닫힐 수 있는 옵션의 상태를 나타냅니다(1-열림, 0-닫음).

(2), 관련된 기능은 무엇인가요

다음 예와 같이 선택적 매개변수를 통해 관련 옵션 항목을 동적으로 생성합니다.

코드 복사 코드는 다음과 같습니다.

bigbear.ui.createTab($("#tab"),{
ButtonText: "모듈 추가" ,
결과: [
            {
              텍스트: "jQuery 소스 코드 분석" ,
​​​​​​ URL: "help.html",
showClose : "0" ,
상태: "1"
          } ,
            {
                텍스트: "빅 베어 {{bb}}}" ,
   URL: "bb.html" ,
showClose : "1" ,
상태: "1"
}
]
}) ;

효과는 다음과 같습니다.

아래와 같이 항목 옵션을 자유롭게 추가하고 삭제할 수 있습니다.

위 그림은 모듈이 없을 때 나타나는 상황 중 하나입니다.

두 번째 경우로, 이전에 삭제한 데이터를 복원할 수 있습니다.

(3) 학습을 위한 완전한 코드 , 이 코드는 디렉토리 구조와 관련 파일을 포함하여 테스트되었습니다.

　(1),html

코드 복사 코드는 다음과 같습니다.

       

            大熊君{{bb}} - DXJ UI ------ 탭
       

       

           

               

                   

                        添加school生信息
                   

                   

                       
                   

               

               

               

               

                   
               

           

       

   

(2)，css文件代码

复主代码 代码如下:

.dxj-ui-hd {
    패딩:0px ;
    여백 : 0 자동;
    여백 상단:30px;
    너비:780px;
    높이:60px;
    줄 높이: 60px;
    배경: #3385ff;
    색상:#fff;
    글꼴 모음: "微软雅黑" ;
    글꼴 크기: 28px;
    텍스트 정렬: 중앙;
    글꼴 두께:굵게;
}
.dxj-ui-bd {
    패딩:0px ;
    여백 : 0 자동;
    너비:778px;
    패딩탑 : 30px ;
    패딩 바닥 : 30px ;
    오버플로: 숨김;
    테두리:1px 솔리드 #3385ff;
}
.dxj-ui-bd #탭 {
    패딩:0px ;
    여백 : 0 자동;
    너비:720px;
    오버플로: 숨김;
}
.dxj-ui-bd #tab .title {
    너비:720px;
    오버플로: 숨김;
    border-bottom:2px solid #3385ff;
}
.dxj-ui-bd #tab .title .adder {
    너비:160px;
    높이:32px;
    줄 높이: 32px;
    배경: #DC143C;
    색상:#fff;
    글꼴 모음: "微软雅黑" ;
    글꼴 크기: 14px;
    텍스트 정렬: 중앙;
    글꼴 두께:굵게;
    부동 : 왼쪽;
    커서:포인터;
}
.dxj-ui-bd #tab .title .items {
    높이:32px;
    여백-왼쪽:20px;
    너비:540px;
    오버플로: 숨김;
    부동 : 왼쪽;
}
.dxj-ui-bd #tab .title .items div {
    패딩:0px;
    여백-왼쪽:10px;
    너비:96px;
    높이:32px;
    줄 높이: 32px;
    배경: #3385ff;
    색상:#fff;
    글꼴 계열: 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;
    최소 높이:130px;
    텍스트 정렬:가운데;
}
.dxj-ui-bd #tab .content 테이블 {
    여백 : 0 자동 ;
}
.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;
    border-bottom:2px solid #3385ff;
    배경:#fff;
    디스플레이:없음;
}
.활성 {
    글꼴 두께:굵게 ;
}

(3)，Js代码如下：

复主代码 代码如下:

$(함수(){
Bigbear.ui.createTab($("#tab"),{
​​​​buttonText: "모듈 추가",
결과 : [
                {
                 텍스트: "가이드 팁" ,
                   URL: "help.html",
                showClose: "0",
상태 : "1"
              },
                {
                 텍스트: "학생 정보",
                  URL: "info.html",
                showClose: "1",
상태 : "1"
              },
                {
                텍스트: "학생 분류",
                   URL: "category.html",
                showClose: "1",
상태 : "1"
              },
                {
                  텍스트: "큰 곰 {{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 = 선택 ;
} ;
var tabProto = Tab.prototype ;
tabProto._deleteItem = 함수(항목){
        var that = this ;
This.getElem().find(".title .items div")
        .eq(item["index"])
         .fadeOut(function(){
That._resetContent() ;
That._updateStatus(항목) ;
That._triggerItem(item["index"] 1) ;
That.getElem().find(".title .adder").trigger("클릭") ;
         }) ;
} ;
tabProto._triggerItem = 함수(다음){
        var nextStatus = this._getStatus(next) ;
        var items = this.getElem().find(".title .items div") ;
        next = items.eq(next) ;
        if(next.size() && "1" == nextStatus){ //后继dom节点存在
            next.trigger("click") ;
        }
        else{
            items.eq(0).trigger("click") ;
        }
    } ;
    tabProto._getStatus = function(index){
        var status = "" ;
        $.each(this.getOpts()["result"],function(i,item){
            if(index == item["index"]){
                status += item["status"] ;
                return false ;
            }
        }) ;
        return status ;
    } ;
    tabProto._updateStatus = function(item){
        var status = item["status"] ;
        item["status"] = ("1" == status) ? "0" : "1" ;
    } ;
    tabProto.init = function(){
        var that = this ;
        this.getElem().find(".title .adder")
        .text("+" + this.getOpts()["buttonText"])
        .on("click",function(){
            that._toggleConsolePanel(function(){
                var root = that.getElem().find(".console-panel").empty() ;
                $.each(that.getOpts()["result"],function(i,item){
                    if("0" == item["status"]){
                        var elem = $("

")
                        .data("항목",항목)
                        .appendTo(루트) ;
                        $("").appendTo(elem) ;
                        $("").text(item["text"]).appendTo(elem) ;
                    }
                }) ;
                if(root.find("div").size()){
                    $("")
                    .on("클릭",function(){
                        var data = root.find("input[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("클릭") ;
                    })
                    .appendTo(루트) ;
                }
                그렇지 않으면{
                    root.text("暂无任何可添加的项目!") ;
                }
            }) ;
        }) ;
        $.each(this.getOpts()["result"],function(i,item){
            item["index"] = i ;
            that._render(항목) ;
        }) ;
        this.getElem().find(".title .items div")
        .eq(0)
        .trigger("클릭") ; // 假定是必须有一项，否则插件意义就不大了！
    } ;
    tabProto._toggleConsolePanel = 함수(콜백){
        this.getElem().find(".console-panel").slideToggle(function(){
            $.isFunction(콜백) && 콜백() ;
        }) ;
    } ;
    tabProto._resetContent = function(){
        this.getElem().find(".content").html("") ;
    } ;
    tabProto._setContent = 함수(html){
        this.getElem().find(".content").html(html) ;
    } ;
    tabProto._getContent = 함수(url){
        $.ajax({
반환             url : url
        }) ;
    } ;
    tabProto._render = 함수(데이터){
        var that = this ;
        var 항목 = $("

")
        .text(data["텍스트"])
        .on("클릭",function(){
            that._setCurrent(data["index"]) ;
            that._getContent(data["url"]).done(function(result){
                that._setContent(결과) ;
            })
            .fail(함수(){
                throw new Error("Net Error !") ;
            });
        })
        .appendTo(this.getElem().find(".title .items")) ;
        if("1" == 데이터["showClose"]){
            $("X")
            .on("클릭",function(){
                if(win.confirm("是否删除此项?")){
                    that._deleteItem(데이터) ;
                    거짓을 반환 ; // 阻止冒泡
                }
            })
            .appendTo(항목) ;
        }
    } ;
    tabProto._setCurrent = 함수(색인){
        var items = this.getElem().find(".title .items div").removeClass("active") ;
        items.eq(index).addClass("active") ;
        var 내용 = this.getElem().find(".content .c").hide() ;
        내용.eq(index).show() ;
    } ;   
    tabProto.getElem = 함수(){
        this.elem을 반환하세요 ;
    } ;
    tabProto.getOpts = function(){
        this.opts를 반환하세요 ;
    } ;
    ui.createTab = 함수(elem,opts){
        var 탭 = 새 탭(elem,opts) ;
        tab.init() ;
        리턴 탭 ;
    } ;       
})(jQuery) ;

（4），最后总结

　　(1) ，면向对象적 思考方式합리분리析功能需求。

　　(2),以类的方来组织我们的插件逻辑。

　　(3), 不断寀(3), 不断设计进行实例, 如何进行审过对 不要设计过島, 要游刃有余, 推荐过程化设计与면向对象思想设计상합합。