• 深入理解 ES Modules (手绘示例)

    Posted by : lon.y@qq.com on 2018年5月9日

    虽然花了近十年的标准化工作才走到这一步,ES 模块终于为 JavaScript 带来了正式的,标准化的模块系统。 漫长的等待终于要结束了,随着即将在五月发布的 Firefox 60 (目前尚处于 beta 版本中),所有的主流浏览器都即将支持 ES 模块,并且 Node 模块工作小组目前也正在为 Node.js 添加对 ES 模块的支持。同时,ES 模块对 WebAssembly 的支持也正在进行当中。 许多 JavaScript 的开发者都知道 ES 模

    阅读全文...

  • 低门槛彻底理解 JavaScript 中的深拷贝和浅拷贝

    Posted by : lon.y@qq.com on 2018年5月9日

    在说深拷贝与浅拷贝前,我们先看两个简单的案例: //案例1 var num1 = 1, num2 = num1; console.log(num1) //1 console.log(num2) //1 num2 = 2; //修改num2 console.log(num1) //1 console.log(num2) //2 //案例2 var obj1 = {x: 1, y: 2}, obj2 = obj1; console.log(obj1) //{x

    阅读全文...

  • vue 生命周期深入

    Posted by : lon.y@qq.com on 2018年5月6日

    这篇博客将会从下面四个常见的应用诠释组件的生命周期,以及各个生命周期应该干什么事 单组件的生命周期 父子组件的生命周期 兄弟组件的生命周期 宏mixin的生命周期 生命周期:Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期,各个阶段有相对应的事件钩子 1. 生命周期钩子函数 下面这张图是vue生命周期各个阶段的执行情况: 生命周期钩子 组件状态 最佳实践 beforeCreate

    阅读全文...

  • JS 中原型和原型链深入理解

    Posted by : lon.y@qq.com on 2018年5月6日

    首先要搞明白几个概念: 函数(function) 函数对象(function object) 本地对象(native object) 内置对象(build-in object) 宿主对象(host object) 函数 function foo(){ } var foo = function(){ } 前者为函数声明,后者为函数表达式。typeof foo 的结果都是function。 函数对象 函数就是对象,代表函数的对象就是函数对象 官方定义, 在Ja

    阅读全文...

  • 分享前端开发常用代码片段

    Posted by : lon.y@qq.com on 2018年5月6日

    一、预加载图像 如果你的网页中需要使用大量初始不可见的(例如,悬停的)图像,那么可以预加载这些图像。 二、检查图像是否加载 有时为了继续脚本,你可能需要检查图像是否全部加载完毕。 你也可以使用 ID 或 CLASS 替换<img> 标签来检查某个特定的图像是否被加载。 三、自动修复破坏的图像 逐个替换已经破坏的图像链接是非常痛苦的。不过,下面这段简单的代码可以帮助你。 四、悬停切换 当用户鼠标悬停在可点击的元素上时,可添加类到元素中,反之则移除

    阅读全文...

  • 前端人脸检测指南

    Posted by : lon.y@qq.com on 2018年4月27日

    Shape Detection API 的发布已经有一些时日,其主要的提供的能力是给予前端直接可用的特征检测的接口(包括条形码、人脸、文本检测)。本文将简单的对其进行介绍,对前端进行人脸检测进行普适性的讲解。(本文不讲算法~望轻拍) 1 背景与场景 人脸检测(Face Detection)算是老生常谈的课题了,在诸多行业应用广泛,例如金融、安防、电子商务、智能手机、娱乐图片等行业。其中涉及的技术也在不断的演变,下面简要介绍几种思路: a. 基于特征的人脸检

    阅读全文...

  • 走近 WebAssembly 之调试大法

    Posted by : lon.y@qq.com on 2018年4月27日

    前言 WebAssembly是什么? 下面是来自官方的定义: WebAssembly or wasm is a new portable, size- and load-time-efficient format suitable for compilation to the web. 关键词:”format”,WebAssembly 是一种编码格式,适合编译到web上运行。 事实上,WebAssembly可以看做是对JavaScript的加强,弥补Jav

    阅读全文...

  • 【React进阶系列】从零开始手把手教你实现一个Virtual DOM(一)

    Posted by : lon.y@qq.com on 2018年4月27日

    假如你的项目使用了React,你知道怎么做性能优化吗? 你知道为什么React让你写shouldComponentUpdate或者React.PureComponent吗? 你知道为什么React让你写Immutable Data Structures吗? 你知道为什么React让你在渲染列表时,一定要给每个子项加一个key吗? 你知道为什么React让你在条件渲染时,不写if而写&&操作符或三元操作符吗? 一切的答案都在Virtual D

    阅读全文...

  • 【React进阶系列】从零开始手把手教你实现一个Virtual DOM(二)

    Posted by : lon.y@qq.com on 2018年4月27日

    假如你的项目使用了React,你知道怎么做性能优化吗? 你知道为什么React让你写shouldComponentUpdate或者React.PureComponent吗? 你知道为什么React让你写Immutable Data Structures吗? 你知道为什么React让你在渲染列表时,一定要给每个子项加一个key吗? 你知道为什么React让你在条件渲染时,不写if而写&&操作符或三元操作符吗? 一切的答案都在Virtual D

    阅读全文...

  • 数组的遍历你都会用了,那Promise版本的呢

    Posted by : lon.y@qq.com on 2018年4月27日

    这里指的遍历方法包括:map、reduce、reduceRight、forEach、filter、some、every 因为最近要进行了一些数据汇总,node版本已经是8.11.1了,所以直接写了个async/await的脚本。 但是在对数组进行一些遍历操作时,发现有些遍历方法对Promise的反馈并不是我们想要的结果。 当然,有些严格来讲并不能算是遍历,比如说some,every这些的。 但确实,这些都会根据我们数组的元素来进行多次的调用传入的回调。 这

    阅读全文...