<dfn id="hx5t3"><strike id="hx5t3"><em id="hx5t3"></em></strike></dfn>

    <thead id="hx5t3"></thead><nobr id="hx5t3"><font id="hx5t3"><rp id="hx5t3"></rp></font></nobr>

    <listing id="hx5t3"></listing>

    <var id="hx5t3"></var>
    <big id="hx5t3"></big>

      
      

      <output id="hx5t3"><ruby id="hx5t3"></ruby></output>
      <menuitem id="hx5t3"><dfn id="hx5t3"></dfn></menuitem>

      <big id="hx5t3"></big>

        親愛的阿乾

        親愛的阿乾 查看完整檔案

        北京編輯  |  填寫畢業院校阿乾  |  前端工程師 編輯 css0.com/wangqian/dist/#/home 編輯
        編輯

        此時無能為力,此心隨波逐流
        github https://github.com/LincolnPack
        qq 1834574131

        個人動態

        親愛的阿乾 發布了文章 · 3月29日

        圖片模糊,全局加上以下代碼,便可治愈

        img {

        image-rendering: -moz-crisp-edges;
        image-rendering: -o-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;

        }

        查看原文

        贊 1 收藏 1 評論 0

        親愛的阿乾 發布了文章 · 3月22日

        scrollTo滾動效果

        Math.easeInOutQuad = function (t, b, c, d) {
          t /= d / 2
          if (t < 1) {
            return c / 2 * t * t + b
          }
          t--
          return -c / 2 * (t * (t - 2) - 1) + b
        }
        
        // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
        var requestAnimFrame = (function () {
          return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60) }
        })()
        
        /**
         * Because it's so fucking difficult to detect the scrolling element, just move them all
         * @param {number} amount
         */
        function move(amount, domTarget) {
          if (domTarget && document.querySelector(domTarget)) {
            document.querySelector(domTarget).scrollTop = amount
          } else if (document.querySelector('.base')) {
            document.querySelector('.base').scrollTop = amount
          }
          document.documentElement.scrollTop = amount
          document.body.parentNode.scrollTop = amount
          document.body.scrollTop = amount
        }
        
        function position(domTarget) {
          if (domTarget && document.querySelector(domTarget)) {
            return document.querySelector(domTarget).scrollTop || document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
          }
          return document.querySelector('.base') && document.querySelector('.base').scrollTop || document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
        }
        
        /**
         * @param {number} to
         * @param {number} duration
         * @param {Function} callback
         */
        export function scrollTo(to, duration, callback, domTarget) {
          const start = position(domTarget)
          const change = to - start
          const increment = 20
          let currentTime = 0
          duration = (typeof (duration) === 'undefined') ? 500 : duration
          var animateScroll = function () {
            // increment the time
            currentTime += increment
            // find the value with the quadratic in-out easing function
            var val = Math.easeInOutQuad(currentTime, start, change, duration)
            // move the document.body
            move(val, domTarget)
            // do the animation unless its over
            if (currentTime < duration) {
              requestAnimFrame(animateScroll)
            } else {
              if (callback && typeof (callback) === 'function') {
                // the animation is done so lets callback
                callback()
              }
            }
          }
          animateScroll()
        }
        
        
        // 代碼中使用
        // import { scrollTo } from "Tools/scroll-to";
        // scrollTo(0, 1600, '', '.target');
        查看原文

        贊 0 收藏 0 評論 0

        親愛的阿乾 關注了用戶 · 3月19日

        安歌 @linlinma

        RingCentral廈門前端,隨緣答題,不定期寫文章。

        ---小廣告分割線---
        RingCentral廈門、杭州地區目前有大量hc(可以長期遠程辦公).
        朝九晚五,不打卡不加班;
        年假超長,入職即享10天起;
        免費英文口語課,幫助提升口語;
        需要內推請私信或投遞簡歷到郵箱
        ma13635251979@163.com(微信13635251979)
        全程跟進面試進度,提供力所能及的咨詢幫助~

        關注 922

        親愛的阿乾 發布了文章 · 3月4日

        算法 時間復雜度和空間復雜度

        算法 時間復雜度和空間復雜度

        查看原文

        贊 0 收藏 0 評論 0

        親愛的阿乾 發布了文章 · 3月4日

        手寫vue 事件中心

        $on
        $emit
        $once
        $off

        查看原文

        贊 0 收藏 0 評論 0

        親愛的阿乾 發布了文章 · 3月3日

        js 中的循環

        while
        do while
        for
        for in
        for of
        Object.keys()
        Object.values()
        forEach
        map

        查看原文

        贊 0 收藏 0 評論 0

        親愛的阿乾 發布了文章 · 3月3日

        break continue return

        break continue return 區別

        查看原文

        贊 0 收藏 0 評論 0

        親愛的阿乾 提出了問題 · 3月2日

        element-ui源碼解讀-radio

        餓了么el-radio先宏觀分析一下,首先看看radio有幾種形態或者說有幾種使用方式吧。

        1. 單獨食用
        2. 單選框組

          • 普通radio
          • button radio

        所以源碼就有了這幾個文件
        image.png

        我們先解讀radio.vue這個文件
        模板部分我們快速略過...
        我們直接看js部分

        import Emitter from 'element-ui/src/mixins/emitter';
         
        export default {
            name: 'ElRadio',
            mixins: [Emitter],
        }

        mixins 知多少

        混入 (mixin) 提供了一種非常靈活的方式,來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被“混合”進入該組件本身的選項。

        上面是官話,不過都是精華,上面有幾個關鍵的地方‘可復用’ ,‘混入組件的本身的選項’。

        • 食用場景

        一般被混入的對象是可復用的部分,比如一些方法具有通用性,就放到混入里面,哪些vue文件需用直接improt導入混入文件,然后mixins 就可以直接食用?;页:唵?。

        • 混入規則

        當組件和混入對象含有同名選項時,這些選項將以恰當的方式進行“合并”。
        比如,數據對象在內部會進行遞歸合并,并在發生沖突時以組件數據優先。

        emitter.js 是什么

        進去看看吧

        function broadcast(componentName, eventName, params) {
          this.$children.forEach(child => {
            var name = child.$options.componentName;
        
            if (name === componentName) {
              child.$emit.apply(child, [eventName].concat(params));
            } else {
              broadcast.apply(child, [componentName, eventName].concat([params]));
            }
          });
        }
        export default {
          methods: {
            dispatch(componentName, eventName, params) {
              var parent = this.$parent || this.$root;
              var name = parent.$options.componentName;
        
              while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;
        
                if (parent) {
                  name = parent.$options.componentName;
                }
              }
              if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params));
              }
            },
            broadcast(componentName, eventName, params) {
              broadcast.call(this, componentName, eventName, params);
            }
          }
        };
        

        代碼如上,也沒幾行,問題不大,咱們慢慢消化。
        dispatch,broadcast 這兩個單詞屬性不,在vue1.0文檔中有這兩個api。vue2.0廢棄了,官方考慮是基于組件樹結構的事件流方式實在是讓人難以理解,并且在組件結構擴展的過程中會變得越來越脆落。特別是在組件層級比較深的情況下。通過廣播和事件分發的機制,就顯得比較混亂了。
        對呀,為啥廢棄的api餓了么又撿起來用呢,是不是傻呀。不急不急我們慢慢看嘛。

        關注 1 回答 0

        親愛的阿乾 發布了文章 · 3月1日

        element-ui源碼解讀-radio

        餓了么el-radio先宏觀分析一下,首先看看radio有幾種形態或者說有幾種使用方式吧。

        1. 單獨食用
        2. 單選框組

          • 普通radio
          • button radio

        所以源碼就有了這幾個文件
        image.png

        我們先解讀radio.vue這個文件
        模板部分我們快速略過...
        我們直接看js部分

        import Emitter from 'element-ui/src/mixins/emitter';
         
        export default {
            name: 'ElRadio',
            mixins: [Emitter],
        }

        mixins 知多少

        混入 (mixin) 提供了一種非常靈活的方式,來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時,所有混入對象的選項將被“混合”進入該組件本身的選項。

        上面是官話,不過都是精華,上面有幾個關鍵的地方‘可復用’ ,‘混入組件的本身的選項’。

        • 食用場景

        一般被混入的對象是可復用的部分,比如一些方法具有通用性,就放到混入里面,哪些vue文件需用直接improt導入混入文件,然后mixins 就可以直接食用?;页:唵?。

        • 混入規則

        當組件和混入對象含有同名選項時,這些選項將以恰當的方式進行“合并”。
        比如,數據對象在內部會進行遞歸合并,并在發生沖突時以組件數據優先。

        emitter.js 是什么

        進去看看吧

        function broadcast(componentName, eventName, params) {
          this.$children.forEach(child => {
            var name = child.$options.componentName;
        
            if (name === componentName) {
              child.$emit.apply(child, [eventName].concat(params));
            } else {
              broadcast.apply(child, [componentName, eventName].concat([params]));
            }
          });
        }
        export default {
          methods: {
            dispatch(componentName, eventName, params) {
              var parent = this.$parent || this.$root;
              var name = parent.$options.componentName;
        
              while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;
        
                if (parent) {
                  name = parent.$options.componentName;
                }
              }
              if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params));
              }
            },
            broadcast(componentName, eventName, params) {
              broadcast.call(this, componentName, eventName, params);
            }
          }
        };
        

        代碼如上,也沒幾行,問題不大,咱們慢慢消化。
        dispatch,broadcast 這兩個單詞屬性不,在vue1.0文檔中有這兩個api。vue2.0廢棄了,官方考慮是基于組件樹結構的事件流方式實在是讓人難以理解,并且在組件結構擴展的過程中會變得越來越脆落。特別是在組件層級比較深的情況下。通過廣播和事件分發的機制,就顯得比較混亂了。
        對呀,為啥廢棄的api餓了么又撿起來用呢,是不是傻呀。不急不急我們慢慢看嘛。

        查看原文

        贊 0 收藏 0 評論 0

        親愛的阿乾 發布了文章 · 3月1日

        餓了么element-ui源碼解讀 button

        發現自己編碼遇到瓶頸時,就讀一下優秀框架的源碼,就會受到一些啟發。
        button 組件是element-ui 最簡單的組件,就從它開始吧。

        inject: {
          elForm: {
            default: ''
          },
          elFormItem: {
            default: ''
          }
        }

        何為inject

        provide 和 inject 主要為高階插件/組件庫提供用例。并不推薦直接用于應用程序代碼中。是2.2.0版本 新增的。
        這對選項需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下游關系成立的時間里始終生效。

        有了上面的概念我們就清楚了,inject 就是父組件(或者祖父組件)向子組件注入了一個變量,子組件就可以通過訪問這個變量來使用父組件內的屬性或者方法了,那么如何在父組件內使用呢,以上面el-button來舉例,在el-form組件內有如下代碼,會通過變量elForm將組件的實例this注入到子組件el-button中。

         provide () {
            return {
              elForm: this
            }
          },

        vue 組件的依賴注入 inject provide 你學費了嘛

        繼續閱讀源碼,在計算屬性computed中發現這段代碼

         buttonDisabled() {
            return this.disabled || (this.elForm || {}).disabled;
         }

        this.disabled 是props參數,this.elForm是父組件(或者祖父組件)實例。如果el-button沒有搭配el-form使用,則在el-button組件內訪問不到this.elForm。我們看上面那段代碼的騷操作。簡短一句話,就解釋清楚了。如果是我可能會這么寫。

        buttonDisabled() {
            let flag = false;
            if(!this.disabled){
                if(this.elForm && this.elForm.disabled){
                    flag = true;
                }else{
                    flag = false;
                }
            }else{
                flag = true;
            }
            return flag;
        }
        

        開個玩笑,你不會真的以為我會這樣寫吧。
        但是我可能會這樣寫

        buttonDisabled() {
            let flag = false;
            if(!this.disabled){
                flag = this.elForm && this.elForm.disabled;
            }else{
                flag = true;
            }
            return flag;
        }

        不不,應該會這樣寫

        buttonDisabled() {
            return this.disabled || this.elForm && this.elForm.disabled;
        }

        還是餓了么的源碼有逼格。

        查看原文

        贊 0 收藏 0 評論 0

        認證與成就

        • 獲得 282 次點贊
        • 獲得 2 枚徽章 獲得 0 枚金徽章, 獲得 0 枚銀徽章, 獲得 2 枚銅徽章

        擅長技能
        編輯

        開源項目 & 著作
        編輯

        • yeah-ui

          基于vue,element-ui二次封裝的ui組件庫

        注冊于 2017-12-26
        個人主頁被 4.2k 人瀏覽

        一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕