<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          javascript 鏈式寫法,如何實現js方法的鏈式調用

          時間:?2017-11-10閱讀:?6207標簽:?鏈式

          熟悉Jquery的同學都知道,它對dom的操作基本都鏈式調用的寫法,這種給人感覺就是很簡潔,易懂,而且最大的好處就是避免多次重復使用一個對象變量。  

          鏈式的實現方式:

          鏈式操作是在對象的方法中通過最后返回自身對象(return this),返回的對象就可以繼續調用它里面的方法。那么,簡單實現一下:

          var Obj={
              num: 1,
              fn_a: function(){
                  this.num++;
                  return this;
              },
              fn_b:function(pram){
              	this.num=this.num*pram;
              	return this;
              },
          }
          Obj.fn_a().fn_b(5);
          console.log(Obj.num);//輸出10

          上面代碼Obj.fn_a().fn_b(5);可以分解為:

          //Obj.fn_a().fn_b(5);
          var a=Obj.fn_a();
          a=a.fn_b(5);
          console.log(a.num);//輸出10

          由于所有對象都會繼承其原型對象的屬性和方法,所以我們可以讓定義在原型對象中的那些方法都返回用以調用方法的實例對象的引用,這樣就可以對那些方法進行鏈式調用了。   那么jq是如何實現鏈式寫法的呢?介紹下jq是如何實現鏈式寫法的,例如:

          jQuery = function (selector, context) {
              return new jQuery.fn.init(selector, context, rootjQuery);
           },
          jQuery.fn = jQuery.prototype = {}
          jQuery.fn.init.prototype = jQuery.fn;

          可以看出jquery中return了一個實例,init函數里進行了處理初始化操作,比如選擇器,拼接字符串等等,最后再將jq的prototype 賦值給init方法的prototype。

          改造為工廠模式

          通過一個函數,利用它來創建了一個對象,然后返回這個對象。代碼如下:

          function Obj() {}
          Obj.prototype ={//擴展它的prototype
          	setNum:function (num) {
          		this.num = num;
          		return this;
          	},
          	fn_a:function(){
                  this.num++;
                  return this;
              },
              fn_b:function(pram){
              	this.num=this.num*pram;
              	return this;
              },
              getNum:function (){
                 return this.num;
              },
          };
          function I() {//工廠函數
          	return new Obj();
          }
          var num=I().setNum(1).fn_a().fn_b(5).getNum();
          console.log(num);


          Promise異步鏈式  

          Promise的出現其實是作為異步編程的一種解決方案。比傳統的解決方案-回調函數和事件-更加合理、強大。 下面就簡單講解一下它的異步鏈式的寫法,例如:

          function fn_a(num) {
              return new Promise(function (resolve, reject) {
                  if(num!= undefined){
                      num=num+1;
                      setTimeout(resolve(num), 500);
                  }else{//錯誤
                      reject("num未定義");
                  }
              });
          }
          function fn_b(num,parm) {
              return new Promise(function (resolve, reject) {
                      num=num*parm;
                      setTimeout(resolve(num), 1000);
                  
              });
          }
          fn_a(1).then(num=>{
              return fn_b(num,5);
          },error=>{
              console.log(error);
          }).then(num=>{
              console.log(num);//在1.5秒回返回10
          })

          以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作能帶來一定的幫助,如果有疑問大家可以留言交流。  

           

          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/84

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网