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 相关文章推荐
javascript 去字符串空格终极版(支持utf8)
Nov 14 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
js以对象为索引的关联数组
Jul 04 Javascript
javaScript 动态访问JSon元素示例代码
Aug 30 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 jQuery
JS实现头条新闻的经典轮播图效果示例
Jan 30 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
vue element-ui实现动态面包屑导航
Dec 23 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安装攻略:常见问题解答(三)
2006/10/09 PHP
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
如何运行/调试你的PHP代码
2020/10/23 PHP
struts2+jquery+json实现异步加载数据(自写)
2013/06/24 Javascript
页面右下角弹出提示框示例代码js版
2013/08/02 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
2015/09/04 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
Vue2.x中的父组件传递数据至子组件的方法
2017/05/01 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
JS字典Dictionary类定义与用法示例
2019/02/01 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
[14:56]教你分分钟做大人:巫医
2014/10/30 DOTA
通过Python来使用七牛云存储的方法详解
2015/08/07 Python
python3 模拟登录v2ex实例讲解
2017/07/13 Python
Python加密方法小结【md5,base64,sha1】
2017/07/13 Python
Python实现发送与接收邮件的方法详解
2018/03/28 Python
pandas.DataFrame的pivot()和unstack()实现行转列
2019/07/06 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
三方合作协议书范本
2014/04/18 职场文书
干部考核评语
2014/04/29 职场文书
在校实习生求职信
2014/06/18 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
党员评议表自我评价范文
2014/10/20 职场文书
2014年会计工作总结
2014/11/27 职场文书
小学生学习保证书
2015/02/26 职场文书
党小组评议意见
2015/06/02 职场文书
2019年思想汇报
2019/06/20 职场文书
创业计划书之餐饮
2019/09/02 职场文书
python基础之函数的定义和调用
2021/10/24 Python
python+opencv实现目标跟踪过程
2022/06/21 Python