花神的博客

叩首为梦 码梦为生

for of 实现原理

for of 是我们经常使用的一个属性,它可以非常方便的遍历数组,除此之外,它还可以用来遍历类数组对象,Set和Map等,那么问题就来了,为什么它可以遍历Map却不能遍历普通的对象呢?今天就来探索一下for of底层的秘密。 首先,我们要知道for of是用来遍历可迭代对象的,那么如何判断一个对象...

2019-01-13 10:45:59

阅读数:36

评论数:0

babel 是如何编译 class 的?

经常使用ES6中的class,但却一直不知道 babel 是如何编译的,所以就抽空研究了一下,下面是相关的代码,关键地方都已经添加了注释。 1. 编译类 ES5 定义类 function Person(name) { this.name = name; } Person.prototype ...

2019-01-12 19:04:39

阅读数:31

评论数:0

JavaScript中异步函数

JavaScript 中常见的异步函数有:定时器,事件和ajax等,那么如何来处理这些异步函数呢,常用的方法有下面几种: 回调函数 function eat() { console.log('好的,我开动咯'); } function cooking(cb) { console.lo...

2019-01-12 16:17:09

阅读数:30

评论数:0

浅谈深拷贝

在 JavaScript 中可以使用递归实现一个深拷贝,代码如下: const obj = { info: { person: { name: 'iwen', age: '18', } } } // 第一版 function deepClone(o...

2019-01-08 20:19:54

阅读数:17

评论数:0

图片转base64方法总结

将图片转为base64格式是一种比较常见的需求,今天就总结一下在浏览器中和服务器上比较常用的几种方法。 通过canvas将图片转base64 <!DOCTYPE html> <html lang='zh'>...

2018-08-15 10:47:33

阅读数:225

评论数:0

webpack打包后文件分析

平常遇到喜欢的页面总喜欢拿来欣赏一番,今天就以webpack+vue的项目为例分析一下打包后的源码。 环境: webpack4.16 vue2.5.16 为了方便理解,先使用webpack打一个最简单的包(未使用vue),下面是混淆压缩前的伪代码 (function (modules) ...

2018-08-02 11:28:00

阅读数:774

评论数:0

使用request模拟登录开源中国

源码 const CryptoJS = require('crypto-jS'); const request = require('request'); const cheerio = require('cheerio'); let config = { loginUrl: 'https...

2018-07-08 11:57:44

阅读数:213

评论数:0

组件化开发的一些思考

组件化和模块化开发是这几年比较热门的话题,在尝到了模块化开发的甜头后,近期打算将公司的项目切换到vue进行组件化开发,这里对遇到的问题进行一下总结: 首先抛出开发中遇到的问题: 1. 哪些部分可以进行组件化? 2. 项目的目录如何划分比较合理? 3. 组件划分太细,难以维护,划分太大,导致...

2018-06-26 16:17:13

阅读数:172

评论数:0

前端知识点梳理

JavaScript 语法 设计模式 函数式 底层 框架和类库 发展 语法 变量 this 深拷贝 继承 闭包 高阶函数 异步和事件模式 设计模式 单例模式 工厂模式 观察者模式 函数式 函数式编程 底层 js解析原理 V8引擎 框架和类库 ...

2018-05-31 23:30:27

阅读数:129

评论数:0

深入理解为什么应该使用transform来替代top

在进行页面性能优化的时候,经常被告诫要使用transform替代top来实现动画,这样性能会更好,作为一名有追求的前端,不仅需要知其然还要知其所以然,今天就通过chrome的performance工具来直观展示其中的原因。 源码: <!DOCTYP...

2018-05-19 00:38:05

阅读数:664

评论数:0

你不知道的JavaScript 笔记

一. 作用域 作用域是什么? 作用域是存储变量的一套规则,比如函数作用域,块作用域,全局作用域 作用域组成: 引擎 编译器 作用域 举例: va a = 1 分为两个阶段: 1. 编译阶段声明变量 2. 执行阶段赋值 LHS: 变量赋值 RHS: 变量查找 编译的原理 ...

2018-05-17 11:00:29

阅读数:114

评论数:0

快速理解ES6中的代理Proxy和反射Reflect

代理和反射是ES6中新增的API, 理解两个API用处很多,比如vue中数据绑定实现的原理是调用Object.defineProperty,而Proxy其实就是Object.defineProperty的语法糖,传言未来发布的Vue3.0也会使用Proxy+MutationObserver来重写数...

2018-04-30 16:36:09

阅读数:186

评论数:0

面向对象开发入门例子

最近在学习Python,发现一个学习面向对象开发很好的例子,于是用js实现了一遍,下面是源码,有兴趣的同学可以看下: // 老王开枪 /** * @desc 人类 */ class Person { constructor(name) { this.name =...

2018-04-22 17:49:50

阅读数:111

评论数:0

parcel打包实例-用parcel搭建开发环境

parcel是最近非常火热的一个前端构建工具,你可能会问,我webpack还没有学会,干嘛又要学习parcel,我不学,我不学,我不学,年轻人听我说,因为parcel非常简单,相当于webpack玄学般的配置来说,几乎是零配置就可以快速上手,使用parcel我们可以将更多的精力投入到开发工作中能,...

2018-03-09 18:35:35

阅读数:739

评论数:0

parcel压缩构建后的文件夹 parcel-plugin-zip

最近使用parcel来构建项目,需要将构建后的文件夹,压缩为zip文件,奈何parcel的插件实在是太少了,自动动手,丰衣足食,于是手写了一个parcel的压缩插件parcel-plugin-zip,需要的朋友可以试试。 安装 npm install parcel-plugin-zip -...

2018-03-05 00:18:34

阅读数:316

评论数:0

js实现多重继承

原理: 将父类的实例,赋值给子类的原型和原型上一个属性superClass,将子类的实例赋值给孙类的原型和原型上一个属性superClass。 孙类实例继承了孙类,子类和父类原型上所有的属性和方法,并可以通过superClass向上访问原型链,同理,子类实例继承了子类和父类原型上的属性和方法,并可...

2018-02-09 23:19:42

阅读数:262

评论数:0

在parcel项目中使用ES7的async语法报错解决方法

在parcel构建项目后,如果使用ES7的async语法时,在低版本chrome中一直报错,原因是官方建议的使用babel-preset-env模块并没有将所有的语法进行编译,推荐使用transform-runtime插件,在项目中用到哪些语法编译哪些语法,具体使用方法就是 1. npm i -...

2018-02-07 11:18:32

阅读数:558

评论数:0

通过控制台打印数据加深对构造函数和类的理解

chrome控制台的打印内容为: 父类名 + 打印对象 , 每个打印对象都会有一个proto属性,这个属性的值就是打印对象父类的原型对象值,下面是分别使用构造函数和类实现的例子。 1. 构造函数实现 function Human(age) { this._age = age } Human...

2018-02-05 22:54:39

阅读数:62

评论数:0

手机 锁屏 息屏 切换APP 后停止页面中音频播放

今天遇到一个需求,移动端遇到用户点击home键、切换其他APP、锁屏等操作时,H5页面中音乐还在播放,与需求不符,查询文档后发现使用visibilitychange事件可以完美解决这个问题,下面是源码: html lang="zh"> head> met...

2018-01-16 15:59:46

阅读数:2387

评论数:0

使用js调用设备摄像头并实现拍照

使用getUserMedia这个API来获取摄像头的权限 兼容chrome和火狐,IOS不兼容 下面是源码: html lang="zh"> head> meta charset=...

2018-01-06 23:16:44

阅读数:2754

评论数:0

提示
确定要删除当前文章?
取消 删除
关闭
关闭