初识（一）- react@16.3

简介

前言

<=React@16.3 和 React-dom 相关知识。

You cannot improve your past, but you can improve your future.
so.
once time is wasted, life is wasted.

• React - 实现React功能的核心库。
• React-dom - 将虚拟DOM渲染到浏览器当中。
• React-redux、redux - 解决状态管理问题的 react 版本。
• React-router-dom@4.0、React-router@4.0 - react 路由相关(4.0以组件的形式存在于各页面中)。

react 组件化的开发模式，所以非常适合高级做架构，中级封组件，初级写业务的模式。

F2E知识点整理

ECMAscript:

ES5:

1. MVC、MVVM
2. ECMAScript、文档对象模型（DOM）、游览器对象模型（BOM）
3. 变量、（变量声明、变量赋值）=> 变量的初始化
4. 基本数据类型（数字、字符串、Boolean、undefined、null）、引用数据类型（对象）、ES6新增（symbol）
5. bind、call、apply
6. event loop，任务栈，宏任务，微任务（js线程）
7. 事件捕获，事件目标，事件冒泡，事件代理~事件委托（叫法不同或者说主体不同）
8. 类，类的继承，super
9. 原型，继承
10. session，cookie，sessionStorage，localStroage
11. 红黑树算法，二叉树算法
12. bind，call，apply
13. 闭包，清内存，赋值为null
14. 网络强缓存，弱缓存（协商缓存）
15. js语句、js表达式
16. 函数声明 、函数表达式（声明提升）
17. 高阶函数、纯函数、函数柯里化
18. 面向对象编程、面向函数编程
19. set
20. 修饰器 - 编译时执行的函数
21. AMD/CMD、commonjs
22. 匿名函数
23. 隐式换算
24. 4种函数调用模式（this）有四种模式，函数调用，方法调用，.call() 和 .apply()。
25. JavaScript 中的迭代器（iterators）和迭代（iterables）是什么？ 你知道什么是内置迭代器吗？
26. JSON.parse(JSON.stringify(Obejct))的注意点
27. 单向数据流和双向数据绑定
28. httpXMLrequest、fetch、axios、ajax
29. 使用单页应用将文件上传到服务器的有哪些方法(XMLHttpRequest2（streaming），fetch（non-streaming），File API)

ES6

1. let、const
2. () => {}
3. class、class extend
4. 对象初始化
5. 简写方法名 const object = {functionName () {}}
6. 装饰器写法（修饰器decorator => ES6）（@connet）
7. 赋值解构
8. rest
9. import、export

Object:

1. Object.keys(obj)
2. Object.assign()
3. Object.defineProperty(obj, key, props)

Array:

1. Array.from()
2. Array.prototype.includes()
3. Array.prototype.map()
4. Array.prototype.filter()
5. Array.prototype.every()、Array.prototype.some()
6. Array.prototype.reduce()

DOM:

DOM:

1. nodeType(1,2,3)
2. nodeName
3. nodeValue
4. firstChild
5. attributes => removeAttribute & addAttribute
6. createDocumentFragment
7. appendChild

STYLE:

CSS:

1. 两列自适应
2. 边距塌陷
3. BFC
4. 伪元素，伪类
5. css - mask镂空
6. clip-path裁剪
7. 自定义css属性
8. :empty
9. position: [relative, absolute, fixed, static, inherit, sticky]
10. 重绘和重排
11. CSS Flex / CSS Grid（网格）布局

Less:

1. 变量 - @
2. 混合 - ()
3. 函数
4. @import

Sass:

1. 变量 - $
2. 插值 - #{}
3. @import 和 _
4. font的合并处理
5. @extend
6. 占位选择器 - %
7. !optional标记
8. @at-root
9. @debug、@warn、@error
10. 函数 - if()
11. 指令 - @if、 @else if、@else
12. 指令 - @for $var from through 、@for $var from to
13. 指令 - @each $var in
14. 指令 - @while
15. @mixin ($var1, $var2) @include @content
16. @function

Vue:

Vue：

1. props，$emit，ref，$parent，$children
2. slot，slot-scope
3. 无渲染组件 - 组件负责行为，调用方负责表现
4. extend
5. 内置组件 component
6. provide / inject - 跨组件访问
7. 为什么vue data 是一个函数
8. 指令: v-cloak v-pre v-once
9. 自定义指令 - directive（bind、inserted、update、componentUpdated、unbind）
10. v-for循环分组实现（template）

Vue-router:

1. scrollBehavior

React:

React：

1. jsx
2. ReactDOM.render()
3. 组件、元素、实例
4. state、props
5. 时间处理（bind(this)） => bind、apply、call
6. 高阶组件（HOC）
7. 纯组件（SFC、函数式无状态组件
8. 纯函数
9. 受控组件、非受控组件
10. 生命周期：constructor => componentWillMount => render => componentDidMount
11. propTypes
12. ref
13. 异步处理redux：redux-chunk、redux-saga
14. context
15. getDerivedStateFromProps，getSnapshotBeforeUpdate @version 16.4
16. 增加Pointer Events @version 16.6
17. React.memo(【函数组件】) ~ React.PureComponent 【memoization => 缓存】
18. React.lazy(() => import【组件】)
19. static contextType
20. static getDerivedStateFromError()
21. Suspense组件【悬念组件？】
22. 废弃 React.StrictMode

dva

1. redux-saga

其他：

网络协议:

1. HTTP1.1和HTTP1.0
2. 强缓存、弱缓存（协商缓存）

vue编写插件

项目地址：点击

javascript - css

脚本化内联样式

element.style.fontSize = "16px"

/* 设置e的样式属性为字符串s */
e.setAttribute('style', s);
e.style.cssText = s;

/* 查询e的内联样式 */
e.getAttribute('style');
e.style.cssText

getter 和 setter

简介

javascript 中的 setter 、getter 是平时接触比较少的方法，其本身也并不是标准方法，只在非ie浏览器里支持（ie内核也许有其他方法可以做到呢？暂 时不知其解），但是加以利用可以做许多事情......

javascript （三）

函数

函数的调用

• 作为函数
• 作为方法
• 作为构造函数
• 通过他们的 call() 和 apply() 方法间接调用 ......

css混合模式

example

主要涉及到 mix-blend-mode 和 background-blend-mode。

先看一个视觉效果【demo】。 ......

npm

创建

通过 npm init 创建 package.json 文件。

配置

package.json的文件配置有：

• name - 必选项，模块名称。命名时不能包含js、node、和url中需要转义的字符，不能以.和_为开头。
• version - 必选项，模块的版本号。
• main - 必选项，模块入口文件相对路径（相对于模块根目录）。
• description - 可选项，模块功能描述，显示在 npm search "package-name" 中。
• keywords - 可选项，数组类型，模块的关键字，显示在 npm search "package-name" 中。
• author - 可选项，发起者信息。示例如下： ......

ES6 - class

es5的构造方法。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

es6的写法。

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

注意，定义“类”的方法的时候，前面不需要加上 function 这个关键字，直接把函数定义放进去了就可以了。 另外，方法之间不需要逗号分隔，加了会报错。

es6的类，完全可以看作构造函数的另一种写法。 ......

commonjs规范

概述

Node 应用由模块组成，采用 CommonJS 模块规范。

根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

其他

资料：

• 阮一峰 - commonjs ......

dns-prefetch

what is dns-prefetch ?

DNS 请求需要的带宽非常小，但是延迟却有点高，这点在手机网络上特别明显。

dns-prefetch, 是 DNS 预获取，也是网页前端的优化的一种技术。其范围包括文档的所有链接，无论是 图片的，CSS 的，还是 JavaScript 等其他用户能够点击的 URL。

一般在前端优化中与 DNS 有关的两点：

1. 减少请求次数
2. 提前对 DNS 预获取。

DNS 作为互联网的基础协议，其解析速度很容易被网站优化人员、SEO人员忽视，其典型的一次 dns-prefetch解析需要“20-120ms”, 减少 DNS 解析时间和次数是一个不错的优化方式。

dns-prefetch ​的作用简单说明就是当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页链接 无需 DNS 解析，减少浏览者等待时间，提高用户体验。 ......

react 脚手架

主要的特性：

• 无需配置；
• 集成了对 React, JSX, ES6 和 Flow 的支持；
• 集成了开发服务器；
• 配置好了浏览器热加载的功能；
• 在 JavaScript 中可以直接 import CSS 和图片；
• 自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；
• 集成好了编译命令，编译后直接发布成产品，并且还包含了 sourcemaps。

值得注意：

• Node 的版本必须 >= 4，推荐 Node >= 6 and npm >= 3；
• 运行起来后浏览器已经实现了热加载刷新，修改代码保存后浏览器会自动刷新；
• 执行 npm test 或 yarn test 可以执行测试动作。；
• 编译项目执行 npm run build 或 yarn build； ......

wechat

微信小程序

css

品牌墙效果

......

Object

整理一下碰到的 Object 的一些方法。 Object.keys 、Object.defineProperty、Object.assign

Object.keys( )

返回一个数组，包含指定对象的所有自有可遍历属性的名称。 MDN详解

var vendors = {
  '': '',
  Webkit: 'webkit',
  Moz: '',
  O: 'o',
  ms: 'ms'
};

Object.keys(vendors)            // ["", "Webkit", "Moz", "O", "ms"]

问题整理

#1 - 微信中不能直接打开itunes的下载地址的问题 ？

知乎文章：https://www.zhihu.com/question/24029212

解决方案：

• 方案一，申请应用宝，先跳转到应用宝页面，再点击下载根据设备的不同转去 AppStore 或是 Android 的应用宝下载地址。
• 方案二，在页面前端做处理，如果无法跳转到 AppStore 就提示用户在微信里手动选择用 Safari 打开页面。
• 方案三，二百二维码里面配置：http://hotapp.cn/?src=http://www.hao2b.cn

#2 - 如何防止网页被恶意嵌套入其他的网页中 ？

// 判断当前的window对象是否是top对象
if (window!=top){

    // 如果不是，将top对象的网址自动导向被嵌入网页的网址
    top.location.href =window.location.href;
}

// 升级版
try{
    top.location.hostname;
        if (top.location.hostname != window.location.hostname) {
                top.location.href =window.location.href;
        }
    }
catch(e){
    top.location.href = window.location.href;
}

#3 - 在iPhone中在li标签下的click事件无效

// 解决方案：

// 方案一，在对应的css中添加cursor：pointer样式
// 方案二，将li标签改成a标签

javascript - 对象

JavaScript 中所有变量都可以当做对象使用，除了两个例外 null 和 undefined。

注意：一个常见的误解是数字的字面值（literal）不能当作对象使用。这是因为 JavaScript 解析器的一个错误， 它试图将点操作符解析为浮点数字面值的一部分。

2.toString();   // 出错：SyntaxError

// 变通方法
2..toString();
2 .toString();
(2).toString();

访问属性

有两种方式来访问对象的属性：点操作符或者中括号操作符。 ......

node

node的优势:

• 非阻塞
• 单线程
• 事件驱动

http - 模块

hello world

a. 全局方法require()是用来导入模块的，一般直接把 require() 方法的返回值赋值给一个变量，在 JavaScript 代码中直接使用此变量即可 。require(“http”) 就是加载系统预置的 http 模块

b. http.createServer 是模块的方法，目的就是创建并返回一个新的web server对象，并且给服务绑定一个回调，用以处理请求。

c. 通过 http.listen() 方法就可以让该 HTTP 服务器在特定端口监听。 ......

javascript - this

this 是 JavaScript 的一个关键字。代表在函数运行时，自动生成的一个内部对象，这个内部对象被称为函数上下文，只在函数内部调用。

在看本文章时。先把下面的话记住。不然你会懵逼！血崩！

this 对象是在运行时基于函数的执行环境绑定的：

1. 在全局函数中，this等于window。
2. 当函数作为某个对象的方法调用时，this指向那个对象。
3. 匿名函数的执行环境具有全局性，因此this通常指向window。

ES6 - let

传送门: ES6文档

Getting Started

es5变量声明：

• var

• function

es6新增的变量声明：

• let

• const

• import

• class ......

tool - grunt

插件介绍

• grunt插件：grunt插件有2部分：

第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。

第二类是第三方提供的插件，不带有这两个特征。

• grunt常用的插件： ......