个人技术博客

使用Astro搭建个人博客1

Fri, 25 Sep 2026 00:00:00 GMT

Astro博客搭建部署#

因为我是mac本，所以该文主要以mac系统进行说明

之前的博客一直基于 Hexo 搭建 https://gaodaxiu0406.github.io已停止更新, 部署在免费的 github 上。HEXO博客的源码因为各种原因丢失了，于是准备重新搭建自己的技术博客。

搭建前了解了不少免费个人技术博客搭建，主要被 Astro 的「群岛架构」理念吸引，于是开启了新技术博客的搭建之旅。

「群岛架构」是前端框架 Astro 实现高性能网站加载的核心架构设计。

「群岛架构」采用组件化的孤岛思路，默认不加载任何不必要的客户端 JavaScript，每个UI组件就像海洋中独立的岛屿。只有当用户交互触发时，才按需加载对应组件的 JavaScript 代码。
「群岛架构」是 Astro 超越传统静态站点生成器（如 Hexo ）的关键创新，它是 Astro 构建的博客能在性能测试中拿到接近满分的核心原因，同时还给开发带来了灵活扩展和流畅热更新的优势。

1.环境准备#

1.1 安装git#

访问 Git 官网下载并安装适合你操作系统的 Git 版本。

1
// 1.若之前安装过需要更新的话
2
// mac若已安装 Homebrew，直接执行升级命令
3
brew update && brew upgrade git
4

5
// 2.若未安装 Homebrew 或需强制覆盖系统自带 Git：
6
// 1）安装 Homebrew (如未安装)
7
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
8

9
// 2）安装/更新 Git
10
brew install git
11

12
// 3）强制链接以覆盖系统默认路径 (关键步骤)
13
brew link git --overwrite
14

15
// 4）重载环境变量 (根据 Shell 类型选择，Zsh 为默认)
16
source ~/.zshrc
17

18
// 5）验证版本和路径
19
git --version // 验证版本
20
which git // 验证路径

展开收起

安装完成后，打开终端或命令提示符，运行以下命令验证 Git 是否安装成功：

1
git --version

如果显示版本号，则表示安装成功。

1.2 安装Node.js#

访问 Node 官网下载并安装最新版本的 Node.js。建议使用 LTS 版本。

1.2.1 mac怎么用Node官网包安装#

1.‌下载安装包‌：Node 官网下载 .pkg安装文件。 2.‌运行安装‌：双击安装包按提示完成安装，会覆盖旧版本。 3.‌检查路径‌：确保终端使用的是新安装路径下的 Node，必要时重启终端。‌‌‌

1.2.2 如何安装多个版本Node#

可能你在不同的项目中用到了不同的node版本，此时你需要在不同项目中切换使用不同的node版本，需要用到nvm。

1
// 1.‌执行安装脚本‌
2
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/install.sh | bash
3

4
// 2.加载环境变量‌
5
// 安装完成后，在当前终端执行以下命令使 nvm 立即生效：
6
export NVM_DIR="$HOME/.nvm"
7
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
8
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
9
// 注：官方脚本通常会自动将上述配置写入 ~/.zshrc，若重启终端后 nvm 命令失效，请检查 ~/.zshrc 末尾是否包含上述代码。
10

11
// 3.配置国内镜像（可选，加速 Node 安装）‌
12
// 在 ~/.zshrc 中添加以下环境变量，解决 nvm install 下载慢的问题：
13
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/
14

15
// 4.添加后执行 source ~/.zshrc 生效。
16
source ~/.zshrc
17

18
// 5.验证安装‌(运行后输出版本号即为安装成功)
19
nvm --version // 简写 nvm -v
20

21
// 其他常规操作：
22
// 安装最新 LTS 版本
23
nvm install --lts
24

25
// 切换版本
26
nvm use <版本号>
27

28
// 设置默认版本
29
nvm alias default <版本号>

展开收起

1.2.3 如何升级 `Node`#

当然，可能你只有一个项目或者不需要多个node版本，所以下面说一下mac通过 Homebrew升级 Node

1.更新源‌：终端输入 brew update 更新包管理列表。 2.‌升级 Node‌：执行 brew upgrade node 升级到 Homebrew 源中的最新版本。

安装完成后，打开终端或命令提示符，运行node -v验证 Node.js 是否安装成功。如果显示版本号，则表示安装成功。 Node自带npm，运行npm -v验证npm是否安装成功。如果显示版本号，则表示安装成功。

1.3 安装pnpm#

pnpm 是比 npm、yarn 更节省空间、安装更快的包管理工具，能有效提升依赖管理效率，减少依赖冗余、幽灵依赖等常见问题。

通过 npm 安装 pnpm：

1
npm install -g pnpm

-g：--global 的缩写，代表全局安装，包会被安装到系统全局路径，这样终端任意目录可直接使用包命令。

2 Astro#

2.1 安装最新版本Astro#

1
pnpm create astro@latest

执行命令后，首先会检测本地是否安装 create-astro（Astro 官方脚手架），输入 y 并回车，确认安装 / 更新该工具。

2.2 初始化Astro项目#

工具安装完成后，会自动调用启动 Astro 项目创建向导。
指定项目目录（dir）：输入自定义项目名（比如my-blog）后回车确认。（默认是在当前命令行所在路径下创建项目文件夹，也可以指定具体路径）
选择模板（tmpl）：通过上下方向键选中 blog template（博客模板），回车确认。
安装依赖（deps）：确认自动安装项目依赖。
初始化 Git（git）：确认自动创建 Git 仓库，完成版本控制初始化。

图片1

2.3 启动Astro开发服务器测试#

这样基础的博客模板就生成好了，命令行进入到博客目录下，输入pnpm run dev命令启动 Astro 开发服务器:

图片2

根据运行提示，在浏览器输入 http://localhost:4321/ 访问博客

图片3

测试完成后，回到命令行Ctrl+C关闭服务器。

2.4 Astro项目结构#

打开前面创建的Astro博客根目录，我们通过这个例子来了解下Astro项目的文件结构。

src/：放所有需要处理的源码。Astro 通过构建、压缩、处理这里的文件（页面、组件、样式等）创建最终传递到浏览器的网站。
public/：放完全静态的资源。如某些图片和字体，或特殊文件（如 robots.txt 和 manifest.webmanifest）等等。
- 所谓完全静态指的是该资源的最终形态在网站构建前就已经确定，Astro在构建网站时，不会去转换、编译、打包或优化这些文件和资源。
- 这个文件夹中的文件将会被原封不动地复制到构建文件夹中，也就是直接复制到Astro最终生成的网站目录中。
src/pages/：放页面文件，决定网站页面路径。
Astro 使用基于文件的路由，它根据项目 src/pages 目录中的文件结构来生成你的构建链接。Astro路由 | Docs

更多相关内容参考官方文档：Astro项目结构 | Docs

3 配置Astro博客主题#

这里直接使用的可Fork的主题库，可以新建个空文件夹。

3.1 Astro博客主题模板推荐#

AstroPaper：非常简约、干净，页面结构简单，适合喜欢极简风格的博主。Lighthouse Score全满分，不足之处就是暂时没有侧边目录，长文章阅读起来体验不好。官方仓库链接
Firefly：基于 Fuwari 模板开发，做了创新升级，如双侧边栏、文章网格（多列）、瀑布流布局等，中文友好，文档丰富详细。官方仓库链接
Astro Cactus：和Paper一样也是简约风，Lighthouse Score全满分。官方仓库链接
Astro Theme Pure：设计独特，一打开就有让人眼前一亮的感觉，在网站内容组织方面也比较新颖，Lighthouse Score全满分。官方仓库链接
Fuwari：优雅美观，中规中矩，页面结构和大多数博客主题设计相似，文档比较简陋。官方仓库链接

3.2 Fork主题仓库Firefly#

首先Fork一下你选择的Astro博客主题仓库（这里我用的是Firefly）到自己的Github仓库：仓库名、描述可以自定义，只拷贝主分支。

图片4

然后再克隆到本地：

图片5

1
git clone 上图中你复制的地址

图片6

3.3 制定分支策略#

核心原则：不要直接在 master 分支做自定义修改，让 master 分支纯粹用于跟踪原博客主题仓库的更新，自定义修改放在独立的开发分支中。

1
// 1. 创建专属的开发分支（比如叫 dev），所有自定义修改都在这个分支做
2
git checkout -b dev
3

4
// 2. 把本地的 dev 分支推送到你的 Fork 仓库（后续提交都推到这个分支）
5
git push -u origin dev
6

7
// 3. 查看本地分支和远程分支的关联状态（关联后，后续可以直接 git push）
8
git branch -vv

图片7

3.4 配置与DIY博客#

首次拉取主题仓库到本地后，需要先安装依赖

1
// 安装项目依赖
2
pnpm install

1.在本地启动开发服务器，在浏览器中实时预览博客效果。

运行以下命令启动开发服务器：

1
pnpm dev

博客将在 http://localhost:4321 可用。

2.对照所选博客主题的官方文档，修改对应配置文件。

3.根据预览结果，逐项调整、测试配置，直到效果符合预期。

这个过程的技术门槛并不高，需要投入一定耐心。

4.1 写文章#

不同博客主题，文章存放位置略有不同，具体要查看主题文档，比如Firefly主题的文章文件放在 src/content/posts/ 目录中。

另外文章Frontmatter字段的设定也不一样，我们只需要依据主题官方文档来配置即可。

更多内容查阅官方文档： Astro 中的 Markdown | Docs

4.3 构建与预览网站#

首先执行构建命令pnpm build

Astro 会把你的网站打包成可直接上线的版本，放在Astro项目根目录的 dist/ 文件夹里，打包进度会在终端里显示。

打包过程中会自动检查项目里的各类错误，帮你在正式上线前及时发现问题；如果你的 TypeScript 开启了 strict 或 strictest 严格模式，打包时还会额外检查代码的类型错误。

构建完成后，你可以在终端执行预览命令pnpm preview

执行后就能在本地浏览器中预览已构建好的网站。需要注意的是，预览展示的是你最后一次执行 pnpm build 时的网站状态 —— 如果在打包后修改了代码，这些改动不会立刻出现在预览中，必须重新运行 pnpm build 打包，才能看到最新的修改效果。

若要退出预览模式，可按下 Ctrl + C 终止预览进程，随后在终端执行其他命令（例如重启开发服务器）即可回到开发模式。开发模式下，你的代码修改会实时同步到预览窗口，无需重复构建。

4.2 日常维护博客#

平时修改博客内容、调整自定义配置等常规操作，全程在你的开发分支（如 dev）完成，master 分支保持 “干净”（仅用于跟踪原仓库更新），避免日常操作污染主分支。

1
// 1. 确保当前在开发分支（每次操作前先确认，避免切错分支）
2
git branch // 查看本地所有分支，会显示当前所在本地分支（高亮）
3
git branch -a // 查看本地及远程所有分支，会显示当前所在本地分支（高亮）
4
git checkout dev // 若当前不在dev分支，执行当前命令会切换到本地dev分支
5

6
// 2. 查看修改内容（可选，但建议做，确认只提交需要的修改）
7
git status
8

9
// 3. 将修改的文件加入暂存区
10
git add .
11

12
// 4. 提交修改（备注最好要清晰，方便后续追溯）
13
git commit -m "修改主页布局"
14

15
// 5. 推送到你的Fork仓库（把本地修改同步到GitHub）
16
git push origin dev // 将本地dev同步到GitHub的dev分支 注意：此时远程master主分支与dev分支并未同步，dev分支才是你修改后的最新代码

展开收起

5 Vercel 部署#

Astro部署方案有很多，具体参考官方文档：部署你的 Astro 站点 Docs

平台	免费额度	国内访问	适合场景
‌Cloudflare Pages‌	无限带宽/请求	部分地区良好	首选，性价比最高
‌GitHub Pages‌	1GB存储/100GB带宽/月	一般	开源项目展示
‌Vercel‌	100GB带宽/月	不稳定	个人博客/文档
‌Netlify‌	100GB带宽/月	一般	企业级应用

由于之前使用HEXO搭建博客的时候用的‌ GitHub，所以这里我就没再尝试使用‌GitHub Pages‌部署了。我尝试使用Cloudflare Pages和‌Netlify‌部署，都没有成功。最终使用‌Netlify‌部署成功。

5.1 本地部署 `Netlify`#

全局安装 netlify-cli

1
npm install -g netlify-cli

验证是否安装成功

1
netlify --version

输出版本号即为安装成功

5.2 `Netlify` 关联项目#

在官网点击Add new project新建一个项目

图片8

选择引入/关联你的项目，我的项目在github上，所以我这里选择的GitHub

图片9

选择/搜索你的项目库并选择

图片10

填写你的项目名称（最终会成功访问链接中）

注意： 如果你的项目最新代码也在dev分支上，这里一定要将Build settings选择为dev分支。（这里默认打包的是master分支）

图片11

到页面最底部，点击 “Deploy 你的项目名称”按钮

跳转的页面最底下，已经开始自动打包部署了，点击进去可以看到详细

图片12

刚发布的项目，项目名称后面有个锁的图标，这代表当前这个项目虽然发布成功了，但它现在是个私有项目，别人可能访问不到你的项目，点击“visitor access settings”去设置

图片13

点击Edit visibility 去编辑

图片14

选择Public，点击 Save 保存设置

图片15

当这里的图标是这样的，说明项目部署成功了。点击进入当前项目，可以看到项目的详细设置

图片16

点击 Share ，弹框中复制链接，就可以访问你的博客地址了。

图片17

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy？

Mon, 12 Oct 2020 00:00:00 GMT

Vue 的响应式原理中 `Object.defineProperty` 有什么缺陷？为什么在 Vue3.0 采用了 `Proxy`，抛弃了 `Object.defineProperty`？#

`Object.defineProperty`#

Object.defineProperty 无法低耗费的监听到数组下标的变化，导致通过数组下标添加元素，不能实时响应；
Object.defineProperty 只能劫持对象的属性，从而需要对每个对象，每个属性进行遍历。如果属性值是对象，还需要深度遍历。

`Proxy`#

Proxy 可以劫持整个对象，并返回一个新的对象。
Proxy 不仅可以代理对象，还可以代理数组。还可以代理动态增加的属性。

解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题

Mon, 09 Sep 2019 00:00:00 GMT

解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题#

使用background-clip属性，使它的值为 content-box(将背景裁剪到内容框)，再设input的高度为0，最后使用padding将input框撑开即可：

1
input:-webkit-autofill {
2
  height: 0;
3
  border: 0;
4
  background-clip: content-box;
5
  padding: 12px 5px 12px 44px;
6
}

然而，有的项目在使用鼠标点选账号密码时依旧会出现灰色背景，最后的解决办法也是误打误撞，将background-clip的权重提到最高content-box!important就行，不会再出现灰色背景。

临时在一段代码中取消eslint检查

Sun, 01 Sep 2019 00:00:00 GMT

临时在一段代码中取消eslint检查#

可以如下设置

临时在一段代码中取消个别规则的检查（如no-alert, no-console）：/* eslint-disable no-alert, no-console */
在整个文件中取消eslint检查：/* eslint-disable */
在整个文件中禁用某一项eslint规则的检查：/* eslint-disable no-alert */
针对某一行禁用eslint检查：
- 当前行禁用eslint检查 alert(‘foo’); // eslint-disable-line
- 下一行禁用eslint检查
```
1
// eslint-disable-next-line
2
alert(‘foo’);
```
针对某一行的某一具体规则禁用eslint检查：
- 当前行禁用eslint检查 alert(‘foo’); // eslint-disable-line no-alert
- 下一行禁用eslint检查
```
1
// eslint-disable-next-line no-alert
2
alert(‘foo’);
```
针对某一行禁用多项具体规则的检查：
- 当前行禁用eslint检查 alert(‘foo’); // eslint-disable-line no-alert, quotes, semi
- 下一行禁用eslint检查
```
1
// eslint-disable-next-line no-alert, quotes, semi
2
alert(‘foo’);
```

从Chrome源码看JS Array的实现

Thu, 01 Aug 2019 00:00:00 GMT

从Chrome源码看JS Array的实现#

JS的Array是一个万能的数据结构，为什么这么说呢？因为首先它可以当作一个普通的数组来使用，即通过下标找到数组的元素：

1
var ary = [19, 59, 99]
2
console.log(ary[0]) // 19

然后它可以当作一个栈来使用，我们知道栈的特点是先进后出，栈的基本操作是出栈和入栈：

1
var ary = [1, 2, 3]
2
ary.push(4) // 入栈
3
ary.pop() // 出栈

同时它还可以当作一个队列，队列的特点是先进先出，基本操作是出队和入队：

1
var ary = [1, 2, 3]
2
ary.push(4) // 入队
3
ary.shift() // 出队

甚至它还可以当作一个哈希表来使用(但是不推荐这么用)：

1
var ary = [1, 2, 3, 4]
2
// 从第3个元素开始，删掉1个元素，并插入-1，-2这两个元素
3
ary.splice(2, 1, -1, -2) // [1, 2, -1, -2, 4]
4
// 再来个2000的索引
5
ary[2000] = 2000 // [1, 2, -1, -2, 4, empty*1995, 2000]

JS Array一方面提供了很大的便利，只要用一个数据结构就可以做很多事情，使用者不需要关心各者的区别，使得JS很容易入门。另一方面它屏蔽了数据结构的概念，不少写前端的都不知道什么是栈、队列、哈希、树，特别是那些不是学计算机，中途转过来的。然而这往往是不可取的。

另外一点是，即使是一些前端的老司机，他们也很难说清楚，这些数组函数操作的效率怎么样，例如说随意地往数组中间增加一个元素不会有性能问题么。所以就很有必要从源码的角度看一下数组是怎么实现的。

1. JS Array的实现#

先看源码注释：

1
// The JSArray describes JavaScript Arrays
2
//  Such an array can be in one of two modes:
3
//    - fast, backing storage is a FixedArray and length <= elements.length();
4
//       Please note: push and pop can be used to grow and shrink the array.
5
//    - slow, backing storage is a HashTable with numbers as keys.
6
class JSArray: public JSObject {
7
  public:
8
  // [length]: The length property.
9
  DECL_ACCESSORS (length, Object)
10

11
  // Number of element slots to pre-allocate for an empty array.
12
  static const int kPreallocatedArrayElements = 4;
13
};

这里说明一下，如果不熟悉C/C++的，那把它成伪码就好了。
源码里面说了，JSArray有两种模式，一种是快速的，一种是慢速的，快速的用的是索引直接定位，慢速的使用用哈希查找，由于JSArray是继承于JSObject，所以它也是同样的处理方式，如下面的：
```
1
var ary = [1, 2, 3]
2
ary[2000] = 5
```
- 增加一个2000的索引时，array就会被转成慢元素。

2. Push和扩容#

数组初始化大小为4：

1
// Number of element slots to pre-allocate for an empty array.
2
static const int kPreallocatedArrayElements = 4;

执行push的时候会在数组的末尾添加新的元素，而一旦空间不足时，将进行扩容。
在源码里面push是用汇编实现的，在C++里面嵌入的汇编。这个应该是考虑到push是一个最为常用的操作，所以用汇编实现提高执行速度。在汇编的上面封装了一层，用C++调的封装的汇编的函数，在编译组装的时候，将把这些C++代码转成汇编代码。

计算新容量的函数：

1
Node* CodeStubAssembler::CalculateNewElementsCapacity(Node* old_capacity, ParameterMode mode) {
2
  Node* half_old_capacity = WordOrSmiShr(old_capacity, 1, mode);
3
  Node* new_capacity = IntPtrOrSmiAdd(half_old_capacity, old_capacity, mode);
4
  Node* padding = IntPtrOrSmiConstant(16, mode);
5
  return IntPtrOrSmiAdd(new_capacity, padding, mode);
6
}

如上代码新容量等于：

1
new_capacity = old_capacity / 2 + old_capacity + 16

即老的容量的1.5倍加上16。初始化为4个，当push第5个的时候，容量将会变成：

1
new_capacity = 4 / 2 + 4 + 16 = 22

接着申请一块这么大的内存，把老的数据拷过去：

1
Node* CodeStubAssembler::GrowElementsCapacity(Node* object, Node* elements, Node* capacity, Node* new_capacity) {
2
  // Allocate the new backing store.
3
  Node* new_elements = AllocateFixedArray(new_capacity, mode);
4

5
  // Copy the elements from the old elements store to the new.
6
  CopyFixedArrayElements(elements, new_elements, capacity, new_capacity);
7
  return new_elements;
8
}

由于复制是用的memcopy，把整一段内存空间拷贝过去，所以这个操作还是比较快的。

再把新元素放到当前length的位置，再把length增加1：

1
StoreFixedArrayElement(elements, var_length.value());
2
Increment(var_length, 1, mode);

3. Pop和减容#

push是用汇编实现，而pop的逻辑是用C++写的。在执行pop的时候，第一步，获取到当前的length，用这个length - 1得到要删除的元素，然后调用setLength调整容量，最后返回删除的元素：

1
int new_length = length - 1;
2
int remove_index = remove_position == AT_START ? 0 : new_length;
3
Handle<Object> result = Subclass::GetImpl(isolate, *backing_store, remove_index);
4
Subclass::SetLengthImpl(isolate, receiver, new_length, backing_store);
5
return result;

我们重点看下这个减容的过程：

1
if (2 * length <= capacity) {
2
  // If more than half the elements won't be used, trim the array.
3
  isolate->heap()->RightTrimFixedArray(backing_store, capacity - length);
4
} else {
5
  // Otherwise, fill the unused tail with holes.
6
  BackingStore::cast(*backing_store)->FillWithHoles(length, old_length);
7
}

如果容量大于等于length的2倍，则进行容量调整，否则用holes对象填充。第三行的rightTrim函数，会算出需要释放的空间大小，并做标记，并等待GC回收：

1
int bytes_to_trim = elements_to_trim * element_size;
2
// Calculate location of new array end.
3
Address old_end = object->address() + object->Size();
4
Address new_end = old_end - bytes_to_trim;
5
CreateFillerObjectAt(new_end, bytes_to_trim, ClearRecordedSlots::kYes);

也就是说，当数组的元素个数小于容量的一半时，就会进行减少的操作，将容量调整为实际的大小。

4. shift和splice数组中间的操作#

push和pop都是在数组末尾操作，相对比较简单，而shfit、unshfit、splice是在数组的开始或者中间进行操纵。我们来看一下，如果是这种情况的又是如何调整数组元素的。

（1）shift#

shift是出队，即删除并返回数组的第一个元素。shift和pop调的都是同样的删除函数，只不过shift传的删除的postion是AT_STRT，源码里面会判断如果是AT_START的话，会把元素进行移动：
```
1
if (remove_position == AT_START) {
2
  Subclass::MoveElements(isolate, receiver, backing_store, 0, 1, new_length, 0, 0);
3
}
```
从1的位置移到0的位置，如上面第2行的第4、5个参数，这个move将会调leftTrim，和上面的rightTrim相反：
```
1
*dst_elms.location() = BackingStore::cast(heap->LeftTrimFixedArray(*dst_elms, src_index));
2
receiver->set_elements(*dst_elms);
```

（2）unshfit#

unshfit在数组的开始位置插入元素，首先要判断容量是否足够存放，如果不够，将容量扩展为老容量的1.5倍加16，然后把老元素移到新的内存空间偏移为unshift元素个数的位置，也就是说要腾出起始的空间放unshfit传进来的元素，如果空间足够了，则直接执行memmove移动内存空间，最后再把unshif传进来的参数copy到开始的位置，并更新array的length：
```
1
int insertion_index = add_position == AT_START ? 0 : length;
2
// Copy the arguments to the start.
3
Subclass::CopyArguments(args, backing_store, add_size, 1, insertion_index);
4
// Set the length.
5
receiver->set_length(Smi::FromInt(new_length));
```

（3）splice#

splice的操作已经几乎不用去看源码了，通过shift和unshift的操作是怎么样的，就可以想象到它的执行过程是怎样的，只是shift/unshfit操作的index是0，而splice可以指定index。具体代码如下：

1
// Delete and move elements to make space for add_count new elements.
2
if (add_count < delete_count) {
3
  Subclass::SpliceShrinkStep(isolate, receiver, backing_store, start, delete_count, add_count, length, new_length);
4
} else if (add_count > delete_count) {
5
  backing_store = Subclass::SpliceGrowStep(isolate, receiver, backing_store, start, delete_count, add_count, length, new_length);
6
}
7

8
// Copy over the arguments.
9
Subclass::CopyArguments(args, backing_store, add_count, 3, start);

它需要先shrink或者grow中间元素的空间，以适应增加元素比删除元素少或者多的情况，然后进行容量调整和移动元素。

5. Join和Sort#

它们是用JS实现的，然后再用wasm打包成native code。不过，join的实现逻辑并不简单，因为array的元素本身具有多样化，可能为慢元素或者快元素，还可能带有循环引用，对于慢元素，需要先排下序：

1
var keys = GetSortedArrayKeys(array, %GetArrayKeys(array, length));

预处理完之后，最后创建一个字符串数组，用连接符连起来：

1
// Construct an array for the elements.
2
var elements = new InternalArray(length);
3
for (var i = 0; i < length; i++) {
4
  elements[i] = ConvertToString(use_locale, array[i]);
5
}
6

7
if (separator === '') {
8
  return %StringBuilderConcat(elements, length, '');
9
} else {
10
  return %StringBuilderJoin(elements, length, separator);
11
}

而sort函数是用的快速排序：

1
function ArraySort(comparefn) {
2
  CHECK_OBJECT_COERCIBLE(this, "Array.prototype.sort");
3
  %Log("js/array.js execute ArraySort");  //手动添加的log打印，确保执行的是这里
4

5
  var array = TO_OBJECT(this);
6
  var length = TO_LENGTH(array.length);
7
  return InnerArraySort(array, length, comparefn);
8
}

当数组元素的个数不超过10个时，是用的插入排序：

1
function InnerArraySort(array, length, comparefn) {
2
  // In-place QuickSort algorithm.
3
  // For short (length <= 10) arrays, insertion sort is used for efficiency.
4
  function QuickSort(a, from, to) {
5
    var third_index = 0;
6
    while (true) {
7
      // Insertion sort is faster for short arrays.
8
      if (to - from <= 10) {
9
        InsertionSort(a, from, to);
10
        return;
11
      }
12
      //other code ...
13
    }
14
  }
15
}

展开收起

快速排序算法里面有一个比较重要的地方是选择枢纽元素，最简单的是每次都是选取第一个元素，或者中间的元素，在源码里面是这样选择的：
```
1
if (to - from > 1000) {
2
  third_index = GetThirdIndex(a, from, to);
3
} else {
4
  third_index = from + ((to - from) >> 1);
5
}
```
- 如果元素个数在1000以内，则使用它们的中间元素，否则要算一下，这个算法比较有趣：
  1 function GetThirdIndex(a, from, to) { 2 var t_array = new InternalArray(); 3 // Use both 'from' and 'to' to determine the pivot candidates. 4 var increment = 200 + ((to - from) & 15); 5 var j = 0; 6 from += 1; 7 to -= 1; 8 for (var i = from; i < to; i += increment) { 9 t_array[j] = [i, a[i]]; 10 j++; 11 } 12 t_array.sort(function(a, b) { 13 return comparefn(a[1], b[1]); 14 }); 15 var third_index = t_array[t_array.length >> 1][0]; 16 return third_index; 17 }
  展开收起
  - 先取一个递增间距200~215之间，再循环取出原元素里面落到这个间距的元素，放到一个新的数组里面（这个数组是C++里面的数组），然后排下序，取中间的元素。因为枢纽元素的刚好是所有元素的中位数时，排序的效果最好，而这里是取出少数元素的中位数，类似于抽样模拟，缺点是它得再借助另外的排序算法。
  - 最后再比较一下Array和线性链接的速度。

Array和线性链接的速度#

线性链接是一种非连续存储的数据结构，每个元素都有一个指针指向它的下一个元素，所以它删除元素的时候不需要移动其它元素，也不需要考虑扩容的事情，但是它的查找比较慢。我们实现一个简单的List和Array进行比较。

List的每个节点用一个Node表示：

1
class Node{
2
  constructor(value, next){
3
      this.value = value;
4
      this.next = next;
5
  }
6
}

每个List都有一个头指针指向第一个元素，和一个length记录它的长度：

1
class List{
2
  constructor(){
3
      this.head = null;
4
      this.tail = null;
5
      this.length = 0;
6
  }
7
}

然后实现它的push和unshift函数：

1
class List{
2
  unshift(value){
3
      return this.insert(0, value);
4
  }
5
  push(value){
6
      if(this.head === null){
7
          this.head = new Node(value, this.tail);
8
          this.length++;
9
      } else {
10
          this.insert(this.length, value);
11
      }
12
      return this.length;
13
  }
14
}

两个函数都会调一个通用的insert函数：

1
insert(index, value){
2
  var insertPos = this.head;
3
  //找到需要插入的位置的节点
4
  for(var i = 0; i < index - 1; i++){
5
      insertPos = insertPos.next;
6
  }
7
  var node = null;
8
  if(index === 0){
9
      node = new Node(value, this.head);
10
      this.head = node;
11
  } else {
12
      node = new Node(value, insertPos.next);
13
      insertPos.next = node;
14
  }
15
  this.length++;
16
  return value;
17
}

展开收起

有了这个List之后，就可以初始化一个list和array：

1
var list = new List();
2
var arr = [];
3
for(var i = 0; i < 100; i++){
4
    list.push(i);
5
    arr.push(i);
6
}

然后用下面的代码比较List和Array在数组起始位置插入元素的操作时间：

1
var count = 10000;
2
console.time("list unshfit");
3
for(var i = 0; i < count; i++){
4
    list.unshift(i);
5
}
6
console.timeEnd("list unshfit");
7

8
console.time("array unshfit");
9
for(var i = 0; i < count; i++){
10
    arr.unshift(i);
11
}
12
console.timeEnd("array unshfit");

再比较从正中间位置插入元素的时间：

1
console.time("list insert middle with index");
2
for(var i = 0; i < count; i++){
3
    insertPos = list.insert(list.length >> 1, i);
4
}
5
console.timeEnd("list insert middle with index");
6

7
console.time("array insert middle");
8
for(var i = 0; i < count; i++){
9
    arr.splice(arr.length >> 1, 0, i);
10
}
11
console.timeEnd("array insert middle");

运行可以得到以下表格：

unshift splice(n/2)
Array 350ms 7.99ms
List 8.23ms 106ms
- 可以看到在队首插入元素，使用线性链接List的时间将会数量级的优于Array。如果是在中间位置插入的话，由于 List的查找花费了很多时间，导致总时间明显高于Array。但是如果在插入的时候，记住上一次的位置，那么List又会明显快于Array。如下换成记录插入的位置：
```
1
console.time("list insert middle with pos");
2
var insertPos = list.getNode(list.length >> 1);
3
for(var i = 0; i < count; i++){
4
    insertPos = list.insertFromNode(insertPos, i);
5
}
6
console.timeEnd("list insert middle with pos");
```
  - 时间比较List又快于Array：
    
    unshift splice(n/2) splice pos
    Array 350ms 7.99ms 8.07ms
    List 8.23ms 106ms 1.78ms

综上，Array的实现用了三种语言：汇编、C++和JS，最常用的如push用了汇编实现，比较常用的如pop/splice等用了C++，较为少用的如join/sort用了JS。
Array为快元素即普通的数组时，增删元素操作需要不断的扩容、减容和调整元素的位置。特别是当不断地在起始位置插入元素时，和链表相比，这种时间效率还是比较低下的。如果使用的场景是要根据index删除元素，使用Array还是有优势，但是若能够很快定位到删除元素的位置，链表毫无疑问是更合适的。
【转载】原文地址：https://zhuanlan.zhihu.com/p/26388217?utm_source=weibo&utm_medium=social

	unshift	splice(n/2)
Array	350ms	7.99ms
List	8.23ms	106ms

	unshift	splice(n/2)	splice pos
Array	350ms	7.99ms	8.07ms
List	8.23ms	106ms	1.78ms

从Chrome源码看JS Object的实现

Wed, 31 Jul 2019 00:00:00 GMT

从Chrome源码看JS Object的实现#

C/C++/Java等语言是没有这种json的数据类型的，其它一些有的：如在Pthyon里面叫做字典，在Ruby/Perl里面叫散列表，当然这只是个名称而已，本质上可以当作json类型。而C是“万物之母”，C里面没有的，就得通过某种方式实现

并且JS里面的Object是如何查找属性的，这个问题有人说是通过遍历key的字符串查找的，也有人说是通过哈希查找的。究竟它是怎么存储和查找的，能不能把Object当作一个map来使用？

Chrome自行开发了V8引擎，并被Node拿去当解析器。本文将通过V8的源码尝试分析Object的实现。

1. V8的代码结构#

v8的源码位于src/v8/src/，代码层级相对比较简单，但是实现比较复杂，为了能看懂，需要找到一个切入点，通过打断点、加log等方式确定这个切入点是对的，如果这个点并不是关键的点，进行到某一步的时候就断了，那么由这个点出发尝试去找其它的点。不断验证，最后找到一个最关键的地方，由这个地方由浅入深地扩展到其它地方，最后形成一个体系。

2. JS Object类图#

V8里面所有的数据类型的根父类都是Object，Object派生HeapObject，提供存储基本功能，往下的JSReceiver用于原型查找，再往下的JSObject就是JS里面的Object，Array/Function/Date等继承于JSObject。左边的FixedArray是实际存储数据的地方。

3. 创建JS Object#

在创建一个JSObject之前，会先把读到的Object的文本属性序列化成constant_properties，如下的data：

1
var data = {
2
  name: "yin",
3
  age: 18,
4
  "-school-": "high school"
5
};

会被序列成：

1
../../v8/src/runtime/runtime-literals.cc 72 constant_properties: 0xdf9ed2aed19: [FixedArray]
2
– length: 6
3
  [0]: 0x1b5ec69833d1 <String[4]: name>
4
  [1]: 0xdf9ed2aec51 <String[3]: yin>
5
  [2]: 0xdf9ed2aec71 <String[3]: age>
6
  [3]: 18
7
  [4]: 0xdf9ed2aec91 <String[8]: -school->
8
  [5]: 0xdf9ed2aecb1 <String[11]: high school>

它是一个FixedArray，一共有6个元素，由于data总共是有3个属性，每个属性有一个key和一个value，所以Array就有6个。第一个元素是第一个key，第二个元素是第一个value，第三个元素是第二个key，第四个元素是第二个key，依次类推。Object提供了一个Print()的函数，把它用来打印对象的信息非常有帮助。上面的输出有两种类型的数据，一种是String类型，第二种是整型类型的。
FixedArray是V8实现的一个类似于数组的类，它表示一段连续的内存，上面的FixedArray的length = 6，那么它占的内存大小将是：
```
1
length * kPointerSize
```
因为它存的都是对象的指针（或者直接是整型数据类型，如上面的18），在64位的操作系统上，一个指针为8个字节，它的大小将是48个字节。它记录了一个初始的内存开始地址，使用元素index乘以指针大小作为偏移，加上开始地址，就可以取到相应index的元素，这和数组是一样的道理。只是V8自己封装了一个，方便添加一些自定义的函数。
FixedArray主要用于表示数据的存储位置，在它上面还有一个Map，这个Map用于表示数据的结构。这里的Map并不是哈希的意思，更接近于地图的意义，用来操作FixedArray表示的这段内存。V8根据constant_properties的length，去开辟相应大小空间的Map：
```
1
Handle<Map> map = ComputeObjectLiteralMap(context, constant_properties, &is_result_from_cache);
```
- 把这个申请后的Map打印出来：
```
1
../../v8/src/heap/heap.cc 3472 map is 0x21528af9cb39: [Map]
2
– type: JS_OBJECT_TYPE
3
– instance size: 48
4
– inobject properties: 3
5
– back pointer: 0x3e2ca8902311 <undefined>
6
– instance descriptors (own) #0: 0x3e2ca8902231 <FixedArray[0]>
```
  - 从第4行可以看到，它的大小确实和我们算的一样。并且它还有一个叫做descriptors表示它的数据结构。descriptor记录了每个key-value对，以及它们在FixedArray里面的index. 后续对properties的操作基本上通过descriptor进行。
  - 有了这个map的对象之后，用它来创建一个JSObect：
```
1
Handle<JSObject> boilerplate = isolate->factory()->NewJSObjectFromMap(map, pretenure_flag);
```
  - 重新开辟一段内存，把map的内容拷过去。
  - 由于map只是一段相应大小的内存空间，它的内容是空的，所以接下来要设置它的properties：
    1 for (int index = 0; index < length; index += 2) { 2 Handle<Object> key(constant_properties->get(index + 0)); 3 Handle<Object> value(constant_properties->get(index + 1)); 4 Handle<String> name = Handle<String>::cast(key); 5 JSObject::SetOwnPropertyIgnoreAttributes(boilerplate, name, value, NONE); 6 }
    - 通过上面的代码，把properties设置到map的FixedArray里面，并且可以通过index用descriptors迅速地取出key-value。由于这个过程比较复杂，细节不展开讨论。
    - 在设置properties的同时，会初始化一个searchCache，这个cache支持哈希查找某个属性。

4. 字符串哈希cache查找#

在设置cache的时候，会先进行查找是否已存在相同的属性名，如果已经有了就把它的value值覆盖掉，否则把它添加到cache里面：

1
int DescriptorArray::SearchWithCache(Isolate* isolate, Name* name, Map* map) {
2
  DescriptorLookupCache* cache = isolate->descriptor_lookup_cache();
3
  //找到它的index
4
  int number = cache->Lookup(map, name);
5
  //如果没有的话
6
  if (number == DescriptorLookupCache::kAbsent) {
7
    //通过遍历找到它的index
8
    number = Search(name, number_of_own_descriptors);
9
    //更新cache
10
    cache->Update(map, name, number);
11
  }
12
  return number;
13
}

如上代码的注释，我们先来看一下这个Search函数是怎么进行的：

1
template <SearchMode search_mode, typename T>
2
int Search(T* array, Name* name, int valid_entries, int* out_insertion_index) {
3
  // Fast case: do linear search for small arrays.
4
  const int kMaxElementsForLinearSearch = 8;
5
  if (valid_entries <= kMaxElementsForLinearSearch) {
6
    return LinearSearch<search_mode>(array, name, valid_entries, out_insertion_index);
7
  }
8

9
  // Slow case: perform binary search.
10
  return BinarySearch<search_mode>(array, name, valid_entries, out_insertion_index);
11
}

如果属性少于等于8个时，则直接线性查找即依次遍历，否则进行二分查找，在线性查找里面判断是否相等，是用的内存地址比较：
```
1
for (int number = 0; number < valid_entries; number++) {
2
  if (array->GetKey(number) == name) return number;
3
}
```
因为name都是用的上面第三点设置Map的时候传进来的name，因此初始化的时候相同的name都指向同一个对象。所以可以直接用内存地址进行比较，得到FixedArray的索引number。然后用key和number去update cache：
```
1
cache->Update(map, name, number);
```

重点在于这个update cache。这个cache的数据结构是这样的：

1
  static const int kLength = 64;
2
  struct Key {
3
    Map* source;
4
    Name* name;
5
  };
6

7
  Key keys_[kLength];
8
  int results_[kLength];

它有一个数组keys_的成员变量存放key，这个数组的大小是64，数组的索引用哈希算出来，不同的key有不同的哈希，这个哈希就是它在数组里面的索引。它还有一个results_，存放上面线性查找出来的number，这个number就是内存里面的偏移，有了这个偏移就可以很快地定位到它的内容，所以放到results里面.

关键在于这个哈希是怎么算的。来看一下update的函数：

1
void DescriptorLookupCache::Update(Map* source, Name* name, int result) {
2
  int index = Hash(source, name);
3
  Key& key = keys_[index];
4
  key.source = source;
5
  key.name = name;
6
  results_[index] = result;
7
}

先计算哈希索引index，然后把数据存到results_和keys_这两个数组的index位置。这个Hash函数是这样的：

1
int DescriptorLookupCache::Hash(Object* source, Name* name) {
2
  // Uses only lower 32 bits if pointers are larger.
3
  uint32_t source_hash =
4
      static_cast<uint32_t>(reinterpret_cast<uintptr_t>(source)) >>
5
      kPointerSizeLog2;
6
  uint32_t name_hash = name->hash_field();
7
  return (source_hash ^ name_hash) % kLength;
8
}

先计算map和key的hash，map的hash即source_hash是用map的地址的低32位，为了统一不同指针大小的区别，而计算key的hash即name_hash，最核心的代码应该是以下几行：

1
uint32_t StringHasher::AddCharacterCore(uint32_t running_hash, uint16_t c) {
2
  running_hash += c;
3
  running_hash += (running_hash << 10);
4
  running_hash ^= (running_hash >> 6);
5
  return running_hash;
6
}

依次循环name的每个字符串做一些位运算，结果累计给running_hash.
source_hash是用map的内存地址，因为这个地址是唯一的，而name_hash是用的字符串的内容，只要字符串一样，那么它的hash值就一定一样，这样保证了同一个object，它的同个key值的索引值就一定一样。source_hash和name_hash最后异或一下，模以kLength = 64得到它在数组里面的索引。
这里自然而然会有一个问题，通过这样的计算不能够保证不同的name计算出来的哈希值一定不一样，好的哈希算法只能让结果尽可能随机，但是无法做到一定不重复，所以这里也有同样的问题。

先来看一下，它是怎么查找的：

1
int DescriptorLookupCache::Lookup(Map* source, Name* name) {
2
  int index = Hash(source, name);
3
  Key& key = keys_[index];
4
  if ((key.source == source) && (key.name == name)) return results_[index];
5
  return kAbsent;
6
}

先用同样的哈希算法，算出同样的index，取出key里面的map和name，和存储的map和name进行比较，如果相同则说明找到了，否则的话返回不存在-1的标志。一旦不存在了又会执行上面的update cache，先调Search找到它的偏移index作为result，如果index存在重新update cache。所以上面的问题就可以得到解答了，重复的哈希索引覆盖了第一个，导致查找第一个的时候没找找到，所以又去重新update，把那个索引值的数组元素又改成了第一个的。因此，如果两个重复的元素如果循环轮流访问的话，就会造成不断地查找index，不断地更新搜索cache。但是这种情况还是比较少的。
如何保证传进来的具有相同字符串的name和原始的name是同一个对象，从而才能使它们的内存地址一样？一个办法是维护一个Name的数据池，据有相同字符串的name只能存在一个。
上面的那个data它的三个name的index在笔者电脑上实验计算结果为：
```
1
#name hash index = 62
2
#age hash index = 32
3
#-school- hash index = 51
```
有一个比较奇怪的地方是重复实验，它们的哈希值都是一样的。并且具有相同属性且顺序也相同的object，它们的map地址就是一样的。
如果一个元素的属性值超过64个呢？那也是同样的处理，后面设置的会覆盖前面设置的。学过哈希的都知道，当元素的个数大于容器容量的一半时，重复的概率将会大大增加。所以一个object的属性的比较优的最大大小为32。一旦超过32，在一个：
```
1
for(var key in obj){
2
  obj[key] //do sth.
3
}
```
for循环里面，这种查找的开销将会很大。但是考虑到属性个数并不多。
那为什么它要把长度设置成64呢，如果改大了，不就可以减少重复率？但是这样会造成更多的内存消耗，即使一个Object只有一个属性，它也会初始化一个这么大的数组，对于这种属性比较少的object来说就很浪费。所以取64，应该是一个比较适中的值。
同时另一方面，经常使用的那几个属性还是能够很快通过哈希计算定位到它的内容。并且这种场景还是很常见的，如获取数组元素的lengh.
这种cache查找只支持属性个数小于等于128的，如果属性个数大于128个，将不采用cache存储和查找的方式。而是直接使用一个hashtable

5. 字符串哈希表查找#

如下的判断：

1
const int kMapCacheSize = 128;
2

3
// We do not cache maps for too many properties or when running builtin code.
4
if (number_of_properties > kMapCacheSize) {
5
  *is_result_from_cache = false;
6
  Handle<Map> map = Map::Create(isolate(), number_of_properties);
7
  return map;
8
}

如果属性个数大于128时，将按照属性的个数消耗的空间创建和扩展map存储，不再创建cache。同时这个map就会被标记为dictionary_map，即哈希表。

往这个哈希表插入一个元素前，会先检查表的容量是否足够，不够进行扩容，在EnsureCapacity的函数里面：

1
int capacity = table->Capacity();
2
int nof = table->NumberOfElements() + n;
3
if (table->HasSufficientCapacityToAdd(n)) return table;
4
Handle<Derived> new_table = HashTable::New(nof * 2, USE_DEFAULT_MINIMUM_CAPACITY);
5
table->Rehash(new_table, key);

第二行获取到当前表元素个数加上需要插入的元素的个数得到新表的总元素个数；第7行再乘以2，得到新表的容量，最后再rehash，重新计算每个元素的哈希值，更新哈希表

插入一个元素的关键是计算它的哈希，这里计算哈希的方式和上面的一样，都是调的name->hash_field函数，不一样的是它不再是覆盖存储，因为上面已经进行扩容了，可以保证空间一定足够。如果哈希值冲突了，那么将一直找到下一个存放它的地方，如下面的FindInsertionEntry函数：

1
template<typename Derived, typename Shape, typename Key>
2
uint32_t HashTable<Derived, Shape, Key>::FindInsertionEntry(uint32_t hash) {
3
  uint32_t capacity = Capacity();
4
  uint32_t entry = FirstProbe(hash, capacity);
5
  uint32_t count = 1;
6
  // EnsureCapacity will guarantee the hash table is never full.
7
  Isolate* isolate = GetIsolate();
8
  while (true) {
9
    Object* element = KeyAt(entry);
10
    if (!IsKey(isolate, element)) break;
11
    entry = NextProbe(entry, count++, capacity);
12
  }
13
  return entry;
14
}

在上面代码第10行找到一个非key元素后，停止循环，返回这个位置。

在所有属性插入完成之后，查找的过程类似于上面的插入，如下面FindEntry的函数：

1
// Find entry for key otherwise return kNotFound.
2
template <typename Derived, typename Shape>
3
int NameDictionaryBase<Derived, Shape>::FindEntry(Handle<Name> key) {
4
  // EnsureCapacity will guarantee the hash table is never full.
5
  uint32_t capacity = this->Capacity();
6
  uint32_t entry = Derived::FirstProbe(key->Hash(), capacity);
7
  uint32_t count = 1;
8
  while (true) {
9
    Object* element = this->KeyAt(entry);
10
    if (element->IsUndefined(isolate)) break; // Empty entry.
11
    if (*key == element) return entry;
12
    entry = Derived::NextProbe(entry, count++, capacity);
13
  }
14
  return Derived::kNotFound;
15
}

展开收起

在while循环里，要么找到一个undefined的元素，返回无结果的标志，要么命中元素，返回FixedArray的索引index，然后通过这个数组index就可以很快地取出数据：
```
1
property_details_ = dictionary->DetailsAt(entry);
```
当哈希值冲突时，如何找到下一个插入位置，在哈希算法里面也是一个很重要的部分，因为需要定位到下一个空的元素，才能进行插入，如果定位到的下一个元素又是非空的，又得继续找下一个。源码里面是这样进行的：
```
1
  inline static uint32_t FirstProbe(uint32_t hash, uint32_t size) {
2
    return hash & (size - 1);
3
  }
4

5
  inline static uint32_t NextProbe(uint32_t last, uint32_t number, uint32_t size) {
6
    return (last + number) & (size - 1);
7
  }
```

所以当属性个数不超过128个时，是用searchCache，大于128时，采用哈希表。源码里面查找的判断是这样的：

1
if (!map->is_dictionary_map()) {
2
  DescriptorArray* descriptors = map->instance_descriptors();
3
  int number = descriptors->SearchWithCache(isolate_, *name_, map);
4
  //...
5
} else {
6
  NameDictionary* dict = holder->property_dictionary();
7
  int number = dict->FindEntry(name_);
8
  //...
9
}

如果是一个字典，则执行else里面的逻辑，否则执行if里面的逻辑按searchCache查找。
这里自然而然会有一个问题，为什么在不大于128个属性的时候要专门搞一个searchCache呢，是因为searchCache比哈希表快么，快在哪里？我想这两者的区别在于searchCache不会冲突，每次都是直接定位，而hashTable如果冲突了需要不断地找下一个元素，增加了比较次数。当属性比较少，并且有几个属性经常被用到的时候，searchCache应该会有明显的优势。

上面已经介绍了两种字符串的查找方式，当属性是数字的时候有另外两种查找方式。

6. 数字索引哈希查找#

假设data变成：

1
var data = {
2
  name: "yin",
3
  age: 18,
4
  "-school-": "high school",
5
  1: "Monday",
6
  2: "Thuesday",
7
  "3": "Wednesday"
8
};

把生成的data Object打印出来是这样的：

1
../../v8/src/runtime/runtime-literals.cc 105 boilerplate obj: 0x3930221af3a9: [JS_OBJECT_TYPE]
2
– map = 0x6712e19cc41 [FastProperties]
3
– prototype = 0x27d71d20f19
4
– elements = 0x2e1e1a56b579 <FixedArray[19]> [FAST_HOLEY_ELEMENTS]
5
– properties = 0x2c2a4d782241 <FixedArray[0]> {
6
  #name: 0x3930221aec51 <String[3]: yin> (data field at offset 0)
7
  #age: 18 (data field at offset 1)
8
  #-school-: 0x3930221aecb1 <String[11]: high school> (data field at offset 2)
9
}
10
– elements = {
11
  0: 0x2c2a4d782351 <the hole>
12
  1: 0x3930221aecf9 <String[6]: Monday>
13
  2: 0x3930221aed39 <String[8]: Thuesday>
14
  3: 0x3930221aed79 <String[9]: Wednesday>
15
  4-18: 0x2c2a4d782351 <the hole>
16
}

展开收起

那些key为数字的存放在elements的数据结构里面。上面的elements它是一个有序数组，它的key值直接作为它的index。如果data改成：

1
var data = {
2
  1: "Monday",
3
  2: "Thuesday",
4
  3: "Wednesday",
5
  7: "Sunday"
6
}

那么elements是这样的：

1
– elements = {
2
  0: 0x1e74f5702351 <the hole>
3
  1: 0x1745ec52ec71 <String[6]: Monday>
4
  2: 0x1745ec52ecb1 <String[8]: Thuesday>
5
  3: 0x1745ec52ecf1 <String[9]: Wednesday>
6
  4-6: 0x1e74f5702351 <the hole>
7
  7: 0x1745ec52ed39 <String[6]: Sunday>
8
  8-18: 0x1e74f5702351 <the hole>
9
}

初始化大小仍然是19个元素，空的索引用hole元素填充。这种就跟数组一样，可直接根据索引定位到元素，代价是空间的消耗比较大，可以来看一下，当空间不足时，它是怎么扩容的：

1
if (index < capacity) {
2
  *new_capacity = capacity;
3
  return false;
4
}
5
*new_capacity = JSObject::NewElementsCapacity(index + 1);

由于第一个属性是1: Monday，所以上面的index = 1，执行最后一行计算新容量的元素：

1
// Computes the new capacity when expanding the elements of a JSObject.
2
static uint32_t NewElementsCapacity(uint32_t old_capacity) {
3
  // (old_capacity + 50%) + 16
4
  return old_capacity + (old_capacity >> 1) + 16;
5
}

可以看到，这是用老的空间的一半加上16，上面的计算结果为19，如果本来是2M大小，刚好不够再增加一个元素就成了3M，一个多余的元素就增加了1M的空间。它的好处是不用频繁地开避内存。

这种用数组表示的属性在源码里面叫FastElements，而用哈希表的叫做SlowElements。什么时候会变成slowElements？当hole太多的时候，例如给data增加一个key为2000的属性：

1
data['2000'] = 'day';

data就会转成慢元素，因为3之后就是2000，hole太多就被转换了，如下面的ShouldConvertToSlowElements函数：

1
static bool ShouldConvertToSlowElements(JSObject* object, uint32_t capacity, uint32_t index, uint32_t* new_capacity) {
2
  if (index < capacity) {
3
    return false;
4
  }
5
  //JSObject::kMaxGap = 1024
6
  if (index - capacity >= JSObject::kMaxGap) return true;
7
  *new_capacity = JSObject::NewElementsCapacity(index + 1);
8

9
  // If the fast-case backing storage takes up roughly three times as
10
  // much space (in machine words) as a dictionary backing storage
11
  // would, the object should have slow elements.
12
  int used_elements = object->GetFastElementsUsage();
13
  int dictionary_size = SeededNumberDictionary::ComputeCapacity(used_elements) * SeededNumberDictionary::kEntrySize;
14
  return 3 * static_cast<uint32_t>(dictionary_size) <= *new_capacity;
15
}

展开收起

如果当前的index比容量capacity大了1024，就转成慢元素，或者是如上面的代码注释，如果快元素占的空间为慢元素的3倍之多时，也会被转成慢元素。

转成慢元素之后，它就和字符串的哈希表一样了，不一样的是，它计算哈希的方式不一样，字符串的需要一个个字符串循环计算计算hash，而数字的key，不需要循环，如下计算（第二个参数是随机化种子seed）：

1
inline uint32_t ComputeIntegerHash(uint32_t key, uint32_t seed) {
2
  uint32_t hash = key;
3
  hash = hash ^ seed;
4
  hash = ~hash + (hash << 15);  // hash = (hash << 15) - hash - 1;
5
  hash = hash ^ (hash >> 12);
6
  hash = hash + (hash << 2);
7
  hash = hash ^ (hash >> 4);
8
  hash = hash * 2057;  // hash = (hash + (hash << 3)) + (hash << 11);
9
  hash = hash ^ (hash >> 16);
10
  return hash & 0x3fffffff;
11
}

7. ES6 Map的实现#

这里有一个比较有趣的事情，就是V8的Map的核心逻辑是用JS实现的，用JS来实现JS，比写C++要高效多了，但是执行效率可能就没有直接写C++的高，可以来看一下set函数的实现：

1
function MapSet(key, value) {
2
  //添加一个log
3
  %LOG("MapSet", key);
4
  var table = %_JSCollectionGetTable(this);
5
  var numBuckets = ORDERED_HASH_TABLE_BUCKET_COUNT(table);
6
  var hash = GetHash(key);
7
  var entry = MapFindEntry(table, numBuckets, key, hash);
8
  if (entry !== NOT_FOUND) return ...//return代码省略
9
  //如果个数大于capacity的二分之一，则执行%MapGrow(this)代码略
10
  FIXED_ARRAY_SET(table, index, key);
11
  FIXED_ARRAY_SET(table, index + 1, value);
12
}

第三行添加一个log函数，确认确实是执行这里的代码。%开头的LOG，表示它是一个C++的函数，这个代码写在runtime.h和runtime.cc里面。这些JS代码最后会被组装成native code。在V8里，除了Map/Set之外，很多ES6新加的功能，都是用的JS实现的，如数组新加的很多函数。

8. Object和ES6 Map的速度比较#

如以下代码，初始化一个map和一个object：

1
var map = new Map(),
2
    obj = {};
3
var size = 100000;
4
for(var i = 0; i < size; i++){
5
  map.set('key' + i , i);
6
  obj['key' + i] = i;
7
}

再准备一个keys数组，用来存储查找的key，如下，分成三种情况分别测验：1. keys都能查到；2. 只有一半的keys能找到；3. 全部的keys都查找不到：
```
1
var keys = [];
2
for(var i = 0; i < 100; i++){
3
  // 1. keys都找得到
4
  keys.push('key' + parseInt(Math.random() * size));
5
  // 2. 约一半的keys找不到
6
  // keys.push('key' + parseInt(Math.random() * size * 2));
7
  // 3. 全部的keys都找不到
8
  // keys.push('key' + parseInt(Math.random() * size) + size);
9
}
```
- 然后进行查找，重复多次，并打印时间：
  1 var count = 100000; 2 console.time("map time"); 3 for(var i = 0; i < count; i++){ 4 for(var j = 0; j < keys.length; j++){ 5 let x = map.get(keys[j]); 6 } 7 } 8 console.timeEnd("map time"); 9 console.time("obj time"); 10 for(var i = 0; i < count; i++){ 11 for(var j = 0; j < keys.length; j++){ 12 let x = obj[keys[j]]; 13 } 14 } 15 console.timeEnd("obj time");
  展开收起
  - 最后的结果如下：
    
    100% keys found 50% keys found 0% keys found
    map 517ms 375ms 317ms
    object 414ms 1.02s 1.49s
    - 可以看到，当查找的keys找不到时，object更加地消耗时间（在实际的使用中，一半找得到一半找不到的情况应该会比较多一点）。这很可能是因为object里面每个key需要实例化一个全局唯一的name，如果name已经存在了，那么它已经实例化好了，包括它的哈希值计算已经缓存起来了，如果未知的name越多，那么需要实例化的name也就越多，而map不存在这种情况，每次都是重新计算哈希。另一方面还可能和它们的哈希算法有关。

	100% keys found	50% keys found	0% keys found
map	517ms	375ms	317ms
object	414ms	1.02s	1.49s

综上，Object存储和查找一个属性时，属性不超过128个，使用Search Cache，当属性是较为连续的数字时，使用数组，此种方式最快。其它情况使用哈希表，并且数字和字符串的哈希不一样。

可以把Object当成哈希map使用，但是在效率上可能会比不上ES6的Map，并且还有Object原型查找的问题。

【转载】原文链接：https://www.rrfed.com/2017/04/04/chrome-object/

常见前端安全问题及防护

Wed, 31 Jul 2019 00:00:00 GMT

常见前端安全问题及防护#

一、xss与sql攻击#

xss-跨站脚本攻击（Cross-Site Scripting）

1
XSS是跨站脚本攻击（Cross-Site Scripting）的简称。XSS这类安全问题发生的本质原因在于：浏览器错误的将攻击者提供的用户输入数据当做JavaScript脚本给执行了。
2

3
XSS有几种不同的分类办法，例如按照恶意输入的脚本是否在应用中存储，XSS被划分为“存储型XSS”和“反射型XSS”，如果按照是否和服务器有交互，又可以划分为“Server Side XSS”和“DOM based XSS”。
4

5
无论怎么分类，XSS漏洞始终是威胁用户的一个安全隐患。攻击者可以利用XSS漏洞来窃取包括用户身份信息在内的各种敏感信息、修改Web页面以欺骗用户，甚至控制受害者浏览器，或者和其他漏洞结合起来形成蠕虫攻击，等等。总之，关于XSS漏洞的利用，只有想不到没有做不到。

如何防御

1
对数据进行严格的输出编码，使得攻击者提供的数据不再被浏览器认为是脚本而被误执行。例如<script>在进行HTML编码后变成了&lt;script&gt;，这段数据就不会被当做脚本执行了。
2

3
需要根据输出数据所在的上下文来进行相应的编码。数据放置于HTML元素中，需进行HTML编码，放置于URL中，需要进行URL编码。此外，还有JavaScript编码、CSS编码、HTML属性编码、JSON编码等等。(一些主流前端开发框架基本上都默认提供了前端输出编码，这大大减轻了前端开发小伙伴们的工作负担)
4

5
其他的防御措施，例如设置CSP HTTP Header、输入验证、开启浏览器XSS防御等等都是可选项，原因在于这些措施都存在被绕过的可能，并不能完全保证能防御XSS攻击。不过它们和输出编码却可以共同协作实施纵深防御策略。

二、csrf#

csrf

CSRF跨站点请求伪造(Cross—Site Request Forgery)，跟XSS攻击一样，存在巨大的危害性，你可以这样来理解：

攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。如下：其中Web A为存在CSRF漏洞的网站，Web B为攻击者构建的恶意网站，User C为Web A网站的合法用户。

CSRF攻击攻击原理及过程如下：

1.用户C打开浏览器，访问受信任网站A，输入用户名和密码请求登录网站A；
2.在用户信息通过验证后，网站A产生Cookie信息并返回给浏览器，此时用户登录网站A成功，可以正常发送请求到网站A；
3.用户未退出网站A之前，在同一浏览器中，打开一个TAB页访问网站B；
4.网站B接收到用户请求后，返回一些攻击性代码，并发出一个请求要求访问第三方站点A；
5.浏览器在接收到这些攻击性代码后，根据网站 B 的请求，在用户不知情的情况下携带 Cookie 信息，向网站 A 发出请求。网站 A 并不知道该请求其实是由 B 发起的，所以会根据用户 C 的 Cookie 信息以 C 的权限处理该请求，导致来自网站 B 的恶意代码被执行。

CSRF漏洞检测：

检测CSRF漏洞是一项比较繁琐的工作，最简单的方法就是抓取一个正常请求的数据包，去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞。

随着对CSRF漏洞研究的不断深入，不断涌现出一些专门针对CSRF漏洞进行检测的工具，如CSRFTester，CSRF Request Builder等。

以CSRFTester工具为例，CSRF漏洞检测工具的测试原理如下：使用CSRFTester进行测试时，首先需要抓取我们在浏览器中访问过的所有链接以及所有的表单等信息，然后通过在CSRFTester中修改相应的表单等信息，重新提交，这相当于一次伪造客户端请求。如果修改后的测试请求成功被网站服务器接受，则说明存在CSRF漏洞，当然此款工具也可以被用来进行CSRF攻击。

防御CSRF攻击：

目前防御 CSRF 攻击主要有三种策略：

验证 HTTP Referer 字段；
在请求地址中添加 token 并验证；
在 HTTP 头中自定义属性并验证。

验证 HTTP Referer 字段

根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。在通常情况下，访问一个安全受限页面的请求来自于同一个网站，比如需要访问 http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory，用户必须先登陆 bank.example，然后通过点击页面上的按钮来触发转账事件。这时，该转帐请求的 Referer 值就会是转账按钮所在的页面的 URL，通常是以 bank.example 域名开头的地址。而如果黑客要对银行网站实施 CSRF 攻击，他只能在他自己的网站构造请求，当用户通过黑客的网站发送请求到银行时，该请求的 Referer 是指向黑客自己的网站。因此，要防御 CSRF 攻击，银行网站只需要对于每一个转账请求验证其 Referer 值，如果是以 bank.example 开头的域名，则说明该请求是来自银行网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是黑客的 CSRF 攻击，拒绝该请求。

这种方法的显而易见的好处就是简单易行，网站的普通开发人员不需要操心 CSRF 的漏洞，只需要在最后给所有安全敏感的请求统一增加一个拦截器来检查 Referer 的值就可以。特别是对于当前现有的系统，不需要改变当前系统的任何已有代码和逻辑，没有风险，非常便捷。

然而，这种方法并非万无一失。Referer 的值是由浏览器提供的，虽然 HTTP 协议上有明确的要求，但是每个浏览器对于 Referer 的具体实现可能有差别，并不能保证浏览器自身没有安全漏洞。使用验证 Referer 值的方法，就是把安全性都依赖于第三方（即浏览器）来保障，从理论上来讲，这样并不安全。事实上，对于某些浏览器，比如 IE6 或 FF2，目前已经有一些方法可以篡改 Referer 值。如果 bank.example 网站支持 IE6 浏览器，黑客完全可以把用户浏览器的 Referer 值设为以 bank.example 域名开头的地址，这样就可以通过验证，从而进行 CSRF 攻击。

即便是使用最新的浏览器，黑客无法篡改 Referer 值，这种方法仍然有问题。因为 Referer 值会记录下用户的访问来源，有些用户认为这样会侵犯到他们自己的隐私权，特别是有些组织担心 Referer 值会把组织内网中的某些信息泄露到外网中。因此，用户自己可以设置浏览器使其在发送请求时不再提供 Referer。当他们正常访问银行网站时，网站会因为请求没有 Referer 值而认为是 CSRF 攻击，拒绝合法用户的访问。

在请求地址中添加 token 并验证

CSRF 攻击之所以能够成功，是因为黑客可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 cookie 中，因此黑客可以在不知道这些验证信息的情况下直接利用用户自己的 cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入黑客所不能伪造的信息，并且该信息不存在于 cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。

这种方法要比检查 Referer 要安全一些，token 可以在用户登陆后产生并放于 session 之中，然后在每次请求时把 token 从 session 中拿出，与请求中的 token 进行比对，但这种方法的难点在于如何把 token 以参数的形式加入请求。对于 GET 请求，token 将附在请求地址之后，这样 URL 就变成 http://url?csrftoken=tokenvalue。而对于 POST 请求来说，要在 form 的最后加上，这样就把 token 以参数的形式加入请求了。但是，在一个网站中，可以接受请求的地方非常多，要对于每一个请求都加上 token 是很麻烦的，并且很容易漏掉，通常使用的方法就是在每次页面加载时，使用 javascript 遍历整个 dom 树，对于 dom 中所有的 a 和 form 标签后加入 token。这样可以解决大部分的请求，但是对于在页面加载之后动态生成的 html 代码，这种方法就没有作用，还需要程序员在编码时手动添加 token。

该方法还有一个缺点是难以保证 token 本身的安全。特别是在一些论坛之类支持用户自己发表内容的网站，黑客可以在上面发布自己个人网站的地址。由于系统也会在这个地址后面加上 token，黑客可以在自己的网站上得到这个 token，并马上就可以发动 CSRF 攻击。为了避免这一点，系统可以在添加 token 的时候增加一个判断，如果这个链接是链到自己本站的，就在后面添加 token，如果是通向外网则不加。不过，即使这个 csrftoken 不以参数的形式附加在请求之中，黑客的网站也同样可以通过 Referer 来得到这个 token 值以发动 CSRF 攻击。这也是一些用户喜欢手动关闭浏览器 Referer 功能的原因。

在 HTTP 头中自定义属性并验证

这种方法也是使用 token 并进行验证，和上一种方法不同的是，这里并不是把 token 以参数的形式置于 HTTP 请求之中，而是把它放到 HTTP 头中自定义的属性里。通过 XMLHttpRequest 这个类，可以一次性给所有该类请求加上 csrftoken 这个 HTTP 头属性，并把 token 值放入其中。这样解决了上种方法在请求中加入 token 的不便，同时，通过 XMLHttpRequest 请求的地址不会被记录到浏览器的地址栏，也不用担心 token 会透过 Referer 泄露到其他网站中去。

然而这种方法的局限性非常大。XMLHttpRequest 请求通常用于 Ajax 方法中对于页面局部的异步刷新，并非所有的请求都适合用这个类来发起，而且通过该类请求得到的页面不能被浏览器所记录下，从而进行前进，后退，刷新，收藏等操作，给用户带来不便。另外，对于没有进行 CSRF 防护的遗留系统来说，要采用这种方法来进行防护，要把所有请求都改为 XMLHttpRequest 请求，这样几乎是要重写整个网站，这代价无疑是不能接受的。

三、请求劫持与HTTPS#

1.请求劫持

现在主要分为两种，DNS劫持与HTTP劫持：

DNS劫持

1
  DNS劫持就是通过劫持了DNS服务器，通过某些手段取得某域名的解析记录控制权，进而修改此域名的解析结果，导致对该域名的访问由原IP地址转入到修改后的指定IP，其结果就是对特定的网址不能访问或访问的是假网址，从而实现窃取资料或者破坏原有正常服务的目的。
2

3
  DNS劫持通过篡改DNS服务器上的数据返回给用户一个错误的查询结果来实现的。
4

5
  DNS劫持症状：在某些地区的用户在成功连接宽带后，首次打开任何页面都指向ISP提供的“电信互联星空”、“网通黄页广告”等内容页面。还有就是曾经出现过用户访问Google域名的时候出现了百度的网站。这些都属于DNS劫持。 再说简单点，当你输入google.com这个网址的时候，你看到的网站却是百度的首页。

http劫持

1
在用户的客户端与其要访问的服务器经过网络协议协调后，二者之间建立了一条专用的数据通道，用户端程序在系统中开放指定网络端口用于接收数据报文，服务器端将全部数据按指定网络协议规则进行分解打包，形成连续数据报文。用户端接收到全部报文后，按照协议标准来解包组合获得完整的网络数据。其中传输过程中的每一个数据包都有特定的标签，表示其来源、携带的数据属性以及要到何处，所有的数据包经过网络路径中ISP的路由器传输接力后，最终到达目的地，也就是客户端。
2

3
HTTP劫持是在使用者与其目的网络服务所建立的专用数据通道中，监视特定数据信息，提示当满足设定的条件时，就会在正常的数据流中插入精心设计的网络数据报文，目的是让用户端程序解释“错误”的数据，并以弹出新窗口的形式在使用者界面展示宣传性广告或者直接显示某网站的内容。列入本地的fiddler为一种劫持

如何防御

1
请求劫持唯一可行的预防方法就是尽量使用HTTPS协议访问。

2.公钥和私钥

https 简单理解就是通过SSL（Secure Sockets Layer）层来加密http数据来进行安全传输。那使用HTTPS是怎样进行加解密和安全数据传输的？

先看个有意思的问题：

A、B两个人分别在两个岛上，并且分别有一个箱子，一把锁，和打开这把锁的钥匙（A的钥匙打不开B手上的锁，B的钥匙也打不开A的锁）。此时A要跟B互通情报，此时需要借助C的船运输，C是一个不可靠的人，如果A直接把情报送给B或把情报放在箱子里给B，都可能会被C偷走；如果A把情报锁在箱子里，B没有打开A锁的钥匙无法获得情报内容。请问有什么办法可以尽可能快的让A和B互通情报。

这就是公钥和私钥的问题了，答案比较简单，也对应了公钥和私钥在https中的应用过程。

1
公钥（Public Key）与私钥（Private Key）是通过一种算法得到的一个密钥对（即一个公钥和一个私钥），公钥是密钥对中公开的部分，私钥则是非公开的部分。公钥通常用于加密会话密钥、验证数字签名，或加密可以用相应的私钥解密的数据。通过这种算法得到的密钥对能保证在世界范围内是唯一的。使用这个密钥对的时候，如果用其中一个密钥加密一段数据，必须用另一个密钥解密。比如用公钥加密数据就必须用私钥解密，如果用私钥加密也必须用公钥解密，否则解密将不会成功。---百度百科

3.Https的通信过程

1、客户端发送https请求，告诉服务器端将建立https连接
2、服务器将服务端生成的公钥返回给客户端，如果是第一次请求将告诉客户端需要验证链接
3、客户端接收到请求后’client finished’报文串通过获取到的服务器公钥加密发送给服务器，并将客户端生成的公钥也发送给服务器
4、服务器获取到加密的报文和客户端公钥，先使用服务器私钥解密报文，然后将报文通过客户端的公钥加密返回给客户端。
5、客户端通过私钥解密报文，判断是否为自己开始发送的报文串；如果正确，说明安全连接验证成功，将数据通过服务器公钥加密不断发送给服务器，服务器也不断解密获取报文，并通过客户端公钥加密返回给客户端验证。这样就建立了不断通信的连接。

四、浏览器web安全控制#

http层面上浏览器设置的安全性控制较多，这里列几个典型的来看看：

X-XSS-Protection

这个header主要是用来防止浏览器中的反射性xss。现在，只有IE，chrome和safari（webkit）支持这个header。

正确的设置:

1
X-XSS-Protection:1;
2
  mode=block
3
    0 – 关闭对浏览器的xss防护
4
    1 – 开启xss防护
5
  mode=block – 开启xss防护并通知浏览器阻止而不是过滤用户注入的脚本
6
  report=http://site.com/report – 这个只有chrome和webkit内核的浏览器支持，这种模式告诉浏览器当发现疑似xss攻击的时候就将这部分数据post到指定地址

X-Content-Type-Options

这个header主要用来防止在IE9、chrome和safari中的MIME类型混淆攻击。firefox目前对此还存在争议。通常浏览器可以通过嗅探内容本身的方法来决定它是什么类型，而不是看响应中的content-type值。通过设置 X-Content-Type-Options：如果content-type和期望的类型匹配，则不需要嗅探，只能从外部加载确定类型的资源。举个例子，如果加载了一个样式表，那么资源的MIME类型只能是text/css，对于IE中的脚本资源，以下的内容类型是有效的：

1
application/ecmascript application/javascript application/x-javascript text/ecmascript text/javascript text/jscript text/x-javascript text/vbs   text/vbscript

对于chrome，则支持下面的MIME 类型：

1
text/javascript text/ecmascript application/javascript application/ecmascript application/x-javascript text/javascript1.1   text/javascript1.2   text/javascript1.3   text/jscript text/live script

nosniff – 这个是唯一正确的设置，必须这样。

Strict-Transport-Security

Strict Transport Security (STS) 是用来配置浏览器和服务器之间安全的通信。它主要是用来防止中间人攻击，因为它强制所有的通信都走TLS。目前IE还不支持 STS头。需要注意的是，在普通的http请求中配置STS是没有作用的，因为攻击者很容易就能更改这些值。为了防止这样的现象发生，很多浏览器内置了一个配置了STS的站点list。

正确的设置: 注意下面的值必须在https中才有效，如果是在http中配置会没有效果。

1
max-age=31536000 – 告诉浏览器将域名缓存到STS list里面，时间是一年。   max-age=31536000; includeSubDomains – 告诉浏览器将域名缓存到STS list里面并且包含所有的子域名，时间是一年。
2
max-age=0 – 告诉浏览器移除在STS缓存里的域名，或者不保存此域名

判断一个主机是否在你的STS缓存中，chrome可以通过访问chrome://net-internals/#hsts，首先，通过域名请求选项来确认此域名是否在你的STS缓存中。然后，通过https访问这个网站，尝试再次请求返回的STS头，来决定是否添加正确。

Content-Security-Policy

CSP是一种由开发者定义的安全性政策性申明，通过CSP所约束的的规责指定可信的内容来源（这里的内容可以指脚本、图片、iframe、fton、style等等可能的远程的资源）。通过CSP协定，让WEB能够加载指定安全域名下的资源文件，保证运行时处于一个安全的运行环境中。

正确配置

1
Content-Security-Policy:default-src *; base-uri 'self'; block-all-mixed-content; child-src 'self' render.githubusercontent.com; connect-src 'self' uploads.github.com status.github.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com wss://live.github.com; font-src assets-cdn.github.com; form-action 'self' github.com gist.github.com; frame-src 'self' render.githubusercontent.com; img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.gravatar.com *.wp.com *.githubusercontent.com; media-src 'none'; object-src assets-cdn.github.com; plugin-types application/x-shockwave-flash; script-src assets-cdn.github.com; style-src 'self' 'unsafe-inline' assets-cdn.github.com

X-Frame-Options

这个header主要用来配置哪些网站可以通过frame来加载资源。它主要是用来防止UI redressing 补偿样式攻击。IE8和firefox 18以后的版本都开始支持ALLOW-FROM。chrome和safari都不支持ALLOW-FROM，但是WebKit已经在研究这个了。

正确的设置

1
X-Frame-Options: deny deny – 禁止所有的资源（本地或远程）试图通过frame来加载其他也支持X-Frame-Options 的资源。
2
sameorigion – 只允许遵守同源策略的资源（和站点同源）通过frame加载那些受保护的资源。   allow-from http://www.example.com – 允许指定的资源（必须带上协议http或者https）通过frame来加载受保护的资源。
3
这个配置只在IE和firefox下面有效。
4
其他浏览器则默认允许任何源的资源（在X-Frame-Options没设置的情况下）。

Access-Control-Allow-Origin

Access-Control-Allow-Origin是从Cross Origin Resource Sharing (CORS)中分离出来的。这个header是决定哪些网站可以访问资源，通过定义一个通配符来决定是单一的网站还是所有网站可以访问我们的资源。需要注意的是，如果定义了通配符，那么 Access-Control-Allow-Credentials选项就无效了，而且user-agent的cookies不会在请求里发送。

正确的设置

1
Access-Control-Allow-Origin : * *– 通配符允许任何远程资源来访问含有Access-Control-Allow-Origin 的内容。   http://www.example.com – 只允许特定站点才能访问(http://[host], 或者 https://[host])

7.Public-Key-Pins

公钥固定（Public Key Pinning）是指一个证书链中必须包含一个白名单中的公钥，也就是说只有被列入白名单的证书签发机构（CA）才能为某个域名*.example.com签发证书，而不是你的浏览器中所存储的任何 CA 都可以为之签发。可以理解为https的证书域名白名单。 ??Public-Key-Pins (PKP)的目的主要是允许网站经营者提供一个哈希过的公共密钥存储在用户的浏览器缓存里。跟Strict-Transport-Security功能相似的是，它能保护用户免遭中间人攻击。这个header可能包含多层的哈希运算，比如pin-sha256=base64(sha256(SPKI))，具体是先将 X.509 证书下的Subject Public Key Info (SPKI) 做sha256哈希运算，然后再做base64编码。然而，这些规定有可能更改，例如有人指出，在引号中封装哈希是无效的，而且在33版本的chrome中也不会保存pkp的哈希到缓存中。

这个header和 STS的作用很像，因为它规定了最大子域名的数量。此外，pkp还提供了一个Public-Key-Pins-Report-Only 头用来报告异常，但是不会强制阻塞证书信息。当然，这些chrome都是不支持的。

五、使用iframe的风险#

1
有时前端页面需要用到第三方提供的页面组件，通常会以iframe的方式引入。典型的例子是使用iframe在页面上添加第三方提供的广告、天气预报、社交分享插件等等。
2

3
iframe在给我们的页面带来更多丰富的内容和能力的同时，也带来了不少的安全隐患。因为iframe中的内容是由第三方来提供的，默认情况下他们不受我们的控制，他们可以在iframe中运行JavaScirpt脚本、Flash插件、弹出对话框等等，这可能会破坏前端用户体验。
4

5
如果说iframe只是有可能会给用户体验带来影响，看似风险不大，那么如果iframe中的域名因为过期而被恶意攻击者抢注，或者第三方被黑客攻破，iframe中的内容被替换掉了，从而利用用户浏览器中的安全漏洞下载安装木马、恶意勒索软件等等，这问题可就大了。

如何防御

1
在HTML5中，iframe有个sandbox安全属性，通过它可以对iframe的行为进行各种限制，充分实现“最小权限“原则。例如： <iframe sandbox src="..."> ... </iframe>
2

3
sandbox提供了丰富的配置参数，可以进行较为细粒度的控制。
4
  allow-forms：允许iframe中提交form表单
5
  allow-popups：允许iframe中弹出新的窗口或者标签页（例如，window.open()，showModalDialog()，target=”_blank”等等）
6
  allow-scripts：允许iframe中执行JavaScript
7
  allow-same-origin：允许iframe中的网页开启同源策略
8
更多详细的资料，可以参考iframe中关于sandbox的介绍。

六、点击劫持#

1
这是一种欺骗性比较强，同时也需要用户高度参与才能完成的一种攻击。通常的攻击步骤是这样的：
2
　　1、攻击者构造一个诱导用户点击的内容，如Web页面小游戏
3
　　2、将被攻击的页面放入到iframe当中
4
　　3、利用z-index等CSS样式将这个iframe叠加到小游戏的垂直方向的正上方
5
　　4、把iframe设置为100%透明度
6
　　5、受害者访问这个页面，肉眼看到的是一个小游戏，如果受到诱导进行了点击的话，实际上点击到的却是iframe中的页面
7

8
　点击劫持的危害在于，攻击利用了受害者的用户身份，在其不知情的情况下进行一些操作

如何防御

1
尽量减少第三方依赖，选用相对成熟的依赖包。
2

3
使用自动化工具检查这些第三方代码有没有安全问题，比如NSP(Node Security Platform)，Snyk等等。

七、错误的内容推断#

1
攻击场景：某网站允许用户在评论里上传图片，攻击者将含有恶意JavaScript的脚本文件扩展名改成图片格式进行上传（这涉及到了恶意文件上传这个常见安全问题，但是由于和前端相关度不高因此暂不详细介绍）。接下来，受害者在访问这段评论的时候，浏览器会去请求这个伪装成图片的JavaScript脚本，而此时如果浏览器错误的推断了这个响应的内容类型（MIME types），那么就会把这个图片文件当做JavaScript脚本执行，于是攻击也就成功了。
2

3
问题的关键：后端服务器在返回的响应中设置的Content-Type Header仅仅只是给浏览器提供当前响应内容类型的建议，而浏览器有可能会自作主张的根据响应中的实际内容去推断内容的类型。
4

5
上例中，后端通过Content-Type Header建议浏览器按图片来渲染HTTP响应，但浏览器发现响应的其实是JavaScript，于是就擅自做主把这段响应当做JS脚本来解释执行，安全问题也就产生了。

如何防御

1
浏览器根据响应内容来推断其类型，本来这是个很“智能”的功能，是浏览器强大的容错能力的体现，但是却会带来安全风险。要避免出现这样的安全问题，办法就是通过设置X-Content-Type-Options这个HTTP Header明确禁止浏览器去推断响应类型。
2

3
同样是上面的攻击场景，后端服务器返回的Content-Type建议浏览器按照图片进行内容渲染，浏览器发现有X-Content-Type-Options HTTP Header的存在，并且其参数值是nosniff，因此不会再去推断内容类型，而是强制按照图片进行渲染，从而最终防止了安全问题的发生。
4

5
更多关于X-Content-Type-Options的细节请参考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Content-Type-Options

八、不安全的第三方依赖包#

1
现如今进行应用开发，无论是后端服务器应用还是前端应用开发，绝大多数时候我们都是在借助开发框架和各种类库进行快速开发。
2

3
这样做的好处显而易见，但是与此同时安全风险也在不断累积——应用使用了如此多的第三方代码，不论应用自己的代码的安全性有多高，一旦这些来自第三方的代码有安全漏洞，那么对应用整体的安全性依然会造成严峻的挑战。

如何防御

1
尽量减少第三方依赖，选用相对成熟的依赖包。
2

3
使用自动化工具检查这些第三方代码有没有安全问题，比如NSP(Node Security Platform)，Snyk等等。

九、HTTPS中间人攻击#

1
即使是服务器端开启了HTTPS，也还是存在安全隐患，黑客可以利用SSL Stripping这种攻击手段，强制让HTTPS降级回HTTP，从而继续进行中间人攻击。
2

3
问题的本质在于浏览器发出去第一次请求就被攻击者拦截了下来并做了修改，根本不给浏览器和服务器进行HTTPS通信的机会。大致过程如下，用户在浏览器里输入URL的时候往往不是从https://开始的，而是直接从域名开始输入，随后浏览器向服务器发起HTTP通信，然而由于攻击者的存在，它把服务器端返回的跳转到HTTPS页面的响应拦截了，并且代替客户端和服务器端进行后续的通信。由于这一切都是暗中进行的，所以使用前端应用的用户对此毫无察觉。

如何防御

1
解决这个安全问题的办法是使用HSTS（HTTP Strict Transport Security），它通过下面这个HTTP Header以及一个预加载的清单，来告知浏览器在和网站进行通信的时候强制性的使用HTTPS，而不是通过明文的HTTP进行通信：
2
  Strict-Transport-Security: max-age=; includeSubDomains; preload
3

4
这里的“强制性”表现为浏览器无论在何种情况下都直接向服务器端发起HTTPS请求，而不再像以往那样从HTTP跳转到HTTPS。另外，当遇到证书或者链接不安全的时候，则首先警告用户，并且不再让用户选择是否继续进行不安全的通信。

十、本地存储数据泄露#

1
随着前后端分离，尤其是后端服务无状态化架构风格的兴起，随着SPA应用大量出现，存储在前端数据量也在逐渐增多。
2

3
前端应用是完全暴露在用户以及攻击者面前的，在前端存储任何敏感、机密的数据，都会面临泄露的风险，就算是在前端通过JS脚本对数据进行加密基本也无济于事。
4

5
尽管有浏览器的同源策略限制，但是如果前端应用有XSS漏洞，那么本地存储的所有数据就都可能被攻击者的JS脚本读取到。如果用户在公用电脑上使用了这个前端应用，那么当用户离开后，这些数据是否也被彻底清除了呢？前端对数据加密后再存储看上去是个防御办法，但其实仅仅提高了一点攻击门槛而已，因为加密所用到的密钥同样存储在前端，有耐心的攻击者依然可以攻破加密这道关卡。

如何防御

1
在前端存储敏感、机密信息始终都是一件危险的事情，推荐的做法是尽可能不在前端存这些数据

十一、CDN劫持/污染#

1
以出于性能考虑，前端应用通常会把一些静态资源存放到CDN上，再提高前端应用的访问速度的同时也隐含了一个新的安全风险。
2

3
如果攻击者劫持了CDN，或者对CDN中的资源进行了污染，那么我们的前端应用拿到的就是有问题的JS脚本或者Stylesheet文件。这种攻击方式造成的效果和XSS跨站脚本攻击相似。

如何防御

1
防御这种攻击的办法是使用浏览器提供的SRI（Subresource Integrity）功能。
2

3
每个资源文件都有一个SRI值。由两部分组成，减号（-）左侧是生成SRI值用到的哈希算法名，右侧是经过Base64编码后的该资源文件的Hash值。<script src="“https://example.js”" integrity="“sha384-eivAQsRgJIi2KsTdSnfoEGIRTo25NCAqjNJNZalV63WKX3Y51adIzLT4So1pk5tX”"/>
4

5
浏览器在处理这个script元素的时候，就会检查对应的JS脚本文件的完整性，看其是否和script元素中integrity属性指定的SRI值一致，如果不匹配，浏览器则会中止对这个JS脚本的处理。

参考地址#

https://www.cnblogs.com/AdamFamily/p/10059253.html

https://cloud.tencent.com/developer/article/1008829

https://blog.csdn.net/weixin_41088946/article/details/107101049

https://wenku.baidu.com/view/3a0762f90242a8956bece42e.html

开发过程中遇到的报黄及解决

Wed, 31 Jul 2019 00:00:00 GMT

解决控制台报黄`passive event listener to a scroll-blocking 'touchmove' event. Consider mark`#

1.下载插件

1
npm i default-passive-events -S

2、main.js中加入：import 'default-passive-events'
报黄原因：Chrome51 版本以后，Chrome 增加了新的事件捕获机制－Passive Event Listeners；Passive Event Listeners：就是告诉前页面内的事件监听器内部是否会调用preventDefault函数来阻止事件的默认行为，以便浏览器根据这个信息更好地做出决策来优化页面性能。当属性passive的值为true的时候，代表该监听器内部不会调用preventDefault函数来阻止默认滑动行为，Chrome浏览器称这类型的监听器为被动（passive）监听器。目前Chrome主要利用该特性来优化页面的滑动性能，所以Passive Event Listeners特性当前仅支持mousewheel/touch相关事件。

解决Chrome动画卡顿的办法

Fri, 31 Aug 2018 00:00:00 GMT

解决Chrome动画”卡顿”的办法,为动画DOM元素添加CSS3样式

1
-webkit-transform:transition3d(0,0,0);
2
//或
3
-webkit-transform:translateZ(0);

这两个属性都会开启GPU硬件加速模式，从而让览器在渲染动画时从CPU转向GPU;
其实说白了这是一个小伎俩，也可以算是一个Hack，-webkit-transform:transition3d和-webkit-transform，但我们设置值为0后，并没有真正使用3D效果，但浏览器却因此开启了GPU硬件加速模式。
这种GPU硬件加速在当今PC机及移动设备上都已普及，在移动端的性能提升是相当显著地，所以建议大家在做动画时可以尝试一下开启GPU硬件加速。
当然也可以这样开启所有浏览器的GPU硬件加速：

1
webkit-transform: translateZ(0);
2
-moz-transform: translateZ(0);
3
-ms-transform: translateZ(0);
4
-o-transform: translateZ(0);
5
transform: translateZ(0);

或者:

1
webkit-transform: translate3d(0,0,0);
2
-moz-transform: translate3d(0,0,0);
3
-ms-transform: translate3d(0,0,0);
4
-o-transform: translate3d(0,0,0);
5
transform: translate3d(0,0,0);

使用-webkit-transform:transition3d(0,0,0)开启GPU硬件加速的chrome中渲染动画性能明显顺畅了许多

chrome诡异的Bug#

对所有动画DOM元素添加-webkit-transform:transition3d(0,0,0)开启GPU硬件加速之后，又出现了一个chrome诡异的Bug
当你有多个position:absolute;元素添加-webkit-transform:transition3d(0,0,0);开启GPU硬件加速之后，会有几个元素凭空消失
这可能是跟添加-webkit-transform之后chrome尝试使用GPU硬件加速有关系，最后还是要等待Chrome官方更新解决了，当前Chrome版本是33。如果谁发现比较好的解决办法，欢迎提出^_^

如何避免这个问题#

在使用-webkit-transform尝试对很多DOM元素编写3D动画时，尽量不要对这些元素及他们的父元素使用position:absolute/fixed。(其实这种情况很难避免)
临时解决办法是,减少使用-webkit-transform:transition3d(0,0,0)的DOM元素数量，例如从9个减至6个就没有元素消失的现象了。

开启GPU硬件加速可能触发的问题#

通过-webkit-transform:transition3d/translateZ开启GPU硬件加速之后，有些时候可能会导致浏览器频繁闪烁或抖动，可以尝试以下办法解决之:

1
-webkit-backface-visibility:hidden;
2
-webkit-perspective:1000;

如何监测动画帧速率#

推荐两种实时监测网页渲染帧速率的方法：
- 1.Chrome的DevTool中TimeLine的Frame模块
- 2.地址栏输入”chrome:flags”搜索”fps”，将”FPS计数器”开启，浏览器重启后右上角会实时显示帧速率。

通过-webkit-transform/translateZ开启GPU硬件加速的适用范围#

使用很多大尺寸图片(尤其是PNG24图)进行动画的页面。
页面有很多大尺寸图片并且进行了css缩放处理，页面可以滚动时。
使用background-size:cover设置大尺寸背景图，并且页面可以滚动时。(详见:https://coderwall.com/p/j5udlw)
编写大量DOM元素进行CSS3动画时(transition/transform/keyframes/absTop&Left)
使用很多PNG图片拼接成CSS Sprite时
暂时只有这五种情况，欢迎大家补充

通过开启GPU硬件加速虽然可以提升动画渲染性能或解决一些棘手问题，但使用仍需谨慎，使用前一定要进行严谨的测试，否则它反而会大量占用浏览网页用户的系统资源，尤其是在移动端，肆无忌惮的开启GPU硬件加速会导致大量消耗设备电量，降低电池寿命等问题。#

参考地址:http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

JS将对象转化为数组

Sun, 26 Aug 2018 00:00:00 GMT

将对象转化为数组#

方法一

1
let obj={a:1,b:2}
2
let arr = []
3
let x=Object.entries(obj)//[["a", 1],["b", 2]]
4
arr=x.map(item=>{
5
    return item[1]
6
})
7
console.log(arr)//[1,2]

方法二

1
let obj={a:1,b:2}
2
let arr = []
3
for (let i in obj) {
4
    arr.push(obj[i]); //属性
5
    //arr.push(obj[i]); //值
6
}
7
console.log(arr);//[1,2]

方法三

1
let obj={a:1,b:2}
2
let arr = Object.values(obj)
3
console.log(arr);//[1,2]

Vuejs基础

Sun, 26 Aug 2018 00:00:00 GMT

Vue.js是什么#

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。
与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

vue的特点#

核心只关注视图层(view)
易学，轻量，灵活
适用于移动端项目
渐进式框架

框架和库#

框架 (vue的核心是库，但是我们用的时候，用的就是他的框架了)

总结<拥有完整的解决方案>，我们写好，人家调用我（被动）
库
- jquery
- underscore模板库(模板引擎)
- zepto
- animate.css动画库
总结:
共同点<要用的时候> 直接调用一下即可
人家写好，我们调用他（主动）

渐进式(渐进增强<低版本不支持>，做成支持的，让高版本的更炫更支持)#

vue全家桶
- 核心
- vue-router 可以帮我们实现一个单页应用
- vuex 状态管理，可以帮我们完成组件化开发
- axios 用来获取数据的
通过组合完成一个完整的框架

渐进式的理解

声明式渲染(无需关心如何实现)
组件系统
客户端路由(vue-router)
大规模状态管理(vuex)
构建工具(vue-cli)

vue的两个核心点#

响应的数据变化
- 当数据发生改变->视图自动更新
组合的视图组件
- ui页面映射为组件树
- 划分组件可维护、可复用、可测试

MVVM模式<双向绑定>(angular、vue框架)#

M
V
viewModel视图模型

MVC模式<单向>(backbone框架)#

vue优点#

数据驱动(主要操作的是数据,几乎不直接操作dom)

如何安装vue#

1. 通过bower 安装bower: npm install bower -g mac本: sudo npm install bower -g 查看vue的版本： bower info vue 安装vue：bower install vue@1.0.28
1. 通过npm安装通过npm: npm install vue 通过npm全局安装: npm install vue -g

箭头函数

Sun, 26 Aug 2018 00:00:00 GMT

箭头函数<不具备this和arguments>，自己家没有this就会往上级找this，从而解决this的指向问题。

如何更改this指向#

1)call、apply、bind
2)var that=this;
3)箭头函数

如何确定this是谁#

看谁调用的，点前面是谁，this就是谁

箭头函数怎么写#

1
//将下列函数改为箭头函数
2
function a(b){
3
    return b+1;
4
}
5
//第一步:
6
let a=(b)=>{return b+1;}
7
//第二步(简化):
8
let a=b=>b+1;

总结：

箭头函数中没有function关键字，去掉function关键字
当形参只有一个的时候，可以省略小括号
小括号和大括号之间有一个箭头：有大括号，必须要写return;如果没有大括号，表示箭头后面的结果就是return的结果

将下列函数改为箭头函数:

1
function a(b){
2
    return function(c){
3
        return b+c
4
    }
5
}
6
a(1)(2)// 3 -> 先执行a 再执行里面的匿名函数

箭头函数:

1
//第一步
2
let a=b=>{
3
    return function(c){
4
        return b+c
5
    }
6
}
7
//第二步:删除function和一个形参的小括号
8
let a=b=>{
9
    return c=>{
10
        return b+c
11
    }
12
}
13
//第三步:删return和大括号
14
let a=b=>c=>b+c //高阶函数(俩个箭头及两个以上箭头的)

闭包#

函数执行的一瞬间
导致内存泄漏->因为会产出不销毁的作用域
当执行后返回的结果必须是引用数据类型，被外界变量接收，此时这个函数不会销毁
作用<私有化>
闭包能干什么<模块化>

1
//以下函数不是闭包:
2
function a(b){
3
    return function(c){
4
        return b+c
5
    }
6
}
7
a(1)
8
a(1)(2)
9
//不是闭包的原因:函数执行的一瞬间确实有形成闭包，但是函数执行完成后，作用域就被销毁了，所以不是闭包
10

11
//以下函数是闭包:
12
let a=function (b){
13
  return function(c){
14
      return b+c
15
  }
16
}();
17
//是闭包的原因:函数执行的一瞬间确实有形成闭包,当执行后返回的结果是引用数据类型，被外界变量a接收，此时这个函数不会销毁,会产出不销毁的作用域,容易导致内存泄漏，所以是闭包

展开收起

在vue中很多时候不能用箭头函数

JS数组中的方法2

Mon, 20 Aug 2018 00:00:00 GMT

保证node的版本#

1
node -v //查询node版本

最好升级到8.5以上版本

编译器#

webstorm版本>2017以上版本
vscode
sublime

webstorm配置npm和语法#

File->Setting中配置每打开一个项目都要重新配置
File->Default Setting 中配置后以后就不用配置了
- react jsx 语法是支持react的语法包含es6语法可以直接使用jsx语法

1.forEach(没有返回值)#

1
let arr=[1,2,3,4,5]
2
for(let i=0;i<arr.length;i++){//纯编程的 编程式语法:自己调用循环 可以很明确的看出来代码怎么执行的
3
  console.log(arr[i])
4
}
5
arr.forEach(function(item){//声明式语法 好处:不关心如何实现 不支持return，不管写不写return都会执行完
6
  console.log（item）
7
},改变this指向)

面试题 forEach，for in，for，for of的区别（为什么遍历数组的时候不采用for in）
- 按理说索引应该是数字number数据类型的，但是for in循环中key会变成string字符串数据类型
```
1
for(let key in arr){
2
  console.log(typeof key) //string  包括数组的私有属性也能打印出来
3
}
```
- 如果给arr加上个属性 arr.b='100' 属于数组的私有属性for in可以打印出来
```
1
for(let val of arr){//支持return 并且是val（值）of数组（不能遍历对象）
2

3
}
```

总结

forEach不支持return
for in循环遍历出来的包含私有属性
for of 既能return（并且是val（值）of数组），又能遍历私有属性（不能遍历对象）

扩展: 遍历对象的方法:Object.keys ->将对象的key做成一个新的数组

1
let obj={a:1,b:2}
2
//[a,b]
3
for(let val of Object.keys(obj)){
4
    console.log(val)// a        b
5
    console.log(obj[val])// 把val变成变量 只能用[],不能用点，点会把val变成字符串，就取不出来了
6
}

2.`filter` （过滤）- 删除#

是否操作原数组
这个方法的返回结果<过滤后的新数组>
回调函数的返回结果:
- 返回true表示这一项放到新数组中
- 返回false表示这一项不放到新数组中

过滤出数组中大于2小于5的数

错误示范

1
let arr=[1,2,3,4,5].filter(function(item,index)){
2
  return 2<item<5 //-->不行  会先比较前面2<item  永远都是true  会输出[1,2,3,4,5]
3
}
4
console.log(arr) //[1,2,3,4,5]

正确示范

1
let arr=[1,2,3,4,5].filter(function(item,index)){
2
  return item>2&&item<5
3
}
4
console.log(arr) //[3,4]

3.`map`(映射) - 更新#

将原有的数组映射成新数组
是否操作原数组
这个方法的返回结果<返回新数组>
回调函数的返回结果<回调函数中返回什么>，这一项就是什么

举例<有一个数组>[1,2,3],如何将他变成

1
<ul>
2
  <li>1</li>
3
  <li>2</li>
4
  <li>3</li>
5
</ul>
6
- 思路:
7
let arr=[1,2,3].map(function(item){
8
   return 2
9
})
10
console.log(arr)//[2,2,2]
11
let arr1=[1,2,3].map(function(item){
12
   return item*=3
13
})
14
console.log(arr1)//[3,6,9]
15
- 实现功能:es6中的模板字符串拼 ${}中间包变量
16
let arr2=[1,2,3].map(function(item){
17
   return `<li>${item}</li>` //是es6中的模板字符串，遇到变量用${}取值
18
})
19
console.log(arr2)//[<li>1</li>,<li>2</li>,<li>3</li>]
20
console.log(arr2.join(''))//<li>1</li><li>2</li><li>3</li>

展开收起

总结

如果想删除数组中的某一项，可以用filter
如果想更新或者修改某个数组，可以用map

4.`includes` (是否包含)#

数组中只要有5就拿出来

1
let arr=[1,2,3,4,55]
2
arr.includes(5) //false  返回的是布尔类型 有5就是true，没有5就是false  很局限

5.`find`#

返回找到的那一项
不会改变原数组
回调函数中:
- 返回true表示找到了，找到后停止循环
- 返回undefined表示没找到

数组中只要包含5就拿出来

1
let arr=[1,2,3,4,55,555]
2
let newArr=arr.find(function(item,index){
3
  return item.toString().indexOf(5)>-1  //找到了
4
})
5
console.log(newArr)  //55

总结:

找到具体的某一项,用find。实际应用中<比如有用户列表>，用户都有自己的用户名和密码，拿到用户的密码对应找到用户的用户名，找到一个就会停止往下找。

6.`some`#

找true，找到true后停止,返回true;找不到返回false。

7.`every`#

找false，找到false后停止,返回false

判断一个数组中有没有5,用some

1
let arr=[1,2,3,4,55,555]
2
let newArr=arr.some(function(item,index){
3
  return item.toString().indexOf(5)>-1  //找到了
4
})
5
console.log(newArr)  //true

8.`reduce`(收敛)#

四个参数、next下一个、index索引、item原数组
返回的结果<叠加后的结果>
回调函数返回的结果:
原数组不变

求数组中的和

1
//第一步分析:
2
[1,2,3,4,5].reduce(function(prev,next,index,item){
3
    console.log(arguments)
4
    //{'0':1,'1':2,'2':1,'3':[1,2,3,4,5]}->prev数组的第一项,next数组的第二项
5
    //{'0':undefined,'1':3,'2':2,'3':[1,2,3,4,5]}->prev是undefined,next数组的第三项
6
    //{'0':undefined,'1':4,'2':3,'3':[1,2,3,4,5]}->prev是undefined,next数组的第四项
7
    //{'0':undefined,'1':5,'2':4,'3':[1,2,3,4,5]}->prev是undefined,next数组的第五项
8
    //-->prev是undefined的原因，因为这里没有return
9
})
10
//第二步分析->有return的时候:
11
[1,2,3,4,5].reduce(function(prev,next,index,item){
12
    console.log(arguments)
13
    return 100 //本次的返回值会作为下一次的prev
14
    //{'0':1,'1':2,'2':1,'3':[1,2,3,4,5]}->prev数组的第一项,next数组的第二项
15
    //{'0':100,'1':3,'2':2,'3':[1,2,3,4,5]}->prev是100,next数组的第三项
16
    //{'0':100,'1':4,'2':3,'3':[1,2,3,4,5]}->prev是100,next数组的第四项
17
    //{'0':100,'1':5,'2':4,'3':[1,2,3,4,5]}->prev是100,next数组的第五项
18
})
19
//求和:
20
let sum=[1,2,3,4,5].reduce(function(prev,next,index,item){
21
    console.log(prev,next)
22
    return prev+next
23
})
24
console.log(sum) //15

展开收起

求302+303+30*4

1
//思路:
2
let sum2=[{price:30,count:2},{price:30,count:3},{price:30,count:4}].reduce(function(prev,next){
3
    return prev.price*prev.count+next.price+next.count
4
    //30*2+30*3  ->150
5
    //150.price*150.count + ...  ->NaN
6
})
7
console.log(sum2) //NaN
8
//在数组最前面加上0 会导致多循环一次
9
let sum2=[0,{price:30,count:2},{price:30,count:3},{price:30,count:4}].reduce(function(prev,next){
10
    return prev+next.price+next.count
11
    //0+30*2  ->60
12
    //60+30*3  ->150
13
    //150+30*4 ->270
14
})
15
console.log(sum2) //270
16
//传第二个参数0来解决 -> 默认指定第一次的prev
17
let sum2=[{price:30,count:2},{price:30,count:3},{price:30,count:4}].reduce(function(prev,next){
18
    return prev+next.price+next.count
19
    //0+30*2  ->60
20
    //60+30*3  ->150
21
    //150+30*4 ->270
22
},0)
23
console.log(sum2) //270

展开收起

总结<求和>、求叠加、两个数组合成一个数组，可以用reduce

扩展

数组扁平化<将一个二维数组变为一维数组怎么写>？可以使用reduce -> 将[[1,2,3],[4,5,6],[7,8,9]]变为[1,2,3,4,5,6,7,8,9]

1
let arr=[[1,2,3],[4,5,6],[7,8,9]].reduce(function(prev,next){
2
    return prev.concat(next)
3
})
4
console.log(arr)//[1,2,3,4,5,6,7,8,9]

HEXO常用命令

Sun, 15 Jul 2018 00:00:00 GMT

hexo安装#

1
npm install hexo -g //安装
2
npm update hexo -g //升级
3
hexo init //初始化

hexo命令#

1
hexo n "我的博客" //新建文章-简写
2
hexo new "我的博客" //新建文章
3
hexo new page "title" //新建页面
4
hexo new post "title" //写作
5
hexo new photo "My Gallery" //模版
6
hexo p //草稿-简写
7
hexo publish [layout] <title> //草稿
8
hexo g //生成静态页面至public目录 使用 Hexo 生成静态文件快速而且简单 -简写
9
hexo generate //生成静态页面至public目录 使用 Hexo 生成静态文件快速而且简单
10
hexo generate --watch //监视文件变动
11
hexo s //启动服务预览/开启预览访问端口（默认端口4000，'ctrl + c'关闭server）-简写
12
hexo server //启动服务预览/开启预览访问端口（默认端口4000，'ctrl + c'关闭server）
13
hexo d //开始部署，将.deploy目录部署到GitHub-简写
14
hexo deploy //将.deploy目录部署到GitHub
15
hexo server //Hexo 会监视文件变动并自动更新，您无须重启服务器。
16
hexo server -s //静态模式
17
hexo server -g //完成后部署
18
hexo server -p 5000 //更改端口为5000
19
hexo server -i 192.168.1.1 //自定义 IP
20
hexo clean //清除缓存 网页正常情况下可以忽略此条命令
21
hexo generate --deploy //完成后部署
22
hexo deploy --generate //完成后部署
23
hexo d -g //完成后部署-简写

展开收起

二维数组降维成一维数组

Sun, 15 Jul 2018 00:00:00 GMT

把`[[2,5],[7,3]]`降维成`[2,5,7,3]`#

方法一#

1
let arr=[[2,5],[7,3]];
2
arr.toString().split  //[2,5,7,3]

方法二#

1
function fn(arr){
2
    let a=[];
3
    arr.map(item=>{
4
        a=[...a,...item]
5
    });
6
    return a
7
}
8
fn([[2,5],[7,3]])  //[2,5,7,3]

方法三#

reduce

1
let arr=[[1,2,3],[4,5,6],[7,8,9]].reduce(function(prev,next){
2
    return prev.concat(next)
3
})
4
console.log(arr)//[1,2,3,4,5,6,7,8,9]

基于GitHub创建自己HEXO的博客

Wed, 04 Jul 2018 00:00:00 GMT

搭建环境准备#

Node.js 的安装和准备
Git的安装和准备
gitHub账户的配置

Node.js 的安装和准备#

1.下载node.js安装文件：https://nodejs.org/en/
2.cmd，打开命令行界面,查看安装版本

1
node -v
2
npm -v

配置Git环境#

下载Git安装文件：https://git-scm.com/downloads
打开命令行输入,检查安装是否成功

1
git --version

github账户的注册和配置#

Github注册：https://github.com/
创建代码库：
- 在Repository name下填写yourname.github.io，Description (optional)下填写一些简单的描述（不写也没有关系)
  
  注意：比如我的github名称是gaodaxiu0406 , 这里你就填 gaodaxiu0406.github.io
代码库设置:Setting
- 接下来开启gh-pages功能，点击界面右侧的Settings，你将会打开这个库的setting页面，向下拖动，直到看见GitHub Pages
- 点击Automatic page generator，Github将会自动替你创建出一个gh-pages的页面

安装`Hexo`#

首先在E盘(选择你的HEXO存放的文件夹,最好不要安装到C盘)目录下创建Hexo文件夹，并在命令行的窗口进入到该目录

1
E:    进入E盘
2
cd Hexo 进入Hexo文件夹

安装HEXO

1
npm install hexo-cli -g

可能你会看到一个WARN，但是不用担心，这不会影响你的正常使用。

检查安装是否成功#

1
hexo -v

输出版本号即为安装成功

hexo的相关配置#

初始化Hexo#

1
hexo init // 初始化hexo
2
npm install // 安装项目所有依赖

首次体验Hexo#

1
hexo g   #生成
2
hexo s   #启动服务

在浏览器中打开http://localhost:4000/ 即可预览你的HEXO页面

怎样将`Hexo`与`github page` 联系起来#

大概分为以下几步#

配置git个人信息
配置Deployment

1.配置Git个人信息#

1.设置Git的user name和email：(如果是第一次的话)

1
git config --global user.name "gaodaxiu0406"
2
git config --global user.email "1260833716@qq.com"

2.检查是否已经有SSH Key(密钥)。
```
1
cd ~/.ssh
2
ls
```

3.生成密钥(如果没有密钥的话)

1
ssh-keygen -t rsa -C "1260833716@qq.com"

1
连续3个回车。如果不需要密码的话。
2
最后得到了两个文件：id_rsa和id_rsa.pub。
3
默认的存储路径是：C:\Users\Administrator\.ssh

4.添加密钥到ssh-agent
```
1
eval "$(ssh-agent -s)"
```
添加生成的 SSH key 到 ssh-agent。
```
1
ssh-add ~/.ssh/id_rsa
```
5.登陆Github, 添加 ssh
- 把id_rsa.pub文件里的内容复制到SSH keys

6.测试：

1
ssh -T git@github.com

你将会看到：如果看到Hi后面是你的用户名，就说明成功了。

1
如果提示Are you sure you want to continue connecting (yes/no)?，输入yes

2.配置`Deployment`#

配置_config.yml中有关deploy的部分：

1
deploy:
2
type: git
3
repository: git@github.com:gaodaxiu0406/gaodaxiu0406.github.io.git
4
branch: master

写博客、发布文章#

1.定位到我们的hexo根目录，执行命令：
```
1
hexo new 'my-first-blog'
```
hexo会帮我们在HEXO文件夹—>source文件夹—>_posts文件夹下生成相关.md文件,用马克飞象打开写文章就可以

文章编辑好之后，运行生成、部署命令：

1
hexo g   // 生成
2
hexo d   // 部署

或者(合并写法)

1
hexo d -g #在部署前先生成

踩坑提醒#

1
deloyer not found:git

这样的错误是需要装插件

1
npm install hexo-deployer-git --save

下篇https://gaodaxiu-blog.netlify.app/posts/hexo主题设置(https://gaodaxiu-blog.netlify.app/posts/hexo%E4%B8%BB%E9%A2%98%E8%AE%BE%E7%BD%AE(huno%E4%B8%BB%E9%A2%98))

JS数组中的方法1

Wed, 25 Apr 2018 00:00:00 GMT

数组中的方法#

1.给数组添加值#

1.1 `charCodeAt`（索引）返回结果对应的是ASCII码;原字符串不变#

1.2 `push()`;向数组末尾增加n项#

参数<想向数组末尾增加的内容>,可以传递多个值,统一向数组末尾增加n向
返回值<新增后数组的长度>
原数组<改变>

1
var ary=[12,23,34,45];
2
ary.push(56);
3
console.log(ary);//-->[12,23,34,45,56]

1.3 `unshift();`向数组开头增加n项#

参数<想向数组开头增加的内容>,可以传递多个值,统一向数组开头增加n向
返回值<新增后数组的长度>
原数组<改变>
扩展<向数组末尾增加>
- splice(a.length,0,x);向末尾增加,可增加多项

2.删除数组中的项#

2.1 `pop();`删除数组最后一项内容#

参数<没有>
返回值<被删除的那一项内容>
原数组<改变>

2.2 `shift();`删除数组中的第一项#

参数<没有>
返回值<被删除的那一项内容>
原数组<改变>
扩展<删除数组最后一项内容的方法>
- a) pop();删除数组最后一项内容
- b) ary.length--;
- c) ary.splice(ary.length-1);

3.数组中的截取和拼接#

3.1 `slice` 实现数组的截取，在原来的数组中截取某一部分#

3.1.1 `slice(n,m)`#

1. n>=m 返回空数组
1. n<0,m<0,n<m 从索引m开始找到索引为n处，不包含n，将找到的部分，以新数组返回，原数组不变。原数组的索引最后一位是0,倒数第二位索引是-1,以此类推;例如

1
var ary1=[11,22,33,44,55,66,77,88,99];
2
var res=ary1.slice(-4,-3);
3
console.log(res,ary1);
4
//[66]   (9) [11, 22, 33, 44, 55, 66, 77, 88, 99]

1. n>0,m<0 原数组的长度（从前往后）变为总长度+m(m为负数，即原数组总长度减短)，slice(n,m)返回索引n开始到减短后的数组末尾当n和m的绝对值相加>=原数组总长度时，slice(n,m)返回空数组;例如

1
var ary1=[11,22,33,44,55,66,77,88,99];
2
var res=ary1.slice(3,-3);
3
//[44, 55, 66]   (9) [11, 22, 33, 44, 55, 66, 77, 88, 99]

1. n>0,m>0,m>n
- 参数<从索引n开始找到索引m处>(不包含m);
- 返回值<索引n项到索引m-1项>,将找到的部分以新数组返回;
- 原数组<不变>;
1. slice(n);
- 参数<从索引n开始一直找到数组末尾>
- 将找到的部分以新数组返回
- 原数组<不变>
1. slice(0);/slice()
- 把原来的数组克隆一份一模一样的新数组返回
- 原数组<不变>

3.1.2 `concat();`把两个数组拼接在一起#

参数:
- ary1.concat(ary2);将ary1和ary2进行拼接,ary2在后面
- ary1.concat();把ary1克隆一份一模一样的数组
原数组<不变>

3.1.3 `splice`#

修改数组中某一项的值

1. 利用对象的操作方式修改某一项的值,例如2=100;
- 原数组<改变>
1. 数组中的方法splice

splice 既能实现删除,也能实现增加,还能实现修改

3.1.3.1 splice的删除#

返回值<删除的数据以新数组的方式返回>
原数组<改变>

splice(n,m);从索引n开始,删除m个元素,把删除的内容以一个新数组的方式返回,原数组改变
splice(n);从索引n开始,删除到数组的末尾
splice(0);从索引0开始,删除到数组的末尾;原数组返回空数组,splice(0)相当于克隆一份原数组,这样的克隆会修改原来的数;例如:

1
var a=[11,22,33,44,55,66,77];
2
var res=a.splice(0);
3
console.log(res,a);
4
//(7) [11, 22, 33, 44, 55, 66, 77] , []

splice();相当于没有对原数组进行任何操作,splice()返回一个空数组.原数组不变;例如:

1
var a=[11,22,33,44,55,66,77];
2
var res=a.splice();
3
console.log(res,a);
4
//[] , (7) [11, 22, 33, 44, 55, 66, 77]

splice(a.length-1);删除最后一项，把所有索引最后一个删除掉;例如:

1
var a=[11,22,33,44,55,66];
2
var res=a.splice(a.length-1);
3
console.log(res,a);
4
//[66] , (5) [11, 22, 33, 44, 55]

3.1.3.2 splice的修改#

splice(n,m,x); 从索引n开始，删除m个，用x替换删除的部分,x可以是多项;例如:

1
var b=[1,2,3,4,5,6];
2
var res=b.splice(1,2,11,12,13);
3
console.log(res,b);
4
//[2, 3] , (7) [1, 11, 12, 13, 4, 5, 6]

3.1.3.3 splice的增加#

splice(n,0,x); 从索引n开始，删除0个，用x替换删除的部分—>相当于把x增加到索引n的前面;例如:

1
var a=[11,22,33,44,55,66];
2
var res=a.splice(1,0,77,88);
3
console.log(res,a);
4
//[] , (8) [11, 77, 88, 22, 33, 44, 55, 66]

splice(a.length,0,x);向末尾增加,可增加多项

4.通过属性值查找索引`indexOf`、`lastIndexof`#

通过属性值查找索引<只有在标准浏览器下兼容的>(数组中不兼容字符串中兼容)原数组不变

1. indexOf()
1. lastIndexof()

5.遍历数组中的每一项#

5.1 forEach(function(x,y,i){});没有返回值,例如:#

1
var b=[11,22,33,44,55,66,11];
2
b.forEach(function (item,index) {
3
    //item为数组当前项,index为数组中的索引
4
    console.log(item,index);
5
});
6
//没有返回值
7
var new1b=b.forEach(function (a,b) {
8
    return a*10;
9
});
10
console.log(new1b);//undefined

5.2 map(function(x,y,i){return;});#

1
var b=[11,22,33,44,55,66,11];
2
b.map(function (item,index) {
3
    //item为数组当前项,index为数组中的索引
4
    console.log(item,index);
5
});
6
var newb=b.map(function (item,index) {
7
    return item*10;
8
});
9
console.log(newb);//[110, 220, 330, 440, 550, 660, 110]

6.将数组转化为字符串#

6.1 `join("")`#

按照每一个分隔符，把数组中的每一项拼接成一个字符串

1
var b=[12,22,33,44,55];
2
var res=b.join('+');
3
console.log(res,b);
4
//"12+22+33+44+55"  (5) [12, 22, 33, 44, 55]
5
//扩展:eval：JS中把字符串变为JS表达式执行的一种方法
6
console.log(eval(res));//166
7
//简写:
8
console.log(eval(b.join('+')));//166

6.2 `toString()`#

原数组不变

1
var b=[12,22,33,44,55];
2
var res=b.toString();
3
console.log(res);//"12,22,33,44,55"

7.排序#

7.1 `reverse()`#

把数组倒过来排列,原数组也倒过来排列;例如:

1
var b=[11,22,33,44,55,66,11];
2
var res=b.reverse();
3
console.log(res,b);
4
//(7) [11, 66, 55, 44, 33, 22, 11]   (7) [11, 66, 55, 44, 33, 22, 11]

7.2 sort();给数组进行排序,原数组也进行排序#

ary.sort(); 只能处理10以内的数字
sort(function(a,b){return a-b;});从小到大排序
sort(function(a,b){return b-a;);从大到小排序

微信小程序模块化/组件化开发

Sun, 11 Feb 2018 00:00:00 GMT

将公用组件抽离出来#

把一些内容抽取到一个公有的页面中

1.在home下可以共用模板#

1.在home文件夹下新建个目录(list-tmpl)
- 模板中只能放两种文件、wxml;不支持js和json
- 模板的标志template标签
- 模板要给他起个名字，就是我们要调用这个模板的时候要用的名字<template name='name'></template>
- 可以放多个模板，但每个模板都要有自己的名字
- 同样css样式也要公有化
2.导入模板(使用相对路径)
- <import src='list-tmpl/list-tmpl.wxml'/>
- is->模板名字,data->传入数据;<template is='list' data='{{item}}'></template>

此时home.wxml文件

1
<import src='list-tmpl/list-tmpl.wxml'/>
2
<swiper autoplay='{{true}}' interval='1000' indicator-dots='{{true}}' circular='{{true}}'>
3
  <swiper-item wx:for='{{imgs}}'>
4
    <image src='{{item}}'></image>
5
  </swiper-item>
6
</swiper>
7
<block wx:for="{{lists}}">
8
  <template is='list' data='{{item}}'></template>
9
</block>

2.引入css样式,此时home.wxss文件#

1
@import 'list-tmpl/list-tmpl.wxss';
2
swiper{
3
  height: 400rpx;
4
}
5
swiper image{
6
  width: 100%;
7
}

点击跳转详情页#

事件不能直接绑在template标签上，因为在编译的过程中，最终会直接用一个模板将template替换掉。
- 解决方案<在template标签外面包一层view标签>，在view标签上绑定bindtap点击事件

微信小程序

Sat, 10 Feb 2018 00:00:00 GMT

app文件#

app.json全局的配置样式
app.wxss全局的css样式
app.js全局的js样式

app.json#

在该文件中不能使用‘//’来注释信息，否则报错

1
{
2
  "pages": [
3
    "pages/welcome/welcome"
4
  ],
5
  "window": {
6
    "navigationBarBackgroundColor": "#b0b0b0",   //导航条的颜色
7
    "navigationBarTextStyle": "#fff",   //文字的样式
8
    "navigationBarTitleText": "Welcome",  //标题
9
    "backgroundColor": "#eeeeee",   //下拉样式的背景色
10
    "backgroundTextStyle": "light", //light和dark两个值，下拉样式中三个点的颜色，dark代表白色，light代表黑色
11
    "enablePullDownRefresh": true   //是否可见下拉刷新
12
  }
13
}

pages的第一个参数就是默认打开的页面
微信开发者工具，一个开发者只能一次打开一个页面，不能同时开多个页面

welcome.wxml#

view替代div，view相当于一个盒子、一个视图框、一个容器
text标签替换span/p标签，text标签是我们所谓的文本标签
image标签，图片标签，src图片路径可以使用绝对路径/相对路径
文本不套text标签，在手机端是无法被选中的(无法复制)

1
<view class='container'>
2
  <image src='../../images/touxiang.jpg' class='avatar'></image>
3
  <text class='title'>one</text>
4
  <text class='content'>hello world</text>
5
</view>

1.事件(`https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html`)#

事件分为冒泡事件和非冒泡事件：
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
  - bindtap 绑定点击事件会冒泡
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
  - catchtap 不会冒泡
WXML的冒泡事件列表：

类型	触发条件	最低版本
`touchstart`	手指触摸动作开始
`touchmove`	手指触摸后移动
`touchcancel`	手指触摸动作被打断，如来电提醒，弹窗
`touchend`	手指触摸动作结束
`tap`	手指触摸后马上离开
`longpress`	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	`1.5.0`
`longtap`	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
`transitionend`	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
`animationstart`	会在一个 WXSS animation 动画开始时触发
`animationiteration`	会在一个 WXSS animation 一次迭代结束时触发
`animationend`	会在一个 WXSS animation 动画完成时触发

注：除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如<form/>的submit事件，<input/>的input事件，<scroll-view/>的scroll事件，(详见各个组件)

welcome.wxss#

小程序开发文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html，WXSS样式中有介绍
目前支持的选择器有：

选择器	样例	样例描述
.class	`.intro`	选择所有拥有 class=“intro” 的组件
#id	`#firstname`	选择拥有 id=“firstname” 的组件
element	`view`	选择所有 view 组件
element,element	`view, checkbox`	选择所有文档的 view 组件和所有的 checkbox 组件
::after	`view::after`	在 view 组件后边插入内容
::before	`view::before`	在 view 组件前边插入内容

支持flex布局
不以px为单位，因为要支持适配各种尺寸手机，用rpx为单位
- 1rpx=2px(在iphone6下)
- 宽度(iphone6) 750rpx=100%
- 高度一般采用rpx
- 线条 1px(仍然是实际的高度);

尺寸单位#

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx换算px(屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

建议：开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。
注意：在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

app.wxss中设置公用样式(如字体)#

点击跳转页面#

1.welcome.js#

pages/welcome/welcome.js展开收起

1
Page({
2
  /*页面的初始数据*/
3
  data: {
4
  },
5
  bindToHome(){
6
    //关闭当前页面,跳转到应用内的某个页面，所有的方法都是异步的
7
    //redirectTo 重定向 跳到下页，下页无返回按钮
8
    wx.redirectTo({
9
      url: '../home/home',
10
      success:function(){
11

12
      },
13
      fail:function(){
14

15
      },
16
      complete:function(){
17

18
      }
19
    });
20
    //navigateTo保留当前页面，跳转到应用内的某个页面 只适合导航跳转
21
    wx.navigateTo({
22
      url: '../home/home',
23
    })
24
  }
25
})

展开收起

2.welcome.wxml#

1
<view class='container'>
2
  <image src='../../images/touxiang.jpg' class='avatar' bindtap='bindToHome'></image>
3
  <text class='title'>one</text>
4
  <text class='content'>hello world</text>
5
</view>

更改子级页面的title#

内部/子级页面没有pages属性，只有window属性

1.home.json#

子页面不需要写window了

1
{
2
    "navigationBarBackgroundColor": "green",
3
    "navigationBarTextStyle": "yellow",
4
    "navigationBarTitleText": "主页"
5
}

主页的tab键#

1.app.json#

tabBar配置文档地址https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html
tabBar(tab的列表最少2个，最多5个)
Alt 伪元素选择器
“当tab列表不足2个的时候会报错”
tabBar列表有两个

1
"tabBar": {
2
    "borderStyle": "white",//tab盒子的border-top，有两个值black（黑色）、white（白色）
3
    "color": "red",//字体颜色
4
    "selectedColor": "orange",//激活的字体颜色
5
    "list": [{
6
      "pagePath": "pages/home/home",//页面路径(跳转的对应路径)，只能使用相对路径
7
      "text": "首页",
8
      "iconPath": "images/anhoo.png",//页面默认的icon路径，只能使用相对路径
9
      "selectedIconPath": "images/anhoo1.png"
10
    },{
11
      "pagePath": "pagePath",
12
      "text": "text",
13
      "iconPath": "images/anhoo.png",
14
      "selectedIconPath": "selectedIconPath"
15
    }]
16
  }

展开收起

此处有坑

升级到1.2版本后，如果有tabBar，只能使用switchTab方式切换

1
//保留当前页面，跳转到应用内的某个页面 navigateTo只适合导航跳转
2
// wx.navigateTo({
3
//   url: '../home/home',
4
// });
5
//跳转到tabBar页面,并关闭其他所有非tabBary页面
6
//如果有tabBar，只能使用switchTab方式切换
7
wx.switchTab({
8
  url: '',
9
})

此时app.json文件

1
{
2
  "pages": [
3
    "pages/welcome/welcome",
4
    "pages/home/home",
5
    "pages/notes/notes",
6
    "pages/event/event"
7
  ],
8
  "window": {
9
    "navigationBarBackgroundColor": "#b0b0b0",
10
    "navigationBarTextStyle": "green",
11
    "navigationBarTitleText": "Welcome"
12
  },
13
  "tabBar": {
14
    "borderStyle": "white",
15
    "color": "red",
16
    "selectedColor": "orange",
17
    "list": [{
18
      "pagePath": "pages/home/home",
19
      "text": "首页",
20
      "iconPath": "images/anhoo1.png",
21
      "selectedIconPath": "images/anhoo.png"
22
    },{
23
      "pagePath": "pages/notes/notes",
24
      "text": "笔记",
25
      "iconPath": "images/anhoo1.png",
26
      "selectedIconPath": "images/anhoo.png"
27
    }]
28
  }
29
}

展开收起

主页banner制作#

为了开发方便，将app.json中的pages配置调换一下位置，将home文件的配置放在最上面

1
 "pages": [
2
    "pages/home/home",
3
    "pages/notes/notes",
4
    "pages/event/event",
5
    "pages/welcome/welcome"
6
  ]

此时默认打开的就是首页

1.home.wxml#

不能使用jQuery等，因为微信小程序中没有dom

swiper内置的组件，滑动插件

autoplay='{{true}}'自动播放，默认{{false}};
此处有坑<不能写成>autoplay='true'或者autoplay='false'，这样写是字符串，默认转为布尔类型，即使设置为false，'false'转为布尔类型也是true，也会自动播放，所以一定要加双大括号
interval自动切换间隔时间
indicator-dots='{{true}}'轮播图对应的小点
同autoplay，一定要加双大括号
circular='{{true}}'循环轮播
同autoplay，一定要加双大括号
vertical='{{true}}' 轮播图上下滚动
此处有坑<设置banner图的高>，不能给swiper-item标签设置，要给他的父级swiper标签设置

1
//设置banner图的高为600rpx,此处的style不需要加`双大括号`
2
<swiper autoplay='{{true}}' interval='1000' indicator-dots='{{true}}' circular='{{true}}' vertical='{{true}}' style='height:600rpx;'>
3
  <swiper-item>
4
    <image src='/images/banner1.jpg'></image>
5
  </swiper-item>
6
  <swiper-item>
7
    <image src='/images/banner2.jpg'></image>
8
  </swiper-item>
9
  <swiper-item>
10
    <image src='/images/banner3.jpg'></image>
11
  </swiper-item>
12
  <swiper-item>
13
    <image src='/images/banner4.jpg'></image>
14
  </swiper-item>
15
  <swiper-item>
16
    <image src='/images/banner5.jpg'></image>
17
  </swiper-item>
18
</swiper>

展开收起

绑定动态数据#

数据是单向绑定，数据改动了可以渲染视图，但是视图改动了不会刷新数据
wx 静态遍历不需要
1.home.js

1
data:{
2
  imgs:[
3
    '/images/banner1.jpg',
4
    '/images/banner2.jpg',
5
    '/images/banner3.jpg',
6
    '/images/banner4.jpg',
7
    '/images/banner5.jpg'
8
  ]
9
}

{{item}} wx:for='{{imgs}}'
2.home.wxml

1
<swiper autoplay='{{true}}' interval='1000' indicator-dots='{{true}}' circular='{{true}}'>
2
  <swiper-item wx:for='{{imgs}}'>
3
    <image src='{{item}}'></image>
4
  </swiper-item>
5
</swiper>

wx:for-item='num'可指定item叫什么名字，这里的item就叫num
2.home.wxml

1
<swiper autoplay='{{true}}' interval='1000' indicator-dots='{{true}}' circular='{{true}}'>
2
  <swiper-item wx:for='{{imgs}}' wx:for-item='num'>
3
    <image src='{{num}}'></image>
4
  </swiper-item>
5
</swiper>

注意:wx:for-item='num',num不加双大括号

ReactNative环境搭建

Wed, 24 Jan 2018 00:00:00 GMT

官方中文文档地址https://reactnative.cn/docs/0.51/getting-started.html

如果是ios并不长，如果是安卓相对繁琐一些
操作系统分为/Linux/Windows
在macOS下可以开发ios和安卓的，但是Linux/Windows只能开发安卓的(如果工作中老板要你用ReactNative，你尽量和老板申请个mac本)

步骤#

1.安装Node.js/Homebrew#

百度搜索Node.js
Mac环境(百度搜索Homebrew)

1-1.Node.js安装#

安装后需要配置一下环境变量(我的电脑-属性-高级系统设置-环境变量(path中的数据新增nodejs路径))
1-1-1.nodejs安装提示
- window配置环境变量参考:https://jingyan.baidu.com/article/f3e34a128dc9aff5eb6535dc.html
- ReactNative和很多开发工具一样，会大量使用命令行工具，建议学习一些基本windows/unix/linux指令(mac和linux下是比较相似的，在windows下是不一样的)
  - 参考.bat文件、unix/linux下的.sh文件(dir/ls 列出文件;copy/cp 拷贝;cd/cd 切换目录)
1-1-2.关于Node.js版本(建议使用6以上的版本)
1-1-3.npm的作用和package.json
- npm是nodejs的包管理器，nodejs是一个开源的环境，所谓包管理器就是取之于开源贡献者的代码，用之于开发者，这样一个桥梁的一个作用。
- 包管理器主要源自于国外，国内做的比较好的就是淘宝(淘宝镜像)。
1-1-4.关于淘宝镜像的问题
- 有时候会有一定的同步问题，如果npm install的时候非常慢，建议安装，安装后先移除项目目录下node_modules文件夹
```
1
npm config set registry https://registry.npm.taobao.org --global
2
npm config set disturl https://npm.taobao.org/list --global
```

1-2.Homebrew安装#

macOS需要安装Homebrew，前提是有Ruby，一般mac自带Ruby(可参考reactnative.cn官方中文文档)
通常情况下Homebrew已经有了，不需要安装

1-3.JDK安装#

安卓的版是需要JAVA的，所以要安装JDK
1-3-1.JDK小贴士
- 目前jdk有两个版本(OPENJDK/Oracle Java JDK)，使用Android Studio开发需要JDK
1-3-2.注意事项
- 版本差别不大，1.7/1.8应该都可以
- JAVA安装成功之后通常需要设置一个JAVA_HOME的环境变量，window参考:https://jingyan.baidu.com/article/f3e34a128dc9aff5eb6535dc.html;MacOS/Linux/Unix通常需要export JAVA_HOME=(java路径) 具体可以百度下。

2.开发工具#

2-1.安装Xcode、Android Studio
- Mac(Xcode)<开发ios用>Xcode，必须用Mac开发。
- Android Studio比较麻烦一些
  - 官方做法：https://developer.android.com (在不翻墙的情况下到该地址下载Android Studio)
  - 非官方做法：百度Android Studio，即可下载
2-2.工具任意以下其中之一
- webstore(推荐使用，代码跟踪、代码提示做的比较好)
- Visual Studio Code
- Atom
2-3.语法设置
- 会用react的人都知道，react是使用JSX语法，而ReactNative也是使用JSX语法，在webstore中需要设置成react JSX，否则会有很多报错
  Alt webstore打开设置窗口
  “webstore打开设置窗口”
  Alt JSX语法设置
  “JSX语法设置”
2-4.推荐使用Vim编辑器
- 可结合webstore/Visual Studio Code/Atom 这三款工具使用，特点就是快。

3.难点#

3-1.什么是Android SDK
3-2.SDK安装步骤
- 1. 在AndroidStudio中点开偏好
- 1. 在搜索框中输入Android SDK
- 1. 然后勾选需要安装的SDK工具
- 1. 在SDK Platforms窗口中，选择Show Package Details,然后在Android6.0(Marshmallow)中勾选Google Apis、Android SDK Platform 23、Intel x86 Atom64 System Image以及Google APIs intel x86 Atom64 System Image
- 1. 在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1
- 1. 配置ANDROID_HOME环境变量
  - 在MacOS下，在~/.bash_profile中添加
```
1
export ANDROID_HOME=~/Library/Android/sdk
2
export PATH=${PATH}:${ANDROID_HOME}/tools
3
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
```
  - 在Linux下需要在.bashrc中添加相应内容
  - 在windows下参考https://jingyan.baidu.com/article/f3e34a128dc9aff5eb6535dc.html
3-3.Android模拟器
- 建议使用Genymotion(建议)
  - 建议使用Genymotion官网注册一个账号(注意，他不认数字的邮箱，必须是字母的)
  - 下载一个genymotion软件
  - 个人版是免费的，企业版收费
  - Genymotio实际用的是virtualbox
- Android Studio自带的AVD(不建议)
  - 如果要在Android Studio中使用AVD必须安装HAXM否则会慢，可以在Android Studio中配置，首先需要安装(配置过程及其复杂)
    - 大概需要安装的有:Android SDK、Android SDK Platform、Performance (Intel ® HAXM)、Android Virtual Device
3-4.windows下配置特别提醒
- windows下配置较为困难，如果配置完成后发现红屏幕，有各种各样的原因，其中在windows7下通常需要设置Virtualbox的网络最为棘手。

浏览器的跨域问题以及解决方案(转载)

Sat, 07 Oct 2017 00:00:00 GMT

解决跨域一:`Cookie`如何实现跨域#

Cookie是服务器写入浏览器的一段信息，只有同源的网页才能共享，但是，两个网页一级域名相同，只是二级域名不同，浏览器允许通过设置document.domain共Cookie。

举例来说，A网站是:http:weibo.qq.com;B网站是:http:lol.qq.com;那么只需设置相同的document.domain,两个网页就可共享Cookie。

1
document.domain = 'qq.com';

现在，A网页通过脚本设置一个Cookie。

1
document.Cookie = "test1=hello";

B网页就能读到这个Cookie。

1
var getCookie = document.cookie;

注意：这种方法只适用于Cookie和iframe窗口，LocalStorage和IndexDB无法通过这种方法规避，而要使用下文将介绍的PostMessage API。另外，服务器也可以在设置Cookie的时候，指定Cookie的所属域名为一级域名,比如：.qq.com

1
Set-Cookie:key=value;domain=<span style="color:#cc0000;">.qq.com</span>;path=/

这样的话，二级域名和三级域名不用做任何设置，都可以读取这个Cookie。

解决跨域问题二<如何跨域获取dom>#

如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。
比如,父窗口运行下面的命令，如果iframe窗口不是同源将会报错。

1
document.getElementById("iframe").contentWindow.document

上面命令中，父窗口想获取子窗口的DOM，应为跨源导致报错。反之亦然，子窗口获取主窗口的DOM也会报错。

1
window.parent.document.body

如果两个窗口一级域名相同，只是二级域名不同，那么设置4-1介绍的document.domain属性，就可规避同源政策，拿到DOM。
对于完全不相同的网站，目前有三种方法，可以解决跨域窗口的通信问题。
- (1)片段识别符(fragment identifier)
- (2)window.name
- (3)跨文档通信API(Cross-document messaging)

1) 片段识别符#

片段识别符指的是，URL的#号后面的部分，比如http://qq.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面将不会重新刷新、父窗口可以把信息，写入子窗口的片段标识符。

1
var src = originURL+'#'+data;
2
document.getElementById('iframe').src = src;

子窗口通过监听hashchange事件得到通知

1
window.onhashchange = checkMessage;
2
  function checkMessage(){
3
  var message = window.location.hash;
4
  //...
5
 }

同样的，子窗口也可以改变父窗口的片段标识符。

1
parent.location.href = target+"#"+hash;

2) `window.name`#

浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置这个属性，后一个网页就可以读取它。
父窗口先发开一个子窗口，载入一个不同源的网页，该网页将信息写入window.name属性。

1
window.name = data;

接着，子窗口跳回一个与主窗口同域的网址。

1
location = 'http://parent.url.com/xxx.html';

然后，主窗口就可以读取子窗口的window.name了。

1
var data = document.getElementById('iframe').contentWindow.name;

优点#

window.name容量很大，可以防止非常长的字符串；

缺点#

必须监听子窗口window.name属性的变化，会影响网页性能。

3) 跨文档消息传输`window.postMessage`#

上面两种方法都属于破解，HTML5为解决这个问题，引入一个全新的API：跨文档消息传输Cross Document Messaging。
下一代浏览器都将支持这个功能:Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 。
Facebook已经使用了这个功能，用postMessage支持基于web的实时消息传递。

使用方法#

otherWindow.postMessage(message, targetOrigin);
- otherWindow: 对接收信息页面的window的引用。可以是页面中iframe的contentWindow属性;window.open的返回值；通过name或下标从window.frames取到的值。
- message: 具体的信息内容，string类型。
- targetOrigin: 接受消息的窗口的源(origin)，即“协议+域名+端口”。也可以设为“*”，表示不限制域名，向所有窗口发送。
  - message事件的事件对象event，提供一下三个属性:
    - (1).event.source<发送消息的窗口>
    - (2).event.origin<消息发向的网站>
    - (3).event.data<消息内容>

具体实例#

a.com/index.html中的代码：

1
<iframe id="ifr" src="b.com/index.html"></iframe>
2
<script type="text/javascript">
3
window.onload = function() {
4
    var ifr = document.getElementById('ifr');
5
    var targetOrigin = 'http://b.com';  // 若写成'http://b.com/c/proxy.html'效果一样
6
                                        // 若写成'http://c.com'就不会执行postMessage了
7
    ifr.contentWindow.postMessage('I was there!', targetOrigin);
8
};
9
</script>

b.com/index.html中的代码：

1
<script type="text/javascript">
2
    window.addEventListener('message', function(event){
3
        // 通过origin属性判断消息来源地址
4
        if (event.origin == 'http://a.com') {
5
            alert(event.data);    // 弹出"I was there!"
6
            alert(event.source);  // 对a.com、index.html中window对象的引用
7
                                  // 但由于同源策略，这里event.source不可以访问window对象
8
        }
9
    }, false);
10
</script>

如何解决跨域`LocalStorage`#

通过window.postMessage,读写其他窗口的LocalStorage也成为了可能。下面是一个例子，主窗口写入iframe子窗口的LocalStorage。

1
window.onmessage = function(e){
2
  if(e.origin !== 'http://bbb.com'){
3
    return ;
4
 }
5
  var payload = JSON.parse(e.data);
6
  localStorage.setItem(payload.key,JSON.stringify(payload.data));
7
};

上面代码中，子窗口将父窗口发送来的消息，写入自己的LocalStorage。
父窗口发送消息的代码如下.

1
var win = document.getElementsByTagName('iframe')[0].contentWindow;
2
var obj = {name:'Jack'};
3
win.postMessage(JSON.stringify({key:'storage',data:obj}),'http://bbb.com');

加强版的子窗口接受消息的代码如下。

1
window.onmessage = function(e) {
2
  if (e.origin !== 'http://bbb.com') return;
3
  var payload = JSON.parse(e.data);
4
  switch (payload.method) {
5
    case 'set':
6
      localStorage.setItem(payload.key, JSON.stringify(payload.data));
7
      break;
8
    case 'get':
9
      var parent = window.parent;
10
      var data = localStorage.getItem(payload.key);
11
      parent.postMessage(data, 'http://aaa.com');
12
      break;
13
    case 'remove':
14
      localStorage.removeItem(payload.key);
15
      break;
16
  }
17
};

展开收起

加强版的父窗口发送消息代码如下:

1
var win = document.getElementsByTagName('iframe')[0].contentWindow;
2
var obj = { name: 'Jack' };
3
// 存入对象
4
win.postMessage(JSON.stringify({key: 'storage', method: 'set', data: obj}), 'http://bbb.com');
5
// 读取对象
6
win.postMessage(JSON.stringify({key: 'storage', method: "get"}), "*");
7
window.onmessage = function(e) {
8
  if (e.origin != 'http://aaa.com') return;
9
  // "Jack"
10
  console.log(JSON.parse(e.data).name);
11
};

如何解决`AJAX`的跨域#

同源政策规定，AJAX请求只能发给同源的网址，否则就报错。
除了架设服务器代理（浏览器请求同源服务器，再由后者请求外部服务），有三种方法规避这个限制。
- (1)JSONP
- (2)WebSocket
- (3)CORS

1) JSONP解决AJAX跨域问题#

JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。
首先，网页动态插入<script>元素，由它向跨源网址发出请求。

1
function addScriptTag(src) {
2
  var script = document.createElement('script');
3
  script.setAttribute("type","text/javascript");
4
  script.src = src;
5
  document.body.appendChild(script);
6
}
7

8
window.onload = function () {
9
  addScriptTag('http://example.com/ip?callback=foo');
10
}
11

12
function foo(data) {
13
  console.log('Your public IP address is: ' + data.ip);
14
};

上面代码通过动态添加<script>元素，向服务器example.com发出请求。注意，该请求的查询字符串有一个callback参数，用来指定回调函数的名字，这对于JSONP是必需的。
服务器收到这个请求以后，会将数据放在回调函数的参数位置返回。

1
foo({
2
  "ip": "8.8.8.8"
3
});

由于<script>元素请求的脚本，直接作为代码运行。这时，只要浏览器定义了foo函数，该函数就会立即调用。作为参数的JSON数据被视为JavaScript对象，而不是字符串，因此避免了使用JSON.parse的步骤。

2) 通过`webSocket`解决`AJAX`跨域#

WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。
下面是一个例子，浏览器发出的WebSocket请求的头信息（摘自维基百科）。

1
GET /chat HTTP/1.1
2
Host: server.example.com
3
Upgrade: websocket
4
Connection: Upgrade
5
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
6
Sec-WebSocket-Protocol: chat, superchat
7
Sec-WebSocket-Version: 13
8
Origin: http://example.com

上面代码中，有一个字段是Origin，表示该请求的请求源（origin），即发自哪个域名。正是因为有了Origin这个字段，所以WebSocket才没有实行同源政策。因为服务器可以根据这个字段，判断是否许可本次通信。如果该域名在白名单内，服务器就会做出如下回应。

1
HTTP/1.1 101 Switching Protocols
2
Upgrade: websocket
3
Connection: Upgrade
4
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
5
Sec-WebSocket-Protocol: chat

3) 通过`CORS`解决`AJAX`跨域#

CORS是跨源资源分享（Cross-Origin Resource Sharing）的缩写。它是W3C标准，是跨源AJAX请求的根本解决方法。相比JSONP只能发GET请求，CORS允许任何类型的请求。

3.1 定义#

CORS其实出现时间不短了，它在维基百科上的定义是：跨域资源共享（CORS）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。它是一个妥协，有更大的灵活性，但比起简单地允许所有这些的要求来说更加安全。而W3C的官方文档目前还是工作草案，但是正在朝着W3C推荐的方向前进。
简言之，CORS就是为了让AJAX可以实现可控的跨域访问而生的。

以往的解决方案#

以前要实现跨域访问，可以通过JSONP、Flash或者服务器中转的方式来实现，但是现在我们有了CORS。
CORS与JSONP相比，无疑更为先进、方便和可靠。
- 1.JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
- 2.使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
- 3.JSONP主要被老的浏览器支持，它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS（这部分会在后文浏览器支持部分介绍）。

详细内容#

要使用CORS，我们需要了解前端和服务器端的使用方法。
1.前端

以前我们使用Ajax，代码类似于如下的方式：
```
1
var xhr = new XMLHttpRequest();
2
xhr.open("GET", "/relativeHref", true);
3
xhr.send();
```
这里的“/relativeHref”是本域的相对路径。
如果我们要使用CORS，相关Ajax代码可能如下所示：

1
var xhr = new XMLHttpRequest();
2
xhr.open("GET", "http://blog.csdn.net/hfahe", true);
3
xhr.send();

请注意，代码与之前的区别就在于相对路径换成了其他域的绝对路径，也就是你要跨域访问的接口地址。
我们还必须提供浏览器回退功能检测和支持，避免浏览器不支持的情况。

1
function createCORSRequest(method, url) {
2
  var xhr = new XMLHttpRequest();
3
  if ("withCredentials" in xhr) {
4
    // 此时即支持CORS的情况
5
    // 检查XMLHttpRequest对象是否有“withCredentials”属性
6
    // “withCredentials”仅存在于XMLHTTPRequest2对象里
7
    xhr.open(method, url, true);
8
  } else if (typeof!= "undefined") {
9
    // 否则检查是否支持XDomainRequest，IE8和IE9支持
10
    // XDomainRequest仅存在于IE中，是IE用于支持CORS请求的方式
11
    xhr = new XDomainRequest();
12
    xhr.open(method, url);
13
  } else {
14
    // 否则，浏览器不支持CORS
15
    xhr = null;
16
  }
17
  return xhr;
18
}
19

20
var xhr = createCORSRequest('GET', url);
21
if (!xhr) {
22
  throw new Error('CORS not supported');
23
}

展开收起

原文链接http://blog.csdn.net/u013084331/article/details/51114288

MongoDB启动与连接

Fri, 06 Oct 2017 00:00:00 GMT

什么是`MongoDB`#

MongoDB是一个基于分布式文件存储的开源数据库系统
MongoDB 将数据存储为一个文档，数据结构由键值(key=>value)对组成。MongoDB 文档类似于 JSON 对象。字段值可以包含其他文档，数组及文档数组。

`MongoDB`安装#

`windows`安装#

Windows官方安装指南绿色版就是解压之后就可以用

mongodb32位绿色版 http://pan.baidu.com/s/1pLe3vM7
MongoDB64位绿色版 http://pan.baidu.com/s/1cMM9oq
mongo客户端绿色版 http://pan.baidu.com/s/1kUIQlUZ

`Mac`官方安装指南#

1.先安装homebrew
- Homebrew简称brew，是Mac OSX上的软件包管理工具，能在Mac中方便的安装软件或者卸载软件http://brew.sh/
- Homebrew的安装非常简单，打开终端复制、粘贴以下命令，回车，搞定
```
1
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
2.使用brew安装mongodb

1
brew install mongodb

1
sudo mkdir -p /data/db

如果提示输入密码请输入正确的密码

4.启动mongodb

1
sudo mongod &

`Mac`可视化工具可安装`Robomongo`#

mongodb启动与连接#

1.windows启动服务器端#

1. 找到mongodb安装目录,一般是 C:\Program Files\MongoDB 2.6 Standard\bin (这里我下载到了C:\Users\Gao\Downloads\数据库\MongoDB这个目录)
  Alt MongoDB安装目录
1. 按下Shift+鼠标右键,选择在此处打开命令窗口
1. 在除C盘外的盘符新建一个空目录,例如 D:\Mongodb\data(由于我的电脑没有分盘,所以我就建在C盘下了)
  Alt 新建data文件夹
- 在命令行中输入mongod —dbpath=刚创建的空目录,如
```
1
mongod --dbpath=C:\data
```
- 1. 注意：—dbpath后的值表示数据库文件的存储路径,而且后面的路径必须事先创建好，必须已经存在，否则服务开启失败
如果是windows32的系统用户，请加参数 —storageEngine=mmapv1

如 mongod --dbpath=C:\data --storageEngine=mmapv1
1. 再按回车键
  Alt 启动MongoDB服务器端
- 1. 如果出现waiting for connections on port 27017就表示启动成功,已经在27017端口上监听了客户端的请求
- 1. 注意：这个命令窗体绝对不能关,关闭这个窗口就相当于停止了mongodb服务
- 1. 如果mongoVUE客户端报错 “MongoDB.Bson.BsonObjectId”的类型初始值设定项引发异常
  解决方案如下：在window中打开功能里输入regedit,回车打开注册器。然后进入如下路径中 HKEY_LOCAL_MACHINE\system\CurrentControlSet\Control\Lsa\FipsAlgorithmPolicy 将enable设置为0即可。

2.启动客户端连接服务器#

1. 找到mongodb安装目录,一般是 C:\Program Files\MongoDB 2.6 Standard\bin
1. 按下Shift+鼠标右键,选择在此处打开命令窗口
  Alt MongoDB安装目录
1. 命令窗体中输入 mongo --host=127.0.0.1 或者 mongo 按回车键
1. 命令窗体中输入 db 按回车键可进入测试
  Alt MongoDB启动客户端连接服务器

备注：--host后的值表示服务器的ip地址,--host=127.0.0.1 表示的就是本地服务器,每次数据库都会默认连接test数据库

`MongoDB`基本概念#

数据库 MongoDB的单个实例可以容纳多个独立的数据库，比如一个学生管理系统就可以对应一个数据库实例
集合数据库是由集合组成的,一个集合用来表示一个实体,如学生集合
文档集合是由文档组成的，一个文档表示一条记录,比如一位同学张三就是一个文档
Alt MongoDB基本概念

JS对闭包的理解

Sun, 10 Sep 2017 00:00:00 GMT

当函数执行的时候，会形成一个私有的作用域，保护里面的私有变量不受外界干扰，我们把这种机制叫做“闭包”

闭包#

闭包是一种”机制”<函数执行形成私有的作用域>(不管销毁还是不销毁),保护了里面的私有变量不受外界的干扰.

然而,社会上很多人都认为”闭包”指的是<函数执行形成的那个不销毁的私有作用域才是闭包>.

1
var fn = (function () {
2
    var num = 12;
3
    return function () {
4
        console.log(++num);
5
    }
6
})();//->JS高阶编程技巧之一："惰性思想"

1、利用可以形成不销毁的私有的作用域的原理，把我们需要保存的内容，存储到这个不销毁的作用域中

2、避免全局变量之间的冲突，保护里面的变量不受外界的干扰 ->所有框架/类库的源码都是写在一个闭包函数中的,目的就是为了不和别人的代码冲突

1
var name = "china";
2
var age = 5000;
3
(function () {
4
    var name = "中国";
5
    var age = 100;
6
})();

`jQuery`#

1
(function (global, factory) {
2
    //<JS CODE>
3
    var jQuery = function () {
4

5
    };
6
    window.jQuery = window.$ = jQuery;//->让私有的变量在全局下依然可以使用,我们可以使用window.xxx=xxx来进行处理
7
    //->当前的这个作用域是不销毁的,因为函数里面的jQuery对应的地址被window下的jQuery和$给占用了
8
})();
9
jQuery();

使用闭包的注意点#

（1）由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。（2）闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（Object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

秒懂Vuejs、Angular、React原理和前端发展历史(转载)

Sun, 10 Sep 2017 00:00:00 GMT

前端程序发展的历史#

现在流行的框架：Vue、Angular、React，已经逐渐应用到各个项目和实际应用中，它们都是MVVM数据驱动框架系列的一种。

回顾一下前端发展的历史阶段,引用了廖雪峰老师网站总结的一段话:

1
在上个世纪的1989年，欧洲核子研究中心的物理学家Tim Berners-Lee发明了超文本标记语言（HyperText Markup Language），简称`HTML`，并在1993年成为互联网草案。从此，互联网开始迅速商业化，诞生了一大批商业网站。
2
最早的HTML页面是完全静态的网页，它们是预先编写好的存放在Web服务器上的html文件。
3
浏览器请求某个URL时，Web服务器把对应的html文件扔给浏览器，就可以显示html文件的内容了。
4
如果要针对不同的用户显示不同的页面，显然不可能给成千上万的用户准备好成千上万的不同的html文件，所以，服务器就需要针对不同的用户，动态生成不同的html文件。一个最直接的想法就是利用C、C++这些编程语言，直接向浏览器输出拼接后的字符串。这种技术被称为CGI：Common Gateway Interface。
5
很显然，像新浪首页这样的复杂的HTML是不可能通过拼字符串得到的。于是，人们又发现，其实拼字符串的时候，大多数字符串都是HTML片段，是不变的，变化的只有少数和用户相关的数据，所以，又出现了新的创建动态HTML的方式：ASP、JSP和PHP等——分别由微软、SUN和开源社区开发。
6
在以前：
7
在ASP中，一个asp文件就是一个HTML，但是，需要替换的变量用特殊的<%=var%>标记出来了，再配合循环、条件判断，创建动态HTML就比CGI要容易得多。
8
但是，一旦浏览器显示了一个HTML页面，要更新页面内容，唯一的方法就是重新向服务器获取一份新的HTML内容。如果浏览器想要自己修改HTML页面的内容，怎么办？那就需要等到1995年年底，Java被引入到浏览器。
9
有了Java后，浏览器就可以运行Java，然后，对页面进行一些修改。Java还可以通过修改HTML的DOM结构和CSS来实现一些动画效果，而这些功能没法通过服务器完成，必须在浏览器实现。

揭开MVVM原理#

Java操作HTML
至于 JS 如何在浏览器执行，这又是另外一个资深课题了（前端真的是只是庞杂），这里我们不做研究，有兴趣的可以自己去搜资料。我们只需要知道浏览器就是也 JS 执行容器，执行完之后，通过页面显示结果就行了，就像java需要编译器一样原理。
用Java在浏览器中操作HTML，也经历了若干发展阶段：我们利用【小北最帅】这个案例来展示

【第一阶段】#

是JS原生通过浏览器解析机制，它的原理是使用浏览器提供的原生API 结合JS语法，可以直接操作DOM，如：

1
  //HTML:
2
  <divid="name"style="color:#fff">前端你别闹</div><divid="age">3</div>
3
  //Java:
4
  var dom1 = document.getElementById('name');
5
  var dom2 = document.getElementById('age');
6
  dom1.innerHTML = '小北';
7
  dom2.innerHTML = '666';
8
  dom1.style.color = '#000000'; // css样式也可以操作
9
  //结果变成：
10
  <divid="name"style="color:#fff">小北</div><divid="age">'666</div>

【第二阶段】#

我用一个字总结就是懒，就是我们上一篇说的jQuery时代，由于原生API晦涩难懂，语法很长不好用，最重要的是要考虑各种浏览器兼容性，因为他们的解析标准都不一样，造成了，写一段效果代码要写很多的兼容语法，令人沮丧，所以jQuery的出现，迅速占领了世界。
上边的例子用 jQuery 是这样的

1
//HTML:
2
<divid="name"style="color:#fff">前端你别闹</div><divid="age">3</div>
3
//Java: jQuery 一句话就行
4
$('#name').text('小北好帅').css('color', '#000000');$('#age').text('666').css('color', '#fff');
5
//结果变成：
6
<divid="name"style="color:#fff">小北好帅</div><divid="age">666</div>

【第三阶段】#

MVC模式#

需要服务器端配合，Java可以在前端修改服务器渲染后的数据。
一句话就是所有通信都是单向的：也就是前期我们最常用的状态，提交一次反馈一次，通信一次相互制约。
比如：提交表单填写内容 → 点击提交 →业务逻辑处理 →存入数据库 → 刷新页面→服务器取数据库数据→渲染到客户端页面→ 展示上一次你提交的内容
MVC:
- 视图（View）：用户界面。
- 控制器（Controller）：业务逻辑
- 模型（Model）：数据保存
- 各部分之间的通信方式如下
  Alt MVC模式
  “MVC”
- View 传送指令到 Controller
- Controller 完成业务逻辑后，要求 Model 改变状态
- Model 将新的数据发送到 View，用户得到反馈
这个模式缺点是什么呢？
- 缺点一：它必须等待服务器端的指示，而且如果是异步模式的话，所有html节点、数据、页面结构都是后端请求过来。
  - 浏览器只作为一个解析显示容器，Model 作用几乎是废x，Model 层面做的很少几乎前端无法控制，你前端几乎是切图仔和做轮播图的工作/哭
- 缺点二：因为你前端渲染的页面结构，几乎是后端服务器包扎一堆数据一起发送过来，前端的你只需要用拼接字符串或者字符串拼接引擎
  - 比如Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等来做事，说白了纯苦力和重复工作居多，这也导致了，如果很多人认为前端并不重要，只负责美工和动作体验就好了。
- 缺点三：一发而动全身。数据、显示不分离！为什么这么说，因为如果业务逻辑要变，比如很简单的需求，你用jsp或者php 拼接出来的ajax数据页面，年龄这个字段我不需要了，把性别字段区分开，男的单独显示，女的单独显示，以前是一起显示到一个表的
  - 那么，后端先要sql查询把男、女数据分开，然后渲染字符串时候把年龄这个字段去除，然后把男女分开成2个table，然后再推送给前端接收。
  - 前端收到了，然后从新在渲染一遍，在加工一次页面甚至是展示动作效果。

【第四阶段】#

MVVM框架模式#

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯Java对象表示，View负责显示，两者做到了最大限度的分离。也就是我们常说的，前后分离，真正在这里得以实现
Alt MVVM模式
“MVVM”
它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然,model数据的变动，也自动展示给页面显示
把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
可能理论知识枯燥无味，那么我们还是实战派，来看代码不就好了吗？
- 还是刚才的【小北最帅】案例
- 由于数据驱动模式的精髓在于【数据】和【视图】分离，所以我们首先并不关心DOM结构，而是关心数据的展现。
- 最简单的数据存储方式是什么呢？显然不是mysql、数据库而是使用Java对象
```
1
//HTML: 这次我不关心你了，哼哼
2
//Java: JS基础对象/原始数据
3
varxiaobei = { name: '前端你别闹', age: 3，
4
tag：'干货'
5
};
6
//结果是：
7
name:前端你别闹
8
age:3
9
tag:干货
```
假设：我们把变量xiaobei 看作Model数据，把HTML某些DOM节点看作View，并意淫它们已经通过某种手段被关联起来了。下面我们把name 从”前端你别闹” 改为 “小北”，把显示的age从 “3” 改为 “666”，tag变成 “最帅!” 按照以前我们肯定操作DOM节点，而现在我们只需要修改Java对象：
```
1
Java:// JS基础对象// 改变的数据
2
    varxiaobei = { name: '小北', age: 666，
3
    tag：'最帅'
4
    };
5
//结果是：
6
    name:小北
7
    age:666
8
    tag:最帅
```

通过实验和理论，小伙伴惊呆了，我们只要改变Java对象的内容，就会导致DOM结构作出对应的变化！这让我们的关注点从如何操作DOM变成了如何改变Java对象的状态，而操作Java对象比获取和操作DOM简单了一个地球的距离！这也是MVVM的核心思想：关注Model的变化，让MVVM框架利用自己的机制去自动更新DOM，从而把开发者从操作DOM的繁琐中解脱出来！也就是所谓的数据 - 视图分离，数据驱动视图，视图不影响数据，再也不用管繁琐的DOM结构操作了，世界顿时清净，完美！

原文链接:http://www.sohu.com/a/133415335_355137?qq-pf-to=pcqq.c2c

JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈转载

Sat, 09 Sep 2017 00:00:00 GMT

一、toString()是一个怎样的方法？它是能将某一个值转化为字符串的方法。然而它是如何将一个值从一种类型转化为字符串类型的呢？通过下面几个例子，我们便能获得答案：

1.将boolean类型的值转化为string类型

1
console.log(true.toString());//"true"
2
console.log(false.toString());//"false"

2.将string类型按其字面量形式输出

1
var str = "test123y";
2
console.log(str.toString());//"test123y"

3.将Object类型转化成string类型（JavaScript原生的Array类型、Date类型、RegExp类型以及Number、Boolean、String这些包装类型都是Object的子类型）：自定义Object类型（没有重新定义toString方法）

1
var obj = {name:"Tom", age:18};
2
console.log(obj.toString());//"[object Object]"此时调用的是从Object继承来的原始的toString()方法

接下来的三个例子都是以重写的方式实现了toString()方法；
- 1.Array类型
```
1
var arr = ["tom",12,"rose",18];
2
console.log(arr.toString());//"tom,12,rose,18"
```
  - 2.RegExp类型
```
1
var patten = new RegExp("\\[hbc\\]at", "gi");
2
console.log(patten.toString());//"/\[hbc\]at/gi"
```
  - 3.Date类型
```
1
var date = new Date(2014,02,26);//注意这种格式创建的日期，其月份是3月
2
console.log(date.toString());//"Wed Mar 26 2014 00:00:00 GMT+0800"输出格式因浏览器不同而不同，此为firefox的输出格式；
```
  - 4.Number类型也是以重写的方式实现toString()方法的，请看以下例子：
    - (1)它可以接受一个整数参数，并将调用这个方法的数值转化成相应进制的字符串
      1 var num = 16; 2 console.log(num.toString(2));//10000 二进制 3 console.log(num.toString(8));//20 八进制 4 console.log(num.toString(16));//10 十六进制 5 console.log(num.toString(5));//31 虽然没有五进制，但是这样传参是可以被toString()方法接受的
    - (2)再看下面的代码
      1 console.log(1.toString());//这种写法会报错语法错误，但是下面的写法都是合法的； 2 console.log((1).toString());//"1" 3 console.log(typeof (1).toString());//string 4 console.log(1..toString());//"1" 5 console.log(typeof (1).toString());//string 6 console.log(1.2.toString());//"1" 7 console.log(typeof (1).toString());//string
      - 这是因为javascript引擎在解释代码时对于“1.toString()”认为“.”是浮点符号，但因小数点后面的字符是非法的，所以报语法错误；
      - 而后面的“1..toString()和1.2.toStirng()”写法，javascript引擎认为第一个“.”小数点，的二个为属性访问语法，所以都能正确解释执行；
      - 对于“(1).toStirng()”的写法，用“()”排除了“.”被视为小数点的语法解释，所以这种写法能够被解释执行；
      - (3)纯小数的小数点后面有连续6或6个以上的“0”时，小数将用e表示法进行输出；
      1 var num = 0.000006;//小数点后面有5个“0” 2 console.log(num.toString());//"0.000006" 3 var num = 0.0000006;//小数点后面有6个“0” 4 console.log(num.toString());//"6e-7"
      - (4)浮点数整数部分的位数大于21时，输出时采用e表示法；
      1 var num = 1234567890123456789012; 2 console.log(num.toString());//"1.2345678901234568e+21"
  - 看到这里大家难免会有些疑问，这些基本的数据类型的值都是常量，而常量是没有方法的，为什么能够调用方法呢？答案是这样的，五种基本类型除了null、undefined以外都有与之对应的特殊的引用类型——包装类型。当代码被解释执行时，底层会对基本类型做一个类型转换，即将基本类型转换成引用类型，这样就可以调用相应引用类型有权访问到的方法。
二、toString()方法定义在何处？
运行以下代码

1
var pro = Object.prototype;
2
var pr = pro.__proto__;//ie11之前版本不支持该属性
3
console.log(typeof pro);//"object"
4
console.log(String(pro));//"[object Object]"
5
console.log(pro.hasOwnProperty("toString"));//true
6
console.log(typeof pr);//"object"
7
console.log(String(pr));//"null"
8
console.log(pr.hasOwnProperty("toString"));//报错

由此可知，toString()定义在Object.prototype上；
三、使用Object.prototype上的原生toString()方法判断数据类型，使用方法如下：

Object.prototype.toString.call(value)

1.判断基本类型：

1
Object.prototype.toString.call(null);//”[object Null]”
2
Object.prototype.toString.call(undefined);//”[object Undefined]”
3
Object.prototype.toString.call(“abc”);//”[object String]”
4
Object.prototype.toString.call(123);//”[object Number]”
5
Object.prototype.toString.call(true);//”[object Boolean]”

2.判断原生引用类型

函数类型

1
Function fn(){console.log(“test”);}
2
Object.prototype.toString.call(fn);//”[object Function]”

日期类型

1
var date = new Date();
2
Object.prototype.toString.call(date);//”[object Date]”

数组类型

1
var arr = [1,2,3];
2
Object.prototype.toString.call(arr);//”[object Array]”

正则表达式

1
var reg = /[hbc]at/gi;
2
Object.prototype.toString.call(arr);//”[object Array]”

自定义类型

1
function Person(name, age) {
2
    this.name = name;
3
    this.age = age;
4
}
5
var person = new Person("Rose", 18);
6
Object.prototype.toString.call(arr); //”[object Object]”

很明显这种方法不能准确判断person是Person类的实例，而只能用instanceof 操作符来进行判断，如下所示：

1
console.log(person instanceof Person);//输出结果为true

3.判断原生JSON对象：

1
var isNativeJSON = window.JSON && Object.prototype.toString.call(JSON);
2
console.log(isNativeJSON);//输出结果为”[object JSON]”说明JSON是原生的，否则不是；

注意：Object.prototype.toString()本身是允许被修改的，而我们目前所讨论的关于Object.prototype.toString()这个方法的应用都是假设toString()方法未被修改为前提的。
本文所讨论内容多参考于《JavaScrip高级编程》第三版，另因个人水平有限，如有描述不当之处还请高手指正。

原文链接http://www.jianshu.com/p/5c6503279685

React.createClass 和 extends Component 的区别(转载)

Sat, 09 Sep 2017 00:00:00 GMT

createClass本质上是一个工厂函数，extends的方式更加接近最新的ES6规范的class写法。两种方式在语法上的差别主要体现在方法的定义和静态属性的声明上。createClass方式的方法定义使用逗号,隔开，因为creatClass本质上是一个函数，传递给它的是一个Object；而class的方式定义方法时务必谨记不要使用逗号隔开，这是ES6 class的语法规范。

`React.createClass`和`extends Component`的区别主要在于：#

语法区别
propType 和 getDefaultProps
状态的区别
this区别
Mixins

1.语法区别#

React.createClass

1
import React from 'react';
2
const Contacts = React.createClass({
3
  render() {
4
    return (
5
      <div></div>
6
    );
7
  }
8
});
9
export default Contacts;

React.Component

1
import React from 'react';
2

3
class Contacts extends React.Component {
4
  constructor(props) {
5
    super(props);
6
  }
7
  render() {
8
    return (
9
      <div></div>
10
    );
11
  }
12
}
13

14
export default Contacts;

后一种方法使用ES6的语法，用constructor构造器来构造默认的属性和状态。

2.`propType`和`getDefaultProps`#

React.createClass: 通过proTypes对象和getDefaultProps()方法来设置和获取props

1
import React from 'react';
2

3
const Contacts = React.createClass({
4
  propTypes: {
5
    name: React.PropTypes.string
6
  },
7
  getDefaultProps() {
8
    return {
9

10
    };
11
  },
12
  render() {
13
    return (
14
      <div></div>
15
    );
16
  }
17
});
18

19
export default Contacts;

展开收起

React.Component：通过设置两个属性propTypes和defaultProps

1
import React form 'react';
2
class TodoItem extends React.Component{
3
    static propTypes = { // as static property
4
        name: React.PropTypes.string
5
    };
6
    static defaultProps = { // as static property
7
        name: ''
8
    };
9
    constructor(props){
10
        super(props)
11
    }
12
    render(){
13
        return <div></div>
14
    }
15
}

展开收起

3.状态的区别#

React.createClass：通过getInitialState()方法返回一个包含初始值的对象

1
import React from 'react';
2
   let TodoItem = React.createClass({
3
       // return an object
4
       getInitialState(){
5
           return {
6
               isEditing: false
7
           }
8
       }
9
       render(){
10
           return <div></div>
11
       }
12
   })

React.Component：通过constructor设置初始状态

1
import React from 'react';
2
  class TodoItem extends React.Component{
3
      constructor(props){
4
          super(props);
5
          this.state = { // define this.state in constructor
6
              isEditing: false
7
          }
8
      }
9
      render(){
10
          return <div></div>
11
      }
12
  }

4.this区别#

React.createClass：会正确绑定this

1
import React from 'react';
2

3
const Contacts = React.createClass({
4
  handleClick() {
5
    console.log(this); // React Component instance
6
  },
7
  render() {
8
    return (
9
      <div onClick={this.handleClick}></div>//会切换到正确的this上下文
10
    );
11
  }
12
});
13

14
export default Contacts;

React.Component：由于使用了 ES6，这里会有些微不同，属性并不会自动绑定到 React 类的实例上。

1
import React from 'react';
2
class TodoItem extends React.Component{
3
  constructor(props){
4
    super(props);
5
  }
6
  handleClick(){
7
    console.log(this); // null
8
  }
9
  handleFocus(){  // manually bind this
10
    console.log(this); // React Component Instance
11
  }
12
  handleBlur: ()=>{  // use arrow function
13
    console.log(this); // React Component Instance
14
  }
15
  render(){
16
    return <input onClick={this.handleClick}
17
      onFocus={this.handleFocus.bind(this)}
18
      onBlur={this.handleBlur}/>
19
  }
20
}

展开收起

我们还可以在 constructor 中来改变 this.handleClick 执行的上下文，这应该是相对上面一种来说更好的办法，万一我们需要改变语法结构，这种方式完全不需要去改动 JSX 的部分：

1
import React from 'react';
2

3
class Contacts extends React.Component {
4
  constructor(props) {
5
    super(props);
6
    this.handleClick = this.handleClick.bind(this);
7
  }
8
  handleClick() {
9
    console.log(this); // React Component instance
10
  }
11
  render() {
12
    return (
13
      <div onClick={this.handleClick}></div>
14
    );
15
  }
16
}
17

18
export default Contacts;

展开收起

5.`Mixins`#

如果我们使用 ES6 的方式来创建组件，那么 React mixins 的特性将不能被使用了。

1
React.createClass：使用 React.createClass 的话，我们可以在创建组件时添加一个叫做 mixins 的属性，并将可供混合的类的集合以数组的形式赋给 mixins。
2

3
import React from 'react';
4
let MyMixin = {
5
    doSomething(){}
6
}
7
let TodoItem = React.createClass({
8
    mixins: [MyMixin], // add mixin
9
    render(){
10
        return <div></div>
11
    }
12
})

原文链接https://segmentfault.com/a/1190000005863630

模块化与组件化

Sat, 09 Sep 2017 00:00:00 GMT

组件化和模块化的中心思想都是分而治之。目的都是将一个庞大的系统拆分成多个组件或者说是模块。

模块化的定义#

1
Modular programming is a software design technique that emphasizes separating the functionality of a program into independent, interchangeable modules, such that each contains everything necessary to execute only one aspect of the desired functionality.

简单来说,模块化就是将一个程序按照其功能做拆分，分成相互独立的模块，以便于每个模块只包含与其功能相关的内容。模块我们相对熟悉,比如登录功能可以是一个模块,搜索功能可以是一个模块,汽车的发送机也可是一个模块.

组件化的定义#

1
Component-based software engineering (CBSE), also known as component-based development (CBD), is a branch of software engineering that emphasizes the separation of concerns in respect of the wide-ranging functionality available throughout a given software system. It is a reuse-based approach to defining, implementing and composing loosely coupled independent components into systems. This practice aims to bring about an equally wide-ranging degree of benefits in both the short-term and the long-term for the software itself and for organizations that sponsor such software.

组件化就是基于可重用的目的，将一个大的软件系统按照分离关注点的形式，拆分成多个独立的组件，主要目的就是减少耦合.
- 一个独立的组件可以是一个软件包、web服务、web资源或者是封装了一些函数的模块。比如汽车的发动机是一个模块,也是一个组件,再或者前端中的一个日历控件是一个模块,也一个组件.这样，独立出来的组件可以单独维护和升级而不会影响到其他的组件.

JS/CSS模块化开发#

分而治之是软件工程中的重要思想,是复杂系统开发和维护的基石,这点放在前端开发中同样适用.在解决了基本开发运行效率问题之后,前端团队开始思考维护效率,模块化是目前前端最流行的分治手段.
模块化开发的最大价值应该是分治.
不管你将来是否要复用某段代码,你都有充分的理由将其分治为一个模块

组件化开发#

分治的确是非常重要的工程优化手段.前端作为一种GUI软件,光有JS/CSS的模块化还不够,对于UI组件的分治也有着同样迫切的需求
- 1.页面上的每个独立的可是/可交互区域都可以视为一个组件
- 2.每个组件对应一个工程目录,组件所需的各种资源都在这个目录下就近维护
- 3.由于组件具有独立性,因此组件与组件之间可以自由组合
- 4.页面只不过是组合的容器,负责组合组件形成功能完整的界面
- 5.当不需要某个组件,或者想要替换组件时,可以整个目录删除替换

组件化vs模块化#

组件和模块是一对容易混淆的名词,也常常被用来相互替换,两者是否有差异往往取决于专业背景、所在领域、以及视角。从设计上来看,组件强调复用,模块强调职责(内聚、分离),或者说组件是达到可复用要求的模块
- 模块化强调的是拆分，无论是从业务角度还是从架构、技术角度，模块化首先意味着将代码、数据等内容按照其职责不同分离，使其变得更加容易维护、迭代，使开发人员可以分而治之。
- 组件化则着重于可重用性，不管是界面上反复使用的用户头像按钮，还是处理数据的流程中的某个部件，只要可以被反复使用，并且进行了高度封装，只能通过接口访问，就可以称其为“组件”。

参考网址:http://blog.csdn.net/dd864140130/article/details/53645290

getter&setter

Tue, 05 Sep 2017 00:00:00 GMT

一般在书上看到都解释都是把成员变量直接暴露在外不符合OOP的封装性原则，不安全，应该使用getter和setter方法来取值和赋值。但是没有解释为什么不符合OOP的封装性原则，为什么不安全，一个成员变量不就是取值和赋值这么两个操作吗，还能干什么，暴露出来又怎么样？#

的确可以暴露，如果
- 1. 所有内外代码都是你自己写；
- 1. 这个模块再也不改了；
- 1. 不会继承它，或者继承但不改变语义。
David John Wheeler有一句名言：“All problems in computer science can be solved by another level of indirection(翻译:“计算机科学中的所有问题都可以通过另一种间接方式来解决).”getter、setter就是个很好的中间层。
直接摘录stackoverflow上一个不错的总结：
oop - Why use getters and setters?
- 1.这两个方法可以方便增加额外功能（比如验证）。
- 2.内部存储和外部表现不同。
- 3.可以保持外部接口不变的情况下，修改内部存储方式和逻辑。
- 4.任意管理变量的生命周期和内存存储方式。提供一个debug接口。
- 5.能够和模拟对象、序列化乃至WPF库等融合。
- 6.允许继承者改变语义。
- 7.可以将getter、setter用于lambda表达式。（大概即作为一个函数，参与函数传递和运算）
- 8.getter和setter可以有不同的访问级别。
lambda表达式
Lambda 表达式”(lambda expression)是一个匿名函数，Lambda表达式基于数学中的λ演算得名，直接对应于其中的lambda抽象(lambda abstraction)，是一个匿名函数，即没有函数名的函数。Lambda表达式可以表示闭包（注意和数学传统意义上的不同）。
- lambda ['læmdə] 希腊字母的第11个λ
- expression [ɪkˈspreʃn] 表达
- abstraction [əb'strækʃ(ə)n] 抽象概念

以下为转载#

Compiling the list up here at the top of what seemed winners to me, from the viewpoint of a Java web dev:(从Java web开发人员的角度来看，在我看来是赢家的列表上面列出了这个列表:)

1.When you realize you need to do more than just set and get the value, you don’t have to change every file in the codebase.当您意识到您需要做的不仅仅是设置和获取值时，您不必更改代码库中的每个文件。
2.You can perform validation here.您可以在这里执行验证。
3.You can change the value being set.您可以更改设置的值。
4.You can hide the internal representation. getAddress() could actually be getting several fields for you.您可以隐藏内部表示。getAddress()实际上可以为您获取多个字段。
5.You’ve insulated your public interface from changes under the sheets.您已经将您的公共接口与表单下的更改隔离了。
6.Some libraries expect this. Reflection, serialization, mock objects.一些图书馆预计。反射,序列化,模拟对象。
7.Inheriting this class, you can override default functionality.继承这个类，您可以覆盖默认的功能。
8.You can have different access levels for getter and setter.对于getter和setter，您可以有不同的访问级别。
9.Lazy loading.延迟加载；懒装载；懒加载
10.People can easily tell you didn’t use Python.人们可以很容易地告诉您，您没有使用Python。

参考链接#

JS函数内部的[[scope]]属性

Tue, 05 Sep 2017 00:00:00 GMT

`[[scope]]`#

函数内部的[[scope]]属性是虚拟出来的一个属性，我们实际访问时访问不到这个属性的，这个属性是为了让我们更好的理解函数，虚拟出来的一个属性。

1
var fun1,fun2;
2
function foo() {
3
    var x = 10;
4
    fun1 = function () {
5
        console.log(++x);//11  x=11
6
    };
7
    fun2 = function () {
8
        console.log(--x);//10  x=10
9
    }
10
}
11
foo();   // 初始化了fun1,fun2函数
12
fun1();  // 11
13
fun2();  // 10

产生这个情况的原因是<在同一父作用域中的闭包共同同一个>[[scope]]属性

1
var x = 10;
2
function foo () {
3
    console.log(x);
4
}
5
foo(); // 10
6
function fun () {
7
    var x = 20;
8
    var foo1 = foo;
9
    foo1();   // 10
10
}
11
fun();

是10的原因就是在复制函数的时候，复制后的函数与复制前的函数引用的是同一个[[scope]]属性，由于foo的[[scope]]属性中的x是保存在函数父作用域链中的，这个也就是指的全局的变量对象（也就是全局变量）中的x，foo1中[[scope]]属性与foo的相同，所以foo1在执行创建的scope，只有foo1内部的[[scope]]属性（也就是foo内部的[[scope]]属性），所以在查找原型链时，foo1作用域链就直接查找到了全局对象中的x属性，所以会返回10。
[[Scope]]和执行期上下文虽然保存的都是作用域链，但不是同一个东西
[[Scope]]属性是函数创建时产生的，会一直存在;而执行上下文在函数执行时产生，函数执行结束便会销毁
伪代码:foo函数创建产生[[Scope]]对象

1
foo.[[Scope]] = {
2
    GO: {
3
        this: window ,
4
        window:... ,
5
        document: ... ,
6
        a: undefined, //预编译阶段还不知道a的值是多少，执行过程中会修改
7
        foo: function(){...},
8
        ......
9
    }
10
}

详细了解推荐地址:http://www.2cto.com/kf/201312/263748.html

JS正则基础

Tue, 05 Sep 2017 00:00:00 GMT

正则的作用#

正则是来处理复杂字符串的

1.正则的匹配#

test返回值=>true,false

2.正则的捕获#

把匹配内容找出来,exec方法

1
var reg=/9/g;

正则的组成#

1.元字符,写在//中间的全是元字符
2.修饰符写在//后面
- g(全局匹配),i(忽略大小写),m(换行匹配) 注意<一个元字符只能匹配一个字符>
1-1.特殊意义的元字符
1. \转义字符,一般都是把具有特殊意义的字符变成仅仅是本身意思的字符

1
var str='I\'m a person';
2
    var reg=/./;
3
    reg.test(str);//true
4
    var reg=/\./;
5
    reg.test("1.1");//true

1. ^以什么什么开始

1
var reg=/^1/;
2
    reg.test("123445464");//true
3
    reg.test("0001");//false

1. $以什么什么结尾

1
var reg=/m$/;
2
reg.test("mq");//false
3
reg.test("qm");//true

应用

1
var reg=/^6$/;//只匹配"6"
2
var reg=/^\d$/;//只匹配一个0-9中的任意一位数的字符串

1. \d匹配0-9中任意一个字符
1. \D 除了\d以外任意一个字符
1. \w 匹配0-9,a-z,A-Z,_这63个中的任意一个
1. \W 匹配除了\w以外的任意一个
1. \n 匹配一个换行符

1
var str="abc\nefd";
2
console.log(str);

1. \s 匹配一个空白符(空格制表符换页符)
1. \S匹配除了\s以外的任意一个字符
1. \b匹配一个边界
1. \B匹配一个非边界
1. . 除了\n以外的任意一个字符

1
var reg=/\d\w/;
2
reg.test("1.2");//false
3
reg.test("1-2");//false
4
reg.test("1");//false
5
reg.test("1w");//true

1
var reg=/^\s\w\s$/;//字符串length是三
2
reg.test(" w ");
3
var reg=/^\s\s\s$/;// "   "

1
var reg=/\baa\B/;
2
reg.test("a aa a aaa");//true

1-2. 量词元字符(量词元字符一定要写在元字符的后面)
1. *前面的元字符出现0到多次
1. +前面的元字符出现1到多次
1. ?前面的元字符出现0次或者1次
1. {number} 前面的元字符出现number次
1. {number,} 前面的元字符出现number到多次
1. {number,m} 前面的元字符出现number到m次

1
var reg=/\d*/;
2
reg.test("");//true
3
reg.test("1");//true
4
reg.test("111");//true
5
reg.test("wwww...");//true
6

7
var reg=/^\w{4}1+$/;//length>=5
8
reg.test("111111");//true
9
reg.test("abcd2");//false
10
reg.test("121221");//false
11

12
var reg=/^1\d{10}$/;

1-3.中括号[]
1. x|y x或y中的一个
1. [xyz] xyz中的一个
1. [^xyz] 不是xyz中的任意一个
1. [a-z] a-z中的任意一个

在中括号中除了上面说的具有特殊意义的字符都只是代表本身的意思,但是转义字符\仍然是转义

1
var reg=/^[\d.]$/;//字符串的length=1
2
reg.test("q");//false
3
reg.test("1.");//false
4
reg.test(".");//true

在没有小括号的情况下,|最后运算

1
var  reg=/^10|20$/;//以10开头 或者 以20结尾
2
reg.test("1000D");//true
3
reg.test("00020");//true
4
reg.test("10201020");//true
5
var reg=/^(10|20)$/;//"10" "20"   以10开头结尾  或者  以20开头结尾
6

7
var reg=/^[1020]$/;//"1" "0" "2"
8
var reg=/^[10-20]$/;//"1" "0-2" "0"
9
var reg=/^[16-20]$/;//不对的

举例
1.21-26的正则

1
var reg=/^2[1-6]$/;

2.18-75的正则
可以将18-75差分为<18-19>,20-69 70-75

1
var reg=/^(1[8-9]|[2-6]\d|7[0-5])$/;

3.在正则中小括号表示分组
作用:
- 1)改变优先级先计算括号里面的
- 2)表示一个小分组例如:\number ，表示第number个分组匹配的内容

1
var reg=/^(\w)(\w{2})\2\1$/;
2
reg.test("_dcdc_")

ios和android 浏览器适配问题总结

Sun, 03 Sep 2017 00:00:00 GMT

1.防止手机中网页放大和缩小#

1
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

2.安卓浏览器看背景图片,有些设备会模糊?#

用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？
- 经过研究,发现是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960640分辨率，在网页里只显示了480320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。
- 例如一个div的宽高是100，背景图必须得宽高是200，然后background-size:contain;这样显示出来的图片就比较清晰了。
```
1
background:url(../images/icon/all.png) no-repeat center center;
2
-webkit-background-size:50px 50px;
3
background-size: 50px 50px;
4
display:inline-block;
5
width:100%;
6
height:50px;
```

3.一些情况下对非可点击元素(如label/span)监听click事件，ios下不会触发#

解决方案:css增加cursor;

4.在ios和andriod中,audio元素和video元素无法自动播放#

这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路<先通过用户> touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。

1
document.addEventListener('touchstart',function() {
2
    document.getElementsByTagName('audio')[0].play();
3
    document.getElementsByTagName('audio')[0].pause();
4
});

5.fixed定位缺陷#

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位, android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 , ios4下不支持position;
解决方案<可用iscroll插件解决这个问题>

6.Input的placeholder会出现文本位置偏上的情况#

PC端设置line-height等于height能够对齐，而移动端仍然是偏上
解决方案:设置line-height;

7.圆角bug#

某些Android手机圆角失效
解决方案

1
background-clip:padding-box;

8.IOS中input键盘事件keyup、keydown、keypress支持不是很好#

问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻响应keyup事件，只有在通过删除之后才能相应！
解决办法<可以用html5的oninput事件去代替keyup>,然后就达到类似keyup的效果！

1
<input type="text" id="testInput">
2
<script type="text/javascript">
3
document.getElementById('testInput').addEventListener('input',function(e){
4
    var value = e.target.value;
5
});
6
</script>

9.部分机型存在type为search的input,自带close按钮样式修改方法;#

有些机型的搜索input控件会自带close按钮(一个伪元素)，而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为:

1
#Search::-webkit-search-cancel-button{
2
    display:none;
3
}

如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

10.手机浏览器独有的四个事件#

onTouchmove,ontouchend,ontouchstart,ontouchcancel

11.为什么要用Zepto?#

jquery适用于PC端桌面环境，桌面环境更加复杂，jquery需要考虑的因素非常多，尤其表现在兼容性上面，相对于PC端，移动端的发展都远不及PC端,手机上的带宽永远比不上pc端。pc端下载jquery到本地只需要1~3秒（90+K），但是移动端就慢了很多，2G网络下你会看到一大片空白网页在加载，相信用户第二次就没打开的欲望了。zepto解决了这个问题，只有不到10K的大小，2G网络环境下也毫无压力，表现不逊色于jquery。

IOS移动端click事件300ms的延迟响应#

详解地址https://gaodaxiu0406.github.io/2017/07/28/%E7%A7%BB%E5%8A%A8%E7%AB%AFclick300-380ms%E5%BB%B6%E8%BF%9F%E9%97%AE%E9%A2%98/,这是之前做的关于这个问题的详细讲解地址

点击穿透问题,input、select、a等元素可以被点击和focus#

这个在特定需求下才会有，因此如果没有类似问题的可以不看。首先需求是浮层操作，在手机上被遮罩的元素依然可以获取focus、click、change)，有两种解决方案：
- 1.是通过层显示以后加入对应的class名控制，截断显示层下方可获取焦点元素的事件获取
- 2.是通过将可获取焦点元素加入的disabled属性，也可以利用属性加dom锁定的方式（disabled的一种变换方式）

vertical-align

Fri, 01 Sep 2017 00:00:00 GMT

vertical-align#

改变基线对齐方式
- vertical-align: top; 顶部对齐
- vertical-align: bottom; 底部对齐
- vertical-align: middle; 中部对齐

值	描述
长度	通过距离升高（正值）或降低（负值）元素。‘0cm’等同于’baseline’
百分值 – %	通过距离（相对于1line-height1值的百分大小）升高（正值）或降低（负值）元素。‘0%‘等同于’baseline’
baseline	默认。当前元素的基线与父元素的基线对齐。
sub	降低元素的基线到父元素合适的下标位置。
super	升高元素的基线到父元素合适的上标位置。
top	所有平级元素,去找最高(高度最高)元素的顶部进行对齐
text-top	把元素的顶端与父元素内容区域的顶端对齐。
middle	所有平级元素,去找最高(高度最高)元素的中部进行对齐
bottom	所有平级元素,去找最高(高度最高)元素的底部进行对齐
text-bottom	把元素的底端与父元素内容区域的底端对齐。
inherit	采用父元素相关属性的相同的指定值

浏览器支持#

所有浏览器都支持 vertical-align 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。

深入理解line-height与vertical-align推荐地址:http://www.cnblogs.com/xiaohuochai/p/5271217.html

CSS盒子模型(border画三角形)及常见兼容问题解决方案

Mon, 21 Aug 2017 00:00:00 GMT

每一个元素在html中都是一个盒子,用来装其他盒子或者是内容
可以将html页面看做是一个仓库,仓库中从上到下摆了很多箱子,易碎品(盒子和盒子之间要有间距内容和盒子之间要有填充盒子本身要有厚度)

宽高属性#

1.height: 100%;
- 指的是继承父级元素内容的高度
2.width: 100%;
- 指的是继承父级元素内容的宽度

特性#

1.父子关系的时候,在设置margin值的时候,一般只设置上和左,不会设置下和右
2.盒子自身的宽度是由左侧边框的宽度+左侧内边距+内容的宽度+右侧内边距+右侧边框的宽度:

1
ALLwidth=(border-left-width)+(padding-left)+width+(padding-right)+(border-right-width)

padding和margin#

1
padding:1px 2px 3px 4px;//上 右 下 左
2
    //top right bottom left
3
padding:1px 2px 3px;//上 左右 下
4
    //top left/right bottom
5
padding:1px 2px;//上下 左右
6
    //top/bottom left/right

border#

1
border-top-width: 1px; //上边框的宽度
2
border-top-style: solid; //上边框的样式
3
border-top-color: red; //上边框的颜色
4
border-color:red green yellow pink;//上 右 下 左
5
//上边框红色 右边框绿色 下边框黄色 左边框粉色
6
border-color:red green yellow;//上 左右 下
7
//上边框红色 左右边框绿色 下边框黄色
8
border-color:red green;//上下 左右
9
//上下边框红色 左右边框绿色
10

11
//合并缩写设置:
12
border-top:1px solid pink;//上边框1px 实线 粉色
13
border-bottom:1px solid pink;
14
border-right:1px solid pink;
15
border-left:1px solid pink;
16
border:1px solid pink;

展开收起

利用border画三角形#

1
<style>
2
    div{
3
        border:100px solid/* red*/;
4
        /*border-color: yellow red blue pink;*/
5
        border-color: black transparent transparent;
6
        /*transparent透明的*/
7
        width: 0;
8
        }
9
</style>

Alt 伪元素选择器

“利用border画三角形”

常见问题解决方案#

1.margin支持负值#

margin-left和margin-top为负值的时候跑出浏览器的部分会被吃掉,不会撑开整个页面.

2.margin-top的传递问题#

如果父级没有padding-top或border-top值得时候,子元素设置margin-top值,会将这个值传递给父元素

1
<style>
2
    html,body,div{
3
        padding: 0;
4
        margin: 0;
5
        background: blue;
6
    }
7
    .box3{
8
        width: 300px;
9
        height: 300px;
10
        background-color: green;
11
    }
12
    .parent{
13
        width: 200px;
14
        height: 200px;
15
        background-color: red;
16
    }
17
    .son{
18
        width: 100px;
19
        height: 100px;
20
        background-color: yellow;
21
        /*margin-top: 20px;*/
22
    }
23
</style>
24
<div class="box3">
25
    <div class="parent">
26
        <div class="son"></div>
27
    </div>
28
</div>

展开收起

此时<在ie5>~11,以及谷歌浏览器中的显示都是一致的,如下图(图片以IE浏览器截图为主)
Alt margin-top传递问题

Alt margin-top传递问题

当给子元素.son设置margin-top<20px>;值后
- IE5~7中并没有出现margin值的传递问题(IE7同IE5,这里就没有截图了)
  Alt margin-top传递问题
- IE8~11以及谷歌中均出现margin-top值传递问题
  Alt margin-top传递问题

解决方法#

方法一) 给父级元素一个属性,`overflow:hidden;`#

1
- 弊端:
2
- `overflow:hidden;`有溢出隐藏的含义,若给父级元素添加这个属性,子级元素超出父级盒子部分将不能显示,例如子级元素的阴影

方法二) 将子级元素的`margin-top`值去掉,改成父级元素的`padding-top`值(建议使用这个方法)#

但是此方法也有弊端:
- IE5中父级盒子的高度并没有改变
  Alt margin-top传递问题
- IE7~11及谷歌浏览器中,父级盒子的高度都增加了20px;
  Alt margin-top传递问题

方法三) 给父级元素上添加一个透明的`border`处理#

弊端:
- 在IE5~7中确实解决了问题
  Alt margin-top传递问题
- 但是在IE8~11及谷歌浏览器中仍然存在margin-top的传递问题
  Alt margin-top传递问题

3.`margin-left`/`margin-right` 在ie6中会双倍#

当元素浮动的时候,有左右的外边距,有时候ie6会出现双倍边距的问题

解决方案<解决双边距这个方法叫css> hack#

方案一). 给这个元素添加`overflow:hidden;`#

方案二). 写ie6的兼容方式,例如:#

1
div{
2
float:left;
3
margin-left:10px !important;
4
_margin-left:5px;
5
<!-- 当浏览器是ie6的时候 读取_margin-left:5px;这句话 -->
6
}

注意:!important出现在css里面的时候,这个属性会覆盖掉所有之前设置的样式权重最大,比id选择器还大

overflow盒子内容多余部分的处理方式#

overflow:hidden; 直接将多余隐藏
overflow:auto; 如果有多余部分出现滚动条,如果没有就不出现
overflow:scroll; 不论是否有多余部分,都会出现滚动条

为HEXO博客中每篇文章的浏览量统计

Mon, 21 Aug 2017 00:00:00 GMT

静态网站建站现在有很多快速的技术和平台，但静态是优点也有缺点，由于是静态的，一些动态的内容如评论、计数等等模块就需要借助外来平台，评论有”多说”，计数有”不蒜”！（多说即将关闭，不蒜子还活着涅，这是程序员对程序员的承诺。）
“不蒜子”与百度统计谷歌分析等有区别：“不蒜子”可直接将访问次数显示在您在网页上（也可不显示）；对于已经上线一段时间的网站，“不蒜子”允许您初始化首次数据。。
普通用户只需两步走：一行脚本+一行标签，搞定一切。追求极致的用户可以进行任意DIY。

一、安装脚本（必选）#

要使用不蒜子必须在页面中引入busuanzi.js，目前最新版如下。

1
<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
2
</script>

不蒜子可以给任何类型的个人站点使用，如果你是用的hexo，打开themes/你的主题/layout/_partial/footer.ejs添加上述脚本即可，当然你也可以添加到 header 中。

二、安装标签（可选）#

只需要复制相应的html标签到你的网站要显示访问量的位置即可。您可以随意更改不蒜子标签为自己喜欢的显示效果，内容参考第三部分扩展开发。根据你要显示内容的不同，这分几种情况。

1、显示站点总访问量#

要显示站点总访问量，复制以下代码添加到你需要显示的位置。有两种算法可选：

算法a：pv的方式，单个用户连续点击n篇文章，记录n次访问量。

1
<span id="busuanzi_container_site_pv">
2
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
3
</span>

算法b：uv的方式，单个用户连续点击n篇文章，只记录1次访客数。

1
<span id="busuanzi_container_site_uv">
2
  本站访客数<span id="busuanzi_value_site_uv"></span>人次
3
</span>
4
如果你是用的hexo，打开themes/你的主题/layout/_partial/footer.ejs添加即可。

2、显示单页面访问量#

要显示每篇文章的访问量，复制以下代码添加到你需要显示的位置。
算法：pv的方式，单个用户点击1篇文章，本篇文章记录1次阅读量。

1
<span id="busuanzi_container_page_pv">
2
  本文总阅读量<span id="busuanzi_value_page_pv"></span>次
3
</span>

代码中文字是可以修改的，只要保留id正确即可。

注意：不蒜子为保持极简，暂不支持在站点文章摘要列表中（如首页）逐个显示每篇文章的阅读次数，如果您非常需要这一功能，可以留言。根据需要程度再考虑开发相应的功能。

3、显示站点总访问量和单页面访问量#

你懂的吧，上面两种标签代码都安装。

4、只计数不显示#

只安装脚本代码，不安装标签代码。

至此，不蒜子已经可以正常运行，如果你还要自定义一些内容或有疑问，请继续阅读。

附录：扩展开发（自定义）#

不蒜子之所以称为极客的算子，正是因为不蒜子自身只提供标签+数字，至于显示的style和css动画效果，任你发挥。
busuanzi_value_site_pv的作用是异步回填访问数，这个id一定要正确。
busuanzi_container_site_pv的作用是为防止计数服务访问出错或超时（3秒）的情况下，使整个标签自动隐藏显示，带来更好的体验。这个id可以省略。

极简模式#

1
本站总访问量<span id="busuanzi_value_site_pv"></span>次
2
本站访客数<span id="busuanzi_value_site_uv"></span>人次
3
本文总阅读量<span id="busuanzi_value_page_pv"></span>次

个性化一下#

1
Total <span id="busuanzi_value_site_pv"></span> views.
2
您是xxx的第<span id="busuanzi_value_site_uv"></span>个小伙伴
3
<span id="busuanzi_value_page_pv"></span> Hits

问题及解答#

1、我只要统计不显示？
- 只引入busuanzi.js，不引入显示标签即可。
2、你的标签太丑了，我想美化一下可以么？
- 可以的，您可以用自己站点的css进行控制，只要内层span的id正确以便回填访问次数即可，甚至标签都可以不是span。
3、中文字体太丑了，我的主题不适合？
- 您可以将本站总访问量xxx次改成view xxx times等英文以获得更和谐的显示效果。
4、在访问量数据未取回来之前，我不想让页面显示为诸如“本站总访问量次”，显得太low，怎么办？
- 只需要如下css，不蒜子执行完毕会自动将标签显示出来，其他以此类推：

1
<span id="busuanzi_container_site_pv" style='display:none'>
2
    本站总访问量<span id="busuanzi_value_site_pv"></span>次
3
</span>

原文地址:http://ibruce.info/2015/04/04/busuanzi/ 参考链接:https://www.zhihu.com/question/33919028

box-shadow和text-shadow

Sun, 20 Aug 2017 00:00:00 GMT

`box-shadow` 属性向框添加一个或多个阴影#

相关小项目地址:https://github.com/gaodaxiu0406/HEXOcase(CSS/小项目练习)

语法#

CSS语法#

1
box-shadow: h-shadow v-shadow blur spread color inset;

注释#

box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。请参阅 CSS 颜色值。
inset	可选。将外部阴影 (outset) 改为内部阴影。

1
box-shadow: 10px 20px 30px 40px #000 inset;

JavaScript语法#

1
object.style.boxShadow="10px 10px 5px #888888"

`text-shadow`#

语法#

CSS语法#

1
text-shadow: h-shadow v-shadow blur color;

注释#

text-shadow 属性向文本添加一个或多个阴影。该属性是逗号分隔的阴影列表，每个阴影有两个或三个长度值和一个可选的颜色值进行规定。省略的长度是 0。

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。参阅 CSS 颜色值。

1
text-shadow: 10px 20px 30px #000;

CSS中的display

Sun, 20 Aug 2017 00:00:00 GMT

根据这个属性可以将元素分成不同的类型,也会显示出不同的状态,例如属性值为block的时候,这个元素会独占一行,如果属性值为inline的时候,所有这个属性值得元素都会在一行显示,属性值为none,元素会在页面上消失.
所有元素都有天生自带的display属性和属性值,叫做内置属性

display; 块级元素(块状元素)#

　特点:

独占一行,在所在父元素内依次向下排列,从左上角开始
宽度在不设置的情况下,宽度继承父级元素内容的宽,高度由本身内容决定
可以直接设置盒子模型的所有属性(width,height,padding,border,margin)
可以嵌套其他元素(p,dt,h1-h6不能嵌套块级)
- dt/p 不能嵌套其他块级元素,可以嵌套行内元素等
永远会在父级盒子的左上角开始排布,从上到下排.

人为设置的样式要比自带的样式权重高块级元素这些特点,我们将其称作BFC(Block Fomatting Context—>块级盒子在上下文中的渲染模式)

display; 行内元素#

　特点:

在一行显示
不能设置宽度高度
padding margin的上下值设置不生效,左右值生效
默认宽度高度是本身内容的宽高
几个行内元素默认的垂直方向的对齐方式是基线对齐
在编辑代码时,如果行内元素之间有回车或者空格,那么在页面显示的时候,就会默认有间隙()
将父级的font-size设置为0,可以解决这个问题.
行内元素不能嵌套块级元素

display; 行内块级元素#

特点:

在一行显示
可以直接设置宽度高度padding、margin值
默认宽度高度是本身内容的宽高
几个行内元素默认的垂直方向对齐方式是基线对齐
在编辑代码时,如果行内元素之间有回车或者空格,那么在页面显示的时候,就会默认有间隙
将父级的font-size设置为0,可以解决这个问题.
行内元素不能嵌套块级元素

vertical-align改变行内元素和行内块级元素的基线对其方式#


top	所有平级元素,去找最高(高度最高)元素的顶部进行对齐
bottom	所有平级元素,去找最高(高度最高)元素的底部进行对齐
middle	所有平级元素,去找最高(高度最高)元素的中部进行对齐
length(数值)	px 或 %

　改变对齐方式的时候,所有元素都要添加vertical-align这个属性

display; 将这个元素在页面上隐藏起来#

如何再让设置display;的元素显示出来?

将none用其他的属性替换
- 例如<重新设置display属性为>==>display;

关于png24格式的图片背景在IE6下显示不透明的解决方法

Tue, 01 Aug 2017 00:00:00 GMT

图片透明，锯齿问题是重构人员很头疼的问题:png8格式的透明背景图片，会让浏览器在先显示的过程中图片边缘会有一些锯齿情况，png24可以解决这些锯齿问题，但是ie6不支持png24透明

利用ie6的`hack`问题有两种解决的办法#

1
<div class="pwdTipsBg"></div>
2
<div class="pwdTips">
3
    <span class="closeBtn"></span>
4
    <i class="pwdTipsIcon"></i>
5
    验证码错误，请填写最新获取的验证码！
6

7
</div>

1.利用ie6的`hack`问题，用两种格式的图片来表示；一种其他浏览器用`png24`格式的图片显示，`ie6`用`png8`格式的显示#

1
.pwdTipsBg{
2
    height:100%;
3
    background:#000;
4
    opacity:0.5;
5
    position: absolute;
6
    left:0;
7
    top:0;
8
    z-index:1001;
9
    filter:  alpha(opacity=50);
10
    width:100%;
11
    zoom:1;
12
    }
13
.pwdTips{
14
    position:absolute;
15
    left:40%;
16
    top:40%;
17
    z-index:1009;
18
    width:285px;
19
    background:#ececec;
20
    height:55px;
21
    padding:45px 20px 10px 80px;
22
    }
23
.pwdTips i{
24
    position:absolute;
25
    left:40px;
26
    top:40px;
27
    background-position:-152px -68px; width:26px;       height:26px;
28
    }
29

30
.pwdTips span{
31
    position:absolute;
32
    top:-10px;
33
    right:-15px;
34
    width:33px;
35
    height:33px;
36
    background:url(closebtn.png) no-repeat 0 0;
37
    _background:url(scsprites.png) no-repeat -119px -63px;
38
    cursor:pointer;
39
    display:block;
40
    }

展开收起

2.利用`filter`滤镜解决图片问题#

1
.pwdTips span{
2
    position:absolute;
3
    top:-10px;
4
    right:-15px;
5
    width:33px;
6
    height:33px;
7
    background:url(closebtn.png) no-repeat 0 0;
8
    _background:none;
9
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/safecenter/closebtn.png");
10
    cursor:pointer;
11
    display:block;
12
    }

1、书写正常的CSS代码，通过background导入图片，这样所有的浏览器均使用了此PNG图片；
```
1
background:url(closebtn.png) no-repeat 0 0;
```
2、通过滤镜对引入图片，滤镜引入图片的时候是相对于HTML文件，而不是相对于CSS文件，语法如下：
```
1
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/safecenter/closebtn.png")
```

代码写到这里，我们放到IE6下测试后发现IE6还是没有透明，因为我们虽然设置了滤镜引入图片，但是background也同样加载了此图片，又因为background的图层比滤镜设置的高，所以才没有显示出来。所以最终的代码设置为：

1
pwdTips span{
2
    position:absolute;
3
    top:-10px;
4
    right:-15px;
5
    width:33px;
6
    height:33px;
7
    background:url(closebtn.png) no-repeat 0 0;
8
    _background:none;
9
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/safecenter/closebtn.png");
10
    cursor:pointer;
11
    display:block;
12
}

优点#

1、绿色无插件；
2、效率高，速度快；
3、网速慢的时候，不会出现先灰底再透明的情况，支持远程图片；
4、支持Hover等伪类，但是得使用两张图片，网速慢的情况下，会导致第二张图片暂时无法显示，因为还没有完全载入；

缺点#

1、不支持平铺，虽然filter有sizingMethod=“scale”, 拉伸缩放模式，但是图片会变形，如果单纯的颜色或简单的渐变色还能横向平铺；
2、不支持Img标签；
3、不支持CSS Sprite；

看到很多人的logo有在ie6下面显示显示不透明，有一层淡蓝色的底，其它浏览器下都是好，这个是因为用了png24格式的图片。

那我们在制作图标的时候应该注意什么呢？（格式，透明，毛边）

如何把`png24`透明`logo`转换`png8`格式#

1. 用photoshop软件打开你要处理的格式为png24的logo
1. photoshop菜单<文件>—存储为web和设备所用格式（或者快捷键 Alt+Shift+Ctrl+S）
1. 在png24那选择png8格式，最重要的一点是“杂色”颜色的选项，如果这边没有设置好就会毛刺边出现，这边应该怎么设置呢？
1. “杂色”选项的颜色应该选择和logo背景颜色最接近的
1. 保存一下就可以了。

png8和png24的区别#

1.PNG-8 与 PNG-24 对IE6的支持程度
- PNG-24是支持alpha通道透明的格式，支持半透明，IE6不支持PNG-24,但是他完全支持PNG-8。
- 如果是不透明的PNG-24,IE6也是完美支持,之所以说IE6不支持PNG-24是因为PNG-24的半透明会在IE6里显示不正常。
2.PNG-8 与 PNG-24 的透明区别
- PNG-8 和 gif 有一些相似之处，模式都是索引颜色，只支持像素级的纯透明，不支持 alpha 透明。我们通常说的“IE6 不支持 PNG 透明”，是指不支持 PNG-24 的透明（将透明区域显示为灰色）。但是 IE6 支持 PNG-8 的透明，就像支持 gif 的透明一样。
3.PNG-8 的高压缩比
- 切图时，有时选择 PNG-8 可以获得更高的压缩比。注意，是 PNG-8，不是 PNG-24。不过有些情况下还是 gif 或 jpg 会小一些，需要根据实际情况调试以选择最佳方案。

`PNG-8` 与 `GIF`#

PNG-8跟GIF一样支持单色透明。GIF有的PNG-8都有，GIF没有的PNG-8还有，比如<同样的文件>PNG-8格式的却比GIF要小

HEXO主题设置(huno主题)

Mon, 31 Jul 2017 00:00:00 GMT

目前使用的主题是：next
当前文章所述主题为：huno
在博客的根目录下（即上一篇文章基于GitHub创建自己的博客https://gaodaxiu0406.github.io/2017/04/25/%E5%9F%BA%E4%BA%8EGitHub%E5%88%9B%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84%E5%8D%9A%E5%AE%A2/中提到的 HEXO 文件夹下）克隆主题

克隆主题#

1
git clone git://github.com/someus/huno.git themes/huno

提示:huno的github地址:https://github.com/gaodaxiu0406/huno

执行#

1
vim _config.yml

执行此命令后可以对此文档进行编辑输入o进入编辑状态

将 theme 对应的值进行修改#

1
theme: huno

修改完成按esc键退出编辑状态再输入

自动部署#

1
npm install hexo-deployer-git --save

发布#

1
hexo clean && hexo g && hexo d

稍等片刻看一下自己的博客主页，你想要的效果就出现了。也可以在github或百度中搜索更多主题，挑选自己喜欢的主题进行修改，只要你快乐就好

主题配置#

现在主题是更改过来了，但还有许多细节需要处理，比如说你需要修改头像等等。
每个人的设置风格不同,但基本的设置在你下载的主题中的README文件中都有介绍,你可以按照文件中的介绍配置属于自己的博客。动气手来，让你的博客亮起来

返回上篇:基于GitHub创建自己的博客

React轮播图（下）

Mon, 31 Jul 2017 00:00:00 GMT

关于react轮播图的源码,无缝版已上传至github,https://github.com/gaodaxiu0406/React-Slider

用`react`+`webpack`写一个的轮播图项目(项目配置请看上篇[React轮播图（上）])#

先将整个文件写在一个文件中

1.画结构#

新建一个components文件夹
components文件夹下新建Slider.js文件和Slider.less文件(Slider.less文件是用来给Slider.js写样式的)

2.在indix.js中引入组件渲染到页面中#

打开src文件夹中的index.html文件

1
<div id="root"></div>

2-1) 在这个id为root的标签中渲染元素
2-2) 回到index.js中,写一个轮播图组件，渲染到index.html中

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
import Slider from './components/Slider';
4
let images=[
5
    {src:require('./images/1.jpg')},
6
    {src:require('./images/2.jpg')},
7
    {src:require('./images/3.jpg')},
8
    {src:require('./images/4.jpg')}
9
];
10
ReactDOM.render(<Slider images={images}/>,document.querySelector('#root'));

解释1) 引入React，引入ReactDOM，引入Slider组件然后通过ReactDOM.render将Slider组件渲染到index.html的id为root的div标签中
解释2) Slider组件需要图片参数
- src文件夹下新建一个images文件夹，存入轮播的图片
- 将图片路径通过require存入images数组中
- 通过组件Slider标签将所需的images参数传入组件Slider(让images参数变量等于images数组)

3.开始写Slider.js中的代码#

需要默认导出一个组件Slider供外面文件(index.js)调用;还需要接收一个images属性进行轮播

1
import React from 'react';
2
import ReactDOM from 'react-dom';
3
require('./Slider.less');
4
export default class Slider extends React.Component{
5
    render(){
6
        let images=this.props.images;
7
        return(
8
            <div className="slider-wrapper">
9
                <ul className="sliders">
10
                    {images.map((image,index)=>(
11
                        <li className="slider">
12
                        <img src={image.src}/>
13
                    </li>))
14
                    }
15
                </ul>
16
            </div>
17
        )
18
    }
19
}

展开收起

1. require('./Slider.less'); —> 这里引入Slider.less用import和require都是一样的效果，都是加载一个模块的意思,模块可能是图片，可能是less/css/js/json文件,都可以 —> 在webpack中一切皆模块,不管是什么资源，都可以作为模块来加载。
1. li的数量取决于images数据,images中有几张图片，就有几个li。
- 在render中let一个变量images来接收index.js传入的images,然后用map方法遍历整个数组。

4.在`Slider.less`中写好轮播图的样式#

1
*{
2
  padding: 0;
3
  margin: 0;
4
}
5
ul,li{
6
  list-style: none;
7
}
8
.wrapper{
9
  width: 400px;
10
  height: 400px;
11
  position: relative;
12
  margin: 30px auto;
13
  .sliders{
14
    height: 400px;
15
    position: absolute;
16
    left:0;
17
    .slider{
18
      float: left;
19
      width: 400px;
20
      height: 400px;
21
      img{
22
        width: 100%;
23
        height: 100%;
24
      }
25
    }
26
  }
27
}

展开收起

宽高为400px的轮播图。

5.写配置文件#

在webpack.config.js中加loaders

1
module:{
2
        loaders:[
3
            {test:/\.js$/,loader:'babel-loader',exclude:/node_modules/},
4
            {test:/\.less$/,loader:'style-loader!css-loader!less-loader'},
5
            {test:/\.(jpg|png|gif)$/,loader:'url-loader'}
6
        ]
7
    }

babel默认情况下什么都不做，需要一个配置文件.babelrc文件
- 新建一个.babelrc配置文件
```
1
{
2
"presets": ["es2015","stage-0","react"]
3
}
```
  - presets预设,“es2015”将es6编译成es5,“stage-0”将es7编译成es5,“react”将react编译成es5。
    - 原理1:{test:/\.js$/,loader:'babel-loader',exclude:/node_modules/}—>处理(编译)js文件<如果发现文件是js>,用babel-loader加载,加载的时候需要读配置文件.babelrc,代码es6/es7/react都要通过babel转成es5;同时通过exclude将node_modules文件夹下的所有js文件排除掉。
    - 原理2:{test:/\.less$/,loader:'style-loader!css-loader!less-loader'}—>如果发现文件以.less结尾的,第一步通过less-loader将less编译成css,然后通过css-loader进行加载,然后通过style-loader将他通过style标签的形式插入到页面中去，变成一个行内样式。
    - 原理3:{test:/\.(jpg|png|gif)$/,loader:'url-loader'}—>凡是资源文件都可以用url-loader来加载,不论是图片、图标、字体、视频、音频;后面可以通过问号传参,有个参数limit(例如:{test:/\.(jpg|png|gif)$/,loader:'url-loader?limit=8192'}—>小于8K的资源文件将直接以base64的形式内联在代码中，可以减少一次http请求)。

此时执行`npm run build`,将代码打包到出口文件中,打开`build`文件夹下的`index.html`文件就可以直接预览效果了#

此时会发现控制台有个报错

1
Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Slider`. See https://fb.me/react-warning-keys for more information.
2
    in li (created by Slider)
3
    in Slider

需要唯一的key属性,在Slider.js文件中的li需要唯一的key属性，给li标签加上key属性即可

1
<li className="slider" key={index}>                  <img src={image.src}/>        </li>

关掉浏览器,重新执行npm run build，再打开build文件夹下的index.html文件预览,控制台就没有报错了

6.写功能#

让图片动起来,需要给Slider.js加个状态,需要有个定时器让他动起来写在周期函数componentDidMount中

1
constructor(){
2
        super();
3
        this.state={pos:0};//默认索引
4
    }
5
    componentDidMount(){
6
        this.$timer=setInterval(()=>{
7
            let pos=this.state.pos;
8
            pos++;//每隔2s让pos加1，pos值影响ul的左偏移量left的值 所以ul应该有个style属性 left值应该变化
9
            this.setState({pos:pos})
10

11
        },this.props.interval*1000)

pos++; —> 每隔2s让pos加1，pos值影响ul的左偏移量left的值,所以ul应该有个style属性,left值应该变化

ul应该有个style属性

1
render(){
2
    let images=this.props.images;
3
    let style={
4
        width:400*images.length,
5
        left:this.state.pos*-400
6
    };
7
    return(
8
        <div className="slider-wrapper">
9
            <ul style={style} className="sliders">
10
                {
11
                    images.map((image,index)=>(
12
                        <li className="slider" key={index}>
13
                            <img src={image.src}/>
14
                        </li>
15
                    ))
16
                }
17

18
            </ul>
19
        </div>
20
    )
21
}

展开收起

this.props.interval*1000—>每隔2s轮播一次,需要有变量传进来—>在index.js中新增一个interval变量(间隔时间让外面可以控制)
- 1. 这里通过this.props获取index.js中传递进来的的interval变量this.props.interval*1000
- 1. index.js中新增一个interval变量
    1 ReactDOM.render( 2 <Slider 3 images={images} 4 interval={2} 5 />,document.querySelector('#root'));

写功能步骤总结#

第一步<定义一个默认索引>pos,默认值是0
第二步<在组件加载完成之后创建定时器>setInterval赋给this.$timer
第三步<每隔2s让图片向左偏移一个宽度的距离>(interval是外界传进来的,是图片轮播的间隔时间),在index中要给组件Slider传进来一个2,2*1000意味着2s变一次
this.$timer中先取出老的pos值，第一次轮播pos就是0，然后pos++，pos变成1，然后setState重新设置pos值,让pos值往上
pos会影响ul的left值，一张图片的宽度是400px，向左偏移400，就是*-400
ul的宽度应该是宽度400乘以图片的数量images.length,4张图就是1600px

执行`npm run dev`#

注意,执行npm run dev可自动将文件编译更新打包到出口文件index.html中，并且只要更改文件，页面就会自动刷新,但是如果更改配置文件,需要重新启动npm run dev服务
此时执行npm run dev命令,轮播图就动起来了，但是越界了,因为此时还没有做边界处理

7.完善功能#

将Slider需要的属性(可外界控制的)，在index.js的Slider组件标签中传入

1
ReactDOM.render(
2
    <Slider
3
        images={images}//图片
4
        interval={2}//多长时间轮播一次
5
        speed={1}//每次轮播的速度
6
        pause={true}//当鼠标移动上去之后自动暂停
7
        autoplay={true}//是否启用自动轮播，false不自动轮播
8
                                  - 在Slider.js中
9
        dots={true}//是否有点状导航
10
        arrows={true}//是否有箭头导航
11
    />,document.querySelector('#root'));

添加transitionDuration—>规定完成过渡效果需要花费的时间 speed默认值是1 这里就是1s

1
let style={
2
    width:400*images.length,
3
    left:this.state.pos*-400,
4
    transitionDuration:this.props.speed+'s'
5
};

在Slider.js的周期函数中添加一个判断

1
    componentDidMount(){
2
        if(this.props.autoPlay){
3
            this.$timer=setInterval(()=>{
4
                let pos=this.state.pos;
5
                pos++;
6
                this.setState({pos:pos})
7
            },this.props.interval*1000)
8
        }
9
    }

this.props.autoPlay 是否自动轮播,如果外界传入true就是自动轮播，传入false就是不自动轮播

8.将轮播切换单独拎出来写成一个方法`turn`#

1
    turn(n){
2
        let pos=this.state.pos;
3
        pos+=n;
4
        this.setState({pos:pos})
5
    }

或者使用es6的箭头函数

1
turn=(n)=>{
2
    let pos=this.state.pos;
3
    pos+=n;
4
    this.setState({pos:pos})
5
}

let pos=this.state.pos;获取旧索引
turn表示切换,n表示切换的步长,方便以后操作<例如往左走传1进来即可>，往右走传-1进来即可
那么此时在周期函数中,直接调用这个turn方法即可,默认往右轮播，传入-1

1
componentDidMount(){
2
    if(this.props.autoplay){
3
        this.timer=setInterval(()=>{
4
            this.turn(1);
5
        },this.props.interval*1000)
6
    }
7
}

9.实现鼠标移上去停止轮播#

给div加onMouseOver和onMouseOut事件

1
<ul onMouseOver={()=>clearInterval(this.timer)} onMouseOut={this.play} style={style} className="sliders">
2
...
3
</ul>

10.自动轮播部分也封装成一个函数`play`#

1
play=()=>{
2
    this.timer=setInterval(()=>{
3
        this.turn(1);
4
    },this.props.interval*1000)
5
};

play表示开启定时器进行自动轮播
那么此时在周期函数中直接调用this.play()即可

1
componentDidMount(){
2
    if(this.props.autoplay){
3
        this.play();
4
    }
5
}

11.边界判断#

1
turn=(n)=>{
2
        let pos=this.state.pos;
3
        pos+=n;
4
        if(pos>=this.props.images.length){
5
            pos=0;
6
        }
7
        this.setState({pos:pos})
8
    };

当索引为图片总张数的时候让索引变为0

12.写左右箭头#

在ul下加一个div

1
<div className="arrows">
2
    <span className="arrow-left">&lt;</span>
3
    <span className="arrow-right">&gt;</span>
4
</div>

在Slider.less中写样式

1
  .arrows{
2
    position: absolute;
3
    width: 100%;
4
    height: 20px;
5
    top:50%;
6
    margin-top:-10px;
7
    .arrow{
8
      width: 20px;
9
      height: 20px;
10
      line-height: 20px;
11
      text-align: center;
12
      cursor: pointer;
13
      font-size: 30px;
14
      background-color: #eee;
15
      &:hover{
16
        background-color: #999;
17
      }
18
    }
19
    .arrow-left{
20
      margin-left: 5px;
21
      float: left;
22
    }
23
    .arrow-right{
24
      margin-right: 5px;
25
      float: right;
26
    }
27
  }

展开收起

给左右arrow绑定事件

1
<div className="arrows">
2
    <span onClick={()=>this.turn(-1)} className="arrow arrow-left">&lt;</span>
3
    <span onClick={()=>this.turn(1)} className="arrow arrow-right">&gt;</span>
4
</div>

13.处理左边界#

在turn中做个判断

1
turn=(n)=>{
2
    let pos=this.state.pos;
3
    pos+=n;
4
    if(pos>=this.props.images.length){
5
        pos=0;
6
    }
7
    if(pos<0){
8
        pos=this.props.images.length-1;
9
    }
10
    this.setState({pos:pos})
11
};

当索引小于0的时候,让索引等于images的长度-1

14.根据传进来的arrows值判断是否有左右箭头切换效果#

第一种方法(看着比较乱)

1
{
2
    this.props.arrows?<div className="arrows">
3
        <span onClick={()=>this.turn(-1)} className="arrow arrow-left">&lt;</span>
4
        <span onClick={()=>this.turn(1)} className="arrow arrow-right">&gt;</span>
5
    </div>:null
6
}

第二种,在render中

1
let arrows=null;
2
if(this.props.arrows){
3
    arrows=(
4
        <div className="arrows">
5
            <span onClick={()=>this.turn(-1)} className="arrow arrow-left">&lt;</span>
6
            <span onClick={()=>this.turn(1)} className="arrow arrow-right">&gt;</span>
7
        </div>
8
    )
9
}

那么ul下面就可以直接用{arrows}代替了(看着很清晰明了)

1
<div className="slider-wrapper">
2
    <ul onMouseOver={()=>clearInterval(this.timer)} onMouseOut={this.play} style={style} className="sliders">
3
        {
4
            images.map((image,index)=>(
5
                <li className="slider" key={index}>
6
                    <img src={image.src}/>
7
                </li>
8
            ))
9
        }
10
    </ul>
11
{arrows}
12
</div>

15.根据传进来的dots值判断是否有点状导航#

1
let dots=null;
2
    if(this.props.dots){
3
        dots=(
4
            <div className="dots">
5
                {
6
                    images.map((image,index)=>(
7
                        <span className="dot" key={index}></span>
8
                    ))
9
                }
10
            </div>
11
        )
12
    }

dots直接放到最下面即可

1
...
2
{arrows}
3
{dots}

15-1.在`Slider.less`中写`dots`的样式#

1
  .dots{
2
        width: 100%;
3
        height: 20px;
4
        position: absolute;
5
        bottom: 10px;
6
        text-align: center;
7
        .dot{
8
            display: inline-block;
9
            width: 20px;
10
            height: 20px;
11
            border-radius: 50%;
12
            margin-left: 5px;
13
            background-color: #abcdef;
14
            cursor: pointer;
15
            &:hover{
16
            background-color: #999999;
17
            }
18
        }
19
  }

展开收起

16.点状导航的点击跟随事件#

给span加onClick事件

1
···
2
<span className="dot" key={index} onClick={()=>this.turn(index-this.props.pos)}></span>
3
···

16-1.轮播点状导航自动跟随事件#

在Slider.less中加一个active样式

1
.active{
2
    background-color: #999999;
3
  }

给span标签添加active属性

1
<span className={"dot "+(index==this.state.pos?'active':'')} key={index} onClick={()=>this.turn(index-this.state.pos)}></span>

React轮播图（上）

Mon, 31 Jul 2017 00:00:00 GMT

项目配置及原理概要#

1.初始化项目#

1
npm init -y

生成package.json文件

2.安装依赖包开发依赖#

1
npm install webpack webpack-dev-server babel-core babel-loader babel-preset-react babel-preset-es2015 babel-preset-stage-0 style-loader css-loader less-loader less file-loader url-loader html-webpack-plugin -D

webpack 打包
webpack-dev-server 用来启动一个HTTP服务器预览我们的项目
babel-core、babel-loader 进行转译把es6和react代码转译成es5
babel-preset-react 用来转译react
babel-preset-es2015 用来转译es6
babel-preset-stage-0 用来转译es7
style-loader、css-loader 用来处理css
less-loader、less 编译less
file-loader、url-loader 用来处理资源文件
html-webpack-plugin 用来自动产出html文件
open-browser-webpack-plugin 自动打开浏览器

3.安装生产依赖#

1
npm install react react-dom -S

4.配置文件的出入口路径#

新建一个webpack.config.js文件，在文件中配置入口文件和出口路径

1
let path=require('path');
2
module.exports={
3
    entry:'./src/index.js',//入口文件
4
    output:{//出口配置
5
        path:path.resolve('build'),//出口文件路径
6
        filename:'bundle.js'//出口文件名称
7
    }
8
};

5.启动安装的模块文件夹`node_modules`—>`.bin`—>`webpack.cmd`和`webpack-dev-server.cmd`文件#

在package.json文件中的scripts标签进行匹配

1
"scripts": {
2
    "build": "webpack",
3
    "dev":"webpack-dev-server"
4
  },

5-1.启动`webpack`和`webpack-dev`#

在cmd中执行命令

1
npm run build

1. 在cmd窗口中显示

1
    Asset     Size  Chunks             Chunk Names
2
bundle.js  2.52 kB       0  [emitted]  main
3
   [0] ./src/index.js 43 bytes {0} [built]

表示生成bundle.js一个文件

1. 在当前项目文件夹下会自动生成一个build文件夹，同时在build文件夹下会自动生成bundle.js文件，我们的入口文件(src文件夹下的index.js)会自动打包到出口文件bundle.js中

6.自动产出`html`文件#

6-1.现在我们需要在`build`文件夹中新建一个`index.html`文件，然后引入`bundle.js`进行预览;但是现在我们希望这个文件不要手动创建了，希望他可以自动生成，要做到这一点，我们需要引入插件`html-webpack-plugin`(此插件在最初已经安装过,如果没有安装需安装后才可使用)#

1. 在webpack.config.js中引入html-webpack-plugin

1
let HtmlWebPackPlugin=require('html-webpack-plugin');

1. 同时给插件再添加个配置项plugins,plugins是个数组

1
plugins:[
2
    new HtmlWebPackPlugin({
3
        template:'./src/index.html'
4
    })
5
]

1. template 模板配置到时候会按照哪个模板来自动产出html文件并且把它自动放到配置目录下—>一般会在src文件夹下新建一个模板叫index.html。
1. 执行npm run build
4-1) 原理<此时如果再执行>npm run build的话，就会执行上面配置的plugins插件,插件会读取src文件夹下的index.html模板文件，把他自动插入到打包后的bundle.js，并且把bundle.js保存到build目录下(每次执行npm run build命令，都会重新生成bundle.js和index.html两个文件)
4-2) 在cmd命令行执行npm run build,命令行显示:

1
     Asset       Size  Chunks             Chunk Names
2
 bundle.js    2.52 kB       0  [emitted]  main
3
index.html  188 bytes          [emitted]
4
   [0] ./src/index.js 43 bytes {0} [built]

表示生成bundle.js和index.html两个文件,与之前执行npm run build相比多了一个html文件。

4-3) 打开我们的项目文件夹下的build文件会发现，已经自动生成了一个出口index.html出口文件,打开这个index.html出口文件会发现,index.html中已经自动引入了bundle.js文件

关于react轮播图的源码,无缝版已上传至github,https://github.com/gaodaxiu0406/React-Slider

如何安装部署服务器

Mon, 31 Jul 2017 00:00:00 GMT

购买机器https://www.aliyun.com/#

1
116.62.9.168
2
用户名:root
3
密码:Zfpx2017

连接服务器#

1
ssh root@116.62.9.168

更新操作系统#

1
apt-get update

安装 npm#

1
apt-get install npm

安装node#

1
apt-get install npm

安装node版本管理器n n是node的管理器可以通过他管理node的版本#

1
npm install n -g

安装node7.5版本#

1
n 7.5

出现node-v7.5.0就安装成功了

安装mongodb#

1
apt-get install mongodb

安装git#

1
apt-get install git

克隆爬虫的地址#

1
git clone https://github.com/zhufengnodejs/201704crawl.git

进入目录201704crawl#

1
cd 201704crawl

安装依赖#

1
  npm install

启动server.js#

1
node server.js

执行脚本main.js(先进入main.js所在的文件夹)#

1.进入main.js所在的文件夹执行main.js

1
cd tasks
2
node main.js

2.ctrl+c结束掉之前的任务,再启动server.js

1
node server.js

访问(格式—>ip<端口号>)#

在浏览器输入地址116.62.9.168:8080访问
- http://116.62.9.168:8080/
此时还是静态网页别人无法访问

在电脑上安装程序`Xftp 5`#

安装nginx#

Nginx是一个高性能的HTTP和反向代理服务器

1
apt-get install nginx

此时就可以上传自己的项目,访问自己的服务器
但是一旦窗口关掉,就无法访问

nginx命令#

启动 nginx nginx -c /etc/nginx/nginx.conf
关闭 nginx nginx -s stop
重读配置文件 nginx -s reload kill -HUP nginx
常用命令 service nginx {start|stop|status|restart|reload|configtest|}

配置nginx反向代理和负载均衡#

1
upstream crawl{
2
    ip_hash;
3
    server 127.0.0.1:3000 weight=10;
4
    server 127.0.0.1:4000 weight=1;
5
}
6

7
server {
8
    listen 80;
9
    server_name www.gdxiu.cn;
10

11
    location / {
12
        proxy_pass http://crawl;
13
    }
14
}

安装pm2#

强大的进程管理器进程异常退出时pm2会尝试重启

1
npm install pm2 -g

进入201704crawl文件夹,在根目录下执行以下命令

1
cd /root
2
cd 201704crawl

切换到server.js文件所在目录,启动pm2应用

1
pm2 start server.js --name "crawl"
2
//即pm2 start server.js --name '自己取名字'

如何停止pm2上的项目#

1.查看node进程号#

1
 ps -ef | grep node

2.停止#

1
pm2 stop crawl

3.杀死进程#

1
kill 8796(进程号)

复活<如何重新建立连接>#

1
pm2 start server.js --name "crawl"

启动#

1
pm2 start crawl

pm2常用命令#

用pm2启动node

命令	用途
pm2 start app.js —name “crawl”	启动应用
pm2 list	查看所有应用
pm2 restart crawl	重启应用
pm2 stop crawl	停止应用
pm2 delete crawl	删除应用

关于scp命令#

网址http://www.cnblogs.com/hitwtx/archive/2011/11/16/2251254.html

cat 查看文件内容

vi命令#

1
vi crawl
2
1000dd//删除1000行  vi的一个命令

重启服务#

1
nginx -s reload

移动端click300-380ms延迟问题

Fri, 28 Jul 2017 00:00:00 GMT

移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。#

历史原因#

来源一个公司内一个同事的分享<2007年苹果发布首款iphone上ios系统搭载的safari为了将适用于pc端上大屏幕的网页能比较好的展示在手机端上>，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。双击缩放是指用手指在屏幕上快速点击两次，ios 自带的 Safari 浏览器会将网页缩放至原始比例。原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。

解决方案#

1.tap.js解决方案#

使用 zepto.js 的 tap 事件，通过 singleTap 和 doubleTap 来区分单击和双击。但是会出现点击穿透，而且对于已经使用 click 的文件，改动成本太大。

1
<script src="tap.js"></script>
2

3
<div id="container">
4
  <button id="button-1">Click event</button>
5
  <button id="button-2">Tap event</button>
6
</div>
7

8
<div id="output"></div>
9

10
<script>
11
  var container = document.getElementById('container')
12
  var button1 = document.getElementById('button-1');
13
  var button2 = document.getElementById('button-2');
14
  var output = document.getElementById('output');
15

16
  var tap = new Tap(container);
17

18
  button1.addEventListener('click', callback, false);
19
  button2.addEventListener('tap', callback, false);
20

21
  function callback (e) {
22
      e.preventDefault();
23
      var p = document.createElement('p');
24
      p.textContent = 'event: ' + e.type;
25
      output.insertBefore(p, output.firstChild);
26
  }
27
</script>

展开收起

2.对于高版本chrome和firefox，可以通过禁用伸缩，即在 head 上的 meta 标签添加 user-scalable = no。如下：#

1
<meta name="viewport" content="width=device-width, user-scalable=no">

3.chrome32+ 可以将 viewport 的宽度设置成 device-width.#

4.IE10+，可以使用 pointerEvents。可以让特定的元素或者整个文档中的元素移除点击延迟的问题，同时不会影响 pinch-zooming#

1
a, button, .myelements
2
{
3
-ms-touch-action: manipulation;    /* IE10  */
4
touch-action: manipulation;        /* IE11+ */
5
}

5.通过 touchend 事件代替 click 事件#

6.fastclick.js解决方法#

终极大 boss。 fastclick。上面的几种方法都是针对某些浏览器，或者某些浏览器的某些版本，或者会影响到我们平常使用方式的解决方案。使用起来不方便且考虑的细节很多，实践难度比较大。fastclick 作为一个终极的解决方案，使用方便，文件大小压缩后只有 3.3k。对于交互相对复杂的移动端web页面或应用是一个相对不错的解决方案。

1
<html xmlns="http://www.w3.org/1999/xhtml">
2
<head>
3
    <title></title>
4
    <style>
5
        *
6
        {
7
            margin: 0;
8
        }
9
        body
10
        {
11
        }
12
        .button
13
        {
14
            background-color: #3d3d3d;
15
            border: 0px;
16
            height: 80px;
17
            width: 80%;
18
            font-size: 50px;
19
            margin: 10% 0% 0% 10%;
20
            color: #fff;
21
        }
22
        .fu
23
        {
24
            min-height: 100%;
25
            min-width: 100%;
26
            background-color: Black;
27
            background: rgba(0,0,0,0.4);
28
            position: absolute;
29
            top: 0;
30
            text-align: center;
31
            display: none;
32
        }
33
        .ts
34
        {
35
            margin: 8% auto;
36
            width: 400px;
37
            height: 400px;
38
            top: 59%;
39
            background-color: #fff;
40
            text-align: center;
41
        }
42
    </style>
43
    <script src="fastclick.js" type="text/javascript"></script>
44
    <script src="jquery-1.7.2.js" type="text/javascript"></script>
45
    //javascript:
46
    <script type="application/javascript">
47
        window.addEventListener('load', function () {
48
            FastClick.attach(document.body);
49
        }, false);
50
        function xian() {
51
            $(".fu").show().hide(350);
52
        }
53
    </script>
54
    //jQuery:
55
    <script>
56
        window.addEventListener('load', function () {
57
$(function() {
58
        FastClick.attach(document.body);
59
    });
60
    </script>
61
    //CommonJS:
62
attachFastClick = require('fastclick');
63
    attachFastClick(document.body);
64
    AMD:
65
    var FastClick = require('fastclick');
66
    FastClick.attach(document.body, options);
67
</head>
68
<body>
69
    <div>
70
        <div class="but">
71
            <input class="button" type="button" value="点击我" onclick="xian()" /></div>
72
        <div class="fu" >
73
            <div class="ts">
74
                我是浮层
75
            </div>
76
        </div>
77
    </div>
78
</body>
79
</html>

展开收起

CSS选择器种类和兼容性总结大全

Fri, 21 Jul 2017 00:00:00 GMT

css5选择器#

名称	举例	描述	详细	权重	ie6-7	ie8	ie9+	其他
标签选择器	p{}	直接使用元素标签进行选择		1	yes	yes	yes
类选择器	.sum{}	类选择器最前方一定要有点	通过元素的类名，来选择元素，一个元素可以有多个类名，都代表这个元素,类名是元素class属性中的属性值，例如`<p class='sum'></p>`	10	yes	yes	yes
id选择器	#tytle{color;}	id在html中具有唯一性,这个属性值前面加一个“#”	一个html元素，id属性值只能用一次	100	yes	yes	yes
通配符选择器	*{key}	匹配全部html元素	一般不使用，因为全部匹配耗性能	0<通配符选择器<1	yes	yes	yes	yes
(标签)属性选择器	[type]或[type=text]	[标签属性名]{}或[标签属性名=属性值]{}	利用标签的属性名和属性值来选择html元素	10	yes	yes	yes	属性选择器在使用的时候，如果一个元素有两个类名，那么是不生效的
分组选择器	.box,li,.p1{color: red};	选择器1，选择器2，选择器3{}	同一份css样式，可以一次性的添加给多个不同的html元素	分组选择器将不同的html分为一组，权重计算的时候都是独立计算，不会叠加。	yes	yes	yes
交集选择器	h2[title]{}		两种选择器同属于一个元素的时候，我们可以使用交集选择器来进行元素的准确选择	所有组合选择器权重之和	yes	yes	yes	作用：精确查找元素，增加选择器的权重
子级选择器	ul>li{color;}	父级选择器>子级选择器{}	存在包含关系的元素选择，通过父级确定选择子级	所有选择器之和	yes	yes	yes	子级选择器必须是紧邻的父子关系
后代选择器(派生选择器)	.div1 ul span{}	祖辈选择器要查找的后代选择器{},中间用空格连接	后代选择器在写的时候尽量控制在３个左右		yes	yes	yes	在一个根元素的范围内，查找到它的后代元素，选择器过多浪费性能，不建议使用
相邻兄弟选择器	.list1+li{color: red;}	哥哥选择器+弟弟选择器{}	通过各个元素选择弟弟选择器，两个选择器之间用“+”连接	选择器之和	yes	yes	yes
伪类选择器	`a:hover{color: red}鼠标经过的状态,或a:link{color: blue}默认状态,或a：active{color: green}鼠标点击的状态,或a:visited{color: blanchedalmond}鼠标点击后的状态`			10	yes	yes	yes	.input;input 鼠标聚焦后的状态，input独有的属性
伪元素	div；或div	通过css代码向指定元素内添加假的（html中不存在的）元素	before 会出现在div所有内容之前，after 会出现在div所有内容之后		no	yes	yes	使用伪元素的时候要保证两个前提：1.要有display这个属性2.要有content这个属性，这个属性的属性值可以为空，但是引号不能少`content:""`
	visited				security issue	yes	yes	security issue

css3选择器#

名称	举例	描述	详细	权重	ie6-7	ie8	ie9+
属性选择器	`E[attr~=value]{}`		指定属性名,并且具有属性值,此属性值是一个此列表(类名),并且以空格隔开,其中词列表中包含了一个value词,并且等号前的~不能省略.
	`E[attr^=value]{}`		^ 表示以谁为开头的,value可以是首字母或者类名	必须是第一个类名
	`E[attr$=value]{}`		$ 表示以谁为结尾,value可以是末尾字母或者类名	必须是最后一个类名
	`E[attr\=value]{}`(由于编辑呈现问题，此处用斜杠代替竖杠,正确写法是`E[attr竖杠=value]{}`)	如果只有一个类名,没有”-“,也可以选中	value必须后面带”-“，value必须是第一个类名
伪类选择器1.	.dome p(3){background: red;}选择dome下的第三个p标签为背景色红色				no	no	yes
2.	.dome p{background: yellow;}选择dome下的第一个p标签为背景色黄色				no	almost	yes
3.	.dome p{background: black;}选择dome下的最后一个p标签为背景色黑色		伪类选择器是针对列表或者很多同级的标签使用,img下是没有效果的也用不到伪类选择器		no	no	yes
4.	.dome p(nlength){}；选择dome下所有的p标签				no	no	yes
5.	.dome p(2n){}；选择dome下的所有偶数个的p标签				no	no	yes
6.	.dome p(3n)选择dome下的所有3的倍数的p标签				no	no	yes
7.	.dome p(n+length)	从第length个开始改变,包括第length个(n是从0开始取值的)	选择大于length后面的元素		no	no	yes
8.	.dome p(-n+length)	包括length，length是从0开始的	选择小于length前面的元素及length元素		no	no	yes
9.	p(3)	选择倒数第三个元素			no	no	yes
10.	p(n)	从大盒子的第一个元素开始	nth-child选择同级元素		no	no	yes
11.	p(n)	从大盒子的第一个p元素开始	nth-of-type 选择指定的元素		no	no	yes
12.	p(n)	倒数第n个	在同级元素中		no	no	yes
13.	p	同类型的第一个	选择一个上级元素下的同类子元素		no	no	yes
14.	p	同类型的最后一个			no	no	yes
15.	p	在父元素中,里面的子元素是唯一的			no	no	yes
16.	p	在父元素中,里面有很多的子元素,但是有一个子元素是唯一的			no	no	yes
空标签	p{display;}	empty 隐藏空标签			no	no	yes
否定选择器	not input([type=submit]){}				no	yes	yes
根元素	root	选择文档的根元素			no	no	yes
目标元素		选择器可用于选取当前活动的目标元素			no	no	no

CSS选择器优先级#

当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义

不同级别#

1.在属性后面使用important会覆盖页面内任何位置定义的元素样式
2.作为style属性写在元素内的样式
3.id选择器
4.类选择器
5.标签选择器
6.通配符选择器
7.浏览器自定义或继承

总结CSS选择器优先级排序#

!important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

CSS样式应用，有个简单的计算方式(权值实际并不是按照十进制，用数字表示只是说明思想，一万个class可能也不如一个id权值高)#

内联样式表的权值为 1000
ID选择器的权值为 100
Class类选择器的权值为 10
HTML标签选择器的权值为 1

IP分类

Wed, 05 Jul 2017 00:00:00 GMT

每个IP地址包括两个标识码（ID），即网络ID和主机ID。同一个物理网络上的所有主机都使用同一个网络ID，网络上的一个主机（包括网络上工作站，服务器和路由器等）有一个主机ID与其对应。#

IP地址根据网络ID的不同分为5种类型，A类地址、B类地址、C类地址、D类地址和E类地址#

A类ip地址#

A<0-127> A类ip地址的第一组数字为1～126。
其中0代表任何地址，127为回环测试地址
- 注意，数字0和 127不作为A类地址，数字127保留给内部回送函数，而数字0则表示该地址是本地宿主机，不能传送。
A类地址的表示范围为：0.0.0.0~126.255.255.255,默认网络掩码为：255.0.0.0；A类地址分配给规模特别大的网络使用。A类网络用第一组数字表示网络本身的地址，后面三组数字作为连接于网络上的主机的地址。分配给具有大量主机（直接个人用户）而局域网络个数较少的大型网络。例如IBM公司的网络。

一个A类IP地址由1字节的网络地址和3字节主机地址组成，网络地址的最高位必须是“0”，地址范围从1.0.0.0 到126.0.0.0。可用的A类网络有126个，每个网络能容纳1亿多个主机。

B类ip地址#

B类地址的第一组数字为128～191。
其中128.0.0.0和191.255.0.0为保留ip。
B类地址的表示范围为<128>.0.0.0~191.255.255.255，默认网络掩码为<255>.255.0.0;实际范围是128.1.0.0—191.254.0.0;B类地址分配给一般的中型网络。B类网络用第一、二组数字表示网络的地址，后面两组数字代表网络上的主机地址。

一个B类IP地址由2个字节的网络地址和2个字节的主机地址组成，网络地址的最高位必须是“10”，地址范围从128.0.0.0到191.255.255.255。可用的B类网络有16382个，每个网络能容纳6万多个主机。

C类ip地址#

C类地址的第一组数字为192～223。
其中192.0.0.0和223.255.255.0为保留ip
C类地址的表示范围为<192>.0.0.0~223.255.255.255,默认网络掩码为：255.255.255.0;实际范围是192.0.1.0—223.255.254.0;C类地址分配给小型网络，如一般的局域网和校园网，它可连接的主机数量是最少的，采用把所属的用户分为若干的网段进行管理。C类网络用前三组数字表示网络的地址，最后一组数字作为网络上的主机地址。

一个C类IP地址由3字节的网络地址和1字节的主机地址组成，网络地址的最高位必须是“110”。范围从192.0.0.0到223.255.255.255。C类网络可达209万余个，每个网络能容纳254个主机。

D类ip地址#

224.0.0.0到239.255.255.255用于多点广播

D类IP地址第一个字节以“lll0”开始，它是一个专门保留的地址。它并不指向特定的网络，目前这一类地址被用在多点广播（Multicast）中。多点广播地址用来一次寻址一组计算机，它标识共享同一协议的一组计算机。

D类地址称为广播地址，供特殊协议向选定的节点发送信息时用

E类ip地址#

240.0.0.0到255.255.255.254
255.255.255.255用于广播地址

以“llll0”开始，为将来使用保留。

E类地址保留给将来使用。

全零（“0．0．0．0”）地址对应于当前主机。全“1”的IP地址（“255．255．255．255”）是当前子网的广播地址。#

保留地址的分配#

一个机构网络要连入Internet，必须申请公用IP地址。但是考虑到网络安全和内部实验等特殊情况，在IP地址中专门保留了三个区域作为私有地址，其地址范围如下： 10.0.0.0/8<10>.0.0.0-10.255.255.255 172.16.0.0/12<172>.16.0.0-172.31.255.255 192.168.0.0/16<192>.168.0.0-192.168.255.255 使用保留地址的网络只能在内部进行通信，而不能与其他网络互连。因为本网络中的保留地址同样也可能被其它网络使用，如果进行网络互连，那么寻找路由时就会因为地址的不唯一而出现问题。但是这些使用保留地址的网络可以通过将本网络内的保留地址翻译转换成公共地址的方式实现与外部网络的互连。这也是保证网络安全的重要方法之一。

特殊IP地址(保留IP地址)介绍#

就像我们每个人都有一个身份证号码一样，网络里的每台电脑(更确切地说，是每一个设备的网络接口)都有一个IP地址用于标示自己。我们可能都知道这些地址由四个字节组成，用点分十进制表示以及它们的A，B，C分类等，然而，在总数大约为四十多亿个可用IP 地址里，你知道下面一些常见的有特殊意义地址吗？我们一起来看看吧：#

一、0.0.0.0

严格说来，0.0.0.0已经不是一个真正意义上的IP地址了。它表示的是这样一个集合：所有不清楚的主机和目的网络。这里的“不清楚”是指在本机的路由表里没有特定条目指明如何到达。对本机来说，它就是一个“收容所”，所有不认识的“三无”人员，一律送进去。如果你在网络设置中设置了缺省网关，那么Windows系统会自动产生一个目的地址为0.0.0.0的缺省路由。

二、255.255.255.255

限制广播地址。对本机来说，这个地址指本网段内(同一广播域)的所有主机。如果翻译成人类的语言，应该是这样：“这个房间里的所有人都注意了！”这个地址不能被路由器转发。

三、127.0.0.1

本机地址，主要用于测试。用汉语表示，就是“我自己”。在Windows系统中，这个地址有一个别名“Localhost”。寻址这样一个地址，是不能把它发到网络接口的。除非出错，否则在传输介质上永远不应该出现目的地址为“127.0.0.1”的数据包。

四、224.0.0.1

组播地址，注意它和广播的区别。从224.0.0.0到239.255.255.255都是这样的地址。224.0.0.1特指所有主机，224.0.0.2特指所有路由器。这样的地址多用于一些特定的程序以及多媒体程序。如果你的主机开启了IRDP (Internet路由发现协议，使用组播功能)功能，那么你的主机路由表中应该有这样一条路由。

五、169.254.x.x

如果你的主机使用了DHCP功能自动获得一个IP地址，那么当你的DHCP服务器发生故障，或响应时间太长而超出了一个系统规定的时间，Wingdows系统会为你分配这样一个地址。如果你发现你的主机IP地址是一个诸如此类的地址，很不幸，十有八九是你的网络不能正常运行了。

六、10.x.x.x、172.16。x。x～172.31。x。x、192.168。x。x

私有地址，这些地址被大量用于企业内部网络中。一些宽带路由器，也往往使用192.168.1.1作为缺省地址。私有网络由于不与外部互连，因而可能使用随意的IP地址。保留这样的地址供其使用是为了避免以后接入公网时引起地址混乱。使用私有地址的私有网络在接入Internet时，要使用地址翻译(NAT)，将私有地址翻译成公用合法地址。在Internet上，这类地址是不能出现的。对一台网络上的主机来说，它可以正常接收的合法目的网络地址有三种：本机的IP地址、广播地址以及组播地址。

CSS中常用的HTML元素及标签

Fri, 30 Jun 2017 00:00:00 GMT

常用的HTML标签总结#

1. div 无意义标签，用来区分网页大模块，例如网页头部、主题内容、尾部

<div>无意义元素，用它来区分网页大模块</div>

1
banner
2
<div>区分模块
3
    <a href="http://www.baidu.com">
4
        <img src="pic.jpg" alt="备注/描述">
5
    </a>
6
    <a href="">
7
        <img src="" alt="图片加载出问题了" width="100px" height="100px">
8
    </a>
9
</div>

1. span 无意义标签,用来描述行内某个小模块
1. p <p>段落</p>
1. ul li 无序列表
1. ol li 有序列表
1. b 加粗
1. strong 加粗,浏览器解析的时候,有强调作用
1. body 身体,网页主体部分（内容在浏览器可视区显示）
1. a 超链接,描点

1
点击元素可以进行跳转的
2
<a href="链接路径" target="_blank">珠峰培训</a>
3
<a href="pic.jpg" target="_blank">珠峰培训</a>

1. img 插入图片

1
<img src="图片路径" alt="备注/描述">
2
<img src="pic.jpg" alt="备注/描述">

1. i 作用：斜体
1. em 强调作用：*斜体
1. h1-h6 标题
1. dl-dt-dd定义列表常用在新闻标题和摘要
- dt 定义标题
- dd 定义描述
- 一个dt可以多个dd进行描述

标签#

标签（由尖括号和关键字组成的超文本）
关键字（就是普通文本），在编辑html这门语言的时候，相关组织将这些文本归纳到了一定的规则中，是他有了特殊的含义和作用
标签的分类：开始标签、结束标签、空标签

1
<开始标签><空标签 />
2
<div></div>
3
<b></b>
4
<strong></strong>
5
<ul><li></li></ul>
6
<ol><li></li></ol>
7
<p></p>···
8
</结束标签>

标签属性：用来描述标签功能的，一般写在开始标签中，跟在标签名的后面，用空格隔开，一个标签可以有很多标签属性，每一个属性都用空格隔开

1
<开始标签 属性名="属性值" 属性名1="属性值"><结束标签>
2
<img src="url" alt="备注" />

html标签#

1. html标签HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
标签不会出现在页面中，只有标签中的内容才会显示在页面上：也就是<html>此处为内容</html>
标签不区分大小写，但是推荐使用小写：(X)HTML 版本中强制使用小写，这样更加严谨
标签分为闭合标签和空标签：闭合标签是指由开始标签和结束标签组成的一对标签，这种标签允许嵌套和承载内容，例如：<html></html>、<p></p>；空标签是没有内容的标签，在开始标签中自动闭合，例如：<img />、<br />、<hr />等

元素#

由标签（开始和结束标签中有内容）和内容组成，元素中内容可以为空，一个空标签也叫做一个元素

1
<div>content</div>-->div元素
2
<img src="url" alt="备注" />-->img元素

标签属性经过html的进化，舍弃了有关样式的标签属性，保留功能的标签属性
例如舍弃width bgcolor align，这些样式描述都放在css里面
保留alt title src href···

iframe标签#

在引入其他文件的时候，必须写宽度和高度

CSS中的form表单与table表格

Fri, 30 Jun 2017 00:00:00 GMT

form表单#

用来获取用户信息<form></form>

1
<form>
2
    <input type="radio" name="ok" checked="checked"><!--单选按钮--><label>满意</label><!--label 描述表单元素功能-->
3
    <!--type 类型-->
4
    <!--name 名字-->
5
    <!--checked 选中-->
6
    <input type="radio" name="ok"><!--单选按钮--><label>不满意</label>
7
    <input type="checkbox"><label>篮球</label>
8
    <input type="checkbox" checked><label>美女</label>
9
    <input type="checkbox"><label>彭于晏</label>
10
    <input type="checkbox"><label>陈冠希</label>
11
    <input type="checkbox"><label>杨颖</label>
12
    <input type="checkbox"><label>维密</label>
13

14
    <textarea maxlength="10" minlength="1"></textarea><!--文本域-->
15
    <!--maxlength 字符输入的最大长度-->
16
    <br>
17
    <label>姓名</label><input type="text">
18
    <br>
19
    <label>手机</label><input type="text">
20
    <br>
21
    <label>密码</label><input type="password">
22
</form>

展开收起

radio 单选按钮
- name=“ok”（name的值相同情况下）同时给到input type=“radio”，表示单选只能选中其中的一个
lable描述表单元素功能
type 类型
name 名字
cheked 选中
- 单独写checked也可以达到选中的效果
<input type="checkbox">checkbox 多选按钮
textarea 文本域
<textarea maxlength="10" minlength="1"></textarea>
- maxlength字符输入的最大长度

table表格#

<caption>标题</caption>
<thead>表头</thead>
- tr>th（标题单元格，th加粗居中）
<tfoot> 表尾
- tr>th（普通单元格）
- tr>td（普通单元格，td不加粗不居中）
tbody 表身
- tr>th（普通单元格）

thead和tfoot分别有一个 tbody可以有多个 tfoot一般放置在thead的后面，为了防止tbody中的内容过多，tfoot加载过慢的情况，但是虽然书写位置在前面，在页面中显示的时候，这部分依然在整个表格的最后面如果table用来搭建结构，我们只需写tr和td

1
<table>
2
    <tr>
3
        <td></td>
4
        <td></td>
5
        <td></td>
6
    </tr>
7
    <tr>
8
         <td></td>
9
         <td></td>
10
         <td></td>
11
    </tr>
12
</table>

CSS属性的继承及相关面试题

Fri, 30 Jun 2017 00:00:00 GMT

CSS属性的继承#

子级元素从父级元素身上继承的一些可继承的css属性

1
<style>
2
div{color:red;}
3
</style>
4
<p>woshiyige[biaoqian</p>

根据 CSS，子元素从父元素继承属性。看看下面这条规则：
- body {font-family: Verdana, sans-serif;}
  - 根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
继承的权重较小，可被其他选择器的样式覆盖

面试题#

哪些css样式可以被继承：和文字有关的css样式和列表有关的css样式

总结#

1.可继承属性
1)可以继承的文本相关属性

1
<azimuth><border-collapse><border-spacing><caption-side><color><cursor><direction><elevation><empty-cells><font-family><font-size><font-style><font-variant><font-weight><font><letter-spacing><line-height><list-style-image><list-style-position><list-style-type><list-style><orphans><pitch-range><pitch><quotes><richness><speak-header><speaknumeral><speak-punctuation><speak><speechrate><stress><text-align><text-indent><texttransform><visibility><voice-family><volume><whitespace><widows><word-spacing>

2)可以继承的列表相关属性

1
<azimuth><border-collapse><border-spacing><caption-side><color><cursor><direction><elevation><empty-cells><font-family><font-size><font-style><font-variant><font-weight><font><letter-spacing><line-height><list-style-image><list-style-position><list-style-type><list-style><orphans><pitch-range><pitch><quotes><richness><speak-header><speaknumeral><speak-punctuation><speak><speechrate><stress><text-align><text-indent><texttransform><visibility><voice-family><volume><whitespace><widows><word-spacing>

2.不可继承属性

1
<display><margin><border><padding><background><height><min-height><max-height><width><min-width><max-width><overflow><position><left><right><top><bottom><z-index><float><clear><table-layout><vertical-align><page-break-after><page-bread-before>和<unicode-bidi>

3.所有元素可继承：
<visibility>（可见性）和<cursor>(光标)
4.终端块状元素可继承：
<text-indent>和<text-align>
5.如果css属性不带有继承性，如何继承父级身上的属性，可以将要继承的属性的属性值写上inherit

1
ul{float:left;}
2
li{float:inherit;}

CSS常用选择器

Fri, 30 Jun 2017 00:00:00 GMT

CSS选择器#

因为html和css分离，那么就出现一个问题，如何选择一个元素，将样式添加给这个元素—>css选择器
选择器是css属性和html元素的连接桥梁，通过正确的选择器来找到想要操作的元素，添加一定的样式。
选择器{}

1.语法#

选择器{key:value;key:value;}

可以批量选择选择器名称相同的元素
通过选择器类型不同，可以选择不同的html元素

2.CSS基础选择器分类#

1) 标签选择器#

1-1).说明<直接使用元素标签进行选择>
- 例如：<p></p>
- p{color;}
1-2).权重<1>

1
<style>
2
h1{color:red;}
3
</style>
4
<h1>标签选择器</h1>

2) 类选择器#

2-1)说明:
- 1)将html元素的class标签属性值当作选择器使用，需要在这个属性值前面加一个“.”
- 2)通过元素的类名，来选择元素，一个元素可以有多个类名，都代表这个元素
- 3)类名是元素class属性中的属性值，例如(下例中的sum即为类名)
```
1
<p class='sum'></p>
2
<style>.sum{}</style>
```
- 4)一个html元素可以有多个css属性值（可以有多个类名，每一个类名之间用空格隔开）
- 5)类名可以重复使用

2-2)权重<10>

类选择器最前方一定要有点,例如:

1
<style>
2
.title{color:red;}
3
</style>
4
<h1 class="title title1">标签选择器</h1>
5
<h1 class="title">标签选择器</h1>
6
//以上class属性名为title中的文字颜色都讲被设置为红色

3) id选择器#

3-1).说明:
- 1).一个html元素，id属性值只能用一次，id在html中具有唯一性
- 2).类选择器最前方一定要有#
- 3).通过元素的id名，来选择元素
- 4).类名是元素id属性中的属性值(title/title1)，例如:
```
1
<style>
2
#title{color:red;}
3
</style>
4
<h1 id="title title1">id选择器</h1>
5
<h1 id="title">错误的，不识别</h1>
```
3-2).权重<100>

总结(根据权重)#

标签选择器相当于人的姓名,类选择器相当于人的名字,id选择器相当于身份证号码,是独一无二的。

4) 通配符选择器#

4-1) 说明:
- 1)通过*匹配全部html元素，包括根元素
- 2)一般不使用，因为全部匹配耗性能
- 3)语法:*{}
```
1
*{key:value}
```
4-2). 权重<1,可被覆盖

5) 并集选择器#

5-1).说明:
- 1). 你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。
- 例如：
```
1
h1,h2,h3,h4,h5,h6{color:green;}
```

6) 属性选择器#

6-1) 说明:
- 1. 对带有指定属性的 HTML 元素设置样式，可以为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。
  - 下面的例子为带有 title 属性的所有元素设置样式：
```
1
[title]{
2
        color:red;
3
        }
```
- 1. 利用标签的属性名和属性值来选择html元素
- 1. 属性选择器在使用的时候，如果一个元素有两个类名，那么是不生效的。
- 1. 属性选择器我们一般不会使用class,因为class可以直接使用类选择器
```
1

2
/*如果class值有两个，不能这样使用*/
3
<style>[class=div1]{};</style>
4
<div class="div1 p1" id="div2"></div>
5
<p class="p1"></p>
```
6-2) 语法：
[标签属性名]{}
[标签属性名=属性值]{}

1
<style>
2
h1[title]{} //交集选择器
3
//权重:标签+属性的权重=11
4
[type]{}
5
//权重：10
6
[type=text]{}
7
//权重:10
8
</style>
9
<a href="" title="">link</a>

6-3) 权重<10>

7) 属性和值选择器#

7-1) 说明:
1. 下面的例子为 title=“xx” 的所有元素设置样式：

1
[title=xx]
2
    {
3
        border:5px solid blue;
4
    }

1. 设置表单的样式

1
    input[type="text"]
2
    {
3
        width:150px;
4
        display:block;
5
        margin-bottom:10px;
6
        background-color:yellow;
7
        font-family: Verdana, Arial;
8
    }

8) 分组选择器#

8-1) 作用(应用场景)
1. 同一份css样式，可以一次性的添加给多个不同的html元素
8-2)语法

选择器1,选择器2,选择器3{};例如:

1
.box,li,.p1{color: red}
2
.box{color:green}

8-3)权重

分组选择器将不同的html分为一组，权重计算的时候都是独立计算，不会叠加。

9) 交集选择器#

9-1)一个元素具有两个属性(两种属性同属一个元素的时候)，可以使用交集选择器来进行元素的准确选择
9-2)组成选择器的两部分，必须属于同一个
- 反例(错误用法):
```
1
<style>h1.p1{} //-->什么都选择不到</style>
2
<p class="p1"></p>
3
<h1></h1>
```
- 正例(正确用法)
```
1
<p class='name1 name2' id='id1'></p>
2
<style>
3
//第一种:
4
p.name1{}
5
//第二种:
6
p#id1{}
7
//第三种:
8
.name1.name2{}
9
</style>
```
- 使用解说(正确用法):
  - 1.组合选择器之间没有任何的符号和空格
  - 2.标签选择器和其他选择器组合的时候，标签选择器要放在前面
  - 3.交集选择器是两个选择器组合在一起，可以是1)标签和类名,2)标签和属性选择器,3)标签和id,4)两个类选择器。

9-3). 作用

精确查找元素，增加选择器的权重

1
<style>
2
h1{}
3
//标签选择器 权重:1
4
[title]{}
5
//属性选择器 权重:10
6
[title=xx]{}
7
//属性选择器 权重:10
8
h2[title]{}
9
//交集选择器 权重:11
10
h2[title=xx]{}
11
//交集选择器 权重:11
12
</style>
13
<h1 title="xx"></h1>
14
<h2 title="xx"></h2>
15

16
<style>
17
p.p1{}
18
//交集选择器  权重:11
19
</style>
20
<p class="p1"></p>
21

22
<style>
23
.p1.p2{}
24
//交集选择器  权重:20
25
</style>
26
<p class="p1 p2"></p>

展开收起

10) 子集选择器#

10-1) 说明:
- 1. 与后代选择器相比，子元素选择器只能选择作为某元素子元素的元素。
- 1. 父级选择器是用来确定范围的，
- 1. 子级选择器才是我们要添加样式的那个元素
- 1. 子级选择器必须是紧邻的父子关系
10-2) 语法:
- 父级选择器>子级选择器
10-3). 权重
- 所有选择器之和

1
<style>
2
ul>li{color:red;}
3
//选择ul下的li 权重:2
4
</style>
5
<ul>
6
    <li></li>
7
</ul>

11) 后代选择器(派生选择器)#

11-1) 说明:
- 1. 在一个根元素的范围内，查找到它的后代元素
- 1. 后代选择器在写的时候尽量控制在３个左右
- 1. 选择器过多浪费性能，不建议使用

11-2) 举例:

html结构：

1
    <ol>
2
        <li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong>
3
        </li>
4
    </ol>

2). 列表中的 strong 元素变为斜体字，而不是通常的粗体字，可以这样定义一个派生选择器：

1
    li strong {
2
        font-style: italic;
3
        font-weight: normal;
4
                }

3). 后代选择器在写的时候尽量控制在３个左右,选择器过多浪费性能:

1
<style>
2
.div ul span{}
3
</style>
4
<div class="div">
5
    <ul>
6
        <li>
7
            <span>只选择这个span元素</span>
8
        </li>
9
    </ul>
10
</div>

11-3) 语法:
- 祖辈选择器要查找的后代选择器{};(中间用空格连接)

12) 相邻兄弟选择器#

12-1) 说明:
- 1). 相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。
- 2). 通过各个元素选择弟弟选择器,两个选择器之间用“+”连接;例如:
  - h1 + p {margin-top:50px;}

12-2) 语法:

哥哥选择器+弟弟选择器{};

1
<style>
2
    .list1+li{color:red;}
3
    //22222变为红色
4
    .list3+li{color:green;}
5
    //4444变为绿色
6
</style>
7
<ul>
8
    <li class="list1">11111</li>
9
    <li>22222</li>
10
    <li class="list3">33333</li>
11
    <li>4444</li>
12
</ul>

12-3) 权重<选择器之和>

13) 伪类选择器#

13-1) 说明:
- 1. 给一个元素添加某种状态
  - 例如<鼠标经过时>/获取焦点时/鼠标点击时
13-2) 权重<10>

13-3) 举例:

a标签

CSS 伪类用于向某些选择器添加特殊的效果

1
<style>
2
    a:link {color: #FF0000}
3
    /* 未访问的链接 是默认状态*/
4
    a:visited {color: #00FF00}
5
    /* 已访问的链接 鼠标点击后的状态*/
6
    a:hover {color: #FF00FF}
7
    /* 鼠标移动到链接上 鼠标经过的状态*/
8
    a:active {color: #0000FF}
9
    /* 选定的链接 鼠标点击的状态*/
10
</style>
11
<a href="javascript:void (0)">最初形态</a>
12
<a href="javascript:void 0">赛亚人形态</a>
13
<a href="javascript:">超级赛亚人形态</a>

1. input标签

1
<style>
2
        .input{border: 1px solid gainsboro}
3
        .input:hover{border-color: gray}
4
        .input:focus{border-color: blue}
5
        /*input:focus 鼠标聚焦后的状态，input独有的属性*/
6
</style>
7
<input type="text" class="input">

14) CSS 伪元素#

14-1) 说明:
- 1. 通过css代码向指定元素内添加假的（html中不存在的）元素

14-2) 举例:

CSS 伪元素用于向某些选择器设置特殊效果

1. before
- “before”会出现在div所有内容之前
- ""伪元素可以在元素的内容前面插入新内容。
- 下面的例子在每个 <h1> 元素前面插入内容:‘我是一个伪元素’：
```
1
h1:before
2
    {
3
    content:'我是一个伪元素';
4
    }
```

after

2-1) 会出现在div所有内容之后，使用伪元素的时候要保证两个前提
2-2) 要有display这个属性

2-3) 要有content这个属性，这个属性的属性值可以为空，但是引号不能少(content:""):

1
<style>
2
    div{
3
        width: 300px;
4
        height: 300px;
5
        background-color: red;
6
        }
7
    div:before{
8
        display: block;
9
        content: "我是before";
10
        font-size: 40px;
11
        color: white;
12
                }
13
    div:after{
14
        display: block;
15
        content: "我是aftre";
16
        font-size: 40px;
17
        color: blue;
18
                }
19
</style>
20
<div>
21
    <span>我是span</span>
22
</div>

展开收起

网页显示：
Alt 伪元素选择器
“伪元素选择器”

注意#

1.选择器的查找机制#

选择器的查找机制是从右向左,例如:

1
<style>
2
.div ul li{}
3
<!-- 第一步选择这个文档中所有的li
4
第二步选择哪些li是ul下面的
5
第三步选择哪些li是ul下面，ul还是.div1下面的 -->
6
</style>

2.选择器的组成最好不要超过三个#

3.后代选择器没有必要将每一层元素都写出来，只写那些关键节点即可(具有代表性的)#

CSS标签语义化

Fri, 30 Jun 2017 00:00:00 GMT

标签语义化的重要性/为什么要遵循标签语义化：合理的标签做合理的事情#

1、重要的内容，要放在语义重要的标签中，利于SEO优化(搜索引擎榨取),利于SEO优化(也就是搜索引擎的抓取，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重);
- 浏览器会按照每个标签的意义去解析这个标签中的内容:h1—>这是一个大标题，意义很重要，搜索引擎会重点抓取这个里面的内容
- p—>段落浏览器在展现这一部分的时候，会独立成一块，让网页结构更加清晰，给用户更好的浏览体验
2、在没有css样式的时候，页面也可以整齐的显示效果
3、更好的支持各种终端，例如无障碍阅读和有声小说等；
4、利于团队协作和后期维护

日常工作中怎样遵循标签语义化#

1、尽量减少使用无意义标签，例如span和div；
2、尽量不使用标签本身的css属性，例如b、font、s等标签，如果需要这些样式，那么使用css样式来进行添加；
3、在需要强调的部分，使用strong、em，但是样式尽量使用css样式来描述；
4、表格搭建时，使用`表格头部表格身体表格尾部；
5、列表搭建时，使用
定义列表
；`

国家评比一个网站的关键点：访问量（流量/点击量）

CSS的引入方式

Fri, 30 Jun 2017 00:00:00 GMT

css如何在html中使用（html引入css的四种方法）#

1. 行内式：直接写在标签内，通过标签属性style引入
- 媒介：style属性<style type="text/css">选择器{}</style>

1
<div style="css属性名:属性值；"></div>
2
<img style="css属性名:属性值；"alt="">

css想要生效，html中必须有这个元素才可以
1. 内嵌式（内联式）<将css代码写在style元素内>，通过css选择器选择html元素，将css样式添加个这个元素
- 媒介：style标签+选择器
style这个元素一般放在head元素内
- style元素：盛装css样式

1
<style>
2
div{height:100px;}
3
</style>
4

5
<div></div>

1. 外联式（外链式）：将css代码单独放置在一个css文件中，再通过link标签将这个css文件引入到html文件中
- 媒介：link标签+选择器

1
<link rel="stylesheet" herf="css文件链接地址" type="text/css">

css这个文件中不能出现标签
1. 导入式：都是引入一个单独的css文件
- 媒介：@import"css文件链接地址";
  - 当有多个css文件的时候，可以使用导入式先导入到一个css文件中，再用外链式link外链进html文件
- @import"css文件链接地址";既不是html标签，也不是css属性，他是一条声明语句
- 这条语句必须写在style元素内,或者css文件内
- 这条语句必须在所在文件内的第一行

外链式和导入式的差别：#

link和@import虽然都是引入外部的css文件，但是他们是由天差地别的区别的
- 1. link是html标签，@import完全是css提供的方式，要写在css文件或者style标签中。
- 1. 他们的加载顺序也是有区别的，当一个页面被加载的时候，link引用的css文件会被同时加载，而@import引入的css文件会等页面全部下载完后再加载。
- 1. 当使用javascript控制DOM去改变css样式的时候，只能使用link标签，因为import是不能被DOM控制的。

在工作中常用的引入方式是外链式#

四种引入方式的权重（一个html元素最终加载的css样式是谁决定的）
- 有行内式的时候，听行内的
- 在选择器相同的情况下，谁最后加载就听谁的
外链式和内嵌式一般都放在head元素内

CSS层叠样式表#

css的作用：
- 给html文档添加静态或者动态的样式
css和html如何融合到一起
在css文件中如何选择一个html元素，将样式添加给这个元素

HTML基本结构

Fri, 30 Jun 2017 00:00:00 GMT

html的基本结构#

1
<!DOCTYPE html>
2
文档声明：必须放在html文件的第一行；如果没有文档声明会触发浏览器的怪异模式
3
<html>
4
html元素：告知浏览器，我是一个html文件
5
    <head>
6
    head元素：文档的头部，一般放在文档头部的内容不会显示在浏览器的可视区内
7
    <meta charset="utf-8">规定一个语法
8
    必须放在head的第一部分
9
    <title>标题，显示在浏览器的页卡位置，title中的内容也会被seo抓取</title>
10
    <body>供用户浏览的所有内容，标签、图片、文本、视频···</body>
11
    </head>
12
</html>

一个html文件也叫做一个网页，可以称作是一个文档(document)
这个文档从html元素开始，一致向下分支延伸，像一颗大树一样，所以我们将html元素叫做这个文档的根元素

<!DOCTYPE html>html5的文档声明

作用：定义这个文档类型，浏览器先识别这句话，会按照定义的类型去解析这个文档
html5的文档声明，那么浏览器就会按照html5的规则解析整个页面 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">html4版本的文档声明
所有高版本都会向下兼容，所以在以后的工作中，我们直接将文档声明写错html5就可以了
文档声明必须写在html文件的第一行
文档声明不区分大小写
如果html文件没有文档声明，会触发浏览器的怪异模式
文档声明不是一个html标签

1.html元素#

此元素告知浏览器其自身是一个html元素是由开始和结束标签组成的，html文件里面所有的内容都会放在这个这个元素内

2.head元素#

整个文档的头部，head元素自带隐藏功能，display;里面的内容不会隐藏，只不过一般放置在head元素中的其他元素和内容也是自带隐藏功能的，例如link、script、meta···
<script></script>与head标签一样具有隐藏功能，写在其内的内容在网页不显示

3.`<meta charset="UTF-8">`#

4.`<meta>`规定了html文档的元信息#

charset=“UTF-8” 文档的编码
- UTF-8 国际通用编码
- gbk 国标
- gb2312 国标
name=“keyword” content=“关键词”
- name=“keyword” content=“HTML5J5…”
- SEO优化有关
- SEO搜索引擎

<meta name="keyword" content="关键词"> <meta name="description" content="勿忘初心,方得始终">

5.title元素#

html文档名称一个页面只有一个title元素放文字显示在浏览器的页卡（页头）位置

6.link标签#

<link href="favicon.ico" type="image/x-icon" rel="shortcut icon">
- 图标让设计师生成
- 一般整个图片放在整个项目的根目录下
- 显示在浏览器页卡位置，title内容之前
<link rel="stylesheet" herf="url" type="texe/css">
- 引入一个外部的css文件
- rel不能缺少 stylesheet样式表
- type可以省略但是建议写全

7.body元素#

定义整个文档的主体部分，所有展示给用户的内容都要放在这个元素中
body中有常用的html元素（div、ul），文本内容、音频、视频、图片、表单

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <meta charset="UIF-8">
5
        <title></title>
6
    </head>
7
</html>

HTML标签分类

Fri, 30 Jun 2017 00:00:00 GMT

html标签分类#

html标签又叫做html元素，它分为块级元素和内联元素（也可以叫做行内元素），都是html规范中的概念。

块级元素
块级元素是指本身属性为display;的元素。因为它自身的特点，我们通常使用块级元素来进行大布局（大结构）的搭建
块级元素的特点：
1. 独占一行，每一个块级元素都会从新的一行重新开始，从上到下排布
1. 可以直接控制宽度、高度以及盒子模型的相关css属性
1. 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度
1. 在不设置高度的情况下，块级元素的高度是它本身内容的高度
- 常用的块级元素:
- div 常用块级容器，也是css layout的主要标签
- h1 大标题
- h2 副标题
- h3 三级标题
- h4 四级标题
- h5 五级标题
- h6 六级标题

1
标题：
2
<h1>一级标题</h1>
3
<h2>二级标题</h2>
4
h${$级标题}*6+tab生成：
5
<h1>1级标题</h1>
6
<h2>2级标题</h2>
7
<h3>3级标题</h3>
8
<h4>4级标题</h4>
9
<h5>5级标题</h5>
10
<h6>6级标题</h6>

hr 水平分隔线
menu 菜单列表
ol 有序列表 li列表项

1
有序列表
2
<ol>
3
    <li>盗天仙图</li>
4
    <li>名侦探</li>
5
    <li>鬼吹灯</li>
6
    <li>盗墓笔记</li>
7
    <li>名侦探</li>
8
    <li>鬼吹灯</li>
9
</ol>

ul 无序列表 li列表项

1
无序列表
2
<ul>
3
    <li><span style="color:red">√<b>有保证</b></span>:先学习考试后入学</li>
4
    <li><span style="color:red">√<b>有实力</b></span>:专注JS培训七年铸就传奇就业,平均工资超12K</li>
5
    <li><span style="color:red">√<b>有深度</b></span>:结合的大学算法和数据结构的基础课</li>
6
    <li><span style="color:red">√<b>重原生</b></span>:狠练原生代码,原生JS+Node才是王道</li>
7
    <li><span style="color:red">√<b>重应用</b></span>:PC+移动端+H5+CSS3+node的前后台全栈项目</li>
8
    <li><span style="color:red">√<b>重未来</b></span>:app开发,微信开发,angular,es6,前沿技术</li>
9
</ul>

dl 定义列表 dt 定义术语 dd定义描述
table 表格
p 段落

1
<div class="poem">
2
<h4>早发白帝城</h4>
3
<h5>作者：李白</h5>
4

5
<p>朝辞白帝彩云间，<br>
6
    千里江陵一日还。<br>
7
    两岸猿声啼不尽，<br>
8
    轻舟已过万重山。<br>
9
    <img src="timg.jpg" alt="李白">
10
</p>
11
</div>

1
<div>
2
    <h4 align="center">早发白帝城</h4>
3
    <h5 align="center">作者：李白</h5>
4
    <p align="center">朝辞白帝彩云间，</p>
5
    <p align="center">千里江陵一日还。</p>
6
    <p align="center">两岸猿声啼不尽，</p>
7
    <p align="center">轻舟已过万重山。</p>
8
    <img src="timg.jpg" alt="李白">
9
</div>

form 交互表单
内联元素
内联元素是指本身属性为display;的元素。因为它自身的特点，我们通常使用块级元素来进行文字、小图标（小结构）的搭建。
内联元素的特点：
1. 和其他内联元素从左到右在一行显示
2.不能直接控制宽度、高度以及盒子模型的相关css属性，但是直接设置内外边距的左右值是可以的
3.内联元素的宽高是由本身内容的大小决定（文字、图片等）
4.内联元素只能容纳文本或者其他内联元素（此处请注意，不要在内联元素中嵌套块级元素）
常用的内联元素:
span 常用内联容器，定义文本内区块
a 锚点
文本设置类:
- b 加粗
- strong 加粗强调
- i 斜体
- em 斜体强调
- s 中划线（不推荐使用）
- strike 中划线
- del 文档中已被删除的文本
- big 大字体文本、small小字体文本）
- small 小字体文本
- br 强制换行
- u 下划线
- textarea 多行文本输入框
- input 输入框
- select 下拉列表
- label（input 元素定义标注/标记）、img
- sub 下标
- sup 上标

markdown的简单使用

Fri, 30 Jun 2017 00:00:00 GMT

#—> 一级标题相当于html中的h1标签
[TOC]—>目录

##—> 二级标题相当于html中的h2标签
###—> 三级标题相当于html中的h3标签
####—> 四级标题相当于html中的h4标签
#####—> 五级标题相当于html中的h5标签
######—> 六级标题相当于html中的h6标签
在每个段落或标题结束后增加一个回车（一行空白）
普通段落相当于html中的p标签

列表#

-+空格（-列表-）
-+空格+tab（二级列表）
-+空格+tab+tab（三级列表）
如何缩进 —> 点击tab键
编辑新的内容（英文状态下，按住shift+—）

`>` (大于号加空格)—> 摘要或标注#

编辑表格<左边有冒号代表左对齐>,右边有冒号代表右对齐,两边都有冒号代表居中#

快捷键：ctrl+alt+T
|标题|标题|标题|
|:----|----:|:----:|
|左对齐|右对齐|居中|
例如:

标题	标题	标题
左对齐左对齐左对齐	右对齐右对齐右对齐	居中居中居中居中
内容	内容	内容

编辑代码块`<div>div</div>`#

1
<div>div</div>
2
<div>div</div>
3
<div>div</div>

编辑行内代码<独立的行间代码>#

html中的p标签：<p>

插入图片#

可以直接复制粘贴
快捷键：ctrl+G

插入链接#

ctrl+L

保存笔记的方法#

点击【账号】选择【导出】 —> 可以导出md格式，pdf格式，html格式
- md格式：再次打开时，可以使用文本文档打开，将内容复制一份粘到markdown软件中
- pdf格式：直接观看，但不能修改
- html格式：可以浏览器中直接观看，可以在代码编辑器中修改

快捷键#

文档管理 —> Ctrl+O
帮助 —> Ctrl+/
最大化编辑器 —> Ctrl+Enter
预览文档 —> Ctrl+Alt+Enter
同步文档 —> Ctrl+S
创建文档 —> Ctrl+Alt+N
系统菜单 —> Ctrl+M
斜体 —> Ctrl+I
粗体 —> Ctrl+B

Windows快捷键整理

Fri, 30 Jun 2017 00:00:00 GMT

Windows快捷键整理#

window+E 打开我的电脑
alt+tab 切换操作界面

window+R 运行
ctrl+C 复制
ctrl+X 剪切
ctrl+S 保存
ctrl+shift+S 另存
ctrl+Z 撤销
ctrl+W 关闭
ctrl+A 全选
ctrl+V 粘贴
ctrl+alt+delete 资源管理器或菜单右键选择资源管理器
F2 重命名
web：
- ctrl+alt+L整理代码

前端三层

Fri, 30 Jun 2017 00:00:00 GMT

前端三层#

html结构是直接被浏览器解析加载
CSS样式是在html结构之上去装点网站
javascript 交互动态效果/数据交互

基础知识#

1. 网页
- 网页是构成网站的基本元素，通俗来讲，一个html文件就是一个网页
1. 网站
- 是由很多个网页组成的，共同为一个目标服务的网页集合
1. 站群（流水线统一化管理）
- 由很多网站组成的，为同一个公司服务。
- 例如整个百度下所属的子公司都有自己的网站。例如：百度搜索/糯米/音乐/手机助手/百度金融等组成的就是一个站群。

HTTP（超文本传输协议）#

HyperText Transfer Protocol
在万维网上提供一种发布和接收HTML页面（网页）的方法。
eg：http://www.baidu.com

404服务器无响应

步骤#

输入网址，建立链接，建立客户端和服务端的连接。
发送请求信息：客户端发送一个请求给服务器
发送相应信息：服务器找到请求后，给予相应的响应信息
关闭连接：客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户机与服务器断开连接

服务器#

服务器，是提供计算服务的设备。由于服务器需要响应服务请求，并进行处理，因此一般来说服务器应具备承担服务并且保障服务的能力。
在网络环境下，根据服务器提供的服务类型不同，分为文件服务器，数据库服务器，应用程序服务器，WEB服务器等。
- 防篡改：WEB端服务器一旦受到攻击，在0.0n秒做出反应，将内网服务器中的内容，马上覆盖在WEB服务器上。
- 负载均衡：平均WEB服务器压力，将用户访问进行分流。
- vpn：用来翻墙，有指定账号就可以通过这个产品进行内网访问。

浏览器#

浏览器是指可以显示网页服务器或者文件系统的HTML文件（标准通用标记语言的一个应用）内容，并让用户与这些文件交互的一种软件。
html，css，js都是运行在这个软件中，浏览器是一个工厂，html/css/js是工人和原料。
IE6—>IE7（很快淘汰）—>IE8(时间较长，稳定性好)—>IE9(半年到一年)—>IE10—>IE11—>IE11—>IE(Edge)
最好用的浏览器—>谷歌

网页的基本组成#

HTML<是网页的骨架>,支撑起血肉(文字,图片,音视频等)
CSS<表皮和衣服>、化妆品
javascript：动态和交互

HTML（超文本标记语言）#

网页本身就是一种文本文件（除了文字再无其他），只有通过特定的标记描述，那些普通文本才能在浏览器中正常显示。
在页面中如果遇到图片、音视频的时候，如何用文本描述，需要用超文本进行引入才可以正常显示。

HTML文件的特点#

浏览器根据标记来解析和描述内容（从html的第一行开始向下），如果遇到错误，浏览器不会指出也不会报错，会跳过此处继续加载，编辑人员需要根据显示效果去分析哪里出错误了——html不会报错

HTML的兼容问题#

因为浏览器是由不同厂商生产的，所以对html的解析有分歧，产生了页面效果显示不一致的情况，我们将这个问题叫做兼容问题。

超文本（标签）#

标签语法：
- 由成对的尖括号和关键字组成，叫做标签。<TagName>
- 关键字（标签名）：是已经规范过的，不是自己随便制造的。
- 例如：<div> , </h2> , <img/>

标签属性#

属性提供了这个元素的更多信息，语法：由属性名和属性值组成（键值对 key=“value”）

1
<span style="font-family:宋体;" title="标题">
2
span是标签名
3
style是标签属性名
4
"font-family:宋体;标签属性值

一个标签可以由多个标签属性，每一个属性之间用空格隔开

标签的分类#

开始标签 <div>
结束标签 </div>
自闭合标签(空标签) <br/>

HTML元素#

1.可以将元素理解成一个容器，容器中放置的就是
2.由标签和内容组成的，叫做元素。

1
<div>此处是内容</div>

元素分类#

由开始标签和结束标签组成的元素，可以进行嵌套（一个元素包着另一个元素），元素中可以添加内容，只有一个空标签，只能进行功能的添加，例如img元素
标签和元素是用来标记和描述内容的，所以这些标签和元素用户是看不到的，用户只能看到这个元素的内容。

相对路径与绝对路径

Fri, 30 Jun 2017 00:00:00 GMT

路径url#

绝对路径#

指带域名的文件的完整路径或磁盘中指定文件的全部路径。
- 例如：C:\windows\system32\cmd.exe
- 例如：http://www.zhufengpeixun.com/
可以理解为地址：珠峰培训的地址是北京昌平区回龙观东大街3号楼02号东段珠峰培训

相对路径#

是指在同一个文件夹下通过一个参考点找到其他文件
返回上一级用“../”
平级之间直接写文件名
下一级用“/”

1
<link rel="stylesheet" href="../面试题.md">

Nodejs的全局对象和全局变量

Tue, 27 Jun 2017 00:00:00 GMT

全局对象#

所有模块都可以调用
1. global：表示Node所在的全局环境，类似于浏览器中的window对象。
- 你可以通过console.log(global);来输出一下global;

1-1. global全局对象里常用的变量

__dirname 存储的是在nodejs中执行javascript所在的绝对目录

1
console.log(__dirname);
2
//C:\Users\Gao\Documents\webstore学习文件\node

__filename 文件名

1
console.log(__filename);
2
//C:\Users\Gao\Documents\webstore学习文件\node\global.js

1. process 程序所执行的一些相关的内容信息的封装对象

指向Node内置的process模块，允许开发者与当前进程互动。

例如你在DOS或终端窗口直接输入node，就会进入NODE的命令行方式（REPL环境）。如果要退出的话，可以输入 process.exit();
2-1. 和输出相关的 process.stdout/process.stderr
- 1. process.stdout —> standard output —> 标准的信息输出
- 1. process.stderr —> standard error —> 标准的错误输出
  - console.info和console.error这些相关的输出功能就是调用的process.stdout和process.stderr来完成的
    1 process.stdout.write("this is stdout"); 2 process.stderr.write("this is stderr");//红色的
2-2. process如何去监听一些事件
- 1. process.stdin.on() 监听用户输入的键盘信息
- 1. process.on()监听操作系统对node发出的一些信号

2-3. 如何读取输入用户的键盘输入

process.stdin

在使用process.stdin之前要先对他进行一下编码设置

1
process.stdin.setEncoding("utf-8");
2
//这里的编码设置和平常编写网页时候的文本编码不一样
3
//在这里如果想读取纯文本信息  只要把他的编码设置成utf-8就可以了   不需要去考虑类似jbk或者jb2312来区分是不是中文
4
//on方法来监听用户相关的输入事件
5
// process.stdin.on("data",function (data) {
6
//     console.log(data);
7
// });
8
process.stdin.on("readable",function () {
9
    var data=process.stdin.read();
10
    //回调函数没有参数 需要通过process.stdin.read来读取用户的键盘输入信息
11
    console.log(data);
12
});
13

14
//exit事件
15
process.on("exit",function () {
16
    console.log("programe will exit");
17
});
18
//在程序正常退出的之前  会触发exit事件
19

20
//SIGINT --> signal    interrupted  信号 被中断
21
//当一个信号被中断的时候就会触发SIGINT事件(cmd 中  ctrl+c会中断信号)
22

23
process.on("SIGINT",function () {//会改变程序默认的退出行为
24
    console.log("programe has a sigint");
25
    process.exit();//让程序正常退出
26
});

展开收起

1. console：指向Node内置的console模块，提供命令行环境中的标准输入、标准输出功能。
  
  通常是写console.log();

全局函数#

1. 定时器函数：共有4个，分别是setTimeout(), clearTimeout(), setInterval(), clearInterval()。
1. require：用于加载模块

全局变量：#

1. _filename：指向当前运行的脚本文件名。
1. _dirname：指向当前运行的脚本所在的目录

准全局变量#

模块内部的局部变量，指向的对象根据模块不同而不同，但是所有模块都适用，可以看作是伪全局变量，主要为module, module.exports, exports等。
module变量指代当前模块。module.exports变量表示当前模块对外输出的接口，其他文件加载该模块，实际上就是读取module.exports变量。
module.id 模块的识别符，通常是模块的文件名。
module.filename 模块的文件名。
module.loaded 返回一个布尔值，表示模块是否已经完成加载。
module.parent 返回使用该模块的模块。
module.children 返回一个数组，表示该模块要用到的其他模块。
这里需要特别指出的是，exports变量实际上是一个指向module.exports对象的链接，等同在每个模块头部，有一行这样的命令。 var exports = module.exports;
这造成的结果是，在对外输出模块接口时，可以向exports对象添加方法，但是不能直接将exports变量指向一个函数： exports = function (x){ console.log(x);};
上面这样的写法是无效的，因为它切断了exports与module.exports之间的链接。
如果你觉得，exports与module.exports之间的区别很难分清，一个简单的处理方法，就是放弃使用exports，只使用module.exports。

JS中的caller和callee

Mon, 26 Jun 2017 00:00:00 GMT

`caller`#

检验函数被谁调用过
检验函数被谁调用过返回值是调用这个函数的函数本身,没有的话返回null

`arguments.callee`#

函数本身

1
function Fn() {
2
    console.log(arguments.callee.caller);//-->function fn() {Fn()}
3
    //-->arguments.callee 函数本身
4
    //caller:检验函数被谁调用过 返回值是调用这个函数的函数本身,没有的话返回null
5
    console.log(Fn.prototype.constructor === arguments.callee);//-->true
6
}
7
function fn() {
8
    Fn()
9
}
10
fn();

1
function sum(n) {
2
    console.log(arguments.callee===arguments.callee.caller);
3
    //->第一次输出false，因为第一次是函数自己执行，即自调用 自调用的时候console.log(arguments.callee.caller) 输出null   而此时arguments.callee 函数本身仍然是sun函数本身   所以输出false;
4
    // -->当自调用执行完成后  arguments.callee===arguments.callee.caller===sum这个函数本身   --->  返回true
5
    if(n<=0){
6
        return 0
7
    }
8
    return n+sum(--n);
9
}
10
console.log(sum(10));//55

JS中的同步异步编程思想

Fri, 23 Jun 2017 00:00:00 GMT

JS是单线程的->JS就是个傻子,脑子一根筋,做着当前的这件事情,没有完成之前,绝对不会做下一件是事情

JS中的两种编程思想<同步>、异步#

1、同步编程->上一件事情没有完成,继续处理上一件事情,只有上一件事情完成了,才会做下一件事情(JS中大部分都是同步编程的)

1
for (var i = 0; i < 100000; i++) {
2
    if (i == 99999) {
3
        console.log("循环结束了~~");//->(1)
4
    }
5
}
6
console.log("ok");//->(2)

1. for循环就是同步编程的,只有循环结束后,才会继续执行下面的代码

1
while (1) {
2

3
}
4
console.log("ok");//->永远都不会执行的,因为上面的循环是死循环,循环永远都不会结束

2、异步->规划要做一件事情,但是不是当前立马去执行这件事情,需要等一定的时间,这样的话,我们不会等着它执行,而是继续执行下面的操作,“只有当下面的事情都处理完成了,才会返回头处理之前的事情;如果下面的事情并没有处理完成,不管之前的事情有没有到时间,都踏踏实实的给我等着”
在JS中异步编程只有四种情况:
- 1)定时器都是异步编程的
- 2)所有的事件绑定都是异步编程的
- 3)Ajax读取数据的时候,我们一般都设置为异步编程
- 4)回调函数也是异步编程的

1
var n = 0;
2
window.setTimeout(function () {
3
    n++;
4
    console.log(n);//->1 (2)
5
}, 1000);
6
console.log(n);//->0 (1)

3.定时器

每一个浏览器对于定时器的等待时间都有一个最小的值,谷歌<5>6ms IE<10>13ms,如果设置的等待时间小于这个值,不起作用,还是需要等到最小时间才执行的;尤其是写0也不是立即执行;

1
var n = 0;
2
window.setTimeout(function () {
3
    n++;
4
    console.log(n);//->1 (2)
5
}, 0);
6
console.log(n);//->0 (1)
7
//-->先输出0  再输出1

1. 我们定时器设置的等待时间不一定就是最后执行的时间,如果定时器之后还有其他的事情正在处理中,不管定时器的时间有没有到,都是不会执行定时器的

1
var n = 0;
2
window.setTimeout(function () {
3
    n++;
4
    console.log(n);//->不执行的
5
}, 0);
6
console.log(n);//->0 (1)
7
while (1) {//->死循环
8
    n++;
9
}
10
console.log(n);//->不执行
11
var n = 0;
12
window.setTimeout(function () {
13
    n += 2;
14
    console.log(n); //->7 (4)
15
}, 20);
16
window.setTimeout(function () {
17
    n += 5;
18
    console.log(n); //->5 (3)
19
}, 5);
20
console.log(n);//->0 (1)
21
for (var i = 0; i < 10000000; i++) {}
22
console.log(n);//->0 (2)

展开收起

3)事件绑定

1
var oLis=document.getElementsByTagName("li");
2
    for(var i=0;i<oLis.length;i++){
3
        oLis[i].onclick=function(){
4
            tabChange(i);
5
        }
6
    }

DOS基本命令大全

Tue, 20 Jun 2017 00:00:00 GMT

基本命令#

1、列出文件
- ls 参数目录名
- 例: 看看驱动目录下有什么 /System/Library/Extensions
- 参数 -w 显示中文，-l 详细信息， -a 包括隐藏文件
2、转换目录
- cd 例：想到驱动目录下溜达一圈 cd /System/Library/Extensions
3、建立新目录
- mkdir 目录名
- 例：在驱动目录下建一个备份目录 backup
- mkdir /System/Library/Extensions/backup
- 在桌面上建一个备份目录 backup
- mkdir /User/用户名/Desktop/backup
4、拷贝文件
- cp 参数源文件目标文件
- 例：想把桌面的Natit.kext 拷贝到驱动目录中
- cp -R /User/用户名/Desktop/Natit.kext /System/Library/Extensions
- 参数R表示对目录进行递归操作，kext在图形界面下看起来是个文件，实际上是个文件夹。
- 把驱动目录下的所有文件备份到桌面backup
- cp -R /System/Library/Extensions/* /User/用户名/Desktop/backup
5、删除文件
- rm 参数文件
- 例：想删除驱动的缓存 rm -rf /System/Library/Extensions.kextcache
- rm -rf /System/Library/Extensions.mkext
- 参数－rf 表示递归和强制，千万要小心使用，如果执行了 rm -rf / 你的系统就全没了
6、移动文件
- mv 文件
- 例：想把AppleHDA.Kext 移到桌面
- mv /System/Library/Extensions/AppleHDA.kext /User/用户名/Desktop
- 想把AppleHDA.Kext 移到备份目录中
- mv /System/Library/Extensions/AppleHDA.kext /System/Library/Extensions/backup
7、文本编辑
- nano 文件名
- 例：编辑natit Info.plist
- nano /System/Library/Extensions/Natit.kext/Info.plist

目录操作

命令名功能描述使用举例
mkdir 创建一个目录 mkdir dirname
rmdir 删除一个目录 rmdir dirname
mvdir 移动或重命名一个目录 mvdir dir1 dir2
cd 改变当前目录 cd dirname
pwd 显示当前目录的路径名 pwd
ls 显示当前目录的内容 ls -la

文件操作

命令名功能描述使用举例
cat 显示或连接文件 cat filename
od 显示非文本文件的内容 od -c filename
cp 复制文件或目录 cp file1 file2
rm 删除文件或目录 rm filename
mv 改变文件名或所在目录 mv file1 file2
find 使用匹配表达式查找文件 find . -name “*.c” -print
file 显示文件类型 file filename

选择操作

命令名功能描述使用举例
head 显示文件的最初几行 head -20 filename
tail 显示文件的最后几行 tail -15 filename
cut 显示文件每行中的某些域 cut -f1,7 -d: /etc/passwd
colrm 从标准输入中删除若干列 colrm 8 20 file2
diff 比较并显示两个文件的差异 diff file1 file2
sort 排序或归并文件 sort -d -f -u file1
uniq 去掉文件中的重复行 uniq file1 file2
comm 显示两有序文件的公共和非公共行 comm file1 file2
wc 统计文件的字符数、词数和行数 wc filename
nl 给文件加上行号 nl file1 >file2

进程操作

命令名功能描述使用举例
ps 显示进程当前状态 ps u
kill 终止进程 kill -9 30142

时间操作

命令名功能描述使用举例
date 显示系统的当前日期和时间 date
cal 显示日历 cal 8 1996
time 统计程序的执行时间 time a.out

网络与通信操作

命令名功能描述使用举例
telnet 远程登录 telnet hpc.sp.NET.edu.cn
rlogin 远程登录 rlogin hostname -l username
rsh 在远程主机执行指定命令 rsh f01n03 date
ftp 在本地主机与远程主机之间传输文件 ftpftp.sp.net.edu.cn
rcp 在本地主机与远程主机之间复制文件 rcp file1 host1
ping 给一个网络主机发送回应请求 ping hpc.sp.net.edu.cn
mail 阅读和发送电子邮件 mail
write 给另一用户发送报文 write username pts/1
mesg 允许或拒绝接收报文 mesg n

Korn Shell 命令

命令名功能描述使用举例
history 列出最近执行过的几条命令及编号 history
r 重复执行最近执行过的某条命令 r -2
alias 给某个命令定义别名 alias del=rm -i
unalias 取消对某个别名的定义 unalias del

其它命令

命令名功能描述使用举例
uname 显示操作系统的有关信息 uname -a
clear 清除屏幕或窗口内容 clear
env 显示当前所有设置过的环境变量 env
who 列出当前登录的所有用户 who
whoami 显示当前正进行操作的用户名 whoami
tty 显示终端或伪终端的名称 tty
stty 显示或重置控制键定义 stty -a
du 查询磁盘使用情况 du -k subdir
df /tmp 显示文件系统的总空间和可用空间
w 显示当前系统活动的总信息

IE版本条件注释语句(全)

Tue, 20 Jun 2017 00:00:00 GMT

IE版本条件注释语句(全)

1
<!--[if lt IE 9]>
2
<script charset="utf-8" type="text/javascript" src="js/html5.min.js"></script>
3
<![endif]-->

1、只有IE才能识别

1
<!--[if IE]>
2
<link type="text/css" rel="stylesheet" href="my.css" />
3
<![endif]-->

因为只有IE5以上的版本才开始支持IE条件注释，所有“只有IE”才能识别的意思是“只有IE5版本以上”才能识别。
2、只有特定版本才能识别

1
<!--[if IE 8]>
2
<link type="text/css" rel="stylesheet" href="my.css" />
3
<![endif]-->

识别特定的IE版本，高了或者低了都不可以。上例只有IE8才能识别。
3、只有不是特定版本的才能识别

1
<!--[if !IE 7]>
2
<link type="text/css" rel="stylesheet" href="my.css" />
3
<![endif]-->

上例中特定IE7版本不能识别，其他版本都能识别，当然要在IE5以上。
4、只有高于特定版本才能识别

1
<!--[if gt IE 7]>
2
<link type="text/css" rel="stylesheet" href="my.css" />
3
<![endif]-->

上例中只有高于IE7的版本才能识别。IE7无法识别。
5、等于或者高于特定版本才能识别

1
<!--[if gte IE 7]>
2
<link type="text/css" rel="stylesheet" href="my.css" />
3
<![endif]-->

上例中IE7和更高的版本都能识别。
6、只有低于特定版本的才能识别

1
<!--[if lt IE 7]>
2
<link type="text/css" rel="stylesheet" href="my.css" />
3
<![endif]-->

上例中只有低于IE7的版本才能识别，IE7无法识别。
7、等于或者低于特定版本的才能识别

1
<!--[if lte IE 7]>
2
<link type="text/css" rel="stylesheet" href="my.css" />
3
<![endif]-->

上例中IE7和更低的版本可以识别。
关键词解释
上面那些代码好像很难记的样子，其实只要稍微解释一下关键字就很容易记住了。
lt ：就是Less than的简写，也就是小于的意思。
lte ：就是Less than or equal to的简写，也就是小于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
!：就是不等于的意思，跟javascript里的不等于判断符相同。

特别提示：

１、有人会试图使用<!—[if !IE]>来定义非IE浏览器下的状况，但注意：条件注释只有在IE浏览器下才能执行，这个代码在非IE浏览下被当做注释视而不见。
２、我们通常用IE条件注释根据浏览器不同载入不同css，从而解决样式兼容性问题的。其实它可以做的更多。它可以保护任何代码块——HTML代码块、JavaScript代码块、服务器端代码……看看下面的代码。

1
<!--[if IE]>
2
<script type="text/javascript">
3
 alert("你使用的是IE浏览器！");
4
</script>
5
<![endif]-->

1
<!–[if !IE]><!–><!–<![endif]–><!–除IE外都可识别（IE10版本以上也可以识别）–>
2
<!–[if IE]><![endif]–><!–IE9以及以下版本可识别–>
3
<!–[if IE 5]><![endif]–><!–仅IE5可识别–>
4
<!–[if IE 5.0]><![endif]–><!–仅IE5.0可识别–>
5
<!–[if IE 5.5]><![endif]–><!–仅IE5.5可识别–>
6
<!–[if IE 6]><![endif]–><!–仅IE6可识别–>
7
<!–[if IE 7]><![endif]–><!–仅IE7可识别–>
8
<!–[if IE 8]><![endif]–><!–仅IE8可识别–>
9
<!–[if IE 9]><![endif]–><!–仅IE9可识别–>
10
<!–[if lt IE 5]><![endif]–><!–IE5以下版本可识别–>
11
<!–[if lt IE 5.0]><![endif]–><!–IE5.0以下版本可识别–>
12
<!–[if lt IE 5.5]><![endif]–><!–IE5.5以下版本可识别–>
13
<!–[if lt IE 6]><![endif]–><!–IE6以下版本可识别–>
14
<!–[if lt IE 7]><![endif]–><!–IE7以下版本可识别–>
15
<!–[if lt IE 8]><![endif]–><!–IE8以下版本可识别–>
16
<!–[if lt IE 9]><![endif]–><!–IE9以下版本可识别–>
17
<!–[if lte IE 5]><![endif]–><!–IE5以及IE5以下版本可识别–>
18
<!–[if lte IE 5.0]><![endif]–><!–IE5.0以及IE5.0以下版本可识别–>
19
<!–[if lte IE 5.5]><![endif]–><!–IE5.5以及IE5.5以下版本可识别–>
20
<!–[if lte IE 6]><![endif]–><!–IE6以及IE6以下版本可识别–>
21
<!–[if lte IE 7]><![endif]–><!–IE7以及IE7以下版本可识别–>
22
<!–[if lte IE 8]><![endif]–><!–IE8以及IE8以下版本可识别–>
23
<!–[if lte IE 9]><![endif]–><!–IE9以及IE9以下版本可识别–>
24
<!–[if gt IE 5]><![endif]–><!–IE5以上版本可识别–>
25
<!–[if gt IE 5.0]><![endif]–><!–IE5.0以上版本可识别–>
26
<!–[if gt IE 5.5]><![endif]–><!–IE5.5以上版本可识别–>
27
<!–[if gt IE 6]><![endif]–><!–IE6以上版本可识别–>
28
<!–[if gt IE 7]><![endif]–><!–IE7以上版本可识别–>
29
<!–[if gt IE 8]><![endif]–><!–IE8以上版本可识别–>
30
<!–[if gt IE 9]><![endif]–><!–IE9以上版本可识别–>
31
<!–[if gte IE 5]><![endif]–><!–IE5以及IE5以上版本可识别–>
32
<!–[if gte IE 5.0]><![endif]–><!–IE5.0以及IE5.0以上版本可识别–>
33
<!–[if gte IE 5.5]><![endif]–><!–IE5.5以及IE5.5以上版本可识别–>
34
<!–[if gte IE 6]><![endif]–><!–IE6以及IE6以上版本可识别–>
35
<!–[if gte IE 7]><![endif]–><!–IE7以及IE7以上版本可识别–>
36
<!–[if gte IE 8]><![endif]–><!–IE8以及IE8以上版本可识别–>
37
<!–[if gte IE 9]><![endif]–><!–IE9以及IE9以上版本可识别–>

展开收起

网站如何发布

Tue, 20 Jun 2017 00:00:00 GMT

客户端（浏览器）
DNS服务器域名解析服务器
www.baidu.com->61.135.169.121

网站如何发布?#

1.租一台服务器（阿里云服务器：主机/虚拟服务器）给这个主机/服务器连接网络（连个网线），联网之后就会有个外网ip地址（就是别人通过外网的ip可以找到我们的服务器，一般公司都会禁止外网IP访问）#

例如，通过本地webstore打开本地的文件地址是 http://localhost:63342/webstore%E5%AD%A6%E4%B9%A0%E6%96%87%E4%BB%B6/JS%E6%AD%A3%E5%BC%8F%E8%AF%BE/%E5%91%A8%E5%95%B8%E5%A4%A9%E8%AF%BE%E4%BB%B6/JavaScript201602-master/20160512_CSS3%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/PPT/%E9%99%84%E4%BB%B6/2%E3%80%81%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7/1%E3%80%81%E4%BD%BF%E7%94%A8border-color%E5%88%B6%E4%BD%9C%E4%B8%89%E8%A7%92%E7%AC%A6%E5%8F%B7.html?_ijt=214ukq11e5l4bismdevhkenfhm
- localhost<本地文件地址>
百度的服务器的外网IP：61.135.169.121

2.买一个域名（域名备案）#

域名有哪些？
- .cn / .com / .net / .org / .wang /.gov…

3.将自己的项目放到服务器上上传到服务器指定的磁盘上—>FTP上传（上传工具FileZilla）#

4.发布项目（网站）一个服务区可以发布多个项目，每个项目各自占一个端口，每一个端口都有对应的端口号（每一个端口号都是唯一的，不能重复的），用端口号来进行区分项目—>0~65535之间的任意一个数#

发布网站的工具 IIS Apache nginx node

5.域名解析（DNS解析）把购买的域名和服务器的IP地址关联到一起以后只要提到域名就关联的是这个服务器#

DNS服务器：他是一台服务器是属于全世界的万维网联盟，只要是地球上的域名解析都在他这里进行
www.baidu.com 61.135.169.121
www.jd.com 111.206.231.1

HTTP事物

请求Request阶段：
1.客户端通过域名访问，到DNS服务器上找到对应的外网IP地址
2.通过外网IP找到对应的项目服务器
3.通过端口号找到服务器上对应的项目，因为在发布项目的时候，就已经将项目文件和端口号对应了
响应response阶段：
4.服务器将客户端请求的资源文件的源代码返回给客户端
5.客户端（浏览器）进行解析文件渲染页面
- 这两步组成了前后交互的模型/过程 “HTTP事物”—>只有请求Request阶段响应response阶段都完成才叫做HTTP事物

URI

URI：统一资源标识符
URI=URL+URN
URL：统一资源定位符
URN：统一资源名称

一个完整的URL —> `https://www.baidu.com:443/xxx/xxx.html?name=hh&age=10#video`#

1. https 传输协议
- 传输协议：HTTP / HTTPS / FTP
- 他是内容传输的媒介（快递公司）
- 客户端通过传输协议把一些信息传给服务器
- 同样服务端也可以把一些信息返回给客户端
- HTTP：超文本传输协议除了传输文本之外还可以传输其他的东西比如图片音频视频（二进制流/base64）
- HTTPS<更安全的http>，因为他的传输通道加密了（SSL加密）（一般跟金钱用户重要信息的网站都会采用HTTPS传输）
- FTP：一般都是将我们的项目文件传到服务器上，采用一些工具例如上传工具FileZilla
1. www.baidu.com 域名
- 一级域名 www.qq.com 一级域名需要购买，二级域名、三级域名自己分配即可
- 二级域名 sport.qq.com
- 三级域名 kbs.sports.qq.com
1. 443 端口号
- 取值范围 0-65535之间的一个数
- HTTP的端口号<80>
- HTTPS的端口号<443>
- FTP的端口号<21>
- webstore 默认的端口号：63342
1. xxx/xxx.html 文件的目录—请求文件的路径和名称
- 表示的是在当前项目下xxx文件夹下的xxx.html
- /index.html 表示的是当前项目根目录下的index.html文件
- ../index.html 表示的是当前项目上一级目录下的index.html文件
- 在不指定文件目录的时候默认进入的是index.html（因为一般在发布项目的时候，会指定一个默认的入口文件一般是index.html或者deflut.html）
1. ?name=hh&age=10?+参数
- 1）客户端可以通过 ?+参数的方式给服务器传递一些信息
- 2）服务器不进行处理，例如之前做H5的时候根据page=n，展示不同的区域
- 3）处理缓存的问题传某个参数，但是这个参数服务器不需要我们用它来做缓存处理保证每次的URL都不一样防止缓存（例如ajax获取数据的拼接）
1. #video 哈希值HASH
- 1）客户端也可以通过这种方式给服务器传数据（一般不用了）
- 2）锚点定位
- 3）通过哈希值HASH 实现页面路由的切换

6.客户端浏览器代码解析和页面的渲染#

开发标准由W3C
W3C：一个非盈利机构，他就是用来制定编程规范和标准的地方
按照浏览器的开发标准和规范开发出来的浏览器都有一个东西叫引擎也就是内核
我们前端工程师也要按照标准和规范去写代码
把符合标准的代码放到标准的浏览器中通过引擎来渲染
IE内核（Trident引擎）：IE5-11，IE Edge，360，猎豹，百度
Gecko：火狐
webkit（V8引擎）最快的：谷歌、Safari、QQ
Presto引擎：欧朋Opera

Canvas之3绘制矩形

Fri, 09 Jun 2017 00:00:00 GMT

1. cvs.fillRect(x,y,w,h); —> 填充矩形
- x,y 是这个矩形左上角的坐标
- w,h 是这个矩形的宽高

1. cvs.strokeRect(x,y,w,h); —> 带边框的矩形
- x,y 是这个矩形左上角的坐标
- w,h 是这个矩形的宽高
  - 注意<如果设置边框> 边框一半在里面一半在外面
1. cvs.clearRect(x,y,w,h); —> 清除填充图的某一部分，清除的还是一个矩形
- x,y 是这个矩形左上角的坐标
- w,h 是这个矩形的宽高

案例#

案例1

1
  function draw1(){
2
    //填充矩形
3
    cvs.fillStyle='#fccdda';//画之前填充颜色
4
    cvs.fillRect(10,20,100,50);//设置填充矩形,矩形的左上角坐标为10,20 宽100px 高50px
5
    //边框矩形
6
    cvs.strokeStyle='red';//设置边框的矩形边框颜色
7
    cvs.lineWidth=20;//设置边框宽度20px
8
    cvs.strokeRect(150,20,100,50);//设置边框矩形，  矩形的左上角坐标为150,20 宽100px 高50px
9
  }
10
  draw1();

案例2

1
function draw2(){//清除填充图的某一部分，清除的还是一个矩形cvs.clearRect(x,y,w,h)
2
  cvs.fillStyle='orange';
3
  //画之前填充颜色
4
  cvs.fillRect(20,100,300,100);
5
  //设置填充矩形,矩形左上角坐标为20,100 宽300px 高100px
6
  cvs.clearRect(140,140,60,60);
7
  //清除填充图的矩形 清除的这个矩形左上角坐标140,140 宽60px 高60px
8
  cvs.clearRect(20,100,40,40);
9
  //清除填充图的矩形 清除的这个矩形左上角坐标20,100 宽40px 高40px
10
  cvs.clearRect(280,100,40,40);
11
  //清除填充图的矩形 清除的这个矩形左上角坐标280,100 宽40px 高40px
12
}
13
draw2();

Canvas之4渐变

Fri, 09 Jun 2017 00:00:00 GMT

1.线性渐变
var CLG=cvs.createLinearGradient(x0,y0,x1,y1);
- x0<渐变开始的x坐标>
- y0<渐变开始的y坐标>
- x1<渐变结束的x坐标>
- y1<渐变结束的y坐标>
CLG.addColorStop(n,m);
- n<设置颜色的偏移量>
- m<颜色>

例如:

1
function draw1(){
2
  var CLG=cvs.createLinearGradient(0,0,200,200);
3
  //创建一个线性渐变 渐变开始的坐标0,0 渐变结束的坐标200,200 (即从左上角到右下角渐变)
4
  CLG.addColorStop(0,'red');//设置渐变的偏移量0% 颜色红色
5
  CLG.addColorStop(0.25,'yellow');//设置渐变的偏移量25% 颜色黄色
6
  CLG.addColorStop(0.5,'skyblue');//设置渐变的偏移量50% 颜色天空蓝
7
  CLG.addColorStop(0.75,'orange');//设置渐变的偏移量75% 颜色橘黄
8
  CLG.addColorStop(1,'pink');//设置渐变的偏移量100% 颜色粉色
9
  cvs.fillStyle=CLG;//设置填充样式是线性渐变
10
  cvs.fillRect(0,0,200,200);//设置填充矩形 左上角坐标0,0  宽200px  高200px
11
  cvs.fill();//设置样式为填充样式
12
}
13
draw1();

2.径向渐变(发散性渐变)
cvs.createRadialGradient(x0,y0,x1,y1,r1);
- x0<发散渐变开始中心的x坐标>
- y0：发散渐变开始中心的y坐标
- r0<发散渐变开始的半径>
- x1<发散渐变结束中心的x坐标>
- y1：发散渐变结束中心的y坐标
- r1<发散渐变结束的半径>
例如:

1
function draw2(){
2
  var CRG=cvs.createRadialGradient(200,200,200,200,200,10);
3
  //创建一个径向/发散性渐变 渐变开始的坐标200,200 渐变开始的半径200px 渐变结束的坐标200,200 渐变结束的半径10px
4
  CRG.addColorStop(0,'purple');
5
  CRG.addColorStop(0.2,'yellow');
6
  CRG.addColorStop(0.4,'pink');
7
  CRG.addColorStop(0.6,'lightblue');
8
  CRG.addColorStop(0.8,'skyblue');
9
  CRG.addColorStop(1,'white');
10
  cvs.fillStyle=CRG;//设置填充样式是径向渐变
11
  cvs.fillRect(100,100,200,200);
12
  //设置填充矩形 左上角坐标100,100  宽200px  高200px
13
}
14
draw2();

Canvas之5绘制文本

Fri, 09 Jun 2017 00:00:00 GMT

1.阴影
- cvs.shadowOffsetX//阴影的横向偏移量，默认值是0
- cvs.shadowOffsetY//阴影的纵向偏移量，默认值是0
- cvs.shadowColor//阴影的颜色
- cvs.shadowBlur//阴影的模糊范围（值越大越模糊）

案例

1
  function draw1(){
2
    cvs.shadowColor='#000fff';//设置阴影颜色
3
    cvs.shadowOffsetX=30;//设置阴影的横向偏移量30px
4
    cvs.shadowOffsetY=20;//设置阴影的纵向偏移量20px
5
    cvs.shadowBlur=20;//设置阴影的模糊范围20px
6
    cvs.fillStyle='#449fdb';//设置填充的样式为颜色填充
7
    cvs.fillRect(50,50,100,100);//设置填充矩形 左上角坐标50,50 宽100px 高100px
8
  }
9
  draw1();

2.绘制文本
- 设置字体样式 cvs.font=‘字体大小font-size 字体样式font-family’
- 水平对齐方式 cvs.textAlign(start,end,right,center);
- 垂直对齐方式 cvs.textBaseline=”
- 属性值,middle,hangle,bottom,alphabetic,ideographic
- 计算文本长度
  - var text=‘dfbzbh’
  - console.log(cvs.measureText(text));//width<40>.453125
- 填充文字
  - cvs.fillText(text,x,y,maxWidth);
  - 1. text<文本内容>
  - 1. x<文字起始点的横坐标>
  - 1. y<文字起始点的纵坐标>
- 绘制文字轮廓
  - cvs.strokeText(text,x,y,maxWidth);
  - 1. text<文本内容>
  - 1. x<文字起始点的横坐标>
  - 1. y<文字起始点的纵坐标>
案例1

1
function draw1(){
2
    cvs.shadowColor='#000fff';//设置阴影颜色
3
    cvs.shadowOffsetX=30;//设置阴影的横向偏移量30px
4
    cvs.shadowOffsetY=20;//设置阴影的纵向偏移量20px
5
    cvs.shadowBlur=20;//设置阴影的模糊范围20px
6
    cvs.fillStyle='#449fdb';//设置填充的样式为颜色填充
7
    cvs.fillRect(50,50,100,100);
8
    //设置填充矩形 左上角坐标50,50 宽100px 高100px
9
  }
10
  draw1();

案例2

1
  function draw2(){
2
    var text='hellow word';//设置文本内容
3
    cvs.fillStyle='yellow';//设置填充样式颜色
4
    cvs.font='40px verdana';//设置字体样式
5
    cvs.textAlign='start';//设置字体的水平对齐方式
6
    cvs.textBaseline='top';//设置字体的垂直对齐方式
7
    cvs.fillText(text,10,10);
8
    //设置填充文字 文本内容text 文本起始点坐标10,10
9
    var length=cvs.measureText(text);
10
    //获取文本宽度(长度)length
11
    console.dir(length);
12
    //TextMetrics-->width:241.171875
13
    //==>length.width字体的宽度
14
    cvs.fillText("字体长度为"+length.width,10,60);
15
    //设置填充文字(通过字符串拼接方式) 文本起始点坐标10,60
16
  }
17
  draw2();

展开收起

案例3<文本线性渐变>

1
function draw3(){
2
    var CLG=cvs.createLinearGradient(0,0,300,100);
3
    //创建一个线性渐变 渐变开始的坐标0,0 渐变结束的坐标300,100
4
    CLG.addColorStop(0,'skyblue');//设置渐变的偏移量0% 天空蓝
5
    CLG.addColorStop(0.25,'plum');//设置渐变的偏移量25% 紫色
6
    CLG.addColorStop(0.5,'lightblue');//设置渐变的偏移量50% 蓝
7
    CLG.addColorStop(0.75,'skyblue');//设置渐变的偏移量75% 天空蓝
8
    CLG.addColorStop(1,'plum');//设置渐变的偏移量100% 紫色
9
    var text='hellow word';//设置文本内容
10
    cvs.fillStyle=CLG;//设置填充样式是线性渐变
11
    cvs.shadowOffsetX=5;//设置阴影的横向偏移量5px
12
    cvs.shadowOffsetY=4;//设置阴影的纵向偏移量4px
13
    cvs.shadowColor='#ffb6c1';//设置阴影的颜色
14
    cvs.shadowBlur=5;//设置阴影的模糊度
15
    cvs.font='40px cursive';//设置字体样式
16
    cvs.textAlign='top';//设置字体的水平对齐方式
17
    cvs.fillText(text,50,150);
18
    //设置填充文字text 文本起始点坐标50,150
19
    var width=cvs.measureText(text).width;//获取文本宽度(长度)length
20
    cvs.fillText("字体长度为："+width,10,200);
21
    //设置填充文字(通过字符串拼接方式) 文本起始点坐标10,200
22

23
  }
24
  draw3();

展开收起

案例4<文本径向渐变>

1
  function draw4(){
2
    var CRG=cvs.createLinearGradient(0,0,600,0,0,20);
3
    //创建一个径向渐变 渐变开始的坐标0,0 开始渐变的半径600px 渐变结束的坐标0,0 渐变结束的半径20px
4
    CRG.addColorStop(0,'pink');
5
    CRG.addColorStop(0.25,'skyblue');
6
    CRG.addColorStop(0.5,'yellow');
7
    CRG.addColorStop(0.75,'plum');
8
    CRG.addColorStop(1,'skyblue');
9
     var text='I WANT EAT';
10
     cvs.fillStyle=CRG;//设置填充样式是径向渐变
11
     cvs.font='80px simsun';//设置字体样式
12
       cvs.textAlign='start';//设置文本横向对齐方式
13
     cvs.textBaseline='top';//设置文本纵向对齐方式
14
     cvs.shadowColor='lightblue';//设置阴影颜色
15
     cvs.shadowBlur=10;//设置阴影的模糊范围10px
16
     cvs.fillText(text,10,10);//设置填充文字text 文本起始点坐标10,10
17
  }
18
  draw4();

展开收起

Canvas之6绘制图片

Fri, 09 Jun 2017 00:00:00 GMT

绘图#

1. cvs.drawImage(Image,x,y,w,h);
- Image 就是可以放在DOM中的真实图片，可以动态创建，也可以获取页面上的
- x,y 图片放入画布,在画布左上角的坐标
- w,h 绘制图片的宽高

案例<将图片放在画布上>

1
  function draw1(){
2
    var img=new Image;//动态创建一个img
3
    img.src='default.gif';//添加图片链接
4
    img.onload=function(){//如果图片地址真实存在 执行这个函数
5
      cvs.drawImage(this,0,100,100,90);
6
      //将图片放在画布上 图片左上角的坐标0,100 图片宽100px 高90px
7
    }
8
  }
9
  draw1();

1. cvs.drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);
- sx,sy 图片左上角的坐标
- sw,sh 矩形区域的宽高用来截取图片
- dx,dy 截取出来放在画布canvas上的坐标
- dw,dh 画在canvas上的宽高
- 总结:
  - sw,sy,sx,sy 是用来截取图片的过程
  - dx,dy,dw,dh 把截取出来的图片放在canvas上的过程
案例<截取图片>

1
  function draw2(){
2
    var img=new Image;//动态创建一个img
3
    img.src='1.jpg';//添加图片链接
4
    img.onload=function(){//如果图片地址真实存在 执行这个函数
5
      cvs.drawImage(this,480,150,440,410,0,0,200,200);
6
      //this就是img 将图片放在画布上 需要截取的图片在原图片左上角的坐标480,150  截取图片的大小为440px*410px 截取出来的图片放入画布的坐标0,0 截取出来的图片画在画布canvas的宽200px 高200px
7
    }
8
  }
9
//  draw2();

1. 设置平铺
cvs.creatPattern(image,type)
- Image 就是可以放在DOM中的真实图片，可以动态创建，也可以获取页面上的
- type:
  - no-repeat 不平铺
  - repeat 全方向平铺
  - repeat-x x轴方向平铺
  - repeat-y y轴方向平铺
案例

1
function draw3(){
2
  var img=new Image;
3
  img.src='default.gif';
4
  img.onload=function(){
5
    var rep=cvs.createPattern(this,'repeat');//设置图片平铺
6
    cvs.fillStyle=rep;//设置填充样式为图片平铺
7
    cvs.fillRect(0,0,draw.width,draw.height);
8
    //draw.width画布的宽 draw.height画布的高
9
    //设置填充矩形 矩形左上角坐标0,0 矩形的宽为画布的宽 矩形的高为画布的高
10
  }
11
}
12
//draw3();

Canvas之7变形

Fri, 09 Jun 2017 00:00:00 GMT

1. 平移translate(x,y); x<坐标原点向x轴平移的距离> y<坐标原点向y轴平移的距离>

案例

1
  function draw1(){
2
    cvs.fillStyle='skyblue';
3
    //设置填充颜色天空蓝
4
    cvs.fillRect(0,0,200,100);
5
    //矩形左上角坐标0,0 宽200px 高100px
6
    cvs.translate(50,50);
7
    //设置平移 坐标原点向x轴(向右)平移50px 坐标原点向y轴(向下)偏移50px
8
    //-->这个平移只会对后面的矩形造成影响 不会影响前面的
9
    cvs.fillStyle='pink';
10
    //设置填充颜色粉色
11
    cvs.fillRect(0,0,180,80);
12
    //矩形左上角坐标0,0 宽180px 高80px
13
  }
14
  draw1();

1. 缩放 vas.scale(x0,y0); x0 y0
案例

1
  function draw2(){
2
    cvs.scale(1,2);//设置缩放 x轴不变 y轴是之前的2倍
3
    cvs.fillStyle='plum';//设置填充样式为颜色填充
4
    cvs.fillRect(0,0,200,100);
5
    //矩形左上角坐标0,0 宽200px 高100px
6
    //-->那么转化后的矩形宽200px 高200px
7
  }
8
  draw2();

3.旋转 vas.rotate(angle); angle<坐标轴转的角度> 他是一个弧度(和画圆的计算是一样的)
案例

1
  function draw3(){
2
    cvs.rotate(Math.PI/4);//设置旋转  旋转角度为45度
3
    cvs.fillStyle='lightblue';
4
    cvs.fillRect(100,100,200,100);
5
  }
6
  draw3();

注意：平移、缩放、旋转都是对原始坐标（画布）操作的

例如:

1
function draw3(){
2
  cvs.translate(200,0);//此时的原点已经变到200,0的位置
3
  cvs.rotate(Math.PI/4);//设置旋转  旋转角度为45度
4
  cvs.fillStyle='lightblue';
5
  cvs.fillRect(100,100,200,100);
6
}
7
draw3();

Canvas之8图形组合

Fri, 09 Jun 2017 00:00:00 GMT

图形组合#

cvs.globalCompositeOperation=type;
type的值:
- 1.source-over 默认值覆盖在原来的图形上绘制新图新图在上
- 2.source-out 显示新图的非交集部分
- 3.source-in 显示新图和图形的交集，颜色是新图的颜色
- 4.source-atop 显示旧图和交集部分交集是新图颜色
- 5.destination-over 在原来图形的下面绘制新图旧图在上
- 6.destination-out 显示旧图的非交集部分
- 7.destination-in 显示交集颜色是旧图颜色
- 8.destination-atop 显示新图和交集部分交集是旧图颜色
- 9.lighter<全部显示> 交集部分是叠加颜色
- 10.xor<显示新旧图的非交集部分>
- 11.copy 只显示新图

案例1<在原来的图形上绘制新图> 新图在上

1
var draw=document.getElementById('draw');
2
var cvs=draw.getContext('2d');
3
function draw1(){
4
    cvs.fillStyle='gold';
5
    cvs.fillRect(10,10,100,100);
6
    cvs.globalCompositeOperation='source-over';
7
    cvs.fillStyle='pink';
8
    cvs.fillRect(50,50,100,100);
9
}
10
draw1();

Canvas动态案例

Fri, 09 Jun 2017 00:00:00 GMT

Canvas动态案例

1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="UTF-8">
5
    <title></title>
6
  </head>
7
  <body>
8
    <canvas id="draw" width="220" height="320" style="background-color: skyblue"></canvas>
9
  </body>
10
</html>
11
<script type="text/javascript">
12
  var draw=document.getElementById('draw');
13
  var cvs=draw.getContext('2d');
14
  var img=new Image;
15
  img.src='walkingdead.png';//添加图片地址
16
  img.onload=function(){//图片上有10张小图横着排列
17
    var width=this.width/10;
18
    var height=this.height;
19
    var i=0;
20
    window.setInterval(function(){
21
      cvs.clearRect(0,0,draw.width,draw.height);//清除上一个图片
22
    cvs.drawImage(img,i*width,0,width,height,0,0,width,height);
23
    if(i==9){
24
      i=0
25
    }else{i++;}
26
    },200);
27
  }
28
</script>

展开收起

服务器及相关知识

Fri, 09 Jun 2017 00:00:00 GMT

服务器#

是具有储存功能的计算机设备（笔记本电脑本身就是一个服务器）

服务器根据功能分类#

web服务器：供用户访问的安全系数相对较低
数据库服务器：放在内网的服务器，用来安装数据库
应用服务器：放在内网的服务器，用来安装应用（产品）

操作系统有关#

可视操作：可以直观看到所有文件，可以直接操作这些文件（window）
不可视操作：不能直观看到所有文件，需要ssh，ftp这样的工具进行连接（或者是敲命令进行）

大型机与嵌入式系统使用很多样化的操作系统#

在服务器方面Linux、UNIX和WindowsServer占据了市场的大部分份额。在超级计算机方面，Linux取代Unix成为了第一大操作系统，截止2012年6月，世界超级计算机500强排名中基于Linux的超级计算机占据了462个席位，比率高达92%。随着智能手机的发展，Android和iOS已经成为目前最流行的两大手机操作系统。

内外网#

内网：数据库，产品应用——可供用户观看的页面
外网：web服务器，web服务器（多个相同的web服务器，负载均衡）——可供用户访问的
vpn(翻墙软件)负载均衡：内外网的连接工具

Canvas之1绘制线条的有关属性和步骤

Thu, 08 Jun 2017 00:00:00 GMT

<canvas id="" width="" height=""></canvas> canvas 在页面上绘制图形用的（通常称他画布） canvas只是一个容器，我们用js脚本来控制他 <canvas id="draw" width="600" height="500" style="border: 1px solid #ccc;"></canvas>

绘制线条的有关属性和步骤#

1.相关属性

1.填充的样式
- cvs.fillStyle --> fillStyle`填充样式
- cvs.strokeStyle --> strokeStyle笔触样式主要用来画边框的
- cvs.lineWidth --> 边框的宽度
2.绘制图形有两种方式
- cvs.fill(); --> 填充样式
- cvs.stroke(); --> 边框样式
3.颜色值的四种书写方式
- 1).颜色名 —>“red”
- 2).十六进制 —>“#fff”
- 3).三色值 —>rgb(0,0,0)
- 4).四色值 —>rgba(0,0,0,0.3)
4.坐标:
- 1.)以画布为基准,距离画布的上边是y坐标值(top值),距离画布的左边是x坐标值(left值);
- cvs.moveTo(x,y); —> 起始点坐标
- cvs.lineTo(x,y); —> 结束点的坐标
- 如果没有moveTo就把上一个挨着的lineTo作为起始坐标
- 例如<假如第一个不是moveto而是lineto>,那么lineTo就是其实坐标
5.开始和关闭一个路径
- cvs.beginPath(); —> 开始一个新的路径
- cvs.closePath(); —> 关闭当前路径
- 注意<加上>.closePath会自动闭合会自动连接起始坐标和结束坐标
6.canvas中的圆角
- 1).设置线条交汇处的样式
- cvs.lineJoin 他有三个属性：
  - 1).尖角miter
  - 2).斜角bevel
  - 3).圆角round
- 2).设置一条线段两端点的样式
- lineCap焦点样式
  - 1)平的butt(默认值)
  - 2.)圆角round
  - 3.)方角square

2.步骤及案例

步骤1.获取出canvas标签,例如: var draw=document.getElementById('draw');
步骤2.设置绘制环境—2d 平面图,例如:

1
var cvs=draw.getContext('2d');
2
//cvs 这个就是你的画板 接下来就可以在cvs上进行绘制

步骤3
案例1<线段>

1
  function draw1(){
2
  var draw=document.getElementById('draw');
3
  var cvs=draw.getContext('2d');
4
  cvs.beginPath();
5
  cvs.moveTo(50,50);
6
  cvs.lineTo(150,50);
7
  cvs.closePath();
8
  cvs.strokeStyle='#800080';
9
  cvs.lineWidth=5;
10
  cvs.stroke();//以边框的形式显示
11
  }
12
  draw1();

案例2<等腰直角三角形>

1
function draw2(){
2
  var draw=document.getElementById('draw');
3
  var cvs=draw.getContext('2d');
4
  cvs.beginPath();
5
  cvs.lineTo(80,120);
6
  cvs.lineTo(80,240);
7
  cvs.lineTo(200,240);
8
  cvs.closePath();
9
  cvs.strokeStyle='ec568c';
10
  cvs.lineWidth=10;
11
  cvs.stroke();
12
}
13
draw2();

案例3<圆角矩形>

1
function draw3(){
2
  var draw=document.getElementById('draw');
3
  var cvs=draw.getContext('2d');
4
  cvs.beginPath();
5
  cvs.lineCap='round';
6
  cvs.lineTo(50,50);
7
  cvs.lineTo(250,50);
8
  cvs.closePath();//关闭就没有圆角效果
9
  cvs.lineWidth=100;
10
  cvs.strokeStyle='#896446';
11
  cvs.stroke();
12
}
13
draw3();

案例4<圆角三角形>

1
function draw4(){
2
  var draw=document.getElementById('draw');
3
  var cvs=draw.getContext('2d');
4
  cvs.beginPath();
5
  cvs.lineJoin='round';//设置圆角
6
  cvs.moveTo(200,100);
7
  cvs.lineTo(100,250);
8
  cvs.lineTo(300,250);
9
  cvs.closePath();
10
  cvs.lineWidth=50;
11
  cvs.strokeStyle='#896446';
12
  cvs.stroke();
13
}
14
draw4();

Canvas之2画圆

Thu, 08 Jun 2017 00:00:00 GMT

1. cvs.arc(x,y,radius,startAngle,endAngle,anticlokwise);
- x,y 圆心坐标
- radius半径r
- startAngle 起始角以弧度计算(钟表的3点钟方向是0度,也就是x轴的正方向是0度,默认是顺时针)
- endAngle 结束角
- anticlokwise 是否逆时针默认值false false表示顺时针

1. 案例

案例1<边框半圆>

1
  function draw1(){//边框圆
2
    cvs.strokeStyle='#ffa50';//设置笔触样式(边框样式)颜色
3
    cvs.beginPath();//开始一个路径
4
    cvs.arc(500,500,100,0,Math.PI);//圆心坐标是500,500，半径是100px，起始角为0度，结束角为180度
5
    cvs.closePath();//结束路径
6
    cvs.lineWidth=10;//边框宽度为10px
7
    cvs.stroke();//绘制图形以边框样式绘制
8
  }
9
  draw1();

案例2<同心圆>

1
function draw2(){
2
  cvs.fillStyle='orange';
3
  cvs.beginPath();
4
  //开始一个新的路径
5
  cvs.arc(200,200,60,Math.PI/2,2*Math.PI);
6
  //圆心坐标是(200,200),半径为60px,起始角为90度,结束角为360度
7
  cvs.closePath();
8
  //结束一个路径
9
  cvs.fill();
10
  //绘制图形以填充样式绘制
11
  cvs.strokeStyle='yellow';
12
  //设置 笔触样式(边框样式) 为黄色
13
  cvs.lineWidth=40;
14
  //边框的宽度为40px
15
  cvs.beginPath();
16
  //开始一个新的路径
17
  cvs.arc(200,200,80,0,2*Math.PI);
18
  //圆心坐标是(200,200),半径为80px,起始角度为0度,结束角度为360度
19
  cvs.closePath();//结束一个路径
20
  cvs.stroke();//绘制图形以边框样式绘制
21
}
22
draw2();

展开收起

案例3<每次调用fill绘制填充图的时候>，会把当次路径的起始点和结束点分别连接，填充闭合部分(如果想让每个路径互不干扰一定要记得写结束路径—>关闭路径)

1
function draw3(){
2
  cvs.strokeStyle='pink';//设置笔触样式(边框样式)颜色为粉色
3
  cvs.beginPath();//开始一个路径
4
  cvs.lineWidth=2;//边框的宽度为2px
5
  cvs.arc(100,100,100,0,Math.PI);//圆心坐标是100,100,半径为100,起始角度为0度,结束角度为180度
6
  cvs.closePath();//结束一个路径
7
  cvs.stroke();//绘制图形以边框样式绘制
8
  cvs.fillStyle='gray';//设置填充颜色为灰色
9
  cvs.arc(300,300,80,0,Math.PI/2);//圆心坐标是300,300，半径是80px，起始角度为0，结束角度为90度
10
  cvs.closePath();
11
  cvs.fill();
12
}
13
draw3();

字符串中的几个重要方法

Fri, 02 Jun 2017 00:00:00 GMT

1.通过索引查找字符串#

1.1 `charAt`(索引) 字符串上的`charAt`方法里边传索引值，进行搜索指定索引位置的字符，还是字符串格式;原字符串不变。#

1.2 `charCodeAt`（索引）返回结果对应的是`ASCII`码;原字符串不变。#

例如:

1
var str = 'addias';
2
console.log(str.charAt(0),str);
3
//"a" "addias" 原字符串不变
4
console.log(str.charCodeAt(0),str);
5
//97 "addias"  原字符串不变

2.检取字符串#

2.1 `substr`#

2.1.1 `substr(n,m)`; 从索引n开始截取m个#

返回值为截取的字符串
原有字符串不变

1
    var str = 'addias';
2
    console.log(str.substr(1, 2),str);//"dd" "addias"

2.1.2 `str.substr()` / `str.substr(0)` 复制字符串#

1
var str = 'addias';
2
console.log(str.substr(),str);
3
//"addias" "addias" 复制字符串
4
console.log(str.substr(0),str);
5
//"addias" "addias" 复制字符串

2.2 `subString`#

2.2.1 `subString(n,m)` 从索引n找到索引m之前，不包含m处;原字符串不变#

1
var str = 'addias';
2
console.log(str.substring(3, 4),str);
3
//"i" "addias"

2.2.1 `substring()` / `substring(0)` 克隆字符串#

1
var str = 'addias';
2
console.log(str.substring(0),str);
3
//"addias" "addias"
4
console.log(str.substring(),str);
5
//"addias" "addias"

2.3 `slice`#

字符串也可以使用slice

1
var str = 'addias';
2
console.log(str.slice(-1+str.length));//s
3
console.log(str.slice(-1)); //s 同数组的使用方法一样
4
console.log(str.slice(-2)); //as 同数组的使用方法一样

2.4 `indexOf` / `lastIndexOf`#

indexOf字符串中当前字符出现的第一个索引; lastIndexOf字符串中当前字符出现的最后一个索引;

1
var str = 'addias';
2
console.log(str.indexOf('f'));//-1
3
console.log(str.lastIndexOf('a'));//4

2.5 `toUpperCase` / `toLowerCase`#

toUpperCase字符串转化成大写; toLowerCase字符串转化成小写;

1
var str = 'addias';
2
console.log(str.toUpperCase(), str);
3
// "ADDIAS" "addias" 字符串转化成大写
4
var str = 'ADDIAS';
5
console.log(str.toLowerCase(), str);
6
//"addias" "ADDIAS" 字符串转化成小写

2.6 `replace`#

replace 替换字符串中的字符;原字符串不变。

1
var str1 = '我,爱,中,国';
2
console.log(str1.replace('我', 'wo'), str1);
3
// "wo,爱,中,国"    "我,爱,中,国"

2.7 `split`#

split 将字符串拆分成数组;将字符串以字符串中存在的指定分隔符拆分成数组

1
var str1 = '我,爱,中,国';
2
var str2 = 'sdasdasdasdasd';
3
console.log(str2.split('a'));
4
//(5) ["sd", "sd", "sd", "sd", "sd"]
5
console.log(str2.split());
6
//["sdasdasdasdasd"]
7
console.log(str1.split(','));
8
//["我", "爱", "中", "国"]
9
console.log(str1.split(''));
10
//["我", ",", "爱", ",", "中", ",", "国"]

JS中的作用域

Sat, 29 Apr 2017 00:00:00 GMT

1.内存#

堆内存：来存储东西的，一般来存储引用数据类型
栈内存：代码执行空间，作用域

2.作用域(两种)#

全局作用域：一打开浏览器就会形成
私有作用域：函数执行形成的作用域

3.函数执行的时候#

函数一执行，形成一个私有作用域
有形参数的话给形参数赋值，相当于 var 一个变量，function s(a){},s(1) -> var a=1;
预解释
代码执行

4.私有变量(两种)#

形参
在私有作用域中声明的变量，var过和function过得

记住：私有变量只能私有作用域自己使用，别人获取不到

5.闭包#

函数执行的时候形参一个私有作用域，来保护里面的私有变量不受外界干扰，这种机制叫做闭包。

JS中的预解释

Sat, 29 Apr 2017 00:00:00 GMT

预解释的基础知识#

例子:

1
console.log(d);//-->function d(){};
2
d=1;//-->d=1
3
s=d;//-->s=1
4
function d(){//-->xxxfff000
5

6
}
7
d();//-->d is not a function

1.预解释:

是一个过程，作用域形成之后，代码执行之前，把所有带var关键字和function提前声明或定义。
2.作用域：
1. 全局作用域：window下，一打开浏览器就会形成。
2. 私有作用域：一个函数就是一个私有作用域，函数一执行就会形成私有作用域。
3.声明:

告诉浏览器这里有个变量，var关键字的只有声明。
4.定义:

赋值过程，在预解释的时候function即声明还定义。

5.注意:

预解释的时候遇到变量已经声明过了就不用声明了，但是需要重新定义,例如:

1
//变量只声明未定义就是undefined
2
console.log(obj1);//-->undefined
3
var obj1={name:"111"};
4
console.log(fn);
5
function fn() {}
6
// 1. 全局作用形成
7
// 2. 全局作用域下的预解释：var obj1，function fn=xxxfff000
8
// 3. 代码执行：
9
    // 1.console.log(obj1);-->undefined
10
    // 2.obj1=xxxfff111
11
    // 3. console.log(fn);-->function fn() {}

预解释的几种特殊情况#

注意: 全局作用域下的变量就是window的一个属性

1.`=`右边函数不进行预解释#

函数作为值的时候,绑定事件的时候,不进行预解释,如下：

1
var ff=function () {
2
    console.log(1);
3
};

2.`return`后面的代码不执行但是需要预解释#

return出的内容执行但是不进行预解释:

1
function fn() {
2
    var a=0;
3
    console.log(f);//function f(){}
4
    return function () {
5
        console.log(1);
6
        return 1
7
    };
8
    function f() {}
9
}
10
var d=fn();
11
console.log(d());
12
fn()();

3.在条件语句中#

不管条件是否成立都进行预解释

1
    console.log(num);
2
    if (0){
3
        //虽然条件不成立 但是需要预解释
4
        var num=0
5
    }
6
    ss=0;//->window.ss=0
7
    console.log("ss" in window);

条件中有函数function

在条件中的var和function只声明不定义，声明的时候当遇到变量已经被声明了，就会报错。

1
if('a' in window){
2
var a=1;
3
function(){};//-->'a' has already been declared
4
}

条件一旦成立，首先给函数赋值

1
    console.log(a);
2
    if ("a" in window){
3
        console.log(a);
4
        a=1;
5
        function a() {}
6
        console.log(a);
7
    }
8
    //预解释：function a  -->就相当于给window增加一个“a”属性
9
    //"a" in window 就是true
10
    //条件成立第一步先给function a赋值=xxxfff000
11
    //代码执行：console.log(a);xxxfff000->function a() {}
12
    // a=1,重新给a赋值

4.自执行函数不进行预解释#

1
//console.log(sss)
2
;(function  sss() {
3
    console.log("a")
4
})();

5.函数作为参数的时候不进行预解释#

1
[1,2,3].sort(function(a,b){
2
return a-b;
3
});

6.预解释的时候遇到已经声明过得变量不需要声明了，但是需要定义#

1
var s1=1;
2
function s1() {//s1=xxxfff000
3
    console.log("s1")
4
}
5
function s1() {//s1=xxxfff111
6
    console.log("s11")
7
}
8
console.log(s1);

自定义属性和引用数据类型的赋值

Sat, 29 Apr 2017 00:00:00 GMT

自定义属性#

一般都是给某些元素增加一个自己起的属性名（不能是内置属性），来存储一些值的。
- 比如说我们在选项卡中用自定义属性来存储他的索引值
- 不用全局变量的好处：只有自己可以修改元素.自定义属性名=值

只要是引用数据类型都可以加自定义属性
特别注意：函数也可以加

引用数据类型#

对象:
- 浏览器先看是什么数据类型的，是对象的话，浏览器给对象开辟一个堆内存
- 把所有的键值对（属性名：属性值）放到这个堆内存里，如果属性值遇到变量名，是把变量代表的值存起来
- 把这个地址赋给对象
函数
- 浏览器检测他是什么数据类型，是函数的话就给他开辟一个堆内存
- 将函数当做字符串存起来
- 将地址赋给函数名

个人技术博客

使用Astro搭建个人博客1

Astro博客搭建部署#

1.环境准备#

1.1 安装git#

1.2 安装Node.js#

1.2.1 mac怎么用Node官网包安装#

1.2.2 如何安装多个版本Node#

1.2.3 如何升级 Node#

1.3 安装pnpm#

2 Astro#

2.1 安装最新版本Astro#

2.2 初始化Astro项目#

2.3 启动Astro开发服务器测试#

2.4 Astro项目结构#

3 配置Astro博客主题#

3.1 Astro博客主题模板推荐#

3.2 Fork主题仓库Firefly#

3.3 制定分支策略#

3.4 配置与DIY博客#

4.1 写文章#

4.3 构建与预览网站#

4.2 日常维护博客#

5 Vercel 部署#

5.1 本地部署 Netlify#

5.2 Netlify 关联项目#

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy？

Vue 的响应式原理中 Object.defineProperty 有什么缺陷？为什么在 Vue3.0 采用了 Proxy，抛弃了 Object.defineProperty？#

Object.defineProperty#

Proxy#

解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题

解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题#

临时在一段代码中取消eslint检查

临时在一段代码中取消eslint检查#

从Chrome源码看JS Array的实现

从Chrome源码看JS Array的实现#

1. JS Array的实现#

2. Push和扩容#

3. Pop和减容#

4. shift和splice数组中间的操作#

（1）shift#

（2）unshfit#

（3）splice#

5. Join和Sort#

Array和线性链接的速度#

从Chrome源码看JS Object的实现

从Chrome源码看JS Object的实现#

1. V8的代码结构#

2. JS Object类图#

3. 创建JS Object#

4. 字符串哈希cache查找#

5. 字符串哈希表查找#

6. 数字索引哈希查找#

7. ES6 Map的实现#

8. Object和ES6 Map的速度比较#

常见前端安全问题及防护

常见前端安全问题及防护#

一、xss与sql攻击#

二、csrf#

三、请求劫持与HTTPS#

四、浏览器web安全控制#

五、使用iframe的风险#

六、点击劫持#

七、错误的内容推断#

八、不安全的第三方依赖包#

九、HTTPS中间人攻击#

十、本地存储数据泄露#

十一、CDN劫持/污染#

参考地址#

开发过程中遇到的报黄及解决

解决控制台报黄passive event listener to a scroll-blocking 'touchmove' event. Consider mark#

解决Chrome动画 卡顿 的办法

chrome诡异的Bug#

如何避免这个问题#

开启GPU硬件加速可能触发的问题#

如何监测动画帧速率#

通过-webkit-transform/translateZ开启GPU硬件加速的适用范围#

JS将对象转化为数组

将对象转化为数组#

Vuejs基础

1.2.3 如何升级 `Node`#

5.1 本地部署 `Netlify`#

5.2 `Netlify` 关联项目#

Vue 的响应式原理中 `Object.defineProperty` 有什么缺陷？为什么在 Vue3.0 采用了 `Proxy`，抛弃了 `Object.defineProperty`？#

`Object.defineProperty`#

`Proxy`#

解决控制台报黄`passive event listener to a scroll-blocking 'touchmove' event. Consider mark`#

解决Chrome动画卡顿的办法

2.`filter` （过滤）- 删除#

3.`map`(映射) - 更新#

4.`includes` (是否包含)#

5.`find`#

6.`some`#

7.`every`#

8.`reduce`(收敛)#

把`[[2,5],[7,3]]`降维成`[2,5,7,3]`#

安装`Hexo`#

怎样将`Hexo`与`github page` 联系起来#

2.配置`Deployment`#

1.1 `charCodeAt`（索引）返回结果对应的是ASCII码;原字符串不变#

1.2 `push()`;向数组末尾增加n项#

1.3 `unshift();`向数组开头增加n项#

2.1 `pop();`删除数组最后一项内容#

2.2 `shift();`删除数组中的第一项#

3.1 `slice` 实现数组的截取，在原来的数组中截取某一部分#

3.1.1 `slice(n,m)`#

3.1.2 `concat();`把两个数组拼接在一起#

3.1.3 `splice`#

4.通过属性值查找索引`indexOf`、`lastIndexof`#