理解浏览器工作原理之前，需要先对进程与线程有一个大致的了解。首先，对进程与线程的概念和实例场景进行一个简单的概括和介绍。

进程与线程

• 进程（Process）：
  • 狭义: 计算机中正在运行的一个程序实例。例如一个运行的浏览器。
  • 广义: 一个具有一定独立功能的程序关于某个数据集合的一次运行活动，是操作系统动态执行的基本单元，在传统的操作系统中，进程既是基本的分配单元，也是基本的执行单元。
  • 简单来说，进程就是我们使用计算机时，打开的每一个运用程序，可以理解为一个公司，特点就是它们都是高度独立的，就好比你正在运行的浏览器突然崩溃了，但是不会影响到你正在运行的QQ。
• 线程（Thread）：
  • 狭义: 一个进程中负责某一项功能的代码执行器。例如浏览器中负责network的线程负责解析你输入的URL在得到服务器响应后返回的相关信息。
  • 广义: 进程中一个单一顺序的控制流与实际运作单位，是独立调度和分派的基本单位，一个进程中可以并发多个线程，这些线程共享同一进程中的全部系统资源，如虚拟地址空间，文件描述符等。
  • 简单来说，线程就是我们使用的运用程序中负责帮我们实现具体功能的一个小模块，可以理解为一个公司的员工，特点是它们之间可以互相通信，相对而言是独立的，一个线程崩溃了，可能会影响其他线程，也可能不影响其他线程，但是所属的进程崩溃了，所有线程都会崩溃，就好比公司都没了，这个公司的员工自然也就不存在了。

在一些运用程序中，为了满足某些功能的需要，细分要执行的任务，启动的进程往往会创建另外的新的进程来处理其他任务，但是这些新创建出来的进程拥有全新的独立的内存空间，不能与原来的进程进行内存共享，如果这些进程之间需要通信，可以通过IPC机制来实现。

很多应用程序都会采取这种多进程的方式来工作，因为进程和进程之间是互相独立的它们互不影响，也就是说，当其中一个进程挂掉了之后，不会影响到其他进程的执行，只需要重启挂掉的进程就可以恢复运行。

Chrome的多进程架构

在Chrome中，主要的进程有4个：

• 浏览器进程（Browser Process）： 负责浏览器的页面的前进、后退、地址栏、书签栏和处理浏览器的一些不可见的底层操作，例如网络请求和文件访问。
• 渲染进程（Render Process）： 负责一个页面内的显示相关工作，也称渲染引擎。
• 插件进程（Plugin Process）： 负责控制网页使用到的一些插件。
• GPU进程（GPU Process）： 负责处理整个应用程序的GPU任务。

4个进程之间的关系，工作之间互相配合的过程是什么呢？下面用打开一个网页来实际演示一下。
首选，当我们要浏览一个网页时，我们需要在浏览器的地址栏输入URL，当我们输入完成敲下回车之后， Browser Process 会向这个URL发送网络请求，请求成功后获取到服务器返回的HTML内容，然后将HTML交给 Render Process 处理， Render Process 对内容进行解析，解析时当遇到需要请求网络的资源（例如图片、样式文件、js文件等）时，又返回来交给 Browser Process 进行加载处理，与此同时，当有插件代码需要执行时，会开启 Plugin Process 来处理。解析完成后， Render Process 通过计算得到图像帧，并将这些图像帧交给 GPU Process ， GPU Process 再将其转化为图像显示在屏幕上。

多进程架构的优势

• 高容错性。 当下的WEB应用中，HTML、CSS、JavaScript日益复杂，当渲染引擎在处理这些代码时经常会出现Bug，而有些Bug直接会导致渲染引擎直接崩溃，多进程架构使得每一个渲染引擎都运行在各自的进程中，正常情况下，相互之间不会互相影响，这就保证了当某个页面挂了之后，其他页面仍然是正常的，只需要重开挂掉的页面就好了。

• 高安全性与高沙盒性。 渲染引擎经常会遇到不可信，甚至是恶意的代码，这些代码会利用渲染引擎在你的电脑上植入木马、病毒，针对这一问题，浏览器对不同的进程限制了不同的权限，并为其提供沙盒运行环境，使其更加安全可靠。

• 高响应速度。 在单进程的架构中，各个任务互相竞争抢夺CPU资源，使得浏览器响应速度变慢，而多进程架构正好规避了这一缺点。

多进程架构优化

上面提到 Render Process 的作用是负责一个Tab内的显示相关的工作，这就意味着，一个Tab，就会有一个 Render Process ，但是这些进程之间的内存无法进行共享，而不同进程的内存常常需要包含相同的内容。

浏览器的进程模式

为了节省内存，Chrome提供了四种进程模式（Process Models），不同的进程模式会对 Tab 进程做不同的处理。

• Process-per-site-instance(default) 同一个 site-instance 使用一个进程
• Process-per-site 同一个 site 使用一个进程
• Process-per-tab 每个 tab 使用一个进程
• Single process 所有 tab 共用一个进程

先把 site 和 site-instance 的定义做一个介绍

• site 指相同的 registered domain name(例如：a.baidu.com 和 b.baidu.com 就可以理解为同一个 site)
• site-instance 指的是一组 connected pages from the same site，这里 connected 的定义是 can obtain references to each other in script code。通俗来说，满足下面两中情况并且打开的新页面和旧页面属于上面定义的同一个 site，就属于同一个 site-instance
  • 用户通过这种方式点击打开的新页面
  • JS代码打开的新页面（比如 window.open)

再对四种进程模式做一个解释

• 首先是 Single process ，顾名思义，单进程模式，所有 tab 都会使用同一个进程。
• 接下来是Process-per-tab ，每打开一个tab，会新建一个进程。而对于 Process-per-site ，当你打开 a.baidu.com 页面，再打开 b.baidu.com 的页面，这两个页面的tab使用的是共一个进程，因为这两个页面的site相同，而如此一来，如果其中一个tab崩溃了，而另一个tab也会崩溃。 Process-per-site-instance
• 是最重要的，因为这个是 Chrome 默认使用的模式，也就是几乎所有的用户都在用的模式。当你打开一个 tab 访问 a.baidu.com ，然后再打开一个 tab 访问 b.baidu.com，这两个 tab 会使用两个进程。而如果你在 http://a.baidu.com 中，通过JS代码打开了 http://b.baidu.com 页面，这两个 tab 会使用同一个进程。

那么为什么浏览器使用Process-per-site-instance作为默认的进程模式呢？
首先， Process-per-site-instance 兼容了性能与易用性，是一个比较中庸通用的模式。相较于 Process-per-tab ，能够少开很多进程，就意味着更少的内存占用相较于 Process-per-site ，能够更好的隔离相同域名下毫无关联的 tab，更加安全。

网页加载过程

之前我们我们提到，tab 以外的大部分工作由浏览器进程 Browser Process 负责，针对工作的不同， Browser Process 划分出不同的工作线程：

• UI thread： 控制浏览器上的按钮及输入框
• network thread： 处理网络请求，从网上获取数据
• storage thread： 控制文件等的访问
  

第一步：处理输入

当我们在浏览器的地址栏输入内容按下回车时， UI thread 会判断输入的内容是搜索关键词（search query）还是URL，如果是搜索关键词，跳转至默认搜索引擎对应都搜索URL，如果输入的内容是URL，则开始请求URL。

第二步：开始导航

回车按下后， UI thread 将关键词搜索对应的URL或输入的URL交给网络线程 Network thread ，此时UI线程使Tab前的图标展示为加载中状态，然后网络进程进行一系列诸如DNS寻址，建立TLS连接等操作进行资源请求，如果收到服务器的301重定向响应，它就会告知UI线程进行重定向然后它会再次发起一个新的网络请求。

第三步：读取响应

network thread 接收到服务器的响应后，开始解析HTTP响应报文，然后根据响应头中的Content-Type字段来确定响应主体的媒体类型（MIME Type），如果媒体类型是一个HTML文件，则将响应数据交给渲染进程（renderer process）来进行下一步的工作，如果是 zip 文件或者其它文件，会把相关数据传输给下载管理器。
与此同时，浏览器会进行 Safe Browsing 安全检查，如果域名或者请求内容匹配到已知的恶意站点，network thread 会展示一个警告页。除此之外，网络线程还会做 CORB（Cross Origin Read Blocking）检查来确定那些敏感的跨站数据不会被发送至渲染进程。

第四步：查找渲染进程

各种检查完毕以后， network thread 确信浏览器可以导航到请求网页， network thread 会通知 UI thread 数据已经准备好， UI thread 会查找到一个 renderer process 进行网页的渲染。

浏览器为了对查找渲染进程这一步骤进行优化，考虑到网络请求获取响应需要时间，所以在第二步开始，浏览器已经预先查找和启动了一个渲染进程，如果中间步骤一切顺利，当 network thread 接收到数据时，渲染进程已经准备好了，但是如果遇到重定向，这个准备好的渲染进程也许就不可用了，这个时候会重新启动一个渲染进程。

第五步：提交导航

到了这一步，数据和渲染进程都准备好了， Browser Process 会向 Renderer Process 发送IPC消息来确认导航，此时，浏览器进程将准备好的数据发送给渲染进程，渲染进程接收到数据之后，又发送IPC消息给浏览器进程，告诉浏览器进程导航已经提交了，页面开始加载。

这个时候导航栏会更新，安全指示符更新（地址前面的小锁），访问历史列表（history tab）更新，即可以通过前进后退来切换该页面。

第六步：初始化加载完成

当导航提交完成后，渲染进程开始加载资源及渲染页面（详细内容下文介绍），当页面渲染完成后（页面及内部的iframe都触发了onload事件），会向浏览器进程发送IPC消息，告知浏览器进程，这个时候 UI thread 会停止展示tab中的加载中图标。

属性选择器

注意：类选择器、属性选择器、伪类选择器，权重都为 10

结构伪类选择器

nth-child(n)

• n 可以是数字，关键字和公式
• n 如果是数字，就选择第 n 个元素，n 从 1 开始
• n 可以是关键字，even 代表偶数，odd 代表奇数
• n 可以是公式，常见的公式如下（如果 n 是公式，则从 0 开始计算，但是第 0 个元素或者超出了元素的个数会被忽略）

nth-child(n) 与 nth-of-type(n) 的区别

• E:nth-child(n) 在执行时会先把选择到的所有盒子都先进行排序，再执行 nth-child(n)，然后再与 E 匹配
• E:nth-of-type(n) 在执行时会先把指定的所有盒子都先进行排序，再与 E 匹配，然后再执行 nth-child(n)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

/* html */
<section>
  <p>羊</p>
  <div>羊羊</div>
  <div>羊羊羊</div>
</section>

/* css */
section div:nth-child(1) {
  color: red;
}
section div:nth-of-type(1) {
  color: blue;
}

/* 第一个选择限定的样式无效，第二个选择限定的样式生效*/

伪元素选择器

注意：

• before 和 after 会创建一个元素，属于行内元素
• 新创建的这个元素在文档树中是找不到的，所以称为伪元素
• 语法：element::before {}
• before 和 after 必须有 content 属性
• before 在父元素内容的前面创建元素，after 在父元素内容的后面创建元素
• 伪元素选择器和标签选择器一样，权重都为 1

盒子模型

CSS3 中可以通过 box-sizing 来指定盒模型，可设置为 content-box 或者 border-box

• box-sizing: content-box 盒子大小为 width + padding + border （默认值）
• box-sizing: border-box 盒子大小为 width，padding 和 border 就不会撑大盒子了，前提是 padding + border <= width

滤镜

CSS3 中可以通过 filter 将模糊或颜色偏移等图形效果应用于元素

过渡

transition: 需要过渡的属性1 花费时间 运动曲线 延时时间, 需要过渡的属性2 花费时间 运动曲线 延时过渡, ...

• 属性：需要变化的 CSS 属性，宽度高度 背景颜色 内外边距等。如果想要所有属性都变化过渡，可以直接写 all
• 花费时间：单位秒（必须）
• 运动曲线：默认 ease （可省略）
• 延时过渡：单位秒（必须），默认 0s （可省略）

一个正在成长的前端小白~

创建集合

• 设定集合规则

  1 2 3 4 5

  const courseSchema = new mongoose.Schema({ name: String, author: String, isPublished: Boolean })

• 创建集合并运用规则

  1	const Course = mongoose.model('Course', courseSchema)

创建文档（向集合中插入数据）

• 创建集合实例

  1 2 3 4 5 6

  const course = new Course({ name: 'Node.js course', author: 'zy', tags: ['node'], isPublished: true })

• 保存到数据库

  1	course.save()

导入外部文件（先将mongodb安装目录下的bin配置在环境变量中）

1

mongoimport -d 数据库名称 -c 集合名称 --file 要导入的外部数据文件

查询文档（返回结果都是集合，方法结束后都是一个promise对象，可以接then）

• 返回所有文档

  1

  find()

• 返回一条文档，默认返回当前集合中的第一条文档

  1

  findOne()

• 匹配范围

  1	User.find({age: {$gt: 20, $lt: 40}}).then(res => {console.log(res)})

• 匹配包含

  1	User.find({hobbies: {$in: ['旅行']}}).then(res => {console.log(res)})

• 选择要查询的字段

  1	User.find.select('name email').then(res => {console.log(res)})

• 选择不要查询的字段

  1	User.find.select('-name -email').then(res => {console.log(res)})

• 根据某个字段排序（升序）

  1	User.find.sort('age').then(res => {console.log(res)})

• 根据某个字段排序（降序）

  1	User.find.sort('-age').then(res => {console.log(res)})

• skip跳过多少条数据 limit限制查询数量

  1	User.find.skip(2).limit(6).then(res => {console.log(res)})

删除文档

• 删除一条文档（如果查询条件匹配了多个文档，删除匹配的第一条文档）

  1	User.findOneAndDelete({id: 1}).then(res => {console.log(res)}) // 返回的是删除的文档

• 删除多条文档（删除条件为{}时，删除User集合中的所有文档）

  1	User.deleteMany({id: 1}).then(res => {console.log(res)}) // 返回的是删除的一个结果对象，包括删除的条数n，删除成功或失败的状态ok

更新文档

• 更新单个

  1	User.updateOne({name: '李四'}, {name: '张三'}).then(res => {console.log(res)}) // 返回的是是否修改成功的信息

• 更新多个

  1	User.updateMany({}, {age: 32}).then(res => {console.log(res)}) // 返回的是是否修改成功的信息，包括被执行更新的条数n，更新的条数nModified，成功或失败的状态ok

验证规则

• 验证规则

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

  const postSchema = new mongoose.Schema({ title: { type: String, // 必选字段 required: [true, '自定义错误信息'], // 字符串最小长度 minlength: [2, '自定义错误信息'], // 字符串最大长度 maxlength: [6, '自定义错误信息'], // 去除字符串两边的空格 trim: true }, age: { type: Number, // 数值的最小值 min: [18, '自定义错误信息'], // 数值的最大值 max: [66, '自定义错误信息'] }, publishDate: { type: Date, // 默认值 default: Date.now }, category: { type: String, // 枚举 列举出当前字段可以拥有的值 enum: { values: ['html', 'css', 'javascript', 'node.js'], message: '自定义错误信息' } }, author: { type: String, // 自定义验证规则 validate: { validator: v => { // 返回布尔值 v为要验证的值 return v && v.length > 4 }, // 自定义错误信息 message: '自定义错误信息' } } })

集合关联

• 用户集合

  1 2 3 4 5

  const User = mongoose.model('User', new mongoose.Schema({ name: { type: String } }))

• 文章集合

  1 2 3 4 5 6 7 8 9

  const Post = mongoose.model('Post', new mongoose.Schema({ title: { type: String }, // 使用ID将文章作者与作者集合进行关联，ID为compass自动生成的 author: { type: mongoose.Schema.Types.ObjectId, ref: 'User' } }))

• 联合查询

  1 2 3

  Post.find() .populate('author') .then((err, result) => {console.log(result)})

一个正在成长的前端小白~

Gulp

1、使用

• npm install gulp 下载gulp库文件

• 在项目根目录新建gulpfile.js文件

• 重构项目文件夹结构，src放置源代码文件，dist放置构建后的文件

• 在gulpfile.js文件中编写任务

• 命令行工具中执行gulpfile.js文件

注：需要连续执行多个任务时，gulp.task('default', ['任务1', '任务2', '', ...])

2、方法

• gulp.src()：获取任务要处理的文件

• gulp.dest()：输出文件

• gulp.task()：建立gulp任务

• gulp.watch()：监控文件的变化

注：需要连续依次对文件进行处理时，用gulp.pipe()进行链式操作

3、插件

1
2

const gulp = require('gulp')
const fileinclude = require('gulp-file-include')

• gulp-htmlmin：html文件压缩

  1 2 3 4 5 6 7 8

  const htmlmin = require('gulp-htmlmin') gulp.task('htmlmin', () => { gulp.src('./src/*.html') // *.xxx代表选择该文件夹中的所有xxx类型的文件 // 先抽取公共文件抽取再进行压缩、转换等操作 .pipe(fileinclude()) .pipe(htmlmin({ collaseWhitespace: true })) // collaseWhitespace: true为压缩空格，false为不压缩空格 .pipe(gulp.dest('dist')) })

• gulp-csso：压缩css

  1 2 3 4 5 6

  const csso = require('gulp-csso') gulp.task('cssmin', () => { gulp.src('./src/css/*.css') .pipe(csso()) .pipe(gulp.dest('dist')) })

• gulp-babel：JavaScript语法转化（ES6转换）

  1 2 3 4 5 6 7 8 9

  const babel = require('gulp-babel') gulp.task('jsmin', () => { gulp.src('./src/js/*.js') .pipe(babel({ // 可以判断当前代码的运行环境，将代码转换为当前运行环境所支持的代码 presets: ['@babel/env'] })) .pipe(gulp.dest('dist/js')) })

• gulp-less：less语法转化

  1 2 3 4 5 6

  const less = require('gulp-less') gulp.task('cssmin', () => { gulp.src(['./src/css/*.less', './src/css/*.css']) // 要处理多个文件时，用[]接收 .pipe(less()) .pipe(gulp.dest('dist/css')) })

• gulp-uglify：压缩混淆JavaScript

  1 2 3 4 5 6

  const uglify = require('gulp-uglify') gulp.task('jsmin', () => { gulp.src('./src/js/*.js') .pipe(uglify()) .pipe(gulp.dest('dist/js')) })

• gulp-file-include：公共文件抽取

• browsersync：浏览器实时同步

模块查找规则

1、路径完整、省略后缀

1
2

require('./find.js') // 有后缀
require('./find') // 无后缀

• 如果是完整路径，直接引入模块

• 如果模块后缀省略，先找同名JS文件，找不到再找同名JS文件夹

• 如果找到了同名JS文件夹，引入文件夹中的index.js

• 如果文件夹中没有index.js，找当前文件夹中的package.json，引入main选项中的入口文件（一般默认为index.js）

• 如果package.js不存在或main中没有指定入口文件，报错，找不到该模块

2、路径不完整，且省略后缀

1

require('find')

• 默认为系统模块，到系统模块中进行查找

• 系统模块未找到，到node_modules文件夹中查找

• node_modules文件夹中未找到，查找是否有同名JS文件

• 无同名JS文件，查找是否有同名JS文件夹

• 有同名JS文件夹，到该文件夹中查找index.js文件

• 未找到index.js文件，查找该文件夹中的package.json中main选项的入口文件

• 都未找到，报错，找不到该模块

async关键字（ES7）

• 普通函数定义前加async关键字，普通函数变成异步函数

• 默认返回Promise对象

• 在异步函数内部使用return关键字进行结果返回，结果会被包裹在promise对象中，return代替了resolve方法

• 在异步函数内部使用throw抛出异常

• 调用异步函数再链式调用then方法获取异步函数执行结果

• 调用异步函数再链式调用catch方法获取异步函数执行错误信息

await关键字（ES7）

• 只能出现在异步函数中

• 后面只能跟promise对象

• 可以暂停异步函数向下执行，直到promise有返回结果

一个正在成长的前端小白~

小程序的双线程模型

小程序的宿主环境：微信客户端

• 宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件
• 提供了小程序的双线程模型

双线程模型

• WXML模板和WXSS样式运行与渲染层，渲染层使用WebView线程渲染（一个程序有多个页面，会使用多个WebView的线程 ）。
• JS脚本（app.js/home.js等）运行于逻辑层，逻辑层使用JsCore运行JS脚本。
• 这两个线程都会经由微信客户端（Native）进行中转交互。

界面渲染整体流程

1.在渲染层，宿主环境会把WXML转化成对应的JS对象
2.将JS对象再次转成真实的DOM树，交由渲染层线程渲染
3.数据变化时，逻辑层提供最新的变化数据，JS对象发生变化比较进行diff算法对比
4.将最新变化的内容反映到真实的DOM树中，更新UI

启动流程

注册App时，一般会做：

1.判断小程序的进入场景
2.监听生命周期函数，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中获取微信用户的信息
3.因为App()实例只有一个，并且是全局共享的（单例对象），所以可以将一些共享数据放在这里

常用内置组件

• text

  1 2 3 4 5 6 7 8 9 10 11

  <!-- selectable属性：默认情况下text中的文本长按是不能选中的，要实现可以选中，需要设置成true --> <text selectable="{{true}}">Hello World</text> <!-- space属性：决定文本空格的大小 --> <text space='nbsp'>Hello World</text> // 根据字体设置的空格大小 <text space='ensp'>Hello World</text> // 半个中文字符大小 <text space='emsp'>Hello World</text> // 一个中文字符大小 <!-- decode属性：是否解码文本 --> <!-- decode可以解析的有：&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; --> <text decode=''>5 &gt; 3</text> // 5 > 3

• button

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

  <!-- size属性：决定按钮的大小，行内块级元素，一行可以有多个；默认是块级元素，独占一行 --> <button size="mini">按钮</button> <!-- type属性：primary(主要绿色)，default(默认白色)，warn(警告红色) --> <button size="mini" type="primary">按钮</button> <button size="mini" type="default">按钮</button> <button size="mini" type="warn">按钮</button> <!-- disable属性：true为不可用，false为可用；默认值为true --> <button size="mini" disable>按钮</button> <!-- loading属性：带有加载的icon，true为显示加载，false为不显示加载，默认为true --> <button size="mini" loading>按钮</button> <!-- hover-class属性：添加点击与按住的类名，在wxss中设置点击与按住时按钮的样式 --> <button size="mini" hover-class="press">按钮</button> .press { backgroud: red; color: white; }

• view

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  <!-- hover-class属性：当用户按下组件时，显示的样式 --> <view class="box" hover-class="press">box</view> .box { background: red; color: white; font-size: 18px; } .press{ background: yellow; color: black; font-size: 30px; } <!-- hover-start-time属性：当用户按住后多久显示hover-class中设置的样式，单位毫秒，默认50，直接写number无效时，加上{{}}，即{{number}} --> <view class="box" hover-class="press" hover-start-time="{{1000}}">box</view> <!-- hover-stay-time属性：当用户手指松开后hover-class中设置的样式保留时间，单位毫秒，默认400，直接写number无效时，加上{{}}，即{{number}} --> <view class="box" hover-class="press" hover-start-time="{{1000}}" hover-stay-time"{{1000}}">box</view> <!-- hover-stop-propagation属性：当有多个view嵌套时，是否阻止当前view的祖先节点显示hover-class中设置的样式，前提是祖先节点也设置了hover-class属性，默认false--> <view class="box" hover-class="press">box1 <view class="box" hover-class="press" hover-stop-propagation="{{true}}">box2</view> </view>

• image

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

  <!-- 可以写成单标签，也可以写成双标签 --> <!-- 默认有自己的大小：320x240 --> <!-- 行内块级元素 --> <!-- src属性：本地路径(相对路径/绝对路径)/远程地址 --> <img src="../../assets/img/home.jpg"> <img src="/assets/img/home.jpg"> <img src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"> <!-- bindload属性：监听图片加载完成 --> <img src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" bindload="handleWatch"> handleWatch () { console.log('图片加载完成...') } <!-- lazy-load属性：图片懒加载，进入一定范围（上下三屏）时才开始加载，默认为false--> <img src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" lazy-load> <!-- show-menu-by-longpress属性：长按图片出现识别小程序码，默认为false --> <img src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg" show-menu-by-longpress> <!-- mode属性：缩放图片 --> <!-- scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 --> <!-- aspectFit：缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来 --> <!-- aspectFill：缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来 --> <!-- widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 --> <!-- top/bottom/center/left/right...：裁剪模式，不缩放图片，只显示图片的上面/下面/中间/左边/右边区域 -->

• input

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  <!-- 可以写成单标签，也可以写成双标签 --> <!-- 默认背景为透明色 --> <!-- value属性：默认初始值 --> <input value="Hello World" /> <!-- type属性：决定键盘类型(文本/数字/身份证/带小数点的数字) --> <input type="text" /> // 文本键盘 <input type="number" /> // 数字键盘 <input type="idcard" /> // 身份证键盘 <input type="digit" /> // 带小数点的数字键盘 <!-- password属性：暗文 --> <input password /> <!-- placeholder属性：未输入内容时的占位文字 --> <input password placeholder="请输入密码"/> <!-- confir-type属性：设置键盘右下角按钮的文字，仅在type='text'时生效 --> <input type="text" confir-type="send" /> // 右下角按钮为“发送” <input type="text" confir-type="search" /> // 右下角按钮为“搜索” <input type="text" confir-type="next" /> // 右下角按钮为“下一个” <input type="text" confir-type="go" /> // 右下角按钮为“前往” <input type="text" confir-type="done" /> // 右下角按钮为“完成”

• scroll-view

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

  HTML <!-- 横向滚动 --> <scroll-view class="container" scroll-x bindscroll="handleScroll"> <view wx:for="{{10}}" class="main">{{item}}</view> </scorll-view> CSS .container { background: red; white-space: nowrap; // 不换行 } .main { width: 100px; height: 100px; background: white; margin: 10px; display: inline-block; } JS handleScroll (event) { console.log(event) // 横向滚动时，关注detail中的scrollLeft；纵向滚动时，关注detail中的scrollTop }

  共同属性

  属性名	类型	描述	注释
  id	String	组件的唯一标识符	整个页面唯一
  class	String	组件的样式类	在对应的WXSS中定义的样式类
  style	String	组件的内联样式	可以动态设置的内联样式
  hidden	Boolean	组件是否显示	所有组件默认显示
  data-*	Any	自定义属性	组件上触发事件时，会发送给相应的事件处理函数
  bind/catch	EventHandler	组件的事件

尺寸单位

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

关于WXML导入的两种方式：

• import导入：

  1.主要是导入template
  2.不能进行递归导入（例如，B中导入C，A中导入B，A中使用C时会报错：not found C）

A文件

1
2
3
4

<import src="/first.wxml" /> // 导入模板
 
<template is="first"/> // 调用正常导入的
<template is="second"/> // 调用递归导入的

B文件

1
2
3
4
5

<import src="/second.wxml"/> // 递归导入模板
 
<template name="first">
  <view>我是第一层</view>
</template>

C文件

1
2
3

<template name="second">
  <view>我是第二层</view>
</template>

A中控制台结果

1
2
3
4
5
6
7
8

./pages/home/home.wxml
 Template `second` not found.
  24 | 
  25 | <template is="first"/>
> 26 | <template is="second"/>
     |              ^
  27 | 
  28 |

• include导入

  1.将公共的wxml中的组件抽取到一个文件中
  2.不能导入template/wxs，可以进行递归导入

WXS

为什么要引入wxs？

1.在WXML中是不能直接调用Page/Component中定义的函数的
2.但是某些情况，我们希望可以使用函数来处理WXML中的数据（类似于Vue中的过滤器），这个时候就要使用WXS

WXS使用的限制和特点：

• WXS的运行环境和其他JavaScript代码是隔离的，WXS中不能调用其他JavaScript文件中定义的函数，也不能调用小程序提供的API
• WXS函数不能作为组件的事件回调
• 由于运行环境的差异，在IOS设备上小程序内的WXS会比JavaScript代码快2~20倍。在Android设备上两者运行效率无差异

点击事件对象中currentTarget与target的区别

正常情况下，两者中存放的值是一样的，但是由于事件的冒泡性，当一个组件中嵌套了一个内置组件时，点击内置组件会先后的触发内置组件的点击事件和外层组件的点击事件，这个时候，外层组件的currentTarget是其本身，而target则是内置组件。总结，currentTarget是触发事件的对象，target是产生事件的对象。

1
2
3
4
5
6

<view id="outer" bindtap="handleOutClick">
  我是外层的view
  <view id="inner" bindtap="handleInnerClick">
    我是内层的view
  </view>
</view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

handleOutClick (e) {
  console.log(e)
},
handleInnerClick (e) {
  console.log(e)
}
 
/*
changedTouches: [{…}]
currentTarget: {id: "inner", offsetLeft: 0, offsetTop: 162, dataset: {…}}
detail: {x: 106, y: 214}
mark: {}
mut: false
target: {id: "inner", offsetLeft: 0, offsetTop: 162, dataset: {…}}
timeStamp: 225847
touches: [{…}]
type: "tap"
*/
/*
changedTouches: [{…}]
currentTarget: {id: "outer", offsetLeft: 0, offsetTop: 141, dataset: {…}}
detail: {x: 106, y: 214}
mark: {}
mut: false
target: {id: "inner", offsetLeft: 0, offsetTop: 162, dataset: {…}}
timeStamp: 225847
touches: [{…}]
type: "tap"
*/

点击事件对象中changedTouches与touches的区别

两者都是一个存放手指触摸屏幕的数组，touches存放的是当前触摸屏幕所有手指的位置等信息，当手指离开屏幕时为空数组，但是changedTouches存放的是触摸前后发生变化的所有手指的位置等信息。例如第一次用食指触摸在屏幕上某一块，在食指未松开的状态下，再用中指触摸屏幕上食指触摸的同一块，此时touches中存放了食指和中指两根手指的位置等信息，而changedTouches只存放了中指的位置等信息。

事件的捕获与冒泡

当界面产生一个事件时，事件分为了捕获阶段和冒泡阶段。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

<!-- bind：层次传递 -->
 
<view class="view1" capture-bind:tap="handleCaptureView1" bindtap="handleBindView1">
  <view class="view2" capture-bind:tap="handleCaptureView2" bindtap="handleBindView2">
    <view class="view3" capture-bind:tap="handleCaptureView3" bindtap="handleBindView3">
    </view>
  </view>
</view>
 
<!-- 点击view3 -->
handleCaptureView1
handleCaptureView2
handleCaptureView3
handleBindView3
handleBindView2
handleBindView1
 
<!-- 点击view2 -->
handleCaptureView1
handleCaptureView2
handleBindView2
handleBindView1
 
<!-- 点击view1 -->
handleCaptureView1
handleBindView1
 
 
<!-- catch：阻止事件的进一步传递 -->
 
<view class="view1" capture-bind:tap="handleCaptureView1" bindtap="handleBindView1">
  <view class="view2" capture-catch:tap="handleCaptureView2" catchtap="handleBindView2">
    <view class="view3" capture-bind:tap="handleCaptureView3" bindtap="handleBindView3">
    </view>
  </view>
</view>
 
<!-- 点击view3 -->
handleCaptureView1
handleCaptureView2
 
<!-- 点击view2 -->
handleCaptureView1
handleCaptureView2
 
<!-- 点击view1 -->
handleCaptureView1
handleBindView1

自定义组件

• 首先需要在json文件中进行自定义组件声明，（将component字段设为true可将这一组组件设为自定义组件）
• 在wxml中编写属于我们组件自己的模板
• 在wxss中编写属于我们组件自己的相关样式
• 在js文件中，可以定义数据或组件内部的相关逻辑

组件的样式细节

• 组件内的样式对外部样式的影响

  1.组件内的class样式，只对组件wxml内的节点生效，对于引用组件的page页面不生效
  2.组件内不能使用id选择器、属性选择器、标签选择器

• 外部样式对组件内样式的影响

  1.外部使用class的样式，只对外部wxml的class生效，对组件内是不生效的
  2.外部使用了id选择器、属性选择器不会对组件内产生影响
  3.外部使用了标签选择器，会对组件内产生影响

• 结论

  1.组件内的class样式和组件外的class样式，默认是有一个隔离效果的
  2.为了防止样式的错乱，官方不推荐使用id、属性、标签选择器

• 如何让class可以相互影响
  在自定义组件的js文件中的Component对象中，可以传入一个options属性，options属性中有一个styleIsolation（样式隔离）属性。styleIsolation共用三个取值：

  1 2 3 4 5

  Component({ options: { styleIsolation: "isolated/apply.shared/shared" } })

  Δ -isolated：默认取值，启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响（互不影响）

Δ -apply-shared：使用自定义组件的页面wxss样式会影响自定义组件，自定义组件wxss样式不会影响页面（单向影响）

Δ -shared：使用自定义组件的页面wxss样式会影响自定义组件，自定义组件wxss样式同样会影响页面（相互影响）

Δ 其他一些相关样式细节，可参考官网

页面与组件之间通信

API接口常用配置

虽然JavaScript里一切皆对象，但为了理解原型链系统之间错综复杂的关系 ，我们需要先将JavaScript的对象分为对象和函数两大类。在此基础上，JavaScript的原型链逻辑遵从以下通用规则：

通用规则

1.对象有proto属性，函数有prototype属性
2.对象由函数生成
3.生成对象时，对象的proto属性指向函数的prototype属性

在没有手动修改proto属性的指向时，以上三条便是JavaScript默认原型链指向逻辑。

下面我们来从最一般的情况开始，逐步深入的详细解释一下：

1.一般情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

创建空对象时，实际上是用Object函数来生成对象的：
>var o = {}
>o.__proto__ === Object.prototype
true

也可以显式的使用Object函数来创建对象：
>var o = Object()
o.__proto__ === Object.prototype
true

当使用函数来创建自定义的对象时，上面的规则同样适用：
>function MyObj(){}
>typeof MyObj
"function"
>var myobj = new MyObj()
>myobj.__proto__ === MyObj.prototype
true

2. 函数对象

既然JavaScript里“一切皆对象”，那函数自然也是对象的一种。对于函数作为对象来说，上面的规则同样适用：

1
2
3
4

函数对象都是由Function函数生成的：
>function fn () {}
>fn.__proto__ === Function.prototype
true

我们可以看到，把函数当做对象时，生成它的函数就是Function函数。那Function函数本身呢？同样适用！

1
2
3

Function函数本身作为对象时，生成它的函数是他自身！
>Function.__proto__ === Function.prototype
true

同样我们知道，Object函数也是一个函数对象，那么它是否符合上面的规则呢？当然！

1
2
3

Object函数既然是函数，那生成它的函数自然是Function函数咯：
>Object.__proto__ === Function.prototype
true

3. prototype究竟是谁？

好了，现在我们知道，对象的proto属性是从生成它的函数的prototype那里得来的，那我们不禁要问，函数的prototype又是从哪里而来？

1
2
3
4
5
6
7
8
9
10
11
12
13

一般函数默认的prototype是系统自动生成的一个对象：
>function fn () {}
>typeof fn.prototype
"object"
>fn.prototype
{constructor: ƒ}
    constructor: ƒ fn()
    __proto__: Object

>fn.prototype.constructor === fn
true
>fn.prototype.__proto__ === Object.prototype
true

一般函数默认的prototype是一个类型为”object”的对象，它有两个属性：constructor和 proto。其中constructor属性指向这个函数自身，proto属性指向Object.prototype，这说明一般函数的prototype属性是由Object函数生成的。

4. 特殊情况

前面我们特别强调了是一般函数，那不一般的函数是谁呢？当然是Object函数和Function函数！
先来看Object.prototype:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

>typeof Object.prototype
"object"
>Object.prototype
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    __defineGetter__: ƒ __defineGetter__()
    __defineSetter__: ƒ __defineSetter__()
    __lookupGetter__: ƒ __lookupGetter__()
    __lookupSetter__: ƒ __lookupSetter__()
    get __proto__: ƒ __proto__()
    set __proto__: ƒ __proto__()

可以看到Object函数的prototype属性也是一个类型为”object”的对象，但和一般函数的默认prototype属性不一样的是，它多了一大堆方法，这些方法都是JavaScript对象的系统默认方法。
再仔细看，好像少了什么，对了，Object函数的prototype属性里没有proto属性，我们试着把它的proto属性打出来看看：

1
2

>Object.prototype.__proto__
null

这就是Object函数特殊情况了：Object.prototype.proto === null，我们知道，这就是JavaScript原型链的终点了。
为什么要这样设定呢？
typeof Object.prototype === “object”，说明它是一个Object对象，如果它由Object函数生成，于是按照我们上面的通用规则，就该是Object.prototype.proto === Object.prototype。
啊哈，问题出现了，Object.prototype.proto属性指向了它自身，这样以proto属性构成的原型链就再也没有终点了！所以为了让原型链有终点，在原型链的最顶端，JavaScript规定了Object.prototype.proto === null。
好，现在再来看Function函数吧：

1
2

>typeof Function.prototype
"function"

一上来就不走寻常路，Function函数的prototype属性是一个”function”类型的对象，而不像其他函数是类型为”object”的对象。那是个什么样的函数呢？

1
2

>Function.prototype
ƒ () { [native code] }

函数内部是[native code]，也就是系统编译好的二进制代码函数，这就暂时没法深究了。现在让我们来看看我们最关心的proto属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

>Function.prototype.__proto__
{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}
    constructor: ƒ Object()
    hasOwnProperty: ƒ hasOwnProperty()
    isPrototypeOf: ƒ isPrototypeOf()
    propertyIsEnumerable: ƒ propertyIsEnumerable()
    toLocaleString: ƒ toLocaleString()
    toString: ƒ toString()
    valueOf: ƒ valueOf()
    __defineGetter__: ƒ __defineGetter__()
    __defineSetter__: ƒ __defineSetter__()
    __lookupGetter__: ƒ __lookupGetter__()
    __lookupSetter__: ƒ __lookupSetter__()
    get __proto__: ƒ __proto__()
    set __proto__: ƒ __proto__()

怎么有种似曾相识的感觉呢？看起来很像是Object.prototype，让我们来试试：

1
2

>Function.prototype.__proto__ === Object.prototype
true

果然就是它！
按照我们最开始提出的通用规则，一个”function”类型的对象，应该是由Function函数生成的，那它的prototype属性应该指向Function.prototype，也就是Function.prototype.proto === Function.prototype。和Object函数同样的问题出现了：循环引用。所以JavaScript规定Function.prototype.proto === Object.prototype，这样既避免了出现循环引用，又让proto构成的原型链指向了唯一的终点：Object.prototype.proto === null。

5. 总结

至此，我们从最一般的对象一直追溯到了Object函数和Function函数，并找在原型链的顶端发现了两个例外情况，也知道了这两个例外个规定是为了让proto构成的原型链存在一个唯一的终点。

现在我们再来看这张JavaScript原型链的图，是不是一目了然了呢？

一个正在成长的前端小白~

index.html访问空白

在config/index.js文件中修改配置assetsPublicPath，把assetsPublicPath: ‘/‘，改成 assetsPublicPath: ‘./‘

1
2
3
4
5
6
7
8
9
10
11

build: {
          // Template for index.html
          index: path.resolve(__dirname, '../dist/index.html'),

          // Paths
          assetsRoot: path.resolve(__dirname, '../dist'),
          assetsSubDirectory: 'static',
          assetsPublicPath: './', // 解决打包后，访问html，显示空白问题

          ******
}

图片无法显示

找到build/utils.js，搜索use: loaders，下面添加publicPath: ‘../../‘

1
2
3
4
5
6
7
8
9
10
11

// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
    return ExtractTextPlugin.extract({
    use: loaders,
    publicPath: '../../', // 解决图片无法显示问题
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

样式丢失

在main.js修改导入包的顺序，将路由包放到最后

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import Vue from 'vue'
import App from './App'
import store from './store'
import 'babel-polyfill'
import apiBaseUrlConfig from './global/apiBaseUrlConfig'
// 引入elementUI
import ElementUI from 'element-ui'
import utils from './global/utils'

// 引入自写公共组件
import '@/components/common'

// 自定义icon
import '@/assets/css/system_Setting/iconfont.css'
import Axios from 'axios'

import router from './router' // 解决样式丢失问题

Vue.use(apiBaseUrlConfig)
Vue.use(ElementUI)

一个正在成长的前端小白~

在写Vue的项目时，我们在一些组件中需要与其他组件进行通信，当然这里的通信不是父子之间的通信，首先，毋庸置疑的是肯定可以通过Vuex来实现的，但是有时候整体项目不是很庞大，总体组件也不是很复杂，用Vuex有点杀鸡用牛刀了，那么这时候我们就可以借助一个空的Vue实例作为中央事件总线来实现任意两个组件之间的通信。

1
2
3
4

<div id="app" style="text-align: center; margin-top: 100px;">
  <one></one>
  <two></two>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

let bus = new Vue({}) // 为了方便在一个组件中使用bus，在实际的运用中一般会新建一个bus.js
 
Vue.component('one', {
  template: `<div>{{msg}}</div>`,
  data () {
    return {
      msg: 'Hello zy'
    }
  },
  created () {
    bus.$on('setMsg', val => {
      this.msg = val
    })
  }
})
 
Vue.component('two', {
  template: `<button @click="sendMsg">change msg</button>`,
  methods: {
    sendMsg () {
      bus.$emit('setMsg', 'wo bu zy')
    }
  }
})
 
new Vue({
  el: '#app'
})

实际效果：

在实际项目运用中，我们一般会将bus单独抽离出来:

bus.js

1
2
3

import Vue from 'vue'
const bus= new Vue()
export default bus

然后在需要调用的组件中先引用bus.js
组件one

1
2
3
4
5
6
7
8
9
10
11
12

import bus from 'bus'
 
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    bus.$emit('msg', 'hi zy')
  }
}

组件two

1
2
3
4
5
6
7
8
9
10
11
12

import bus from 'bus'
 
export default {
  data () {
    return {
      msg: ''
    }
  },
  methods: {
    bus.$on('msg', 'wo bu zy')
  }
}

但是这种引入方式，经过webpack打包后可能会出现bus局部作用域的情况，即引用的是两个不同的bus，导致不能正常通信。
我们其实也可以直接在main.js中注册bus
main.js

1
2
3
4
5
6
7
8
9

import Vue from 'vue'
import bus from 'bus'
 
Vue.use(Vue)
Vue.use(bus)
 
new Vue ({
  el:'#app'　　
})

然后在需要进行通信的两个组件中通过this.$bus.$emit()和this.$bus.$on()来调用
组件one

1
2
3

created () {
  this.$bus.$emit('updateData', {msg: 'hi zy', value: 666})
}

组件two

1
2
3
4
5
6

mounted () {
  this.$bus.$on('updateData', obj => {
    this.msg = obj.msg
    this.value = obj.value
  })
}

注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况。
在组件one中

1
2
3

beforeDestroy () {
  this.$bus.$off('updateData')
}

一个正在成长的前端小白~

方法一：

判断类型时，最最容易想到的就是typeof，但是如果通过typeof来判断是否为number类型，如果被判断的是NaN返回的结果也会是number，因此我们还需要用isNaN来排除NaN的情况。

1
2
3

function isNumber (obj) { 
    return typeof obj === 'number' && !isNaN(obj) 
}

此外isNaN()相比Number.isNaN()会把被判断的参数强制转换成数字再进行判断，而Number.isNaN()只有在参数是真正的数字类型，且值为NaN时才会返回true。

1
2
3
4
5
6
7
8
9
10

Number.isNaN(NaN)         // true
Number.isNaN(Number.NaN)  // true
Number.isNaN(0 / 0)       // true
    
Number.isNaN(null)        // false
Number.isNaN(37)          // false
Number.isNaN("37")        // false
 
Number.isNaN("NaN")       // false 不会隐式转换
window.isNaN('NaN')       // true 会隐式转换

方法二：

isNaN(obj) 等价于isFinite()。Infinity在js表示数字的无穷大,判断是否可用做数字的最佳方法则是isFinite()，因为该方法会筛除掉NaN和Infinity两个关键字。

1
2
3

function isNumber (obj) { 
    return typeof obj === 'number' && isFinite(obj)     
}

同样的， Number.isFinite()方法用来检测传入的参数是否是一个有穷数（finite number）。 和全局的 isFinite() 函数相比，这个方法不会强制将一个非数值的参数转换成数值，这就意味着，只有数值类型的值，且是有穷的（finite），才返回 true。

1
2
3
4
5
6
7
8

Number.isFinite(Infinity)  // false
Number.isFinite(NaN)       // false
Number.isFinite(-Infinity) // false
 
Number.isFinite(0)         // true
Number.isFinite(2e64)      // true
 
Number.isFinite('0')       // false, 全局函数 isFinite('0') 会返回 true

方法三：

用Object.prototype.toString来实现，只是代码量要稍微大一点。

1
2
3

function isNumber (obj) { 
    return Object.prototype.toString.call(obj) === '[object Number]' && !isNaN(obj) 
}

或者

1
2
3

function isNumber (obj) {
    return Object.prototype.toString.call(obj) === '[object Number]' &&  isFinite(obj)     
}

多扯一点，toString()方法返回一个表示该对象的字符串。默认情况下，toString()方法被每个Object对象继承。如果此方法在自定义对象中未被覆盖，toString()返回 “[object type]” ，其中type是对象的类型。
但是，待检测对象也许会重写toString()方法，这时就无法检测toString来判断类型。所以要保证能够检测类型，需要调用Object.prototype.toString来进行判断。如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

let X = function (x) {
    this.name = x
}
 
let x =  new X()
 
x.toString() // "[object,Object]"  使用继承的toString
Object.prototype.toString.call(x) // "[object,Object]"
 
X.prototype.toString = function () { // 重写父类的toString方法
    return 'not type'
}
 
x.toString() // "not type"   使用重写后的toString，就不再返回类型
 
Object.prototype.toString.call(x) // "[object,Object]"

但是返回的” [ object, Type]” 不太好分辨，可以进行特殊的处理，直接返回类型名称。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// 获取类型
function getType (target){
    let types = {}
    let temp = Object.prototype.toString.call(target)
    //types映射类型
    'Boolean Number String Null Undefined Symbol Function Array Date RegExp Object Error NodeList'.split(' ').map(value => {
        types[`[object ${value}]`] = value.toLowerCase()
    })
 
    if (types[temp]) {
        return types[temp]
    } else if (temp.indexOf('HTML') !== -1) { // 判断是否为DOM元素
        return 'element' 
    } else {
            return
        }
    }
    
// 测试
 
getType(1) //  "number"
getType(Symbol(1)) // "symbol"
getType([]) // "array"
getType({}) // "object"
getType(document.querySelectorAll('div')) // "nodelist"

这样就可以便捷的获取到类型名称了。
这里有提到了原型链，可以参看一篇写的很通熟易懂的博文，放上链接原型链。

方法四：

据说这个方法是世界上最短的数字判断代码。

1
2
3

function isNumber (obj) { 
    return obj === +obj 
}

下面是通过该方法进行的延伸。
1、判断字符串 ：

1
2
3

function isString (obj) { 
    return obj === obj+'' 
}

2、判断布尔类型：

1
2
3

function isBoolean (obj) { 
    return obj === !!obj 
}

方法五：

用正则来实现，这也是我们最常用的方式。

1
2
3
4
5
6
7

function isNumber (obj) {
  let reg = /^[0-9]+.?[0-9]*$/
  if (reg.test(obj)) {
    return true
  }
  return false
}

一个正在成长的前端小白~

因为第一次用echarts，一开始下意识想官方应该有这个属性，就一直在柱状图的属性中反复找，后面实在找不到类似的属性，索性就不找了。既然此路不通，那就换一条路试试。但是不管怎么说，就算没有这个属性，效果还是要想办法实现的，要不然产品和测试那里怎么过得去嘛。

虽说查了很多遍的官方文档也没找到，但是也并不是没有收获，在看文档的过程发现柱状图有一个stack的属性，这个属性按我的理解就是，在一个容器中设置两个或两个以上的柱状图时，在每个柱状图的series中都加上stack属性，且它们的值都设置成一样的，这个值可以自己随便自定义，接受的类型为string，如何两个柱状图的stack属性值是一样的话，那么这两个柱状图的柱子的值就会相加，显示的还是一个柱子。想到这里，好像找到了一点感觉，如果我们建立两个柱状图，同时把它们的stack属性设置成一样的值，然后把其中一个柱状图的所有效果取消掉，柱子的颜色设置成透明，data根据整个柱状图的坐标轴刻度的大小设置成合适的，比如我例子中X轴的每个刻度是200000，Y轴共有9类，那么我就可以把所有data设置成[25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000]，这样柱子距离Y轴就是0.125个X轴的刻度长，这个间距主要还是要看你数值轴的一个刻度大小，然后进行自定义设定。ok，又说的有点偏了，回到刚才，这样设置完后，就可以把这个柱状图当成一个辅助的功能，在另一个柱状图中的data写我们需要显示的数据。

让柱子与坐标轴有一定间距的效果就实现了，当然，我例子里做的是X轴当数值轴，即做刻度，可以根据需求不同进行调整，这个都是小问题。

ok，下面把代码简单的上一下吧。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入 ECharts 文件 -->
    <script src="echarts.min.js"></script>
</head>
 
<body>
    <div id="main" style="width: 752px; height:470px; margin: 0 auto;"></div>
 
    <script>
        let myChart = echarts.init(document.getElementById('main'))
        let data = [100000, 0, 30000, 540000, 300050, 80060, 20070, 888080, 18890]
        let yAxisData = ['汉语拼音基础库', '汉语拼音基础库', '多音字姓氏库', '多音字词组库', '少数民族人名库', '外国人名词素库', '外国人名全称系统库', '外国人名全称用户库', '外国人名全称纠错库']
        let option = {
            title: {
                text: '自然人名库',
                left: 18,
                top: 10,
                textStyle: {
                    color: '#282828',
                    fontSize: 16
                }
            },
            color: ['#3398DB'],
            fontSize: 14,
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            grid: {
                left: '3%',
                containLabel: true
            },
            xAxis: [{
                type: 'value',
                splitLine: {
                    show: false
                },
                max: 1400000,
                splitNumber: 8,
                axisTick: {
                    alignWithLabel: true,
                    inside: true,
                    lengt: 6
                },
                axisPointer: {
                    type: 'none'
                },
                axisLabel: {
                    textStyle: {
                        color: '#5A5A5A',
                        fontSize: 14
                    }
                }
            }],
            yAxis: [{
                type: 'category',
                data: yAxisData,
                axisTick: {
                    alignWithLabel: true,
                    inside: true
                },
                axisLabel: {
                    textStyle: {
                        color: '#5A5A5A',
                        fontSize: 14
                    }
                }
            }],
            series: [{
                name: 'assist',
                type: 'bar',
                stack: '1',
                itemStyle: {
                    normal: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    },
                    emphasis: {
                        barBorderColor: 'rgba(0,0,0,0)',
                        color: 'rgba(0,0,0,0)'
                    }
                },
                tooltip: {
                    trigger: 'none'
                },
                data: [25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000, 25000]
            }, {
                name: '总条数',
                type: 'bar',
                stack: '1',
                barWidth: 18, // 柱子宽度
                itemStyle: {
                    normal: {
                        label: {
                            formatter: '{c}' + '条', // 自定义柱顶显示内容
                            show: true,
                            position: 'right',
                            color: '#5A5A5A',
                            fontSize: 14
                        },
                        color: new echarts.graphic.LinearGradient( // 五个参数，前四个参数分别对应“右/下/左/上”，渐变开始的位置
                            0, 0, 1, 0, [{
                                offset: 0,
                                color: '#7DD7F1'
                            }, {
                                offset: 0.25,
                                color: '#70C2F5'
                            }, {
                                offset: 0.5,
                                color: '#62ADF8'
                            }, {
                                offset: 0.75,
                                color: '#5598FC'
                            }, {
                                offset: 1,
                                color: '#4783FF'
                            }]
                        )
                    }
                },
                data: data
            }]
        }
        myChart.setOption(option)
    </script>
</body>
</html>

第一次用echarts，还有很多地方不懂，如果用词有误或者描述不准确，欢迎指正，还请多多见谅~

一个正在成长的前端小白~