babel

本文首发于微信公众号——世界上有意思的事，搬运转载请注明出处，否则将追究版权责任。交流qq群：859640274 继 一位前端小姐姐的五万字面试宝典 这篇文章之后。 徐漂漂 小姐姐再次投稿，本文是最近小姐姐整理的前端进阶笔记。干货依然成吨，全程依旧高能。希望大家多点赞、评论、关注，给小姐姐继续写文章的动力！ 小姐姐的个人博客 小姐姐依然在看机会哟。base 北京，邮箱已经附在 GitHub 上了。欢迎有坑位的同学进行推荐。 一、apply/call/bind 一网打尽 首先，这三个方法是用来改变 this 指向的，接下来我们看一下它们的异同。 1. apply 调用一个对象的一个方法，用另一个对象替换当前对象。例如： B.apply(A, arguments) ; 即 A 对象应用 B 对象的方法。 要注意的是第一个参数，如果这个函数处于非严格模式下，则指定为 null 或 undefined 时会自动替换为指向全局对象，而其他原始值则会被相应的包装对象（wrapper object）所替代。 1.1 如何实现一个apply 回顾一下 apply 的效果，我们可以大致按以下思路走 实现第一个参数的功能，改变 this 指向 实现第二个参数的功能。第二个参数是作为调用函数的参数 返回值：使用调用者提供的 this 值和参数调用该函数的返回值。若该方法没有返回值，则返回

前言 吸顶导航是营销会场类最常用的组件之一， 现在的会场页面是越来越长，如果从第一屏手动滑到最后一屏，还是一个挺累的操作，所以吸顶导航还是很有必要存在的，组件很常见，但是开源的不多，而且大多是PC版，几乎都不能满足业务的需求，所以决定自己写一个。 先看下组件效果 demo 功能拆解 梳理下组件需要实现的功能 到达首层吸顶和最后一层取消吸顶 当前楼层高亮显示 选中导航居中显示 默认显示或滑到首层才显示 滑动过程中控制隐藏显示 展开显示更多 功能实现 下面我会介绍下其中几个功能的实现方法，全部源码有兴趣的话可以点击 这里 导航选中居中 1. 如何居中 首先我们可以先考虑怎么居左，我们知道每一项距离左边的宽度是 m ，那居左就是 -m ,居中就是再减中线的位置，中线的位置如果是 M ，那就是 M-m 。 2. 处理边界的情况 通过 M-m ，我们再来处理到达边界的问题，主要两种情况 1.当M-m>0的时候，则已经到达最左边 2.当M-m >于可滚动的距离（滚动条长度-可视长度），就是到达最右边 实现代码： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 /*以下代码为了方便理解，略有删减*/ /* * 导航切换 */ watch(){ translateX

JavaScript好用还未火的注解@Decorator（注解 | 装饰器 | 装潢器） [TOC] 一、阅读收获 What （是什么）- Why （为什么）- How （怎么用）- Where （哪里用）阐述方法论； AOP 编程思想； JavaScript Decorator 的弊端； 如何定义 Decorator ； 自定义 Decorator 如何传参； 优雅的异常处理； 如何判断一个函数为异步函数； 二、What：是什么 1. AOP思想 ​ 先了解一下火于后端的一个编程思想： AOP ( Aspect Oriented Programming ：面向切面编程)。 也叫做面向方法编程，是通过预编译方式和运行期动态代理的方式实现不修改源代码的情况下给程序动态统一添加功能的技术 。详见： AOP 面向切面编程 。概括文章主要思想： AOP 面对业务处理过程中的某个步骤或阶段，降低业务流程步骤间的耦合度； 与业务无关，被多个业务模块共同调用的逻辑可定义为一个 Aspect 切面 AOP 是 OOP （封装、继承，多态）的补充和完善， AOP 实现分散关注点； AOP 是典型的代理模式体现； 应用场景包括日志记录、性能统计、安全控制、事务处理、异常处理等。 2. JavaScript的AOP ​ JavaScript ：同为 C 系列语言， Java 的 AOP 那么好用，我也要

前言 react diff 是从 fiber 树的 Root 节点开始，从上往下一层一层的对新老节点进行 比较。期间组件的 key 以及 type 决定是否需要复用老的节点。节点的 index 最终决定了 dom 是否需要被移动。没有被复用的节点会被删除，也就不需要对其子树进行 diff，从而不需要跨层级的 diff。 附图： 链接: pan.baidu.com/s/1sb1XqteO… 密码:s364 实际的栗子 item 1 this Header will be deleted item 2 this is Footer 复制代码 上面为测试的 HTML 结构，其中 this Header will be deleted 元素是在点击 document 的时候会被删除或者添加，代码如下，除了以这种形式的增删，还可以以 map 或者其他方式的增删节点，通过原生 dom 的增删，不会通过 react 处理自然也不会被 diff： class APP extends React.Component{ constructor(props){ super(props) this.state = { showHeader: false } } clickHandler (){ this.setState({ showHeader: !this.state.showHeader }) }

如果你已经安装了vue-cli2，你需要先卸载：npm uninstall -g vue-cli 安装 npm install -g @vue/cli 创建项目 创建名为myVue的项目： vue create myVue 你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。 这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。 启动项目 cd myVue npm run serve 启动成功，结束！ 来源： oschina 链接： https://my.oschina.net/u/4276902/blog/4280468

第一种方法： package.json中devDependencies对象添加 "@babel/compat-data": "7.9.0" 第二种方法： npm install -D babel-loader @babel/core @babel/preset-env webpack 再启动 来源： oschina 链接： https://my.oschina.net/u/4353161/blog/4326057

Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法 参考文章： （1）Plugin/Preset files are not allowed to export objects，webpack报错/babel报错的解决方法 （2）https://www.cnblogs.com/jiebba/p/9618930.html 备忘一下。 来源： oschina 链接： https://my.oschina.net/u/4271231/blog/4310965

前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术，帮我们处理了前端开发中最脏最累的 DOM 操作部分， 我们不再需要去考虑如何操作 DOM 以及如何最高效地操作 DOM；但 Vue 项目中仍然存在项目首屏优化、Webpack 编译配置优化等问题，所以我们仍然需要去关注 Vue 项目性能方面的优化，使项目具有更高效的性能、更好的用户体验。本文是作者通过实际项目的优化实践进行总结而来，希望读者读完本文，有一定的启发思考，从而对自己的项目进行优化起到帮助。本文内容分为以下三部分组成： Vue 代码层面的优化； webpack 配置层面的优化； 基础的 Web 技术层面的优化。 一、代码层面的优化 1.1、v-if 和 v-show 区分使用场景 v-if 是 真正 的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是 惰性的 ：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 v-show 就简单得多， 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换。 所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。 1.2、computed 和 watch 区分使用场景 computed： 是计算属性

一、内容简介 目前大家常用的webpack打包ts主要为两种方案： ts-loader：将ts转为js，再使用babel将js转为低版本js； @babel/preset-typescript：它是直接移除TypeScript，转为JS，这使得它的编译速度飞快,并且只需要管理Babel一个编译器就行了。 二、方案对比 首先我们需要安装 webpack、webpack-cli、typescript 随便写一点ts，用于打包测试: // index.ts class Student { name: string age: Number constructor(name: string, age: Number) { this.name = name this.age = age } greet () { console.log(`Hello, my name is ${this.name} `) } } const test Promise = (): Promise<string> => { return new Promise((resolve, reject) => { set Timeout(() => { resolve( '1' ) }, 1000) }) } const studentA = new Student( 'a' , 20) studentA.greet()

1.Default Parameters（默认参数） in ES6 还记得我们以前不得不通过下面方式来定义默认参数： var link = function (height, color, url) { var height = height || 50; var color = color || 'red'; var url = url || 'http://azat.co'; ... } 但在ES6，我们可以直接把默认值放在函数申明里： 1 2 3 var link = function (height = 50, color = 'red' , url = 'http://azat.co' ) { ... } 2.Template Literals（模板对象） in ES6 在其它语言中，使用模板和插入值是在字符串里面输出变量的一种方式。因此，在ES5，我们可以这样组合一个字符串： 1 2 var name = 'Your name is ' + first + ' ' + last + '.' ; var url = 'http://localhost:3000/api/messages/' + id; 在ES6中，我们可以使用新的语法$ {NAME}，并把它放在反引号里 ： 1 2 var name = `Your name is ${first} ${last}. `;