如何將此ES6代碼重寫爲與Safari兼容？

我有一些使用ES6箭頭函數的Vue.js代碼。然而，顯然Safari（在一種情況下，它在OSX上出現Chrome）不喜歡這樣。這裏是代碼：如何將此ES6代碼重寫爲與Safari兼容？

fetchItemCount: function(){ 
       this.$http.get('/api/fetchItemCount') 
        .then(response => { 
         this.itemCount = response.data; 
        }) 
        .catch(response => { 

        }); 
      },

我有幾個使用箭頭語法的函數。我如何重寫它們以避免使用它，但仍然執行相同的工作？

我一直在使用通天transpile代碼嘗試，但似乎引入錯誤（無法設置屬性未定義或空引用「Vue公司」）

來源

2016-07-22 flurpleplurple

您可以使用https://babeljs.io/將您的代碼轉換爲ES5 –

Safari（10）的下一個版本也將支持箭頭功能和ES6的所有其他部分。不過，舊版本的瀏覽器仍然需要ES5代碼，可以使用babel等轉換程序進行轉換（在上面的註釋中提到）。 – nils

請參閱我的編輯 - 我曾嘗試使用Babel，但它引入了錯誤。 – flurpleplurple

正如其他人所使用transpiler如巴貝爾會做說明技巧，但因爲這並不總是可能的，這裏是沒有箭頭功能的樣子。

fetchItemCount: function(){ 
    var that = this; 
    this.$http.get('/api/fetchItemCount') 
     .then(function(response) { 
      that.itemCount = response.data; 
     }) 
     .catch(function(response) { 

     }); 
},

什麼箭頭的功能給你基本上是保持它的聲明，其中的this範圍功能，從而重現，我們只需要在外部範圍分配this到一個新的變量，並使用裏面的功能。

由於LinusBorg的評論，指出使用vue-resource時，你不必做var that = this;部分，因爲該庫將在回調改變this爲你的外部範圍。這是專門針對vue-resource資源，而不是通常如何與承諾完成，所以它通常不會與其他庫一起工作。

來源

2016-07-22 13:49:01

這正是我一直在尋找的，謝謝！ – flurpleplurple

雖然你的解釋通常是正確的，但在使用vue-resource時，'that = this' closure並不是必須的，因爲它將回調函數綁定到了vm的範圍。 –

很高興知道，儘管我會按照它的方式繼續回答，因爲它不是承諾綁定到外部環境的正常行爲。但我會記下它！ –

其實你需要重寫你的代碼，至少不是手動的。你可以做的就是不斷編寫類似你給出的例子的代碼，並使用像Babel這樣的轉譯器將ES6代碼重寫爲ES5。

通過使用像Gulp或Grunt這樣的任務管理器，您可以使其對自己幾乎透明。

如果您需要了解如何使用任務管理器，請查看this article。它給你一個關於如何使用Gulp的簡短和重點概述。

閱讀之後，您會看到通過一些Gulp腳本自動查看文件和簡化其內容是多麼容易。所以只需使用Gulp Babel plugin自動爲您執行此轉儲任務。

例如：

const gulp = require('gulp'); 
const babel = require('gulp-babel'); 

gulp.task('transpile',() => { 
    return gulp.src('src/MY-VUE-SOURCE.js') 
     .pipe(babel({ 
      presets: ['es2015'] 
     })) 
     .pipe(gulp.dest('SOME_DESTINATION')); 
}); 

gulp.task('watch', function() { 
    gulp.watch(['src/**/*'], ['transpile']); 
});

運行一飲而盡手錶，它不停地奔跑，直到手動停止，您對MY-VUE-SOURCE.js將自動transpiled爲你進行任何更改後。

來源

2016-07-22 13:53:55

我確實使用Gulp並嘗試使用Bower。但是，當我切換到使用Babelified代碼時，我開始出現一個錯誤，這是在Vue.js庫代碼的開始處發生的：'無法設置未定義或空引用的屬性'Vue'。這是使用ES2015 Babel預設。 – flurpleplurple

請看看。 –

如何將此ES6代碼重寫爲與Safari兼容？

回答

相關問題