最近我開發(fā)的公司的競賽網(wǎng)站被發(fā)現(xiàn)在IE11下排行榜無數(shù)據(jù)，但是在其他瀏覽器沒問題，我然后打開控制臺一看，發(fā)現(xiàn)了如下錯誤：

真是醉了，然后發(fā)現(xiàn)有三個可行的方案：

直接采用 polyfill

在index.html中

<script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> 
或 <script type="text/javascript" src ="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6"></script>

手寫 js 腳本判斷一下

<script type="text/javascript">
 function isIE() {
  if (!!window.ActiveXObject || "ActiveXObject" in window) {
  return true;
 } else {
 return false;
 }
}
if (isIE()) {
 var script = document.createElement('script');
 script.type = 'text/javaScript';
  script.src = 'js/bluebird.min.js'; // bluebird 文件地址
  // http://cdn.jsdelivr.net/bluebird/3.5.0/bluebird.min.js
 document.getElementsByTagName('head')[0].appendChild(script);
}

</script>

安裝新的依賴

1、npm install --save babel-polyfill

2、在main.js文件的頂部引入 import "babel-polyfill"


3、在build目錄下webpack.config.js文件設置入口改為如下
（如果你的項目用的是腳手架，在在build目錄下webpack.base.config.js文件更改入口）

model.exports={
entry:{
 app： ["babel-polyfill",'./src/main.js']
 }

Vue 提倡的單項數(shù)據(jù)流

在寫 vue 組件的過程中，經(jīng)常會遇到這樣的情形：子組件需要的參數(shù)以 props 屬性里面的 prop 來獲得，父組件通過具名的 prop 來把子組件需要的內(nèi)容傳遞給子組件，而且 Vue 提倡數(shù)據(jù)流的方向只能由父組件流向子組件。當父組件的數(shù)據(jù)發(fā)生變化時去通知子組件更改相應的屬性，而不能反過來，子組件的變化影響到父組件，這種行為是被禁止的，因為這樣會導致數(shù)據(jù)混亂不易于定位錯誤。

雖然經(jīng)常寫著寫著子組件就想圖省事，子組件直接去改變父組件的狀態(tài)了，但是會報錯如下：

那么，子組件為了更改父組件的狀態(tài)， Vue 提供了兩種常見的解決辦法：

通過 data 中的變量將需要的 prop 初始化

props: ['initialCounter'],
data: function () {
 return {
 counter: this.initialCounter
 }
}

使用需要處理的 prop 來定義一個計算屬性 computed

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

當然子組件要想和父組件去進行通信，也可以簡單的采用如下方式

$emit 觸發(fā)事件，父組件接受子組件發(fā)布的事件，然后就順理成章的在父組件里面修改自身的變量了。
關于node中的 module.exports 、 exports 和ES6中的 export 、 export default

node 中，每個文件都被視為一個獨立的模塊，對外只暴露一個接口(其實就是一個對象)： module.exports

module 代表當前模塊，它的 exports 屬性負責與外界進行交流，加載一個外來的模塊就是加載該模塊的 module.exports 屬性的內(nèi)容。

// add.js
var temp = 1;
var addNumber = function (value) {
 return value + 1;
};
module.exports.temp = temp;
module.exports.addNumber = addNumber;
// 另一個js文件引用了add.js
var add = require('./add.js') 
console.log('add is', add) // add is { temp: 1, addNumber: [Function: addNumber] }
console.log(add.temp) // 1
console.log(add.addNumber(1)) // 2

通常為了方便，每個 node 模塊頭部有默認的一句話： var exports = module.exports

為了方便可以直接在 exports 對象上加方法，也可以實現(xiàn)對外的改變，但是不可以將 exports 變量指向其它變量，一旦這樣做了會切斷 exports 和 module.exports 之間的聯(lián)系。

但是， node 采用了 CommonJs 規(guī)范， ES6 采用新規(guī)范 import 和 export (對應于 require 和 exports )

//ES6 example.js
var temp = 'temp'
export {temp} //同樣的，export出來的只是一個接口，必須有大括號，除非使用下面介紹的export default
//export命令規(guī)定的是對外的接口，必須與模塊內(nèi)部的變量建立一一對應關系。通俗來講，不能使固定的值，應該是一個變量或者一個函數(shù)
// use example
import {example} from './example.js'
console.log(example.temp) // 'temp'
// 同樣的，ES6也有默認的export寫法
export default var temp = 'new'

總結(jié)

以上所述是小編給大家介紹的IE11下處理Promise及Vue的單項數(shù)據(jù)流,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論