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

1, 오프닝 분석

안녕하세요 지난 글 기억하시나요? 주로 '탭' 플러그인이 코드를 정리하고 구현하는 방법과 절차적 디자인과 객체지향 디자인을 결합하는 방법에 대해 이야기합니다

플러그인을 설계하는 방법은 두 가지 모두 장점과 단점이 있습니다. 이 기사 시리즈는 특정 시나리오에서 플러그인을 사용하는 방법을 결정할 수 있습니다. 이 글에서는 여전히 "Tab" 인스턴스인

에 초점을 맞추고 있습니다.

관련 기능을 계속 확장해 나가겠습니다. 야야야, 쓸데없는 소리 그만하고 본론으로 들어가라. 실제 렌더링을 직접 업로드하세요:

보시다시피, 새로운 기능이 추가되었습니다. 초기화 중에 모듈 구성 정보 항목의 항목 수가 지정한 것보다 많으면 "추가 모듈"에 표시됩니다.

작업 항목의 숨겨진 목록에는 초기화 매개변수 구성도 조정되었습니다. 예를 들어 초기화 중 항목 수를 지정하는 추가 "displayMax"와 프로젝트 속성 "status"가 있습니다.

초기화 중에 불필요한 구성도 제거됩니다. 구성은 프로그램에서 동적으로 생성되므로 아래에서 자세히 분석해 보겠습니다.

(2), 예시분석

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

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

{
ButtonText: "모듈 추가" ,
결과: [
            {
              텍스트: "가이드 팁",
​​​​​​ URL: "help.html",
showClose : "0"
          } ,
            {
             텍스트: "학생 정보" ,
​​​​​​ URL: "info.html",
             showClose: "1"
          } ,
            {
              텍스트: "학생 분류" ,
   URL: "category.html" ,
             showClose: "1"
          } ,
            {
               텍스트: "빅 베어 {{bb}}" ,
   URL: "bb.html" ,
showClose : "1"
          } ,
            {
              텍스트: "베타 테스트 모듈" ,
​​​​​​ URL: "test.html",
showClose : "1"
          } ,
            {
             텍스트: "세 지방" ,
​​​​​​ URL: "help.html",
showClose : "1"
          } ,
            {
             텍스트: "네 명의 대머리 남자",
​​​​​​ URL: "help.html",
             showClose: "1"
}
] ,
displayMax : 5 // 최대 표시 항목
} 

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

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

"상태"도 초기화 중에 제거되며 구성이 프로그램에서 동적으로 생성됩니다. 1 - 기본 표시, 0 - 닫힌 상태, 2 - 기본 항목 수 초과로 표현되는 닫힌 상태가 있을 수 있습니다.

(2), 기능을 단계별로 소개합니다

1--- 선택적 매개변수를 통해 플러그인을 초기화합니다.

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

$(함수(){
Bigbear.ui.createTab($("#tab"),{
​​​​buttonText: "모듈 추가",
결과 : [
                {
                 텍스트: "가이드 팁" ,
                    URL: "help.html",
showClose : "0"
              },
                {
                 텍스트: "학생 정보",
                  URL: "info.html",
showClose: "1"
              },
                {
                텍스트: "학생 분류",
                   URL: "category.html",
showClose: "1"
              },
                {
                  텍스트: "큰 곰 {{bb}}" ,
   URL: "bb.html" ,
showClose: "1"
              },
                {
                  텍스트: "베타 테스트 모듈" ,
                 URL: "test.html",
showClose: "1"
              },
                {
                텍스트: "세 지방" ,
                   URL: "help.html",
showClose: "1"
              },
                {
> >        텍스트: "네 명의 대머리 남자" ,
                   URL: "help.html",
showClose: "1"
            }
] ,
          displayMax: 5 // 최대 표시 항목
}) ;
}) ;                 

2---, 초기화 중 항목 수 확인과 같은 시간 바인딩 및 관련 비즈니스 로직을 렌더링하고 완료합니다.

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

tabProto.init = function(){
    if(this._isEmptyResult()){
        this._setContent("暂无任何模块!") ;
    }
    var that = this ;
    this.getElem().find(".title .adder")
    .text(" " this.getOpts()["buttonText"])
    .on("클릭",function(){
        that.getElem().find(".console-panel").slideToggle(function(){
            that._renderConsolePanel("0") ;
        }) ;
    }) ;
    $.each(this.getOpts()["result"],function(i,item){
        if(that._isDisplayMax(i 1)){
            that._saveOrUpdateStatus(item,"1") ;
        }
        그렇지 않으면{
            that._saveOrUpdateStatus(item,"2") ;
        }
        that._render(항목) ;
    }) ;
    if(!that._isDisplayMax(this.getOpts()["result"].length)){
        this.getElem().find(".title .more-mod").fadeIn(function(){
            $(this).find(".tag").on("클릭",function(){
                var 루트 = $(this).next() ;
                root.empty() ;
                $.each(that._getItemListByStatus("2"),function(i,data){
                    $("

").text(data["text"])
                    .on("클릭",function(){
                        if(that._getItemListByStatus("1").length                             that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                                that._saveOrUpdateStatus(data,"1") ;
                            }) ;
                        }
                        그렇지 않으면{
                            Alert("不能添加任何模块，目前已经是最大数weight！") ;
                        }
                    })
                    .appendTo(루트) ;
                }) ;
                root.toggle() ;
            }) ;
           
        });
    }
    this.getElem().find(".title .items div")
    .eq(0)
    .trigger("클릭") ; // 假定是必须有一项，否则插件意义就不大了！
} ;

3---, 탭 전환 및 데이터 콘텐츠 렌더링 작업.

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

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() ;
} ;  

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

item.on("클릭",function(){
That._setCurrent($(this).index()) ;
That._getContent(data["url"]).done(function(result){
That._setContent(결과) ;
})
.fail(함수(){
            새로운 오류 발생("Net Error !") ;
});
})

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

tabProto._setContent = 함수(html){
This.getElem().find(".content").html(html) ;
} ;
tabProto._getContent = 함수(url){
$.ajax({
반환   url: url
}) ;
} ;

4--- 핵심 보조 데이터 연산 방식은 DOM을 포함하지 않습니다.

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

/* 업데이트 시간 2015년 1월 26일 15:36 */
tabProto._isDisplayMax = 함수(크기){
var displayMax = this.getOpts()["displayMax"] || 5 ;
반환(크기 } ;
tabProto._isEmptyResult = function(){
If(!this.getOpts()["result"].length){
          false 반환 ;
}
true를 반환합니다 ;
} ;
tabProto._saveOrUpdateStatus = 함수(항목,상태){
아이템["상태"] = 상태 ;
} ;
tabProto._getItemListByStatus = 함수(상태){
var 목록 = [] ;
var 결과 = this.getOpts()["result"] ;
$.each(결과,함수(i,항목){
If(상태 == 항목["상태"]){
              list.push(항목);
         }
}) ;
반품 목록 ;
} ;
tabProto._getStatusByIndex = 함수(색인){
var 상태 = null ;
var 결과 = this.getOpts()["result"] ;
$.each(결과,함수(i,항목){
If(색인 == 항목["색인"]){
상태 = 항목["상태"] ;
         }
}) ;
반품상태 ;
} ;

(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 .more-mod {
     오버플로:숨김;
     테두리:1px 솔리드 #DC143C;
     너비:70px;
     위치:절대;
     오른쪽:0;
     여백 오른쪽:6px;
     디스플레이:없음;
 }
 .dxj-ui-bd #tab .title .more-mod .tag{
     높이:32px;
     줄 높이:32px;
     너비:70px;
     배경: #DC143C;
     색상:#fff;
     글꼴 계열: arial ;
     글꼴 크기: 12px;
     텍스트 정렬: 중앙;
     커서:포인터;
 }
 .dxj-ui-bd #tab .title .more-mod .mods {
     오버플로:숨김;
     너비:70px;
     디스플레이:없음;
 }
 .dxj-ui-bd #tab .title .more-mod .mods div {
     높이:24px;
     줄 높이:24px;
     너비:62px;
     글꼴 계열: arial ;
     글꼴 크기: 12px;
     커서:포인터;
     왼쪽 패딩:10px;
 }
 .dxj-ui-bd #tab .title .items {
     높이:32px;
 
     너비:480px;
     오버플로: 숨김;
     부동 : 왼쪽;
 }
 .dxj-ui-bd #tab .title .items div {
     패딩:0px;
     여백-왼쪽:10px;
     너비:84px;
     높이: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,bigbear.js

复主代码 代码如下:

(function($){
    var win = window ;
    var bb = win.bigbear = win.bigbear || {
        ui : {}
    } ;
    var ui = bb.ui = {} ;
    var Tab = function(elem,opts){
        this.elem = elem ;
        this.opts = opts ;
    } ;
    var tabProto = Tab.prototype ;
    /* update time 2015 1/26 15:36 */
    tabProto._isDisplayMax = function(size){
        var displayMax = this.getOpts()["displayMax"] || 5 ;
        return (size     } ;
    tabProto._isEmptyResult = function(){
        if(!this.getOpts()["result"].length){
            return false ;
        }
        return true ;
    } ;
    tabProto._saveOrUpdateStatus = function(item,status){
        item["status"] = status ;
    } ;
    tabProto._getItemListByStatus = function(status){
        var list = [] ;
        var result = this.getOpts()["result"] ;
        $.each(result,function(i,item){
            if(status == item["status"]){
                list.push(item) ;
            }
        }) ;
        return list ;
    } ;
    tabProto._getStatusByIndex = function(index){
        var status = null ;
        var result = this.getOpts()["result"] ;
        $.each(result,function(i,item){
            if(index == item["index"]){
                status = item["status"] ;
            }
        }) ;
        return status ;
    } ;
    tabProto._renderConsolePanel = function(status){
        var that = this ;
        var root = that.getElem().find(".console-panel") ;
        this._resetConsolePanel() ;
        $.each(that._getItemListByStatus(status),function(i,item){
            var elem = $("

").appendTo(루트) ;
            $("")
            .data("항목",항목)
            .appendTo(elem) ;
            $("").text(item["text"]).appendTo(elem) ;
        }) ;
        if(root.find("div").size()){
            $("")
            .on("클릭",function(){
                var data = root.find("input[type=radio]:checked").data("item") ;
                if(that._getItemListByStatus("1").length                     that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                        that._saveOrUpdateStatus(data,"1") ;
                    })
                    .trigger("클릭") ;
                }
                그렇지 않으면{
                    that._saveOrUpdateStatus(data,"2") ;
                }
                that.getElem().find(".title .adder").trigger("클릭") ;
            })
            .appendTo(루트) ;
        }
        그렇지 않으면{
            root.text("暂无任何可添加的项目!") ;
        }
    } ;
    /* 업데이트 시간 2015년 1/26 15:36 */ 
    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를 반환하세요 ;
    } ;
    tabProto._resetContent = function(){
        this.getElem().find(".content").html("") ;
    } ;
    tabProto._setContent = 함수(html){
        this.getElem().find(".content").html(html) ;
    } ;
    tabProto._getContent = 함수(url){
        $.ajax({
반환             url : url
        }) ;
    } ;
    tabProto._deleteItem = 함수(elem){
        var that = this ;
        this.getElem().find(".title .items div")
        .eq(elem.index())
        .fadeOut(함수(){
            that._resetContent() ;
            that._saveOrUpdateStatus(elem.data("item"),"0") ;
            that._triggerItem(elem.index() + 1) ;
        }) ;
    } ;
    tabProto._triggerItem = function(next){
        var nextStatus = this._getStatusByIndex(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._resetConsolePanel = function(){
        this.getElem().find(".console-panel").empty() ;
    } ;
    tabProto.init = function(){
        if(this._isEmptyResult()){
            this._setContent("暂无任何模块!") ;
        }
        var that = this ;
        this.getElem().find(".title .adder")
        .text("+" + this.getOpts()["buttonText"])
        .on("click",function(){
            that.getElem().find(".console-panel").slideToggle(function(){
                that._renderConsolePanel("0") ;
            }) ;
        }) ;
        $.each(this.getOpts()["result"],function(i,item){
            if(that._isDisplayMax(i + 1)){
                that._saveOrUpdateStatus(item,"1") ;
            }
            else{
                that._saveOrUpdateStatus(item,"2") ;
            }
            that._render(item) ;
        }) ;
        if(!that._isDisplayMax(this.getOpts()["result"].length)){
            this.getElem().find(".title .more-mod").fadeIn(function(){
                $(this).find(".tag").on("click",function(){
                    var root = $(this).next() ;
                    root.empty() ;
                    $.each(that._getItemListByStatus("2"),function(i,data){
                        $("

").text(data["text"])
                        .on("click",function(){
                            if(that._getItemListByStatus("1").length                                 that.getElem().find(".title .items div").eq(data["index"]).fadeIn(function(){
                                    that._saveOrUpdateStatus(data,"1") ;
                                }) ;
                            }
                            else{
                                alert("不能添加任何模块，目前已经是最大数量！") ;
                            }
                        })
                        .appendTo(root) ;
                    }) ;
                    root.toggle() ;
                }) ;
                
            });
        }
        this.getElem().find(".title .items div")
        .eq(0)
        .trigger("click") ; // 假定是必须有一项，否则插件意义就不大了！
    } ;
    tabProto._render = function(data){
        var that = this ;
        var item = $("

").text(data["text"]).appendTo(this.getElem().find(".title .items")) ;
        데이터["index"] = item.index() ;
        item.on("클릭",function(){
            that._setCurrent($(this).index()) ;
            that._getContent(data["url"]).done(function(result){
                that._setContent(결과) ;
            })
            .fail(함수(){
                throw new Error("Net Error !") ;
            });
        })
        .data("항목",data) ;
        if("2" == 데이터["상태"]){
            item.hide() ;
        }
        if("1" == 데이터["showClose"]){
            $("X")
            .on("클릭",function(){
                if(win.confirm("是否删除此项?")){
                    that._deleteItem(항목) ;
                    거짓을 반환 ; // 阻止冒泡
                }
            })
            .appendTo(항목) ;
        }
    } ;
    ui.createTab = 함수(elem,opts){
        var 탭 = 새 탭(elem,opts) ;
        tab.init() ;
        리턴 탭 ;
    } ;   
})(jQuery) ;

　　

（4），最后总结

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

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

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