原本打算自己写一写 Vue 转 React 的体验的，但是掘金上一搜发现一些不错的文章。这里就不进行技术细节上的对比了，只说下体验。 使用 Vue 和 React 的区别如果对于两者的区别感兴趣可以看下下面两篇文章： 「Vue」与「React」–使用上的区别 个人理解Vue和React区别 看了上面两篇文章简单整理出以下几点区别： Vue 使用 setter/getter 实现双向绑定，React 根据数据渲染页面。 Vue 使用 props 向子组件通信，使用 events 向父组件通信。React 通过 props 传递数据和回调函数进行父子组件间通信。 Vue 使用 mixin ...

今天来聊聊 JavaScript 的类型。 JavaScript 的七大基本类型 undefined 未定义 null 空值 boolean 布尔值 string 字符串 number 数字 object 对象 symbol 符号（ES6） 怎么知道是有这么七个值呢，使用 typeof 运算符来查看。 上图中，大多数都如我们想的那样，但是有两个特例： 可以看到 typeof null 理论上应该返回 'null' 但却返回的是 'object'，这是一个存在20多年由来已久的bug，所以要判断对象是否为 null 时需要注意。 当我们打印 typeof ...

昨天我们聊到了对象的原型，知道了有 new 和 Object.create() 两种操作原型的方式。今天我们来对比下使用这两种方式进行面向对象编程的特点。 使用 new 关键字写面向类先来一段面向类的代码实现 function Foo(who) { this.me = who;}Foo.prototype.identify = function () { return "I am " + this.me;};function Bar(who) { Foo.call(this, who);}Bar.prototyp ...

JavaScript 中的原型也是一个非常让人头疼的东西，很多前端同学对此也是一知半解，比如我。今天我们就好好捋一捋这个原型。 创建对象的方式下面就是创建对象的几种方式： var o1 = { a: 123, b: 'hello world'}console.log(o1.b)function fun2() { this.a = 33 this.b = 'hello o2'}var o2 = new fun2()console.log(o2.b)class Fun3 { constructor() { ...

JavaScript 中的 this 一直是比较让人头疼，也是面试特别容易问及的问题。下面就参照这《你不知道的 JavaScript》来学习下 this 这个神奇的东西。 this 到底指向何处 this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。 this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。 所以，this 并不只是简单地指向函数或者对象自身。 this 的四种绑定方式默认绑定所谓的默认绑定就是 this 的默认绑定方式。 function foo() { console.log(this.a)}va ...

本文首发于贝壳社区FE专栏，欢迎关注！ 一、什么是作用域编译原理 分词/词法分析(Tokenizing/Lexing)这个过程会将由字符组成的字符串分解成(对编程语言来说)有意义的代码块，这些代 码块被称为词法单元(token)。例如，考虑程序var a = 2;。这段程序通常会被分解成 为下面这些词法单元:var、a、=、2 、;。空格是否会被当作词法单元，取决于空格在 这门语言中是否具有意义。 解析/语法分析(Parsing)这个过程是将词法单元流(数组)转换成一个由元素逐级嵌套所组成的代表了程序语法 结构的树。这个树被称为“抽象语法树”(Abstract Syntax Tree，A ...

以下总结仅限于个人认知，如有错误还请指正！ 年度关键词2018 年是我快速提升认知、清晰认识自我的一年。 在工作上，我对工作有了新的理解。 理解了工作所处的系统是如何运作的； 理解了工作价值的本质； 理解了技术工作者能力提升的本质。 在生活上，我确定了追寻幸福生活的人生目标。 开始追寻生活的意义感； 用心体会和珍惜周围人际关系的情谊； 践行极简主义为自己减负。 在个人成长上，我对于事物的思维方式和做事方法有了很大的更新。 刻意锻炼自己开放性思维和独立思考的能力； 逐渐体会到知行合一的重要性； 践行以终为始地聪明学习方式。 对工作的新理解工作系统的运作方式团队我们工作的团队分工明 ...

最近刷 LeetCode 题总是遇到 Array、Object、Set、Map 这类数据结构，虽然知道有些什么 API，但是每次用总是要查查 MDN 才放心。非常浪费时间，所以这里好好整理下这些数据集合的常用 API。 Array Array.length 返回数组长度 Array.from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。传入类似数组对象及map回调方法，返回新数组。 fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。返回修改后的数组（原数组）。 forEach() 方法对数组的每个元素执行一次提供的函数。 reduce() 方法对累 ...

花了十几天，把《算法》看了一遍然后重新 AC 了一遍 LeetCode 的题，收获颇丰。这次好好记录下心得。我把所有做题的代码都放在 github 上以供参考。项目地址：https://github.com/violetjack/LeetCodeACByJS题目地址：https://leetcode.com/problemset/top-interview-questions/ 说来惭愧，之前写的《LeetCode 逻辑题分享》其实自己动手做的比较少，都是看解决方案。更加关键的是我没有系统地去学习过算法（自学的编程）。所以导致以下几个问题： 看题不懂方法论，理解他人方案困难。 解题方法通 ...

简单使用走马灯功能在展示图片时经常用到，而 element 中提供了 Carousel 组件。出于好奇学习一下它的实现原理。具体的功能详情请查阅官方文档。关于组件属性，该组件提供了组件高度、索引、指示器、切换时间等一众配置，这个只要动手试一遍都能理解。关于事件，提供了一个 change 事件。可以通过 v-on:change="changeFun" 事件绑定来监听。该事件传递了两个参数：当前页索引和前一页索引。参考源码中的 $emit 方法：watch: { activeIndex(val, oldVal) { this.resetItemPos ...