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

        看見了

        看見了 查看完整檔案

        廣州編輯廣東工業大學  |  信息管理與信息系統 編輯  |  填寫所在公司/組織 www.liuzongjie.cn 編輯
        編輯
        _ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 個人簡介什么都沒有

        個人動態

        看見了 關注了用戶 · 4月2日

        villainhr @villainhr

        現從事 微信社區核心開發
        http://developers.weixin.qq.com

        歡迎關注俺們的公眾號:零度的田

        關注 1071

        看見了 關注了用戶 · 4月2日

        游走走 @mr_sparta

        關注 1

        看見了 贊了文章 · 4月2日

        源碼學習之noop

        /**
           * Perform no operation.
           * Stubbing args to make Flow happy without leaving useless transpiled code
           * with ...rest (https://flow.org/blog/2017/05/07/Strict-Function-Call-Arity/).
           */
        function noop(a, b, c) { }

        這是一段vue2里的源碼。

        noop,是No Operation或No Operation Performed的縮寫,意為無操作。

        在匯編語言中,NOOP指令通常用于控制時序的目的,強制內存對齊,防止流水線災難,占據分支指令延遲),或是作為占位符以供程序的改善(或替代被移除的指令)。

        NOOP在各種語言中的例子:

        • 在C語言中,分號(;)或空塊({})都是NOOP。
        • jQuery中,“jQuery.noop()”函數會創建一個NOOP。
        • 在Perl中,省略號(…)可以用作NOOP。但是如果Perl嘗試執行代碼,則會給出未實現的異常。
        • 在Python中,“pass”語句可用作NOOP。
        • 在Visual Basic中,分號(;)表示NOOP。

        在vue源碼中的這個noop無操作空函數,主要作用就是為一些函數提供默認值,避免傳入undefined之類的數據導致代碼出錯。

        比如vue中:

            new Watcher(vm, updateComponent, noop, {
              before: function before() {
                if (vm._isMounted && !vm._isDestroyed) {
                  callHook(vm, 'beforeUpdate');
                }
              }
            }, true /* isRenderWatcher */);

        Watcher具體實現為:

        var Watcher = function Watcher(
            vm,
            expOrFn,
            cb,
            options,
            isRenderWatcher
        ) {
            ...
        }

        這里傳入noop空函數的作用,就是避免在調用回調函數cb時,程序報錯導致中斷(比如傳入undefined,執行cb的時候就會報cb is not a function錯誤)。

        這里也可以直接使用一個無操作的匿名函數來代替noop。在vue2的源碼中,共有20處使用了noop函數,如果每次都創建一個匿名函數,一個是降低了代碼的可讀性,另一個是在js壓縮時,這部分匿名函數是無法被壓縮的,降低了代碼的壓縮率。


        參考資料:

        查看原文

        贊 1 收藏 0 評論 0

        看見了 回答了問題 · 4月1日

        如何理解老板的這些話?

        建議關閉去別的社區問

        關注 2 回答 1

        看見了 贊了文章 · 3月31日

        常見的8個前端防御性編程方案

        關于前端防御性編程

        • 我們大多數情況可能遇到過,后端的由于同時請求人數過多,或者數據量過大,又或者是因為異常導致服務異常,接口請求失敗,然后前端出現白屏或者報錯
        • 還有一種情況,是前端自身寫的代碼存在一些缺陷,整個系統不夠健壯,從而會出現白屏,或者業務系統異常,用戶誤操作等
        • 那么,就出現了前端防御性編程

        常見的問題和防范

        1.最常見的問題:
        uncaught TypeError: Cannot read property 'c' of undefined

        出現這個問題最根本原因是:

        當我們初始化一個對象obj為{}時候,obj.a這個時候是undefined.我們打印obj.a可以得到undefined,但是我們打印obj.a.c的時候,就會出現上面的錯誤。js對象中的未初始化屬性值是undefined,從undefined讀取屬性就會導致這個錯誤(同理,null也一樣)

        如何避免?

        js和ts目前都出現了一個可選鏈概念,例如:

        const obj = {};
        console.log(obj?.b?.c?.d)
        上面的代碼并不會報錯,原因是?.遇到是空值的時候便會返回undefined.
        2.前端接口層面的錯誤機制捕獲

        前端的接口調用,一般都比較頻繁,我們這時候可以考慮使用單例模式,將所有的axios請求都用一個函數封裝一層。統一可以在這個函數中catch捕獲接口調用時候的未知錯誤,偽代碼如下:

        function ajax(url,data,method='get'){
          const promise = axios[method](url,data)
          return  promise.then(res=>{
          }).catch(error){
          //統一處理錯誤
        }
        }
        

        那么只要發生接口調用的未知錯誤都會在這里被處理了

        3.錯誤邊界(Error Boundaries,前端出現未知錯誤時,展示預先設定的UI界面)

        以React為例

        部分 UI 的 JavaScript 錯誤不應該導致整個應用崩潰,為了解決這個問題,React 16 引入了一個新的概念 —— 錯誤邊界。

        錯誤邊界是一種 React 組件,這種組件可以捕獲并打印發生在其子組件樹任何位置的 JavaScript 錯誤,并且,它會渲染出備用 UI,而不是渲染那些崩潰了的子組件樹。錯誤邊界在渲染期間、生命周期方法和整個組件樹的構造函數中捕獲錯誤。

        使用示例:

        class ErrorBoundary extends React.Component {
          constructor(props) {
            super(props);
            this.state = { hasError: false };
          }
        
          static getDerivedStateFromError(error) {
            // 更新 state 使下一次渲染能夠顯示降級后的 UI
            return { hasError: true };
          }
        
          componentDidCatch(error, errorInfo) {
            // 你同樣可以將錯誤日志上報給服務器
            logErrorToMyService(error, errorInfo);
          }
        
          render() {
            if (this.state.hasError) {
              // 你可以自定義降級后的 UI 并渲染
              return <h1>Something went wrong.</h1>;
            }
        
            return this.props.children; 
          }
        }
        注意
        • 錯誤邊界無法捕獲以下場景中產生的錯誤:

          • 事件處理(了解更多)
          • 異步代碼(例如 setTimeout 或 requestAnimationFrame 回調函數)
          • 服務端渲染
          • 它自身拋出來的錯誤(并非它的子組件)
        4.前端復雜異步場景導致的錯誤
        • 這個問題可能遠不止這么簡單,但是大道至簡,遵循單向數據流的方式去改變數據,例如:

          //test.js
          export const obj = {
            a:1,
            b:2
          }
          
          //使用obj
          import {obj} from './test.js';
          obj.a=3;

        當你頻繁使用這個obj對象時,你無法根據代碼去知道它的改變順序(即在某個時刻它的值是什么),而且這里面可能存在不少異步的代碼,當我們換一種方式,就能知道它的改變順序了,也更方便我們debug

        例如:

        //test.js
        export const obj = {
          a:1,
          b:2
        }
        export function setObj (key,value)  {
          console.log(key,value)
          obj[key] = value
        }
        這樣,我們就做到了
        5.前端專注“前端”
        • 對于一些敏感數據,例如登錄態,鑒權相關的。前端應該是盡量做無感知的轉發、攜帶(這樣也不會出現安全問題)
        6.頁面做到可降級
        • 對于一些剛上新的業務,或者有存在風險的業務模塊,或者會調取不受信任的接口,例如第三方的接口,這個時候就要做一層降級處理,例如接口調用失敗后,剔除對應模塊的展示,讓用戶無感知的使用
        7.巧用loading和disabled
        • 用戶操作后,要及時loading和disabled確保不讓用戶進行重復,防止業務側出現bug
        8.慎用innerHTML
        • 容易出現安全漏洞,例如接口返回了一段JavaScript腳本,那么就會立即執行。此時腳本如果是惡意的,那么就會出現不可預知的后果,特別是電商行業,尤其要注意

        ?? 看完三件事

        • 如果你覺得這篇內容對你挺有啟發,我想邀請你幫我三個小忙:
        • 點個「贊」,讓更多的人也能看到這篇內容(喜歡不點在看,都是耍流氓 -_-)
        • 關注我,讓我們成為長期關系
        • 關注公眾號「前端巔峰」,持續為你推送精選好文,也可以加我為好友,隨時聊騷。
        查看原文

        贊 10 收藏 4 評論 2

        看見了 關注了用戶 · 3月31日

        lulu_up @lulu_up

        自信自律, 終身學習.
        躬身入局, 皆為吾輩.

        關注 2190

        看見了 贊了回答 · 3月31日

        怎樣用js自動播放報警聲?

        playVideo() {
            const media = this.$refs['audioDom'];
            media.muted = true; // without this line it's not working although I have "muted" in HTML
            media.play();
        }

        聲音無法自動播放這個在IOS/Android上面一直是個慣例,桌面版的Safari在2017年的11版本也宣布禁掉帶有聲音的多媒體自動播放功能,緊接著在2018年4月份發布的Chrome 66也正式關掉了聲音自動播放,也就是說<audio autopaly></audio><video autoplay></video>在桌面版瀏覽器也將失效。

        最開始移動端瀏覽器是完全禁止音視頻自動播放的,考慮到了手機的帶寬以及對電池的消耗。但是后來又改了,因為瀏覽器廠商發現網頁開發人員可能會使用GIF動態圖代替視頻實現自動播放,正如IOS文檔所說,使用GIF的帶寬流量是Video(h264)格式的12倍,而播放性能消耗是2倍,所以這樣對用戶反而是不利的。又或者是使用Canvas進行hack,如Android Chrome文檔提到。因此瀏覽器廠商放開了對多媒體自動播放的限制,只要具備以下條件就能自動播放:

        (1)沒音頻軌道,或者設置了muted屬性

        (2)在視圖里面是可見的,要插入到DOM里面并且不是display: none或者visibility: hidden的,沒有滑出可視區域。
        詳見
        How to handle “Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.” on Desktop with Chrome 66?

        關注 3 回答 2

        看見了 贊了回答 · 3月31日

        解決flv.js使用遇到的問題

        這個問題不用糾結,因為可能是編碼問題,雖然擴展名是flv,但實際編碼或者封裝不一定是被支持的而已。

        關注 2 回答 1

        看見了 提出了問題 · 3月31日

        解決flv.js使用遇到的問題

        <!DOCTYPE html>
        <html lang="en">
         
        <head>
            <title>video</title>
            <!-- Video.js -->
            <link  rel="stylesheet">
            <script data-original="https://unpkg.com/video.js/dist/video.min.js"></script>
            <script data-original="https://unpkg.com/flv.js/dist/flv.min.js"></script>
            <script data-original="https://unpkg.com/videojs-flvjs/dist/videojs-flvjs.min.js"></script>
        </head>
         
        <body>
            <div>
                <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered"  width="1024" height="768"> </video>
            </div>
        </body>
         
        </html>
        <script>
        var flvUrl = "./demo.flv";
         
        var player = videojs('videojs-flvjs-player', {
            techOrder: ['html5', 'flvjs'],
            flvjs: {
                mediaDataSource: {
                    isLive: false,
                    cors: true,
                    withCredentials: false,
                },
            },
            sources: [{
                src: flvUrl,
                type: 'video/mp4'
            }],
            controls: true,
            preload: "none"
        }, function onPlayerReady() {
            console.log('player ready')
         
            player.on('error', (err) => {
                console.log('first source load fail')
         
                player.src({
                    src: flvUrl,
                    type: 'video/x-flv'
                });
         
                player.ready(function() {
                    console.log('player ready')
                    player.load();
                    player.play();
                });
            })
        });
        </script>

        這是我在網上找的一個例子,url的demo.flv是我本地播放的視頻文件,結果發現一直報錯。報錯如下:

        image.png

        然后我將這個視頻文件通過格式工廠轉成mp4再轉成flv就能正常播放了,想請問下有沒有人遇到這種情況,謝謝

        我用ffprobe得到以下信息:

        # 源視頻文件(不能正常播放)
        Input #0, flv, from './21.flv':
          Metadata:
            encoder         : Lavf55.21.100
          Duration: 00:00:17.48, start: 0.000000, bitrate: 3174 kb/s
            Stream #0:0: Video: flv1, yuv420p, 960x544, 3072 kb/s, 25 fps, 25 tbr, 1k tbn
            
        # 轉換過的視頻文件(能正常播放)
        Input #0, flv, from './t.flv':
          Metadata:
            major_brand     : isom
            minor_version   : 512
            compatible_brands: isomiso2avc1mp41
            encoder         : Lavf57.41.100
          Duration: 00:00:17.56, start: 0.080000, bitrate: 881 kb/s
            Stream #0:0: Video: h264 (High), yuv420p(progressive), 856x480 [SAR 320:321 DAR 16:9], 867 kb/s, 25 fps, 25 tbr, 1k tbn, 50 tbc

        應該是下面大佬說的視頻編碼問題.

        關注 2 回答 1

        看見了 報名了系列講座 · 3月29日

        認證與成就

        • 獲得 15 次點贊
        • 獲得 8 枚徽章 獲得 0 枚金徽章, 獲得 0 枚銀徽章, 獲得 8 枚銅徽章

        擅長技能
        編輯

        (??? )
        暫時沒有

        開源項目 & 著作
        編輯

        (??? )
        暫時沒有

        注冊于 2018-01-19
        個人主頁被 1.7k 人瀏覽

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