<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>

          通過2行js代碼實現DOM屬性的封裝以及交換兩個變量的值

          時間:?2017-12-27閱讀:?1025標簽:?封裝

          1. 封裝 DOM 屬性

          在 JavaScript 中,我們可以獲取HTML元素的屬性值,例如 element.id 。但是,因為 for 和 class 是 JavaScript 中的關鍵字,所以在 JavaScript 中這兩個屬性名稱分別用 htmlFor 和 className 代替,于是在封裝的時候需要先對這兩個屬性進行特殊判斷。通常,我們會這么寫:

          function getAttr(el, attrName){
          var attr;
          if ('for' == attrName) {
          attr = 'htmlFor';
          } else if ('class' == attrName) {
          attr = 'className';
          } else {
          attr = attrName;
          }
          }

          但是我在精通 JavaScript 發現了一種很妙的寫法, John Resig 是這么寫的:

          function getAttr(el, attrName){
             var attr = {'for':'htmlFor', 'class':'className'}[attrName] || attrName;
          }

          構建了一個對象來做判斷,實在是巧妙!這樣一來節省了很多代碼,也就減少了BUG出現的可能性,而且也沒有喪失其可讀性,是很值得學習的。


          2. 交換兩個變量的值

          這個問題相信學過一點編程的人都知道,一般來說我們會這么寫:

          var foo = 1;
          var bar = 2;
           
          var temp = foo;
          foo = bar;
          bar = temp;

          通過一個臨時變量來做數據的緩沖,很直觀。但是否可以不使用臨時變量呢?看一下下面的這行代碼:

          foo = [bar, bar=foo][0];

          沒有使用到臨時變量,而是利用了數組。實在是妙!

          當然使用ES6將更簡單:

          [foo,bar]=[bar,foo]

          上面這兩行代碼看上去很簡單,不像一些諸如高級算法之類的代碼那么顯眼,但是,如果不是對語言本身非常了解,如果沒有多年的編程經驗和思考,如果對數據結構不熟悉,絕對不可能寫出這樣的代碼。或許這種對每一行代碼的深思熟慮,正是大師和平庸程序員之間的區別所在。

          另外,這也從側面說明了:編程的時候不要忘記思考,否則你就只是一個完成工作的機器。所以,如果你現在的工作只是讓你瘋狂做業務而不給你思考和學習的時間,別猶豫,換一個。

          站長推薦

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

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

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

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

          原生JS實現動畫函數的封裝

          封裝了一個JS方法,支持元素的基本動畫:寬、高、透明度...等,也支持鏈式動畫和同時運動。獲取元素的屬性的函數并進行了兼容性處理:

          ant design vue 表格a-table二次封裝,slots渲染問題

          目的就是對a-table進行二次封裝,但是在如何顯示a-table的slot時遇到了問題,原本想法是在a-table內把$slots都渲染,期望在使用該組件時能正確渲染,然而。。。并不會正確渲染

          JS封裝getScroll函數 & 案例:固定導航欄

          封裝getScroll函數:1. 獲取頁面向上或者向左卷曲出去的距離的值,2. 瀏覽器的滾動事件。固定導航欄獲取scrollTop值后判斷高度大于導航欄的高,就設置樣式固定住

          JS多態封裝繼承

          JS是一種基于對象的語言,在JS中幾乎所有的東西都可以看成是一個對象,但是JS中的對象模型和大多數面向對象語言的對象模型不太一樣,因此理解JS中面向對象思想十分重要,接下來本篇文章將從多態、封裝、繼承

          JS防抖函數、節流函數工具類封裝

          當持續觸發事件時,一定時間段內沒有再觸發事件,事件處理函數才會執行一次, 如果設定時間到來之前,又觸發了事件,就重新開始延時。也就是說當一個用戶一直觸發這個函數,且每次觸發函數的間隔小于既定時間

          使用Promise封裝小程序wx.request

          現在嘗試把wx.request簡單的封裝了一下,調用一個request方法,每次請求自動攜帶header頭信息,這樣就省事多了,包含了常見的get post put delete 四種請求方法,支持Promise方式調用。

          原生js實現ajax的封裝

          ajax 的全稱是Asynchronous JavaScript and XML,簡單理解下:ajax就是異步的js和服務端的數據;GET請求的數據會附在URL之后, 以 ? 分割URL和傳輸數據, 參數之間以 & 相連

          JQuery組件封裝之return this.each(function () {});

          這個時候就要說each了,還是之前的,倘若頁面上有N個class為div的元素呢,即:this.length>1,這里each就必然要上場了,且每個對象都要返回,所以此段代碼無疑是最方便的寫法了

          微信和支付寶中的一些常用方法封裝

          最近做了同一個樣子的小程序的支付寶版本,現在如果想想是開發兩次的話心里應該是很難受的。去年11月12月份左右開發了兩個微信小程序是一個在超市買商品的,一個用戶版本,一個商戶版本的。我們團隊看到了uniapp這個東西

          關于那些變化萬千,開箱即用的 Promise 高度封裝方法

          在日常開發中,我們少不了使用 Promise,而透過封裝抽象方法,可以避免造輪子,寫出更加優雅的代碼。例如:將任意函數,化為具有異步能力的函數、改裝成具有并發上千萬請求的函數、使用 Web Worker 來使用不同線程、暫停若干秒再繼續

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

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

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

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