Aaron Nan
Aaron Nan
最近在做的一个case其中有个需求点是 长按保存图片，本以为这是一张设计出好的图片，等实际看完需求文档才发现图片上面的数据是后端返回的，那么图片肯定是要在前端生成了。方法在这里做个分享。 ## html2canvas 首先利用到了一个叫做 [html2canvas](https://github.com/niklasvh/html2canvas) 的库，顾名思义，可以将我们写好的 html 转成 canvas，之后我们将 `img.src` 赋值为 [canvas.toDataURL()](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL)。 ```js import H2C from 'html2canvas'; // ........ H2C(this.picContent, { useCORS: true }).then(canvas => { let imgEle =...
# ES6类方法 和 利用箭头函数进行属性初始化的区别 > 关于【属性初始化】概念可以参阅 #75 & [proposal-class-fields](https://github.com/tc39/proposal-class-fields) 起因是在我了解 `属性初始化` 概念后，实在太喜欢这样简洁的 cool syntax，看了很多相关的文章和官方概念，发现一个有趣的地方。 **class 的 `属性初始化语法`结合`箭头函数` 与 class标准的类方法 在babel6编译成ES5的实现方式其实是不同的** ### Standard es6 class method ```js import React, {Component} from...
> 以下内容大多摘自阮一峰老师的[ECMAScript 6 入门](http://es6.ruanyifeng.com/) 我做了一些概括总结。 当然，也希望大家可以购买实体书支持一下 ## ECMAScript 6.0 ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 ### ECMAScript 和 JavaScript 的关系 ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。日常场合，这两个词是可以互换的。...
# HOC，而不是继承 高阶组件的这种写法的诞生来自于社区的实践，目的是解决一些交叉问题(Cross-Cutting Concerns) **React官方推崇 HOC、组合 的方式来扩展组件功能，而不是继承的方式** > 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件 > 更加通俗的讲，高阶组件通过包裹（wrapped）被传入的React组件，经过一系列处理，最终返回一个相对增强（enhanced）的 React 组件，供其他组件调用。 > 关于 HOC 的资料： > 参考1：[React 高阶组件浅析](https://segmentfault.com/a/1190000010845410) > 参考2：[深入理解 React 高阶组件](https://zhuanlan.zhihu.com/p/24776678?group_id=802649040843051008) ## React 推崇 组合/HOC 的原因 React...
## 事件 包括： 1. 事件流 2. 事件处理程序 3. 事件对象 4. 事件类型 JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄 ## 事件流 事件流描述的是从页面接收事件的顺序 ### 目前主要有三种模型 1. 旧IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素 2. Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反 3. DOM事件流：`DOM2级`事件规定的事件流包括三个阶段，事件捕获阶段，处于目标阶段，事件冒泡阶段，首先发生的是事件捕获，为截取事件提供机会，然后是实际目标接收事件，最后是冒泡阶段（IE9以上） ## 事件处理程序 也称之为事件侦听器（listener），事件就是用户或浏览器自身执行的某种动作。比如click、load、mouseover等，都是事件类型（俗称事件名称），而响应某个事件的方法就叫做事件处理程序或者事件监听器 ### 1. HTML事件处理程序呢（内联方式） ``...
## CSS的全称是什么? - Cascading Style Sheets 叠层样式表 一种用来表现HTML或XML等文件样式的计算机语言。 ## CSS有几种引入方式? link 和@import 有什么区别? 1. 内联样式 内联方式指的是直接在HTML标签中的style属性中添加CSS。 ` ` 2. 内部样式 内部样式指的是在HTML头部中的标签中写CSS代码。 ``` h1{ color:red; } ``` 3. 外部样式。分为**链接**和**导入** - 链接方式...
# 作用域和Closure ② 第一节，理解了closure的含义之后，我们继续探讨 scope 和 closure 的关系。 ## 编写代码：closure 与 scope 过去，不了解JS中的 closure，当你在for循环中调用函数的时候，就很容易发生意想不到的结果。 来看下面这个例子： ```js for (var i = 1; i
# 作用域和Closure 一种理解是： Closure是一种现象。这种现象是指一个函数在它所在的词法作用域之外被调用的时候，仍旧可以记住并访问它的词法作用域里的内容。 对于这个在JS中很晦涩的概念，直接用例子来看其实容易理解 ## 编写一些特定的例子助于理解 ### 第一个例子，在一个函数中返回另一个函数 ```js function foo() { var a = 10; function bar() { console.log(a); } return bar; } var baz = foo(); baz();...
# 揭开Hoisting面纱 简单来说，就是在JS的作用域里，变量不一定要先定义后使用，JS对变量的处理规则和我们在其它编程语言中的经验有些差别。 ## JS是一门编译型语言 对于`var a= 2`这样的语句来说，JS引擎是分成两部分处理的： - 第一部分是声明变量：`var a;`，这部分可以理解成是在编译期完成的，它确定了变量的作用域； - 第二部分是赋值：`a = 2;`，编译器生成表示赋值的指令，由JS引擎在运行时完成； **在一个作用域里，被编译器提前的，都是变量的声明**，而之后要执行的代码（对我们的例子来说，也就是赋值），则会保留在原地。这就是hoisting的含义。 这也很好理解，如果hoisting可以改变代码的执行顺序，我们就很难写出工作正常的程序了。 ```js foo(); function foo() { console.log(a); var a = 2; } ``` 执行这段代码，同样会得到undefined结果。这里，有两个原因：...
# 远离那些欺骗词法作用域的函数 我们通过一些代码更具体的认识 JavaScript 中的作用域 ## 作用域是由词法确定的 首先，来看下面的代码： ```js function foo(a) { var b = a * 2; function bar(c) { console.log(a, b, c); } bar(b * 3); } foo(2);...