花神的博客

叩首为梦 码梦为生

前端知识点梳理

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

2018-05-31 23:30:27

阅读数:106

评论数:0

图片转base64方法总结

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

2018-08-15 10:47:33

阅读数:122

评论数:0

webpack打包后文件分析

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

2018-08-02 11:28:00

阅读数:453

评论数: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

阅读数:136

评论数:0

组件化开发的一些思考

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

2018-06-26 16:17:13

阅读数:80

评论数:0

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

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

2018-05-19 00:38:05

阅读数:384

评论数:0

你不知道的JavaScript 笔记

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

2018-05-17 11:00:29

阅读数:105

评论数:0

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

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

2018-04-30 16:36:09

阅读数:84

评论数:0

面向对象开发入门例子

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

2018-04-22 17:49:50

阅读数:65

评论数:0

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

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

2018-03-09 18:35:35

阅读数:575

评论数:0

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

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

2018-03-05 00:18:34

阅读数:236

评论数:0

js实现多重继承

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

2018-02-09 23:19:42

阅读数:195

评论数:0

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

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

2018-02-07 11:18:32

阅读数:389

评论数:0

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

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

2018-02-05 22:54:39

阅读数:53

评论数:0

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

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

2018-01-16 15:59:46

阅读数:1885

评论数:0

使用js调用设备摄像头

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

2018-01-06 23:16:44

阅读数:1771

评论数:0

js获取上传文件的后缀名和大小

利用H5的新特性我们可以十分方便的获取上传文件的后缀名和大小,对于上传文件的校验十分方便,下面是具体的实现代码:<!doctype html> <html lang="en"> <head> <meta charset=&quo...

2017-02-24 15:02:05

阅读数:6609

评论数:0

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