• <sub id="h4knl"><ol id="h4knl"></ol></sub>
    <sup id="h4knl"></sup>
      <sub id="h4knl"></sub>

      <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
      1. <strong id="h4knl"></strong>

      2. JavaScript插件化開發(fā)講解

        時(shí)間:2024-05-26 05:15:37 JavaScript 我要投稿
        • 相關(guān)推薦

        JavaScript插件化開發(fā)講解

         �。�一),開篇分析

          Hi,大家好!前兩篇文章我們主要講述了以“jQuery的方式如何開發(fā)插件”,以及過程化設(shè)計(jì)與面向?qū)ο笏枷朐O(shè)計(jì)相結(jié)合的方式是如何設(shè)計(jì)一個(gè)插件的,兩種方式各有利弊取長補(bǔ)短,嘿嘿嘿,廢話少說,進(jìn)入正題。直接上實(shí)際效果圖:

          大家看到了吧,這是一個(gè)下拉菜單插件,在我們?nèi)粘i_發(fā)中,系統(tǒng)提供的可能有時(shí)讓我們覺得不是很美觀并且功能有限,造成用戶

          的體驗(yàn)形式以及用戶的可交互性不是很好,所以今天模擬一個(gè)嘿嘿嘿。下面就具體分析一下吧。

          (二),實(shí)例分析

         �。�1),首先確定這個(gè)插件做什么事。下面看一下插件的調(diào)用方式,以及配置參數(shù)說明。如下代碼:

          復(fù)制代碼 代碼如下:

          $(function(){

          var itemSelector = new ItemSelector($("#item-selector"),{

          currentText : "Please Choose Item" ,

          items : [

          {

          text : "JavaScript" ,

          value : "js" ,

          disabled : "1"

          } ,

          {

          text : "Css" ,

          value : "css" ,

          disabled : "0"

          } ,

          {

          text : "Html" ,

          value : "html" ,

          disabled : "0"

          }

          ] ,

          mode : "0" , // 為"1"時(shí)支持checkbox多選模式

          change : function(value){

          // put your code here

          }

          }) ;

          itemSelector.init() ;

          setTimeout(function(){

          console.log(itemSelector.getCurrentValue()) ; // 測(cè)試 獲取當(dāng)先選中項(xiàng)

          },2000) ;

          “var itemSelector = new ItemSelector()”里面包含兩個(gè)參數(shù),第一個(gè)是dom節(jié)點(diǎn)對(duì)象,第二個(gè)是插件參數(shù)選項(xiàng),"currentText"代表“ItemSelector“插件中,選中文本顯示區(qū)域的文字描述。

          ”items“是一個(gè)數(shù)組,里面包含的是“ItemSelector”項(xiàng)目的屬性,包括文字描述,選項(xiàng)值,”disabled“代表列表?xiàng)l目的可顯度,0代表顯示,1代表不可顯示。

          ”change“代表選中時(shí)的操作回調(diào)函數(shù),選項(xiàng)數(shù)據(jù)會(huì)以參數(shù)的形式進(jìn)行回傳。

         �。�2),所涉的功能有哪些

          可顯的效果圖如下:

          不可顯的效果圖如下:

          二者的區(qū)別是:不可現(xiàn)狀態(tài)數(shù)據(jù)不會(huì)回傳,懸浮上去不會(huì)有任何效果。

         �。ㄈ�,完整代碼以供學(xué)習(xí),本代碼已經(jīng)過測(cè)試,包括目錄結(jié)構(gòu)以及相關(guān)的文件。

          (1),html

          復(fù)制代碼 代碼如下:

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

          ↓

         �。�2),css

          復(fù)制代碼 代碼如下:

          /* item-selector */

          #item-selector {

          margin : 0 auto;

          width : 220px ;

          overflow:hidden;

          border:2px solid #ccc;

          }

          #item-selector .title {

          border-bottom:1px solid #ccc;

          overflow:hidden;

          }

          #item-selector .title div {

          width:190px;

          border:0px ;

          color:#999;

          font-family: arial ;

          font-size: 14px;

          height:28px;

          line-height:28px;

          float:left;

          cursor:pointer;

          }

          #item-selector .title span {

          display:block;

          height:30px;

          line-height:30px;

          width:29px;

          float:left;

          text-align:center;

          border-left:1px solid #ccc;

          cursor:pointer;

          }

          #item-selector .content {

          width : 220px ;

          overflow:hidden;

          }

          #item-selector .content .items {

          overflow:hidden;

          }

          #item-selector .content .items div {

          padding-left:20px;

          width : 200px ;

          height:32px;

          line-height:32px;

          font-family: "微軟雅黑" ;

          font-size: 14px;

          font-weight:bold;

          cursor:pointer;

          }

          .item-hover {

          background:#3385ff;

          color:#fff;

          }

          (3),"ItemSelector.js"

          復(fù)制代碼 代碼如下:

          function ItemSelector(elem,opts){

          this.elem = elem ;

          this.opts = opts ;

          } ;

          var ISProto = ItemSelector.prototype ;

          ISProto.getElem = function(){

          return this.elem ;

          } ;

          ISProto.getOpts = function(){

          return this.opts ;

          } ;

          /* data manip*/

          ISProto._setCurrent = function(current){

          this.getOpts()["current"] = current ;

          } ;

          ISProto.getCurrentValue = function(current){

          return this.getOpts()["current"] ;

          } ;

          /* data manip*/

          ISProto.init = function(){

          var that = this ;

          this.getOpts()["current"] = null ; // 數(shù)據(jù)游標(biāo)

          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 span").on("click",function(){

          itemsElem.toggle() ;

          }) ;

          $.each(this.getOpts()["items"],function(i,item){

          item["id"] = (new Date().getTime()).toString() ;

          that._render(item) ;

          }) ;

          } ;

          ISProto._setItemValue = function(value){

          this.getElem().find(".title div").text(value)

          } ;

          ISProto._render = function(item){

          var that = this ;

          var itemElem = $("

          ")

          .text(item["text"])

          .attr("id",item["id"]) ;

          if("0" == item["disabled"]){

          itemElem.on("click",function(){

          var onChange = that.getOpts()["change"] ;

          that.getElem().find(".content .items").hide() ;

          that._setItemValue(item["text"]) ;

          that._setCurrent(item) ;

          onChange && onChange(item) ;

          })

          .mouseover(function(){

          $(this).addClass("item-hover") ;

          })

          .mouseout(function(){

          $(this).removeClass("item-hover") ;

          }) ;

          }

          else{

          itemElem.css("color","#ccc").on("click",function(){

          that.getElem().find(".content .items").hide() ;

          that._setItemValue(item["text"]) ;

          }) ;

          }

          itemElem.appendTo(this.getElem().find(".content .items")) ;

          } ;

          (四),最后總結(jié)

         �。�1),面向?qū)ο蟮乃伎挤绞胶侠矸治龉δ苄枨蟆?/p>

         �。�2),以類的方式來組織我們的插件邏輯。

         �。�3),不斷重構(gòu)上面的實(shí)例,如何進(jìn)行合理的重構(gòu)那?不要設(shè)計(jì)過度,要游刃有余,推薦的方式是過程化設(shè)計(jì)與面向?qū)ο笏枷朐O(shè)計(jì)相結(jié)合。

          (4),下篇文章中會(huì)擴(kuò)展相關(guān)功能,比如“mode”這個(gè)屬性,為"1"時(shí)支持checkbox多選模式,現(xiàn)在只是默認(rèn)下拉模式。

          本文先到這里了,后續(xù)我們?cè)倮^續(xù)討論,希望小伙伴們能夠喜歡本系列文章。

        《&.doc》
        将本文的Word文档下载到电脑,方便收藏和打印
        推荐度:
        点击下载文档

        【JavaScript插件化開發(fā)講解】相關(guān)文章:

        JavaScript的課堂講解09-03

        JavaScript日期時(shí)間格式化函數(shù)08-29

        對(duì)javascript的理解08-08

        常用的JavaScript模式09-22

        Javascript的this用法簡述08-15

        JavaScript學(xué)習(xí)筆記08-24

        JavaScript 基礎(chǔ)教學(xué)09-29

        辦公自動(dòng)化的應(yīng)用與開發(fā)07-10

        AE影視常用插件FORM的應(yīng)用技巧09-03

        JavaScript常用方法匯總10-25

        国产高潮无套免费视频_久久九九兔免费精品6_99精品热6080YY久久_国产91久久久久久无码
      3. <sub id="h4knl"><ol id="h4knl"></ol></sub>
        <sup id="h4knl"></sup>
          <sub id="h4knl"></sub>

          <sub id="h4knl"><ol id="h4knl"><em id="h4knl"></em></ol></sub><s id="h4knl"></s>
          1. <strong id="h4knl"></strong>

          2. 强奷乱码中文字幕熟女网 | 亚洲码一区二区三区在线看 | 香蕉久久99综合一区二区三区 | 性色AⅤ一区二区三区天美传媒 | 亚洲精品正在线污污污 | 亚洲成AV人片在线观看无 |

            JavaScript插件化開發(fā)講解

             �。�一),開篇分析

              Hi,大家好!前兩篇文章我們主要講述了以“jQuery的方式如何開發(fā)插件”,以及過程化設(shè)計(jì)與面向?qū)ο笏枷朐O(shè)計(jì)相結(jié)合的方式是如何設(shè)計(jì)一個(gè)插件的,兩種方式各有利弊取長補(bǔ)短,嘿嘿嘿,廢話少說,進(jìn)入正題。直接上實(shí)際效果圖:

              大家看到了吧,這是一個(gè)下拉菜單插件,在我們?nèi)粘i_發(fā)中,系統(tǒng)提供的可能有時(shí)讓我們覺得不是很美觀并且功能有限,造成用戶

              的體驗(yàn)形式以及用戶的可交互性不是很好,所以今天模擬一個(gè)嘿嘿嘿。下面就具體分析一下吧。

              (二),實(shí)例分析

             �。�1),首先確定這個(gè)插件做什么事。下面看一下插件的調(diào)用方式,以及配置參數(shù)說明。如下代碼:

              復(fù)制代碼 代碼如下:

              $(function(){

              var itemSelector = new ItemSelector($("#item-selector"),{

              currentText : "Please Choose Item" ,

              items : [

              {

              text : "JavaScript" ,

              value : "js" ,

              disabled : "1"

              } ,

              {

              text : "Css" ,

              value : "css" ,

              disabled : "0"

              } ,

              {

              text : "Html" ,

              value : "html" ,

              disabled : "0"

              }

              ] ,

              mode : "0" , // 為"1"時(shí)支持checkbox多選模式

              change : function(value){

              // put your code here

              }

              }) ;

              itemSelector.init() ;

              setTimeout(function(){

              console.log(itemSelector.getCurrentValue()) ; // 測(cè)試 獲取當(dāng)先選中項(xiàng)

              },2000) ;

              “var itemSelector = new ItemSelector()”里面包含兩個(gè)參數(shù),第一個(gè)是dom節(jié)點(diǎn)對(duì)象,第二個(gè)是插件參數(shù)選項(xiàng),"currentText"代表“ItemSelector“插件中,選中文本顯示區(qū)域的文字描述。

              ”items“是一個(gè)數(shù)組,里面包含的是“ItemSelector”項(xiàng)目的屬性,包括文字描述,選項(xiàng)值,”disabled“代表列表?xiàng)l目的可顯度,0代表顯示,1代表不可顯示。

              ”change“代表選中時(shí)的操作回調(diào)函數(shù),選項(xiàng)數(shù)據(jù)會(huì)以參數(shù)的形式進(jìn)行回傳。

             �。�2),所涉的功能有哪些

              可顯的效果圖如下:

              不可顯的效果圖如下:

              二者的區(qū)別是:不可現(xiàn)狀態(tài)數(shù)據(jù)不會(huì)回傳,懸浮上去不會(huì)有任何效果。

             �。ㄈ�,完整代碼以供學(xué)習(xí),本代碼已經(jīng)過測(cè)試,包括目錄結(jié)構(gòu)以及相關(guān)的文件。

              (1),html

              復(fù)制代碼 代碼如下:

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

              ↓

             �。�2),css

              復(fù)制代碼 代碼如下:

              /* item-selector */

              #item-selector {

              margin : 0 auto;

              width : 220px ;

              overflow:hidden;

              border:2px solid #ccc;

              }

              #item-selector .title {

              border-bottom:1px solid #ccc;

              overflow:hidden;

              }

              #item-selector .title div {

              width:190px;

              border:0px ;

              color:#999;

              font-family: arial ;

              font-size: 14px;

              height:28px;

              line-height:28px;

              float:left;

              cursor:pointer;

              }

              #item-selector .title span {

              display:block;

              height:30px;

              line-height:30px;

              width:29px;

              float:left;

              text-align:center;

              border-left:1px solid #ccc;

              cursor:pointer;

              }

              #item-selector .content {

              width : 220px ;

              overflow:hidden;

              }

              #item-selector .content .items {

              overflow:hidden;

              }

              #item-selector .content .items div {

              padding-left:20px;

              width : 200px ;

              height:32px;

              line-height:32px;

              font-family: "微軟雅黑" ;

              font-size: 14px;

              font-weight:bold;

              cursor:pointer;

              }

              .item-hover {

              background:#3385ff;

              color:#fff;

              }

              (3),"ItemSelector.js"

              復(fù)制代碼 代碼如下:

              function ItemSelector(elem,opts){

              this.elem = elem ;

              this.opts = opts ;

              } ;

              var ISProto = ItemSelector.prototype ;

              ISProto.getElem = function(){

              return this.elem ;

              } ;

              ISProto.getOpts = function(){

              return this.opts ;

              } ;

              /* data manip*/

              ISProto._setCurrent = function(current){

              this.getOpts()["current"] = current ;

              } ;

              ISProto.getCurrentValue = function(current){

              return this.getOpts()["current"] ;

              } ;

              /* data manip*/

              ISProto.init = function(){

              var that = this ;

              this.getOpts()["current"] = null ; // 數(shù)據(jù)游標(biāo)

              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 span").on("click",function(){

              itemsElem.toggle() ;

              }) ;

              $.each(this.getOpts()["items"],function(i,item){

              item["id"] = (new Date().getTime()).toString() ;

              that._render(item) ;

              }) ;

              } ;

              ISProto._setItemValue = function(value){

              this.getElem().find(".title div").text(value)

              } ;

              ISProto._render = function(item){

              var that = this ;

              var itemElem = $("

              ")

              .text(item["text"])

              .attr("id",item["id"]) ;

              if("0" == item["disabled"]){

              itemElem.on("click",function(){

              var onChange = that.getOpts()["change"] ;

              that.getElem().find(".content .items").hide() ;

              that._setItemValue(item["text"]) ;

              that._setCurrent(item) ;

              onChange && onChange(item) ;

              })

              .mouseover(function(){

              $(this).addClass("item-hover") ;

              })

              .mouseout(function(){

              $(this).removeClass("item-hover") ;

              }) ;

              }

              else{

              itemElem.css("color","#ccc").on("click",function(){

              that.getElem().find(".content .items").hide() ;

              that._setItemValue(item["text"]) ;

              }) ;

              }

              itemElem.appendTo(this.getElem().find(".content .items")) ;

              } ;

              (四),最后總結(jié)

             �。�1),面向?qū)ο蟮乃伎挤绞胶侠矸治龉δ苄枨蟆?/p>

             �。�2),以類的方式來組織我們的插件邏輯。

             �。�3),不斷重構(gòu)上面的實(shí)例,如何進(jìn)行合理的重構(gòu)那?不要設(shè)計(jì)過度,要游刃有余,推薦的方式是過程化設(shè)計(jì)與面向?qū)ο笏枷朐O(shè)計(jì)相結(jié)合。

              (4),下篇文章中會(huì)擴(kuò)展相關(guān)功能,比如“mode”這個(gè)屬性,為"1"時(shí)支持checkbox多選模式,現(xiàn)在只是默認(rèn)下拉模式。

              本文先到這里了,后續(xù)我們?cè)倮^續(xù)討論,希望小伙伴們能夠喜歡本系列文章。