IE11下处理Promise及Vue的单项数据流问题


Posted in Javascript onJuly 24, 2019

最近我开发的公司的竞赛网站被发现在IE11下排行榜无数据,但是在其他浏览器没问题,我然后打开控制台一看,发现了如下错误:

IE11下处理Promise及Vue的单项数据流问题

真是醉了,然后发现有三个可行的方案:

直接采用 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 提倡的单项数据流

在写 vue 组件的过程中,经常会遇到这样的情形:子组件需要的参数以 props 属性里面的 prop 来获得,父组件通过具名的 prop 来把子组件需要的内容传递给子组件,而且 Vue 提倡数据流的方向只能由父组件流向子组件。当父组件的数据发生变化时去通知子组件更改相应的属性,而不能反过来,子组件的变化影响到父组件,这种行为是被禁止的,因为这样会导致数据混乱不易于定位错误。

虽然经常写着写着子组件就想图省事,子组件直接去改变父组件的状态了,但是会报错如下:

IE11下处理Promise及Vue的单项数据流问题

那么,子组件为了更改父组件的状态, Vue 提供了两种常见的解决办法:

通过 data 中的变量将需要的 prop 初始化

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

使用需要处理的 prop 来定义一个计算属性 computed

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

当然子组件要想和父组件去进行通信,也可以简单的采用如下方式

$emit 触发事件,父组件接受子组件发布的事件,然后就顺理成章的在父组件里面修改自身的变量了。
关于node中的 module.exports 、 exports 和ES6中的 export 、 export default

node 中,每个文件都被视为一个独立的模块,对外只暴露一个接口(其实就是一个对象): module.exports

module 代表当前模块,它的 exports 属性负责与外界进行交流,加载一个外来的模块就是加载该模块的 module.exports 属性的内容。

// 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 对象上加方法,也可以实现对外的改变,但是不可以将 exports 变量指向其它变量,一旦这样做了会切断 exports 和 module.exports 之间的联系。

但是, node 采用了 CommonJs 规范, ES6 采用新规范 import 和 export (对应于 require 和 exports )

//ES6 example.js
var temp = 'temp'
export {temp} //同样的,export出来的只是一个接口,必须有大括号,除非使用下面介绍的export default
//export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。通俗来讲,不能使固定的值,应该是一个变量或者一个函数
// use example
import {example} from './example.js'
console.log(example.temp) // 'temp'
// 同样的,ES6也有默认的export写法
export default var temp = 'new'

总结

以上所述是小编给大家介绍的IE11下处理Promise及Vue的单项数据流,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
(仅IE下有效)关于checkbox 三态
May 12 Javascript
js可突破windows弹退效果代码
Aug 09 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
javascript实现2048游戏示例
May 04 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
Nov 09 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
Vue.js实现价格计算器功能
Mar 30 Javascript
JS实现的JSON数组去重算法示例
Apr 11 Javascript
JavaScript实现的反序列化json字符串操作示例
Jul 18 Javascript
Vue多组件仓库开发与发布详解
Feb 28 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
js中Object.create实例用法详解
Oct 05 Javascript
微信小程序如何引用外部js,外部样式,公共页面模板
Jul 23 #Javascript
详解Vue中的基本语法和常用指令
Jul 23 #Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 #Javascript
node.js express框架简介与实现
Jul 23 #Javascript
js微信分享接口调用详解
Jul 23 #Javascript
详解vue-cli项目开发/生产环境代理实现跨域请求
Jul 23 #Javascript
vue 地区选择器v-distpicker的常用功能
Jul 23 #Javascript
You might like
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
Ext中下拉列表ComboBox组件store数据格式用法介绍
2013/07/15 Javascript
jQuery中Ajax的load方法详解
2015/01/14 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
js代码实现点击按钮出现60秒倒计时
2021/01/28 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vue-quill-editor富文本编辑器简单使用方法
2018/09/21 Javascript
webpack项目使用eslint建立代码规范实现
2019/05/16 Javascript
layui实现把数据表格时间戳转换为时间格式的例子
2019/09/12 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
python实现redis三种cas事务操作
2017/12/19 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
浅析python参数的知识点
2018/12/10 Python
python二进制文件的转译详解
2019/07/03 Python
python单例设计模式实现解析
2020/01/07 Python
Python 字符串池化的前提
2020/07/03 Python
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
Funko官方商店:源自美国,畅销全球搪胶收藏玩偶
2018/09/15 全球购物
金智子午JAVA面试题
2015/09/04 面试题
CNC数控操作工岗位职责
2013/11/19 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
群众路线表态发言材料
2014/10/17 职场文书
安全责任书
2015/01/29 职场文书
护理培训心得体会
2016/01/22 职场文书
Python OpenCV形态学运算示例详解
2022/04/07 Python