浅谈Object.defineProperty

Object.defineProperty是伴随着ES5的发布而出现的,是一个很强大的属性,著名的前端框架vuejs就是借用它实现的数据变动检测,接下来我们学习一下它的用法。 传统方法如果不使用defineProperty,我们可以用以下两种方式定义属性:var a = {}// 通过.定义属性a.name = 'fanqi'// 通过属性字符串索引定义属性a["age"] = 10a.age = 20 上面两种方式

Read More...

基于vuejs的消息气泡插件

之前介绍了一款基于vue的文本折行显示组件ellipisis-plus,今天介绍一款仿照QQ消息气泡的插件vue-bubble,演示地址在这里。 仿照QQ消息气泡想法的起源是来自掘金的安卓小伙伴们,看到他们在安卓平台实现了这种效果,所以想迁移到web上。在这里要感谢他们。 先放张图看一下效果: 实现原理 使用SVG绘制贝塞尔曲线以及圆形气泡。 关键点的坐标计算借鉴这位小伙伴的思路高仿QQ未读消息气泡拖拽黏连效果,非常感谢他。 气泡

Read More...

可视化分析js的内存分配与回收

之前写了一篇文章浏览器是怎么看闭包的,发现有些读者对js内存分配与回收懵懵懂懂,理解文章的配图比较困难,我想主要是因为配图省略了一些细节,所以导致大家理解困难。今天专门写一篇关于js内存分配回收的文章,帮助大家理解js代码的内存表示。 数据类型先唠叨些基本知识: javascript的数据类型分为基本类型和引用类型(对象)。基本类型分为如下几种: 数字字面量 字符串字面量 布尔字面量 undefined null 引用类型分为

Read More...

浏览器是怎么看闭包的。

闭包,是javascript的一大理解难点,网上关于闭包的文章也很多,但是很少有能让人看了就彻底明白的文章。究其原因,我想是因为闭包涉及了一连串的知识点。只有把这一连串的知识点都理解透彻,实现一个概念的闭环,才可以真正理解它。今天打算换个角度来理解闭包,从内存分配与回收的角度阐述,希望能帮助你真正消化掉所看到的闭包知识,同时也希望本文是你看的最后一篇关于闭包的文章。 大家看本文中的配图时,请牢记箭头的指向。因为它是根对象window遍

Read More...

【文本截断】知多少

文本截断是我们前端经常会碰到的需求,有些文本比较长,设计师往往会在有限的空间内限制字符数量,以确保界面的美观性,而且会在一些字符后面加上省略号来表示截断,这个时候我们往往会使用css3的text-overflow:ellipisis来解决,单行文本截断没什么问题,多行文本我们也可以借助webkit的私有属性-webkit-line-clamp来解决。但是这是一个不规范的属性,并没有出现在CSS规范草案中,所以只能在webkit内核的浏览

Read More...

如何实现一个简易编译器

本篇文章的内容是设计一个新语法,并实现能够解析该语法的编译器,将新语法编译成javascript的标准语法,使之能够正常运行在生产环境中。读完这篇文章,再结合自身的实践,大家就能知道该如何写一个小型编译器了。如果对源码感兴趣,请移步这里进行查看。 OK,总结一下接下来要做的事情: 语法设计 编译器的实现 如何下手 词法分析 语法分析 语法树遍历器 目标代码生成 1.变量定义 2.变量赋值 结语 语法设计我们做的第一件事就是设

Read More...