成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

ES6部分方法點(diǎn)評(píng)（三）：babel-preset-es2015-loose可轉(zhuǎn)換且移動(dòng)端兼容性較好

wean / 2291人閱讀

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

前言

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

討論基礎(chǔ)

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

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

在android4.0下面報(bào)esModule錯(cuò)誤的問題，如下：
Uncaught TypeError: Cannot assign to read only property "__esModule" of #。
經(jīng)查證，發(fā)現(xiàn)是構(gòu)建中babel-es2015 loader的模式問題，會(huì)導(dǎo)致Android4.0的用戶有報(bào)錯(cuò)。只需要使用loose mode就可以解決問題。下面是相關(guān)的stackoverflow issue以及對(duì)應(yīng)解決問題的npm包。



作者使用webpack作為構(gòu)建工具，并使用babel-loader調(diào)用babel來進(jìn)行轉(zhuǎn)換，但實(shí)際上不會(huì)對(duì)轉(zhuǎn)換出來的代碼造成任何影響。

可用的ES6語法

const、let


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


簡單的結(jié)構(gòu)


之所以加“簡單”，是因?yàn)楹唵蔚?b>結(jié)構(gòu)轉(zhuǎn)換出來的也就是簡單的代碼，沒啥問題。但是如果是復(fù)雜的結(jié)構(gòu)，那就會(huì)用到Symbol.iterator這兼容性不佳的方法了。



函數(shù)參數(shù)默認(rèn)值


箭頭函數(shù)


函數(shù)剩余參數(shù)（Rest Parameters）


對(duì)象字面量擴(kuò)展（Object Literal Extensions）中的精簡屬性、精簡方法



這倆其實(shí)沒省多少事，所以轉(zhuǎn)換也很簡單。



模板字符串（template string）


模塊化



由于模塊化主要還是用在開發(fā)階段，完事了打包到一起不會(huì)有什么奇怪的代碼出現(xiàn)，因此這一點(diǎn)不需要擔(dān)心。

慎用的ES6語法

對(duì)象字面量擴(kuò)展（Object Literal Extensions）中的計(jì)算屬性


/* 轉(zhuǎn)換前 */
const prop2 = "PROP2";
var obj = {
  [prop2]: 3
};
/* 轉(zhuǎn)換后 */
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);


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


類


轉(zhuǎn)換出來的代碼太多，沒細(xì)看，咋一看也是有Object.defineProperty，慎用吧，有經(jīng)驗(yàn)的兄弟也可以說一聲會(huì)不會(huì)出問題。

不可用

for...of


因?yàn)闀?huì)使用到Symbol.iterator

參考資料



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



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


babel官網(wǎng) - 試驗(yàn)轉(zhuǎn)換后的代碼

           
               
                                           
                       
                 
            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/86361.html

               

                      
               
              
              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    webpack多頁應(yīng)用架構(gòu)系列（八）：教練我要寫ES6！webpack怎么整合Babel？
    
                                                     
    摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。只是最近學(xué)習(xí)生態(tài)，用起來轉(zhuǎn)換之余，也不免碰到諸多用上的教程案例，因此便稍作學(xué)習(xí)。在當(dāng)前的瀏覽器市場(chǎng)下，想在生產(chǎn)環(huán)境用上，是必不可少的。

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

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

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

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

一、作用
根據(jù)你支持的環(huán)境自動(dòng)決定適合你的Babel插件
二、歷史版本（已被棄用）
1、babel-preset-latest
1.1 特點(diǎn)
包含了所有年度預(yù)設(shè)（ ...
    
                                                   
                          
    
                                
    
                                    孫吉亮
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           
           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              
              
            

             
        

    








<