欢迎光临
我们一直在努力

尤雨溪:Vue3将不会支持IE11,精力会投入到Vue2.7

阅读(245)

之前尤雨溪曾说过,Vue3 将会出一个 IE11 的兼容版本,现在 Vue3.0都已经发布很久了,却迟迟不见兼容版本的出现,原来是因为微软积极的推进自家的新 Edge 浏览器,并打算放弃 IE,这让尤雨溪觉得兼容 IE 是否还有必要,来看看他的知乎:

尤雨溪:Vue3将不会支持IE11

译文

Vue3开始开发的时候一直到2018年底,我们一直被问到有关IE11的支持。许多用户都在问Vue3是否会支持IE11,我们最初的计划是先发布Vue3的稳定版,然后稍后才会支持IE11。在漫长的开发过程中,我们还就IE11的兼容性进行了研究和实验,但是由于所涉及的复杂性和手头上的其他的大量工作,因此IE11就先暂时放了一放。

当我们再看一下 2021年的现在的问题时,浏览器和JavaScript的状况已经发生了很大变化。现在,越来越多的开发人员正在使用现代语言功能,更重要的是,微软本身已经开始通过对Edge的推广,积极地将用户推离IE。甚至还在自己的主要项目(如Microsoft 365)中放弃对IE11的支持。就在几天前,WordPress也决定了放弃对IE11的支持。IE11的全球使用率已降至1%以下。当我们谈论面向公众的网站和应用程序时,IE11呈明显的快速下降趋势。

我们相信这是一个重新思考Vue3IE11支持的机会。

在Vue 3中支持IE11的成本

行为不一致

Vue2的响应式系统是基于ES5getter / setterVue3利用ES6Proxy获得了性能更高且更完整的响应式系统,但Proxy却无法在IE11中进行polyfill。这是最大的障碍,因为这意味着如果Vue3要支持IE11,它实际上需要发布两个具有不同行为的不同版本:一个是基于Proxy的响应式系统,而另一个则使用类似于Vue2的基于ES5getter / setter的系统。

Vue3基于Proxy的响应式系统提供了几乎完整的语言功能覆盖。它能够检测许多在ES5中不可能或不可行的操作,例如属性的添加、删除、数组索引和length突变以及in操作符的检查等功能。为Vue3Proxy版本编写的相同代码在IE11版本中根本不起作用。这不仅给我们带来了技术上的复杂性,也给开发人员带来了持续的精神负担。

我们最初的计划是在IE11的开发版本中同时交付ProxyES5的响应式实现。当它在支持Proxy的开发环境中运行时,它将检测并警告不兼容IE11的用法。从理论上讲,这是可行的,但由于需要将这两种实现混合在一起,并且在开发和生产之间存在行为差异的风险,因此造成了极大的复杂性。

长期维护负担

支持IE11还意味着我们必须考虑整个代码库中使用的语言功能,并为我们的分包找出正确的polyfill策略。IE11中无法被polyfill的每个新功能的添加都会造成另一个行为的警告。一旦Vue3承诺了对IE11的支持,我们将无法摆脱它,直到下一个主要版本(Vue4)。

库作者的复杂性

如果复杂度可以完全包含在Vue本身中,那么在某种程度上仍然可以接受。但在与社区成员讨论之后,我们意识到两种响应式实现的共存也不可避免的会暴露给库作者。

通过在Vue3中支持IE11,库作者将不得不考虑其库运行的Vue3的内部版本(可能还得支持Vue2)如果他们决定支持IE11,则必须考虑用ES5的响应式原理来编写他们的库。

为 IE11 贡献持久力

没有人喜欢支持IE11。这是已经被淘汰掉的浏览器。当网络生态系统向前发展的越远,我们在尝试支持它时需要克服的差距就越大。而具有讽刺意味的是,如果在Vue3中支持IE11,那就相当于我们给了它更多坚挺的理由。鉴于我们的用户群,放弃IE11的支持可能会使其淘汰的更快。

对于绝对需要IE11支持的用户

我们深知,对于那些真正需要IE11的人:金融机构、教育部门以及依赖IE11屏幕阅读器的人们。如果要构建针对这些领域的应用程序,则可能别无选择。

如果真的需要兼容IE11,我们的建议是使用Vue2。因为与其为Vue3Vue的未来版本承担大量技术负担,还不如将工作重心转向将兼容功能向后移植到2.7版本中的Vue2呢。并且确保在两个主要版本中获得更近的开发体验将更加的有意义。

可以反向移植到2.7的一些功能:

  • @vue/composition-api插件合并到Vue2中。这将使基于Composition API的库直接适用于Vue2Vue3
  • <script setup>单文件组件中的语法
  • emits选项
  • 改进的TypeScript支持。
  • Vite中正式支持Vue2

注意:以上列表只是临时的,具体的将会在单独的RFC中进行讨论/定稿。

图片加载失败后CSS样式处理最佳实践

阅读(550)

一、传统的图片异常处理

<img>如果因为网络或者跨域限制等原因无法正常加载,在默认情况下会显示浏览器默认的“裂开”的图片效果,如果设置了alt属性值,则alt属性对应的内容也会一并显示。例如:

<img src="//www.zhangxinxu.com/zxx.ico" alt="鑫空间鑫生活">

例如Chrome浏览器下的效果截图如下所示:

Chrome浏览器图片加载异常效果

可以看到图片加载异常之后的视觉效果实在是太粗糙了,程序员可忍设计师不可忍,因此,为了更好的视觉效果,实际项目开发中,我们总会对图片加载异常的边界场景进行额外的处理。

(更多…)

Canvas概述和Hello World

阅读(744)

1.1 概述

canvas

Canvas是HTML5中新增的一个元素,它就像一块画布,可以用JavaScript在上面绘制各种图表、动画、制作游戏等。

在没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Flash进行交互。有了Canvas,我们就再也不需要Flash了,直接使用JavaScript完成绘制。

(更多…)

使用原生 JS 实现一个类 Vue 的 v-show 指令

阅读(1426)

Vue 作为最主流的前端框架,中文资料齐全、入门简单、生态活跃,可以说是工作中最常用的,如今对 Vue 原理的熟悉基本上是简历的标配了。之前参与了部分 2019 校园招聘的面试工作,发现很多简历上都写了:“精通 Vue”、“熟悉 Vue 原理和源码”、“熟悉 Vue 全家桶及其底层原理”、“熟悉 Vue 双向数据绑定” 等等,但是这么写你真的敢说熟悉 Vue 原理吗?

这样的简历描述看上去是很不错,熟悉框架原理非常难得,于是问到:“那你说一下 Vue 数据驱动的实现原理吧”!

大部分人的回答都差不多是:“首先通过 Object.defineProperty 遍历数据 data 劫持每个属性的 gettersetter 生成 Observer,通过一个 Depend 收集依赖,然后在数据发生变化时通知消息给 Watcher,触发相应监听回调,然后达到数据驱动视图的目的……” 其实描述的都非常正确,但是不禁让人怀疑这是真的熟悉还是背的熟悉?

于是进一步再问:如何利用数据驱动的原理实现一个最简单的 v-show 指令?假如有一个 div 元素,怎样用原生 JS 实现一个 v-show,通过数据的变化去改变这个 div 的显示和隐藏?
(更多…)

让你效率翻倍的 VS Code 使用指南(快捷键、超好用的插件、新手教程)

阅读(2610)

VS Code 使用指南

“VS Code 写代码是真好用、真爽。”

想必你也已经听过身边不止一个人这么说。最近的 JS 2019 报告中,VS Code 也是以压倒性的优势获胜第一,其他的编辑器只能被无情碾压在地上摩擦……

JS 2019 报告

但是呢,VS Code 并不是像 PyCharm/WebStorm 那样开箱即用的,需要额外安装一些插件、掌握一些快捷键和技巧,才能顺手的用起来。

我们花了一周的时间,为你整理了可能是最全的 VS Code 新手指南,分为快捷键速查表、10个超好用插件、新手使用教程三部分,让小白也能快速上手、效率加倍。

(更多…)

【可商用】2020年免费可商用中文字体最全合集

阅读(1994)

2020年免费可商用中文字体

不知道大家有没有遇到过使用商用字体被举报的情况,我身边有一个做自媒体的朋友,做图时不慎使用了一款商用字体,被有心人举报罚款 2000 多。这种还是小损失,在设计项目中,设计师没有足够版权意识的话,轻则赔偿,重则直接开除。所以囤免费可商用字体是很有必要的。

以下是优设为大家整理的 2020 年最新的 58 款免费可商用中文字体(个人企业均可商用),所有字体资源都已详细分类,打包在字体包内,大家可自行前往下载~

在此也特别感谢无私免费分享出劳动成果的公司、团队、及个人。

温馨提示:打包下载链接在文末~

(更多…)

WEB端-数据可视化深色模式和自适应设计

阅读(2729)

本文以近期改版上线的百度流量研究院为例。与大家共同探讨WEB端-数据可视化深色模式和自适应设计的应用。

设计亮点:

深色模式的设计,结合多样化的可视化图表,营造沉浸式的数据浏览体验。

采用响应式设计,为不同终端的用户提供更加舒适的界面和更好的用户体验。

(更多…)

10分钟学会CSS预处理语言Less

阅读(2649)

Less的LOGO

Less 做为 CSS 的一种形式的扩展,它并没有阉割 CSS 的功能,而是在现有的 CSS 语法上,添加了很多额外的功能,将 CSS 赋予了动态语言的特性,如变量、继承、运算、函数等。

Less 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js在服务端运行。

(更多…)

js数组与字符串相互转换

阅读(3907)

toString() 数组转字符串

定义:
toString() 方法可把数组转换为字符串,并返回结果。

语法:
arrayObject.toString()

返回值:
arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

说明:
当数组用于字符串环境时,JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下,需要显式地调用该方法。

注释:
数组中的元素之间用逗号分隔。

实例:把数组转字符串,以逗号分隔。

<script>
var arr1 = [ '百度', '阿里巴巴', '腾讯', '邦邦的小站' ];
var str1 = arr1.toString();
console.log(str1); //百度,阿里巴巴,腾讯,邦邦的小站
</script>

join() 把数组元素放入一个字符串

定义:
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

语法:
arrayObject.join(separator)

参数:
separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。

返回值:
返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。

实例:把数组转字符串,以||分隔。

<script>
var arr2 = [ '百度', '阿里巴巴', '腾讯', '邦邦的小站' ];
var str2 = arr2.join('||');
console.log(str2); //百度||阿里巴巴||腾讯||邦邦的小站
</script>

split() 把字符串分割为字符串数组。

定义:
split() 方法用于把一个字符串分割成字符串数组。

语法:
stringObject.split(separator,howmany)

参数:
separator 必需。字符串或正则表达式,从该参数指定的地方分割 stringObject。
howmany 可选。该参数可指定返回的数组的最大长度。如果设置了该参数,返回的子串不会多于这个参数指定的数组。如果没有设置该参数,整个字符串都会被分割,不考虑它的长度。

返回值:
一个字符串数组。该数组是通过在 separator 指定的边界处将字符串 stringObject 分割成子串创建的。返回的数组中的字串不包括 separator 自身。
但是,如果 separator 是包含子表达式的正则表达式,那么返回的数组中包括与这些子表达式匹配的字串(但不包括与整个正则表达式匹配的文本)。

注释:
如果把空字符串 (“”) 用作 separator,那么 stringObject 中的每个字符之间都会被分割。
String.split() 执行的操作与 Array.join 执行的操作是相反的。

实例:以逗号分割字符串,返回数组。

<script>
var str3 = '小米8,小米MIX 2s,小米电源,小米之家';
var arr3 = str3.split(',');
console.log(arr3); //["小米8", "小米MIX 2s", "小米电源", "小米之家"]
</script>