React学习记录
学习基础React基本API，深化react的细节，学会思考和提问。
author: @TiffanyBear

content

1、React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。

2、JSX 表示对象
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。react元素

1和new Number(1)有什么区别
author: @Tiffanysbear

总结，两者的区别就是原始类型和包装对象的区别。

什么是包装对象

对象Number、String、Boolean分别对应数字、字符串、布尔值，可以通过这三个对象把原始类型的值变成（包装成）对象:

1
2
3

var v1 = new Number(123);
var v2 = new String('abc');
var v3 = new Boolean(true);

我们来看下实际的v1、v2、v3是什么呢？

1
2
3
4
5
6

typeof v1;// "object"
typeof v2;// "object"
typeof v3;// "object"

v1 === 123; // false
v1 == 123; // true

可以理解的是，v1此时是对象，===比较的是内存地址，因此跟数字Number 123不相等；可是为什么v1 == 123得到的值会是true呢？

转载自 https://github.com/yygmind/blog/issues/37
author: @yygmind

引言

上一节介绍了高阶函数的定义，并结合实例说明了使用高阶函数和不使用高阶函数的情况。后面几部分将结合实际应用场景介绍高阶函数的应用，本节先来聊聊函数柯里化，通过介绍其定义、比较常见的三种柯里化应用、并在最后实现一个通用的 currying 函数，带你认识完整的函数柯里化。

有什么想法或者意见都可以在评论区留言，下图是本文的思维导图

柯里化

定义

函数柯里化又叫部分求值，维基百科中对柯里化 (Currying) 的定义为：

在数学和计算机科学中，柯里化是一种将使用多个参数的函数转换成一系列使用一个参数的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

用大白话来说就是只传递给函数一部分参数来调用它，让它返回一个新函数去处理剩下的参数。使用一个简单的例子来介绍下，最常用的就是 add 函数了。

探究Hybrid-APP技术原理
author: @TiffanysBear

背景

随着Web技术的发展和移动互联网的发展，Hybrid技术已经成为一种前端开发的主流技术方案。那什么是Hybrid App呢？

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具” Native App良好用户交互体验的优势 “和” Web App跨平台开发的优势 “。

总的来说，就是既具有APP的体验和性能，又具有Web灵活的开发模式和跨平台开发能力。

getBoundingClientRect使用指南
author: @TiffanysBear

主要介绍getBoundingClientRect的基本属性，以及具体的使用场景和一些需要注意的问题。

getBoundingClientRect

1

Element.getBoundingClientRect()

含义：
方法返回元素的大小及其相对于视口的位置。

值：
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合。

Proxy

1、使用proxy扩展构造函数

Proxy参数说明：
target：
用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler：
一个对象，其属性是当执行一个操作时定义代理的行为的函数。

Effective JavaScript编写高质量的68个有效方法
author：@Tiffanysbear
description: 读书笔记

第一条：了解你使用的javascript

1. 严格模式use strict

• 不允许重定义arguments变量
• 只有在脚本或函数的顶部才生效
• 不要将进行严格模式检查的代码和非严格模式的代码进行打包压缩
• 可通过立即调用函数隔离严格与非严格区域，单独隔离作用域
• 编写库时，开启严格检查，兼容性更强

1
2
3
4
5
6

(function () {
	"use strict";
	function f() {
		// code
	}
})();

九宫格布局
author: @TiffanysBear

需求背景

高考活动页面需要在一个页面容器中，实现一个两行三列宽度自适应缩放，且图片等比例缩放，随着浏览器宽度进行自适应缩放的布局。
中间的图片需要自适应，随着页面宽度的变化，三等分缩放，图片等比例缩放。页面地址

每天学习一个命令
author: @Tiffanysbear

1、mkdir：新建文件夹

2、mv：移动或者重命名文件，用来为文件或目录改名、或将文件或目录移入其它位置。

- mv source dest

需求背景

经常会有这样的需求，当页面滚动到某一个位置时，需要某个页面元素固定在屏幕顶部，并且有时需要连续滚动吸顶。在PC端主要的实现是通过 CSS 的 position: fixed 属性，但是在移动端，尤其是在安卓端，存在诸多的兼容性问题。

问题

position：fixed给移动端带来的问题：

• IOS8在页面滚动时，吸顶不连续；页面滑动时，不见吸顶，页面滚动停止后，吸顶缓慢出现
• 滚动到顶部之后，会出现两个一样的吸顶, 过一会才恢复正常。
• footer底部输入框 focus 状态，footer 底部输入框被居中，而不是吸附在软键盘上部。
• iPhone 4s&5 / iOS 6&7 / Safari 下，页面底部footer输入框失去焦点时，header定位出错。当页面有滚动动作时，header定位恢复正常。
• iPhone 4 / iOS 5 / Safari下，当页面发生跳转，再退回时，fixed区域消失，当内容获得焦点时，fixed区域才显示。
• 安卓低版本／自带浏览器，不支持fixed属性，iOS4 也是不支持 fixed 的。
• 三星i9100(S2) / 自带浏览器，在滚屏过程中，fixed定位异常，touchend之后恢复正常。
• 部分低版本Android对支持不好，video poster属性设置的封面图会遮挡fixed元素。
• QQ、UC浏览器滚动页面时footer定位错误，会往上偏移，是由于地址栏收起的缘故。
• *remind：不要在 fixed 元素中使用 input / textarea 元素。