weixin_44486539的博客

outline 用于设置元素边框外围的轮廓线，是一个综合性的属性，可以设置边框线的颜色、样式和粗细属性：outline-color 设置轮廓线的颜色；属性可以是 颜色单词、十六进制颜色值、rgb 等outline-style 轮廓线的样式；属性值可以是 solid、dashed、dotted 等outline-width 轮廓线的粗细简写形式：outline: outline-co...

CSS3 中的 border-radius 属性用来设置变工况的样式，可以将直角边框改为圆角边框，甚至可以将一个矩形设置成一个圆形，该属性与其他样式属性结合使用可以做出许多有趣的图案border-radius 属性主要是修改块级元素的四个角的弧度来改变元素的形状，该属性是一个综合属性，四个角的样式可以单独设置也可以综合设置；其属性值可以是 像素（px）、百分比（%）、em 等border-ra...

垂直水平居中实例Html代码<div id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> &...

Vue 的数据双向绑定原理采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty() 来劫持各个属性 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty() 将它们转为 get...

Function.prototype.call()Function.prototype.call(thisArg[, arg1[, arg2[, ...]]]) 提供新的 this 值给当前调用的函数或方法。thisArg 在 fun 函数运行时指定的 this 值*。*需要注意的是，指定的 this 值并不一定是该函数执行时真正的 this 值，如果这个函数在非严格模式下运行，则指定...

概述Asynchronous Javascript And XML， AJAX 不是一门的新的语言，而是对现有技术的综合利用。ajax 是一种技术方案，依赖浏览器提供的 XMLHttpRequest 对象发出 HTTP 请求和接收 HTTP 响应；实现了在页面不刷新的情况下和服务器进行数据交互。本质是在HTTP协议的基础上以异步的方式与服务器进行通信。同步和异步概念：同步是阻塞模式，异步...

字体图标具有轻量、灵活、兼容性强的特点；比图片有较好的可编辑性，占用空间小、可复用性强，从而被广泛使用。下面详细介绍一下字体图标的下载：首先要到一些字体图标库网站去下载需要的字体图标，一般 阿里巴巴矢量图标库 中都能找到自己需要的图标进入网站后进行登录，没有账号注册后再登录即可登录完成后在搜索栏中搜索自己需要的图标或直接在图标库 中查找找到需要的图标后将其加入购物车...

概述CSS3 中在布局方面做了非常大的改进，新增了伸缩布局通过该布局方式开发人员对块级元素的布局排列会变得十分灵活，其强大的伸缩性，在响应式开中发挥极大的作用。将指定元素的 CSS 样式中的 display 属性设置为 flex，这个元素就是一个伸缩布局的容器，其内部的子元素会从左到右水平排列（效果很像浮动）。简单例子：.box { width: 800px; /* 设置父级盒子为...

在 CSS3 中可以通过 @keyframes 来创建动画，由当前样式逐渐变为新样式的动画效果。创建动画的语法就像创建 JS 函数函数一样，动画需要指定动画的名称，使用时需要通过名称来调用。创建语法一：@keyframes 动画名称 { /* 从 from 指定的样式 */ from { css样式 } /* 过渡到 to 指定的样式 */ to { css样式 }}创...

高阶组件是 React 中复用组件逻辑的一种技巧，高阶组件是一个函数，接收需要包装的组件，返回值为增强后的组件。实现思路：高阶组件内部创建一个类组件，在这个类组件中去提供复用状态的逻辑代码，通过 prop 将复用的状态组件传递给被包装组件。创建高阶组件步骤：创建一个函数，名称约定以 with 开头给函数设置形参用于接收传过来的组件，参数以大写字母开头（作为参数组件使用）在函...

React 中组件复用主要有两种模式，一种是高阶组件另一种就是 render props 模式这两种方式并不是新的 API ，而是利用 React 自身特点的编码技巧，演化而来的固定模式render props 模式是一种非常灵活并且复用性非常高的模式，可以将一些特定的行为或功能封装成一个组件供别的组件使用。主要实现思路：将要复用的 state 状态和操作 state 的方法封装到一个...

链接：https://pan.baidu.com/s/1p-7pdXXm0iHR2QQkhYZulQ 提取码：1isi

有时在组件之间进行传递数据时需要对数据的类型进行校验，react 中提供了类型检查的模块 prop-types 通过该模块可以对传递的数据进行类型检测，出于性能方面的考虑，propTypes 仅在开发模式下进行检查。使用方法：使用时首先要导入该模块：import PropTypes from 'prop-types'导入完成后，为接收数据的组件设置类型检查：// myCompo...

在 react 中给 input 添加了 value 属性这个表单控件就会成为受控组件，如果不想成为受控组件又想设置默认的 value 值，可以通过 react 提供的 defaultValue 属性来设置import React from 'react'import ReactDOM from 'react-dom'class CommentList extends React.Comp...

非父子之间的通信可以通过状态提升的方式来解决，但是当组件嵌套太深时就比较麻烦了，这时可以使用 react 中的上下文来解决（实际开发中使用状态管理工具 redux）通过 react 的 createContent() 方法创建一个 context（上下文）；这个上下文里面有两个组件 Provider 和 ConsumerProvider：提供者，用于提供数据Consumer：消费者，使用数...

没有受 React 控制，没有设置 value 属性的组件就是非受控组件；如果想要获取非受控组件中的值需要通过 DOM 操作，通过 ref 属性来获取。步骤：首先在 constructor 构造中创建一个引用let iptRef = React.createRef()在组件中通过 ref 将表单和引用绑定在一起<input ref={this.iptRef} />...

在 React 中不能直接修改组件的状态，需要通过 setState() 来进行修改语法：setState(updater[, callback])updater 更新器callback 更新后执行的回调函数修改状态比如想要将 state 中的 content 值修改为 ‘香香’state = { content: '大熊'}通过直接修改的方式并不能触发视图的更新:...

在 React 中，标签的 class 属性要用 className 代替；行内的样式属性需要使用对象的形式书写，多个单词组成的属性使用驼峰式命名；最终要用 {} 在最外层对样式进行包裹；<able 标签的 for 属性要替换成 htmlFor。示例：main.css* { margin: 0; padding: 0;}.box { width: 200px; ...

所谓的“受控组件”简单来说就是组件的状态受 React 控制。在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。...

文章目录注册事件事件处理函数中 this 问题事件传参获取事件对象注册事件React 元素的事件处理与 DOM 元素有些不同，React 通过事件绑定属性的方式注册事件时要采用驼峰式命名，其对应的属性值为一个函数而不是字符串。示例：import React from 'react'import ReactDOM from 'react-dom'class Hello extends ...

组件是 React 的核心，是 View 的重要组成部分；React 中的组件分为两种：一种是函数组件（使用函数来创建组件），另一种是类组件（通过类创建的组件）。通过函数来定义组件通过函数定义的组件被称为无状态组件，在定义时函数名称的首字母必须要大写，React 在解析时会按照组件的形式去解析函数值必须要有返回值，返回值为 jsx 语法；使用时将函数名作为标签使用，可以是单标签 <ta...

class 关键字es6 新增了 class 关键字，这是 es6 的新语法，用来实现 es6 中面向对象编程；可以通过该关键字来定义类。class不存在变量提升，所以需要先定义再使用。ES5:// 定义一个构造函数function Preson(name, age) { this.name = name this.age = age}// 创建 preson 实例...

打开浏览器控制台，在 Elements 中会发现，只有数据改变的部分 DOM 才会进行更新；是因为在 react 中，数据发生改变时是通过虚拟 DOM 更新的；当数据发生改变时，会用最新的数据去修改模板形成新的虚拟 DOM，新的虚拟 DOM 和旧的 虚拟DOM 通过 diff 算法进行比较找到需要更新的地方进行更新#### Diff 算法在 React 中有两种假设：两个不同类型的元素会产生不同的树开发者可以通过 key 属性指定不同树中没有发生改变的子元素

jsx语法是 react 的模板语法，是 react 的灵魂；通过该语法可以很方便的创建 react 对象jsx 不是字符串也不是 html，就是 react 对象，其底层就是 React.createElement()；所以使用 jsx 语法时还是要引入 react 核心包jsx 只能有一个根节点；所以多个根节点时要再用一个元素将其包起来或者使用 <> </> 将其包...

渲染 react 元素，首先要引入相关的包// 导入核心包；用于创建 react 对象import React from 'react'// 用于将 react 对象渲染成 DOMimport ReactDOM from 'react-dom'创建 react 元素语法：React.createElement(type, [props], [....

全局安装 yarn（Yarn是facebook发布的一款取代npm的包管理工具）npm install yarn -g查看版本号：yarn --version使用脚手架初始化一个项目的步骤安装相关的脚手架：create-react-app执行全局安装命令：yarn global add create-react-app或npm install create-react-...

CSS3 中是通过 transform-style 样式属性来实现 3D 立体效果的，为父元素设置了该属性其子元素就会具有 3D 效果，对应的属性值如下：flat 所有子元素在2D平面呈现preserve-3d 所有子元素在3D空间中呈现举个例子：CSS:.box { width: 300px; height: 300px; margin: 20px auto; /*...

CSS3 中的 perspective 属性用于设置元素距视图的距离，单位为像素（px）； 设置了 perspective 属性的子元素可以实现透视效果（就是由远及近的效果），设置该属性的元素本身没有。透视只是视觉上呈现出有近大远小的效果， 实际上还是在一个平面中；透视并不是真正的 3D 盒子， 无法构成真正 3D 空间。示例：CSS:.box { width: 400px; he...

transform 转换，是CSS3最具颠覆性的特性之一，既可以应用2D转换，也可以应用3D转换。2D转换：通过该属性可以对元素在平面上进行缩放、旋转、移动和斜切等操作。通过 transform 中的方法对元素进行缩放，移动等不同于传统方法（设置 width、height等）会影响页面的布局，transform 中的方法并不会影响页面的布局。缩放通过 scale() 方法将元素根据中心原点...

CSS3 中的 transition 属性用于实现元素从一种样式变换为另一种样式时为元素添加过渡效果。transition 属性是一个综合属性，可以简写也可以单独设置某个单一的属性。综合设置语法：transition: property duration timing-function delay;property 需要过渡的样式属性（必要）；值为 ...

径向渐变就是从一个中心点开始向四周产生渐变的效果；CSS3 中提供了实现径向渐变的 radial-gradent() 函数；使用该函数时，至少需要两个终止色。语法：background-image: radial-gradient(shape size at position, start-color, ..., last-color);shape 用于设置径向渐变的的形状；未指定渐变形...

background-origin 用于设置背景图像相对于什么位置来定位（背景图的起点）。语法：background-origin: padding-box|border-box|content-box;属性值作用border-box背景相对于元素边框来定位； 从 border 区域（含border）开始显示背景图像padding-box背景相对于内边距来定位...

文本阴影是通过 text-show 样式属性来设置；通过该属性可以向文本添加一个或多个阴影。语法：text-shadow: h-shadow v-shadow blur color;h-shadow 水平阴影的位置（可以是负值，正值向右偏移）v-shadow 垂直阴影的位置（可以是负值，正值向下偏移）blur 阴影模糊距离clor 阴影的颜色示例：CSS:h1 { te...

CSS 通过 linear-grandient() 函数来创建一个表示两种或多种颜色的线性渐变的“图像”；其结果属于 <gradient> 数据类型，是一种特别的 <image>数据类型。语法：background-image: linear-gradient(direction, color-stop1, color-stop2, ...);direction...

`:empty` 用于选择指定的没有子元素（包括文本节点）的元素。`:not(selector)` 选择每个元素不是指定的元素或选择器部分；就是取非。

属性选择器通过标签中存在的属性来选择特定的 HTML 元素语法：element[Attribute_Name]element HTML 元素Attribute_Name 属性名分类描述示例E[att]选择属性为 att 的 E 元素input[name]E[att = “val”]选择 att 的属性值为 val 的 E 元素input[auto...

HTML5 中规定所有的自定义属性必须以 data- 开头；通过 el.getAttribute() 和 el.setAttribute() 方法可以获取和设置自定义属性。在 HTML5 中，所有以 data- 开头的属性都会存储在标签的 dataset 属性中，通过该属性也可以获取所有的自定义属性。<section data-id="123" data-intro="section 标...

HTML5 为标签新增了 classList 属性，通过该属性可以获取指定标签中 class 属性对应的值，获取到的值为一个伪数组，伪数组中存储的就是类名。classList 属性的 __proto__ 上有许多方法，比如：add()、move()、toggle() 等，通过这些方法可以对类名进行添加、移除、切换等操作。<header class="one two three">&...

2008年W3C 发布了HTML5 的工作草案，HTML5 尽可能的为开发者提供了许多急需的功能；这些功能包括更强大的 CSS3、表单验证、音频视频、本地存储、地理定位、绘画（Canvas）、Web 通信等等。对于 IE 来说，H5 的相关内容在IE9以下的浏览器普遍存在兼容性问题，对于html5的语义标签的兼容问题，可以通过 htmlshiv.js 来解决。使用时在页面中通过 script ...

Node.js 操作 mongodb 数据库首先要通过 npm i mongodb 命令安装第三方包 mongodb，安装完成后通过如下示例中的相关步骤即可操作 mongodb 数据库了。const mongodb = require('mongodb')// 1. 获取客户端对象const mongodbClient = mongodb.MongoClient// 连接数据库的地址（...

客户端发送 POST 请求时请求的内容全部的都在请求体中，http.ServerRequest 并没有提供内容为请求体的属性，这是因为等待请求体传输可能是一件耗时的工作，并且恶意的 POST 请求会大大消耗服务器的资源，所以 Node.js 默认不会解析请求体，当需要的时候，需要手动来获取。data 事件当请求传递的时候会触发该事件end 事件当参数传递完成后会触发该事件...

链接: https://pan.baidu.com/s/1P6b-sp8X80xhzmLNhYY-XQ 提取码: w1d4

链接: https://pan.baidu.com/s/1k9HGIPKUVyqYQGo0AejBIA 提取码: 9b5s

链接: https://pan.baidu.com/s/16DaKTlN7W0dBahb11V6oBQ 提取码: 6b73

URL 是 Uniform Location Resource 的缩写，翻译过来就是 “统一资源定位符” 的意思，是描述资源位置的固定表示方法；URL 描述的资源可以是互联网上的资源，也可以是本地资源；Node.js 的 url 模块（属于系统模块）提供了一些用于方便处理和解析 URL 的方法。url 模块中常用的方法parse()url.parse(urlString[, parseQue...

模板语法概述art-template 支持两种模板语法：标准语法和原始语法；标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。标准语法使用 `{{ 数据 }}` 表示，也称之为小胡子语法；原始语法使用 `<%= 数据 %>` 表示；在模板语法中不仅可以显示数据，也可以书写合理的 js 表达式最终会显示处理后的结果。

## 概述Express 是基于 node.js 平台的一个简洁而灵活的应用程序开发框架；express 为 Web 和移动应用程序提供了一系列强大功能和丰富的 HTTP 实用工具和中间件，可帮助开发者创建各种 Web 应用；它进一步封装了 http 模块并没有覆盖原生 http 模块中的方法，让用户的体验更好；通过 Express 可以快速地搭建一个完整功能的网站。安装在项目的根目录下执行如下命令：npm install express下载成功后在需要的文件中导入 expr...

Node.js 中提供了 http 模块，通过该模块可以用来构建服务器；http可以充当两个角色：可以是服务器，也可以是客户端## http 模块相关方法##### 创建服务器对象**[http.createServer([options][, requestlistener])](http://nodejs.cn/api/http.html#http_http_createserver_options_requestlistener)** 该方法用于创建一个 http 服务；返回值为一个服务器对

async await通过 async await 语法可以优雅的以同步的流程表达异步操作；其本质是 Generator 的语法糖。语法：async function fun() { await 异步操作 await 异步操作}特点：遇到 await 进行等待，当前的异步操作完成后继续往下执行返回的是 Promise 对象，可以通过 then 方法进行下一步操作as...

Node.js 中提供了 querystring 模块，通过该模块的相关方法可以方便的解析和格式化 URL 查询字符串。常用方法：querystring.parse(str[, sep[, eq[, options]]])：该方法用于对 URL 查询字符串进行解析，会将解析后的内容以对象的形式返回querystring 通过 require() 方法导入的 querystring 模块...

fs （file 文件 ，system 系统）模块就是文件系统操作模块，属于 Node.js 中的核心模块 ， 用于与文件进行交互。读写文件fs.readFile(file[,encoding][,callback(err,data)]) 异步方式读取文件内容。file 需要读取的文件；encoding 文件的字符编码，以何种编码解析数据（默认值为 null）；callback 回调...

Node.js 在引入模块时根据引用的方式不同，查找的方式也会不一样；Node.js 中的模块主要分为两大类，一类是 Node.js 提供的模块,也就是核心模块，另一类是开发人员编写的模块，称为文件模块。以路径的方式引入模块时完整路径通过 require() 方法引入模块时，如果是完整的路径则会直接引入模块。require('./find.js')省略了后缀名如果省略了模块的后缀...

在 npm5 以后，安装第三方依赖包时项目的根目录会多出一个 package-lock.json 的文件，这个文件的作用：可以锁定包的版本，能够确保再次下载时不会因为包版本不同而产生问题可加快下载速度，因为该文件中已经记录了项目所依赖第三方包的树状结构和包的下载地址，重新安装时只需下载即可，不需要做额外的工作...

每个项目的根目录下面，一般都有一个package.json文件，package 就是 “包” 的意思，这个文件用于存储项目相关的配置信息，例如：项目名称、作者、项目版本号、许可证、代码库地址等。运行 npm install 命令时就会根据这个文件中的相关配置数据下载项目运行所需的第三方依赖等。package.json 文件可以通过 npm init -y 命令快速初始化；如果不想直接初始化可以...

概述Gulp 是基于 Node 平台开发的前端构建工具，主要用来设置程序自动处理静态资源的工作。通过 Gulp 能自动化地完成 html、css、javascript、less、sass、image 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，监听文件在改动后重复指定的这些步骤等。简单来说：Gulp 就是用来打包项目的；它将重复的机械化操作编写成任务, 想要执行机械...

淘宝的开发团队在国内将 npm 进行了备份：http://npm.taobao.org/安装淘宝的 cnpm，通过 cnpm 安装 模块npm install --global cnpm 安装完 cnpm 后，在安装 包 时将 npm 换成 cnpm 即可，例如：cnpm install jquery 不想安装 淘宝cnpm ，又想使用淘宝的服务器下载镜像# 在安装命令...

node.js 没有全局作用域，只有模块（文件）作用域，比如：在 a 模块中引入了 b 模块，两模块之间有同名的变量但这两个变量之间互不影响，只在自己的文件中起作用；就是说外部访问不到内部，内部也无法访问到外部，这时就需要使用相关的方法来实现模块之间的通信。

pageXOffset 与 pageYOffset 用于获取页面的水平和垂直的滚动距离，通过这两种属性获取的值均为数字类型没有单位。pageXOffsetwindow.pageXOffset 设置或获取当前页面相对于窗口显示区左上角的 X 位置（页面向左滚动的距离）。pageYOffsetwindow.pageYOffset 设置或获取当前页面相对于窗口显示区左上角的 Y 位置（页面向上滚...

scroll 就是滚动的意思，使用 scroll 系列的相关属性可以动态的得到元素的内容大小、滚动距离等。scrollWidthelement.scrollWidth 获取元素元素内容的宽度，是个只读属性，包括 overflow 溢出而在屏幕上不可见的内容。scrollHeightelement.scrollHeight 获取元素元素内容的高度，是个只读属性，包括溢出的内容 overflo...

所谓的立即执行函数就是在声明函数后立即就执行，立即执行函数有两种常见的写法：(function() {…})() 将一个函数包裹在一个小括号运算符中，后面再跟一个小括号用于调用。(function() {…}())，将一个匿名函数后面跟一个小括号，然后整个包裹在一个小括号运算符中。上面的两种写法是等价的均可以实现函数的自调用。示例：// 第一种;(function(x, y) {...

链接: https://pan.baidu.com/s/175U3qB1k-pbZ9wdIx0obeA 提取码: 3h5g

client 翻译过来就是“客户端”的意思，通过 client 系列的相关属性可以动态的获取元素可视区的相关信息比如：元素的边框大小、元素大小等。clientWidthelement.clientWidth 该属性用于获取元素的内部宽度；该属性包括内边距，不包含垂直滚动条（如果有）、边框和外边距。clientWidthelement.clicentHeight 获取元素内部的高度(单位像素...

offset 翻译过来就是 “偏移量” 的意思，通过 offset 系列的属性可以动态的获取元素的宽、高、top值、left值等；offset 系列获取的值均没有单位都是数字类型。offsetParentelement.offsetParent 该属性会返回当前元素最近的带有定位的父级元素，如果父级元素都没有设置定位则返回 body 标签element 需要获取对应值的 DOM 元素&...

history 对象是 window 对象的一个属性，该对象包含了用户在浏览器窗口中访问过的 URL。属性lengthhistory.length 用于获取浏览器历史 URL 列表中的数量方法back()forward()go()...

navigator 对象包含了浏览器相关的信息，通过相关的属性即可获取对应的浏览器信息appNamenavigator.appName 获取浏览器 的名称appVersionnavigator.appVersion 获取浏览器的平台和版本信息platformnavigator.platform 获取运行浏览器的操作系统或硬件平台userAgentnavigator.userA...

location 对象是 window 的一个属性，该对象包含了当前 URL 的相关信息。URLURL 统一资源定位符（ Uniform Resource Locator 的缩写），是互联网上标准资源的地址；互联网上的每一个资源文件都有属于自己的唯一的 URL。url 的基本格式：Protocol://hostName[:port]/Path[?query]#fragmentPro...

JavaScript 是单线程语言，也就是说同一时间只能做一件事；这是 JS 的设计所致：JavaScript 最初是为了处理页面中用户的交互，以及操作 DOM 元素例如：操作页面上的某个 DOM 元素，现在有2 个线程，proOne 用于执行删除命令、preTwo 用于执行修改命令；如果 JS 是多线程的这两个线程就会同时对同一个 DOM 进行操作，proOne 删除了当前 DOM ，而pre...

window 对象的两个定时器setTimeout()setTimeout(function|code, milliseconds, param1, param2, ...) 在指定的毫秒数后会调用函数或计算表达式，只会调用一次；返回值为定时器 ID（数字类型）。参数：function|code 定时器调用的回调函数（可以是匿名函数也可以是命名函数的函数名）或JS代码串（如果JS代码串...

概述BOM 是 Browser Object Model 的缩写，就是浏览器对象模型；BOM 提供了与浏览器窗口进行交互的对象；BOM 就是由一系列相关的对象构成，并且每个对象都用于许多的方法和属性，其核心对象是 window与 DOM 和 JavaScript 不同，DOM 拥有标准化组织 W3C， JavaScript 的语法标准化组织是 ECMA，而 BOM 没有官方标准，BOM 最初是...

HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 * 150；通过 JavaScript 可以在该区域上绘制图像 ，开发人员可以控制其每一个像素；canvas 拥有多种绘制：路径、矩形、圆形、字符以及添加图像的方法。**注意**：如果要设置画布的大小不能通过 CSS 样式进行设置，只能通过元素的 `width` 、`height` 属性进行设置，否则会出现问题。

简述 flex 布局与 grid 布局，二者有什么不同flex 弹性布局；grid 二维布局。flex就是沿着一条线铺下去，这个线可能水平，也可能垂直，这个平铺的方向用flex-direction来控制。所以flex才有换行命令。而且当同级小盒子很多的时候，往往动一发而动全身，很不方便。grid是把盒子用线分成很多份，把小盒子一个个填进去。伪类和伪元素的区别及应用样式伪类：向某些选择...

js执行机制首先判断JS是同步还是异步，同步就进入主线程，异步就进入异步队列等待异步任务在异步队列中注册函数，当满足触发条件后，被推入主线程同步任务进入主线程后一直执行，直到主线程空闲时，才会去异步队列中查看是否有可执行的异步任务，如果有就推入主进程中简述对 ES6 的了解es6是一个新的标准，它包含了许多新的语言特性和库，是JS最实质性的一次升级。比如箭头函数、字符串模板、gen...

概述当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件就会被触发，与 load 事件不同，该事件无需等待样式表、图像、flash和子框架的完成加载；需要注意的是该事件只有 IE9 以上支持。...

概述所谓键盘事件就是在按键被敲击时触发的一些事件，常见的键盘事件有：keyup（键盘抬起事件）、keydown（键盘按下事件）、keypress（键盘按下并抬起触发事件）keydownkeydown 事件会在按键按下时触发keypresskeypress 在按键按下并抬起时触发事件；但是一些特殊功能的按键不会触发该事件，例如：ALT, CTRL, SHIFT, ESCkeyupkey...

e.clientXe.clientX 获取鼠标相对于浏览器可视窗口区域的 X 坐标（横坐标）e.clientYe.clientY 获取鼠标相对于浏览器可视区域的 Y 坐标（纵坐标）；鼠标位置未变时坐标不会随页面的滚动而改变示例：<div></div><script type="text/javascript"> function $(select...

鼠标右键菜单contextmenu 当点击鼠标右键或按下键盘上的菜单键时会触发该事件，该事件会打开上下文菜单在有些情况下需要禁用鼠标右键菜单，这时就可以使用事件对象的 preventDefault() 方法禁用右键菜单未禁用时：<p>这是一段文字，测试是否能使用右键菜单</p><script> function $(selector) { re...

小程序关联微信公众号如何确定用户的唯一性如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 union_id来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 union_id 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，union_id 是相同的如何实现下拉刷新首先在全局 config 中的 w...

小程序的双向绑定与vue哪里不一样小程序直接 this.data 的属性是不可以同步到视图的，必须调用：this.setData({ // 这里设置 noBind:true})小程序的 wxss 与 css 有哪些不一样的地方wxss的图片引入需使用外链地址；没有Body；WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；WXSS 提供全局样式与局部样式使...

概述事件委托（也叫事件代理）主要是用来解决后生成元素（动态添加的元素）的事件绑定问题实现原理：将事件绑定在已存在的父级元素上，当触发子元素时，会通过事件冒泡，事件会冒泡到父元素身上。举个例子：到了中午，一个宿舍的哥们都要去买午饭，要么每个人都去买，要么把这件事情委托给宿舍中的某个人（叫“爸爸”），要么让这个人一次性去买，然后再根据床位将其一 一分发给指定的同学；在这里，买午饭就是一个事件...

微信小程序原理微信小程序采用 JavaScript WXML WXSS 三种技术进行开发微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JS...

概述事件触发后就会产生事件对象，与事件相关的信息都会存储在一个对象中；这个对象会以参数的形式传给事件处理函数，所以事件处理函数默认会有一个事件对象参数...

所谓的数组扁平化就是将多维数组转成一维数组，例如：将多维数组 [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4] 转成 [1, 2, 8, 6, 7, 3, 3, 6, 9, 4] 的形式，以下为数组扁平化的几种方法方法一：通过递归函数实现1// 多维数组var arr = [[1, 2, 8, [6, 7]], 3, [3, 6, 9], 4]function g...

概述js事件在触发时会在元素节点之间按照特定的顺序进行传播，这个传播的过程就是 DOM 事件流。例如：给页面中的一个 button 按钮注册了点击事件并进行了点击，因为 button 在 body 标签内部所以当点击了 button 时也就点击了 body；body 又在 html 内部，所以就点击了html；html 在 doucment 文档中也就点击了document。两种事件流...

一元运算符：typeof()typeof 用于判断变量的数据类型；typeof() 的结果字符串有几种情况： “string(字符串)” 、 “number(数字)” 、 “boolean(布尔型)” 、 “undefined(未定义)” 、 “object(对象)” 、 “function(函数)”另外：null、对象、数组这三种类型，都将返回 “object”。注意： typeof是一元...

document.write 和 innerHTML 的区别主要区别：document.write 是直接将内容写入页面的内容流，会导致页面全部重绘，innerHTML 将内容写入某个DOM节点，不会导致页面全部重绘...

任务队列JS 属于单线程任务队列同步任务同步任务是在主线程上排队执行的任务，只有前一个任务执行结束，才能执行下一个任务。异步任务异步任务不进入主线程，而是进入 “任务队列” ，只有 “任务队列” 通知主线程某个异步任务可以执行了，该任务才会进入主线程执行。事件循环所有的同步任务都在主线程上执行，形成一个执行栈；主线程外有一个 “任务队列” ；当异步任...

宏任务&微任务macro-task(宏任务)：包括整体代码script，setTimeout，setInterval宏任务所处的队列就是宏任务队列宏任务队列可以有多个micro-task(微任务)：new Promise.then(回调)，process.nextTick微任务所处的队列就是微任务队列只有一个微任务队列在上一个宏任务队列执行...

BFC 是什么?BFC（块级格式化上下文），一个创建了新的 BFC 的盒子是独立布局的，这个区域与外部毫不相干，盒子内元素的布局不会影响盒子外面的元素。在同一个 BFC 中的两个相邻的盒子在垂直方向会发生 margin 重叠的问题触发条件：根元素（例如：html）元素浮动了（float 不为 none）position 为 absolute 或 fixeddisplay 为 inli...

什么是闭包，为什么要用它函数嵌套函数；内部函数可以引用外部函数的变量或参数好处、应用：希望一个变量长期驻扎在内存中避免全局变量的污染（代码模块化）私有成员function fun() { let num = 36 console.log(num) return function func() { num++; console.log(num) }}...

JavaScript 怎样添加移除移动复制创建查找节点创建节点createDocumentFragment()//创建一个DOM片段createElement() //创建一个具体的元素createTextNode()//创建一个文本节点添加、移除、替换、插入appendChild() //添加removeChild() //移除replaceChild() //替换in...

将 url 参数 解析为一个对象function parseQueryString(url) { // 先将字符串通过 split 方法，以 "?" 为分割符将其分割成数组； // 该数组有两个元素，第一个为空字符串，第二个为 url 参数字符串 let arr = url.split('?') // 将参数字符串以 "&" 符号为分隔符进行分割 let params...

微信小程序有哪些参数传值的方法给HTML元素添加 data-* 属性来传递我们需要的值，然后通过 e.currentTarget.dataset 或 onload 的param 参数获取。但 data- 名称不能有大写字母、不可以存放对象设置id 的方法标识来传值通过 e.currentTarget.id 获取设置的id的值,然后通过设置全局对象的方式来传递数值在 navigato r中添...

Es6有哪些新特性let（定义变量）const（定义常量块级作用域(只对let、const有效)arrow (箭头函数)class 类数据结构 map、set数组解构、对象解构let和var的区别通过 let 声明的变量没有变量提升，不能重复命名；let 只在块级作用域有效（一个{}就是一个作用域 ，for{} 也是一个块作用域）；let 有临时失效区（在 let 的作...

微信小程序相关文件类型.js -------- 脚本文件：页面的交互逻辑均在此页面中进行.json ------ 配置文件：用于设置程序的配置效果.wxml ---- 页面结构文件：书写控件，构建页面.wxss ----- 样式文件：类似于css样式，用于美化页面如何封装微信小程序数据请求一、将所有的接口放在统一的js文件中并导出二、在app.js中创建封装请求数据的方法三、在子页...

注册事件传统注册方式通过 on 开头进行注册事件的方式特点通过这种方式注册的事件具有唯一性，同一个元素注册多个相同的事件最后注册的事件会覆盖之前注册的事件（后者覆盖前者）示例：<input type="button" id="btn" value="按钮"><script>function $(id){ return document.getEleme...

nextSiblingnode.nextSibling 获取指定节点的下一个兄弟节点，如果当前节点的后面没有节点则返回 nullnode 当前节点对象<div class="box"> <p id="p">p标签</p> 文本节点 <div>div标签</div></div><script ty...

微信小程序支付流程小程序调用登录接口获取code，传递给商户服务器用来获取用户的openIDtoken的生成以及缓存调用统一下单接口，获取prepay_id,再次签名小程序获取五个参数后，鉴权调起支付appId,nonceStr,package,signType,timeStamp（需要注意的是，这5个参数签名排序的顺序按照ASCII字典序排序）支付回调...

微信小程序登录流程客户端获得code值，并将code传给第三方服务端微信小程序客户端调用wx.login，获取登录凭证（code），并调用接口，将code发送到第三方客户端第三方服务端用code换session_key和openid小程序客户端端将code传给第三方服务器端，第三方服务器端调用微信服务器端接口，用code换取session_key和openid第三方服务端生成...

vue组件间是怎么通讯的父子组件传值父组件向子组件传值是通过 v-bind 属性绑定的方式（需要自定义一个属性名），将其 data 属性中的值传给子组件。子组件通过 props 属性接收父组件传递过来的数据，该属性的值是一个数组，成员名为自定义属性名的字符串。兄弟组件传值通过空的 Vue 实例（用变量来存储这个实例，例如：Bus），作为中央事件总线，进行通信谁需要数据谁就要提供事...

怎样定义组件使用 Vue.extend() 构造器，创建一个“子类”。参数是一个包含组件选项的对象。let mod = Vue.extend({ // 通过 template 设置 组件的 HTML 结构 template: '<h1>使用 Vue.extend 创建的组件</h1>'})// Vue.component( id, [definition] ) ...