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

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

直接采用 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文件設(shè)置入口改為如下
（如果你的項(xiàng)目用的是腳手架，在在build目錄下webpack.base.config.js文件更改入口）

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

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

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

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

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

通過(guò) data 中的變量將需要的 prop 初始化

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

使用需要處理的 prop 來(lái)定義一個(gè)計(jì)算屬性 computed

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

當(dāng)然子組件要想和父組件去進(jìn)行通信，也可以簡(jiǎn)單的采用如下方式

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

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

module 代表當(dāng)前模塊，它的 exports 屬性負(fù)責(zé)與外界進(jìn)行交流，加載一個(gè)外來(lái)的模塊就是加載該模塊的 module.exports 屬性的內(nèi)容。

// add.js
var temp = 1;
var addNumber = function (value) {
 return value + 1;
};
module.exports.temp = temp;
module.exports.addNumber = addNumber;
// 另一個(gè)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

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

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

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

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

總結(jié)

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

最新評(píng)論