国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6部分方法點評（三）：babel-preset-es2015-loose可轉換且移動端兼容性較好

wean / 2281人閱讀

摘要：是目前最常用的轉的工具，但即使是，各瀏覽器的支持度也是不一的，因此便產生了本文，找出一些能夠被翻譯成兼容性高代碼的語法。不可用因為會使用到參考資料，用來查瀏覽器兼容性。到底將代碼轉換成什么鳥樣，感謝。官網試驗轉換后的代碼

前言

由于目前各瀏覽器對ES6兼容性較低，再加上需要兼容歷史上各種版本的瀏覽器，因此，使用編譯器將ES6語法轉譯成ES5語法則勢在必行了。babel是目前最常用的ES6轉ES5的工具，但即使是ES5，各瀏覽器的支持度也是不一的，因此便產生了本文，找出一些能夠被翻譯成兼容性高代碼的ES6語法。

討論基礎

兼容IE10+、android4.0+、ios6+。

使用babel的一個preset：babel-preset-es2015-loose，原因如下：

在android4.0下面報esModule錯誤的問題，如下：
Uncaught TypeError: Cannot assign to read only property "__esModule" of #。
經查證，發現是構建中babel-es2015 loader的模式問題，會導致Android4.0的用戶有報錯。只需要使用loose mode就可以解決問題。下面是相關的stackoverflow issue以及對應解決問題的npm包。



作者使用webpack作為構建工具，并使用babel-loader調用babel來進行轉換，但實際上不會對轉換出來的代碼造成任何影響。

可用的ES6語法

const、let


const是由babel自己來判斷是否拋出異常的，生成的代碼只是普通的var；let則是改了下變量名，用的依然是var。


簡單的結構


之所以加“簡單”，是因為簡單的結構轉換出來的也就是簡單的代碼，沒啥問題。但是如果是復雜的結構，那就會用到Symbol.iterator這兼容性不佳的方法了。



函數參數默認值


箭頭函數


函數剩余參數（Rest Parameters）


對象字面量擴展（Object Literal Extensions）中的精簡屬性、精簡方法



這倆其實沒省多少事，所以轉換也很簡單。



模板字符串（template string）


模塊化



由于模塊化主要還是用在開發階段，完事了打包到一起不會有什么奇怪的代碼出現，因此這一點不需要擔心。

慎用的ES6語法

對象字面量擴展（Object Literal Extensions）中的計算屬性


/* 轉換前 */
const prop2 = "PROP2";
var obj = {
  [prop2]: 3
};
/* 轉換后 */
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

var prop2 = "PROP2";
var obj = _defineProperty({}, prop2, 3);


由上可知，這里用到了一個ES5方法Object.defineProperty,MDN說是IE9+，android/ios全系列的。


類


轉換出來的代碼太多，沒細看，咋一看也是有Object.defineProperty，慎用吧，有經驗的兄弟也可以說一聲會不會出問題。

不可用

for...of


因為會使用到Symbol.iterator

參考資料



caniuse.com，用來查瀏覽器兼容性。



babel 到底將代碼轉換成什么鳥樣？，感謝@lcxfs1991。


babel官網 - 試驗轉換后的代碼

           
               
                                           
                       
                 
            
                     
             
               

                   
 文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

                 
                   
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86361.html

               

                      
               
              
              

                
相關文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    webpack多頁應用架構系列（八）：教練我要寫ES6！webpack怎么整合Babel？
    
                                                     
    摘要：本文首發于的技術博客實用至上，非經作者同意，請勿轉載。只是最近學習生態，用起來轉換之余，也不免碰到諸多用上的教程案例，因此便稍作學習。在當前的瀏覽器市場下，想在生產環境用上，是必不可少的。

本文首發于Array_Huang的技術博客——實用至上，非經作者同意，請勿轉載。原文地址：https://segmentfault.com/a/1190000006992218如果您對本系列文章感興...
    
                                                   
                          
    
                                
    
                                    gnehc
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍（下）
    
                                                     
    摘要：在上篇，我們主要拋出了兩個問題，并給出了第一個問題的解決方案。沒有的實例方法可以采用方案三委屈下。放棄模式，放棄上篇中提到了開啟了模式來解決低版本瀏覽器無法繼承到在構造函數里定義的屬性或方法。

回顧
起因：
某天，某測試說：這個頁面在 IE8 下白屏，9也白。。某前端開發: 吭哧吭哧。。。一上午的時間就過去了，搞定了。第二天，某測試說：IE 又白了。。某前端開發: 嘿咻嘿咻。。。誰用的...
    
                                                   
                          
    
                                
    
                                    Freelander
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    ES6 + Webpack + React + Babel 如何在低版本瀏覽器上愉快的玩耍（上）
    
                                                     
    摘要：起因某天，某測試說這個頁面在下白屏，也白。。某前端開發吭哧吭哧。。。一上午的時間就過去了，搞定了。第二天，某測試說又白了。。某前端開發吭哧吭哧。。。誰用的，出來我保證削不屎你。原諒我不禁又黑了一把。

起因
某天，某測試說：這個頁面在 IE8 下白屏，9也白。。
某前端開發: 吭哧吭哧。。。一上午的時間就過去了，搞定了。
第二天，某測試說：IE 又白了。。
某前端開發: 吭哧吭哧。。。誰...
    
                                                   
                          
    
                                
    
                                    you_De
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    構建常用npm包
    
                                                     
    摘要：它適用于普通的，而你無需關心要為哪些瀏覽器加前綴，只需全新關注于實現，并使用最新的規范。會調用所依賴的模塊對文件進行編譯包括語法。

前言
最近看到一篇文章《迷茫時學習Node.js最好的方法》一直以來對node的個人心理傾向于做前端工具，而不是web服務。所以一直以來都沒好好學node。
基礎配置
1.html-webpack-plugin
為html文件中引入的外部資源如script...
    
                                                   
                          
    
                                
    
                                    lastSeries
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    babel-preset-env
    
                                                     
    摘要：一作用根據你支持的環境自動決定適合你的插件二歷史版本已被棄用特點包含了所有年度預設，無需用戶單獨指定某個預設。特點分別支持不同版本的規范，將轉成，只將比新增加的特性轉成。比如在整個應用里只能引入一次，可以在模塊里一次引入。

一、作用
根據你支持的環境自動決定適合你的Babel插件
二、歷史版本（已被棄用）
1、babel-preset-latest
1.1 特點
包含了所有年度預設（ ...
    
                                                   
                          
    
                                
    
                                    孫吉亮
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           
           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              
              
            

             
        

    







<