网页Head中meta、link里面的各种属性的设置
<head> |
<head> |
闭包,是JavaScript 一个重要的概念,一个抽象的概念,特别是ECMAscript规范的定义,如果没有实战经验,很难从定义去理解它。
function A() { |
这是最简单的闭包
初步的认识后,我们简单分析一下它和普通函数有什么区别,上面代码翻译成人话如下:
函数A的内部函数B ,被函数A外的一个变量C调用。
从而可以得到整个闭包的定义
当一个内部函数( 函数中定义的函数 )被其外部函数之外的变量调用时,就形成了一个闭包。
了解闭包之前,先了解一下JavaScript中的GC机制 ( 垃圾回收机制 ) :
在JavaScript中,如果一个对象不再被引用,那么这个对象就会被GC回收,否则这个对象会一直保存在内存中。
上面的🌰中,B定义在A中,因此B依赖于A ,而外部变量C 又调用了B,所以A间接的被C调用。
也就是说,A 不会被GC回收,会一直保存在内存中,为了证明我们的推理,对上面的例子进行简陋的改进
function A() { |
count 是函数A中的一个变量,它的值在函数B中被改变,函数B每执行一次,count 的值就在原来的基础上累加, 因此A中的count变量会一直保存在内存中。
当我们需要在模块中定义一些变量,并希望这些变量一直保存在内存中,但又不会污染全局变量的时候,就可以使用闭包来定义这个模块。
有看过Jquery源码的同志都应该觉得好眼熟有没有
(function (document) { |
这个组件的作用是:初始化一个容器,然后可以给这个容器添加子容器,也可以移除一个容器。
功能很简单,但这里涉及到了另外一个概念:立即执行函数。 简单了解一下就行,需要重点理解的是这种写法是如何实现闭包功能的。
可以将上面的代码拆分成两部分:**(function(){})** 和 () 。
第1个**()** 是一个表达式,而这个表达式本身是一个匿名函数,所以在这个表达式后面加 () 就表示执行这个匿名函数。
因此这段代码执行执行过程可以分解如下:
let f = function (document) { |
在这段代码中似乎看到了闭包的影子,但 f 中没有任何返回值,似乎不具备闭包的条件,注意这句代码:
`window.jView = obj;` |
obj 是在函数 f 中定义的一个对象,这个对象中定义了一系列方法, 执行window.jView = obj 就是在 window 全局对象定义了一个变量 jView,并将这个变量指向 obj 对象,即全局变量 jView 引用了 obj . 而 obj 对象中的函数又引用了函数 f 中的变量 viewport ,因此函数 f 中的 viewport 不会被 GC 回收,viewport 会一直保存到内存中,所以这种写法满足了闭包的条件。
这是对闭包最简单的理解,当然闭包还有其更深层次的理解,这个就涉及的多了,你需要了解JS的执行环境(execution context)、活动对象(activation object)以及作用域(scope)和作用域链(scope chain)的运行机制。但作为初学者,暂时不必了解这些,有了简单的理解之后,一定要在实际项目中用起来,等你用的多了,对于闭包,你自然会有更深层次的理解!
节流
指尽可能减少不必要的开支 ,消耗更少的资源办更多的事
原理是通过判断是否到达一定时间来触发函数
在前端开发的过程中,我们经常会需要绑定一些持续触发的事件,如 resize、scroll、mousemove 等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。
<script> |
所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。
在一定时间内的几次操作合并为一次操作进行。
原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。
<!DOCTYPE html> |
/** |
app.wxss 全局样式修改
/*隐藏scroll-view滚动条*/ |
/*去除Button默认边框*/ |
/*去除点击 navigator 链接样式*/ |
<image |
.class { |
data: { |
onUnload() { |
//tsconfig.json指定了用来编译这个项目的根文件和编译选项 |
原因: 前端传入的数据格式和后台接口接收数据类型不一致
URLSearchParams 对URL上的字符串数据进行类型处理
此方法不兼容IE 和 edge 浏览器 链接
代码展示
let paramsObj = new URLSearchParams(); |
字符串解析和序列化字符串的库
安装
npm install qs --save |
示例代码
import axios from 'axios' |
上面这些情况一般都是由于前后端数据类型交互格式不一致所导致的
例如后端使用的是 application/x-www-form-urlencoded
格式
数据格式为:id=1&name=chris
前端发送的数据是 application/json
格式
数据格式为:{id:1,name:'chris'}
就会纯在上面所说的情况,需要用一些方法去处理和转译
然儿最好的办法还是直接从文档上就统一好这些规范,避免在开发时出现不必要的联调,导致降低效率
touch vue.config.js |
module.exports = { |
axios({ |
npm install nodemailer --save |
const NodeMailer = require('nodemailer'); //@modules npm install nodemailer |