————————— JS常用基础 —————————
前端进阶：
看游戏源码JS（源码之家）、JQuery源码（jquery.cuishifeng.cn/）
HTML+CSS：扒网站，对应修改看效果（1.my博客园 2.官网首页）
学习 LESS：lesscss.cn/
async/await 是JS中“异步”常用的关键字：
- async 声明异步：用于声明一个function是异步的；
- await 等待异步：一个异步的function执行完成
async created（）{
...=await this.$http.get('...') ///////一般都是通过await来对接js代码和controller
...}
=== 用来进行严格的比较判断（必须是类型+内容都完全一致）（传统C语言的比较就是这样）
== 进行不严格比较（转换值一致即可）（我感觉是js特有的比较方式）
alert(0 == “”); // true
alert(1 == “1″); // true
alert(0 === “”); // false
alert(1 === “1″); // false
数组[1,2,3,5](Array)、日期(Date)的数据类型是 object；NaN是number；
undefined和null：
1、定义
（1）undefined：是所有没有赋值变量的默认值，自动赋值。
（2）null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。
2、何时使用null?
当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。
3、null 与 undefined 的异同点是什么呢？
共同点：都是原始类型，保存在栈中变量本地。
不同点：
（1）undefined——表示变量声明过但并未赋过值。它是所有未赋值变量默认值
（2）null——表示一个变量将来可能指向一个对象。一般用于主动释放指向对象的引用
##函数默认参数undefined
function myFunction(x, y = 10) { // y is 10 if not passed or undefined（默认参数）
return x + y;
}
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值
一些杂碎知识的随笔：
md5(password) md5(md5(password) )
render 渲染
ol是有序号的，ul是在前面打圆点
用var来声明变量（var是动态类型，可以不断赋不同类型给var）
JS对象 {name:value}键值对
window.sessionStorage.getItem('username') //会话存储的username，不用前端去el-input
ref="..." //一般都是调用其他模块
JS数组可以是混合类型：
String：
var mystr="today_is_a_good_day"
mystr.length
mystr[i] 可以用来取出String里面的一个个字符。可读不可写。
mystr.substring(1,3) // [1,3) 左闭右开
对象
上面获取值的时候，使用的key是字符串'age'
Date
var now=new Date()得到的是时间；
now.getTime()得到的是时间戳；
Map
Map与JsonObject区别：
相同点：都可以存key-value；
不同点
（1）Map可以存空；JSONObject 不可以存空，
（2）Map由jdk提供；JsonObject需要第三方jar包提供
（3）转String后，数据格式不同。JsonObject是标准的json格式。请求第三方接口需要标准的json格式，一般使用JsonObject。
Set
==》[ 3, 1]
迭代器（for of）
遍历数组、Map、Set，
用 for of 遍历值
用 for in 遍历下标（传统方法）
这里for...of直接针对值v；而for...in是用下表k来得到值obj [ k]
函数
函数和方法的区别：方法在对象里面，函数在对象外面。
记住：var 函数名=function(参数)
ps：后端喜欢方式一，前端喜欢方式二
js里面函数定义的时候，形参不指定类型、函数名前面的修饰也很少，除了这个var类型+没啥用的function修饰
直接用getAge()时，默认this指向的对象是window，而没有具体的对象（例如kuangshen）
在JS中，控制this的指向：用apply
JS变量的作用域
（1）
var时代，只有两种作用域：1.函数内 2.全局（函数外）
在（1）中，是函数外 直接使用 函数内变量==>不能用；
而下面的（2）和（3）都是在函数内，具体的是：内层函数调用外层函数（但都是函数内）
var变量能被外层函数调用（因为在函数内），而let 不能（因为有花括号）；
let 带来新的"块级作用域"，就是仅在花括号{}内才有效
let配合for循环
（2）
（3）
全局
JS 全局变量+全局函数 都自动绑定在window下
规范是：自己代码的全局变量，都放到自己定义的唯一空间名字中，
不要被自动绑定到window下（多个js在一起时，易发生冲突）：
jQuery 等价于 $( )
// 是一个函数库，所有的函数都绑定在 jQuery. 的后面
var有变量提升（var变量提前到函数头部申明：申明和赋值很多是分开的）；let没有变量提升
JS规范：所有的变量定义放在函数内的头部，不要在用的时候才申明；
这样便于代码的维护；
- v-on调用函数：@click="function" //可以不写括号
- 同时调用两个方法：@click="function001();function002();" //必须把每个括号、分号写上
值得注意，上面执行两个方法的顺序是不确定的，有时候function001先 /有时候function002先，
所以如果要保证方法执行顺序，最简单的方法是把后执行的方法写在先执行方法的.then回调里面
【例子】前端向后端传送数据：
const { data: res } = await this.$http.post('SensorAdd', this.addForm) //将前端页面收集到的数据 发送给后端；然后等待后端的res
console.log(res) //传送完数据给后端之后，后端的res返回
if (res.code !== 200) return this.$message.error('上传失败')
this.$message.success('上传成功')
JS 面向对象（继承链）
（1）原始的方法：__proto__
（2）ES6 引入class，和Java里面一样定义class(类)
注意：这里左边仍然是var，所以js里面格式：var d =new Dog()
查看JSON数据：
1）F12检查（好处是知道从页面到文件名(network，需要前后端都有）
2）单独后端：使用Postman来
3）单独前端：一般用console.log()来打印json，在F12里面的console看
看JSON==》前端console.log() 后端postman 前后都有看network
## try throw catch finally
throw 用于抛出异常信息
catch 在出现异常的时候才会执行
finally 最后都会执行的内容
【 let 针对局部变量】 (( let声明的变量拥有"块级作用域" ))
{ let { code, data } = res; .......} ////后端返回res参数，这里包括code和data
{ let i = 9; } // i变量只在 花括号内 有效！！！
console.log(i); // Uncaught ReferenceError: i is not defined
for (let i = 0; i < 10; i++) { // i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
- var 全局变量
- let 局部变量
- const 常量(无法重新赋值)
$符号：表示 解除-追踪变化；如果没有$那么一般都是有动态追踪的，例如 this.$message $t()
vm.data //追踪变化
vm.$data //不追踪变化
- .trim调用方法：自动过滤用户输入的首尾空白字符，例如<input v-model.trim="msg">
- .number 用户输入值转为数值类型
- .lazy 将input事件同步（写一个字母 同步一下）==》change事件同步（焦点离开输入框 同步一下）
【箭头函数】
res=>{函数} ////////这个箭头==>是参数传进函数里面，函数直接在箭头后面花括号里面，相当于没有名字的函数
(param1, param2, …, paramN) => {expression} //相当于：(param1, param2, …, paramN) =>{ return expression; }
() => { statements } // 没有参数的函数应该写成一对圆括号。
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; //同样支持参数列表解构；此时的 f( ) 为 6
##JS代码规范：
通常运算符 ( = + - * / ) 前后需要添加空格 ，如：var x = y + z;
通常使用 4 个空格符号来缩进代码块；
冒号后有个空格，如eyeColor: "blue"
每行代码字符小于 80
变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase）
全局变量为大写 (UPPERCASE )
常量 (如 PI) 为大写 (UPPERCASE )
------------------------------- ES6特性 -------------------------------------
很多浏览器还停留在支持ES5
##var，let，const
##class，extends，super，this（引入了 类 这个概念）
class-->object
【js里面的this】 this总是指向调用该方法的对象！
this代表实例对象
super代表父类的实例
class定义类 extends继承
##arrow function 箭头函数 =>
function(i){i*=2; return i+1;} //ES5类似于传统Java的函数（方法）
(i)=>{i*=2; return i+1} //ES6省略了函数名、最后一个分号
另外例子：x=>x+1 相当于function(x){return x+1;}
使用箭头函数时，函数体内的this对象，就是定义时所在的对象；他的this是继承外面的
##template string 模板string
$("#result").append("There are <b>" + basket.count + "</b> " +"items in basket"); //原版
$("#result").append(`There are <b> ${basket.count} </b> items in basket`); //ES6
//原版中的多对双引号""和多个加号+ 改为：一对反引号``和多个${}用于包括动态的变量
##destructing解构：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值（了解但不清晰这个规则）
// 请使用 ES6 重构一下代码
// 第一题
var jsonParse = require('body-parser').jsonParse
// 第二题
var body = request.body
var username = body.username
var password = body.password
//第一题重构：
import { jsonParse } from 'body-parser'
//第二题重构：
const { body, body: { username, password } } = request
##default，rest
function animal(type = 'cat'){ //括号里面 传默认参数
console.log(type)
}
animal()
##import 导入模块 export导出模块
##Promise：将嵌套格式的代码变成了顺序格式的代码。
##Generators
—————————— JSON ——————————
- 大括号保存“ 映射的集合（对象）” {对象} //对象：几个键值对、之间用逗号分隔；
- 中括号保存数组 [ ] //平级关系
- 映射用冒号（“：”）表示。名称:值 //name:value
- 并列的数据用（“，”）逗号分隔。名称1:值1,名称2:值2
JSON 和 XML，最大的不同是：XML 需要使用 XML 解析器来解析，JSON 可以使用标准的 JavaScript 函数来解析。（JS Object Notation）
- JSON.parse(): 将一个 JSON 字符串==> JS对象。//在前端，从后端接收 "json字符串"
- 例如：var obj=JSON.parse('{ json字符串 }')
- myObj = JSON.parse(this.responseText);
- 特别说明：JSON不能存储：Date格式 or函数，只能先转为字符串然后转回 Date格式 or函数；（先用stringfy再用parse）
- JSON.stringfy(): 将 JS 对象 ==> JSON 字符串。//将前端JS对象 转为字符串给后端用
- 像这样的是JSON字符串：
- 里面包含很多 单引号、加号
- 像这样的是JSON字符串：
JSON对象，JSON字符串，JAVA对象
- JSON对象：对象的值可以用"对象.属性"的方式来访问
- JSON字符串：就是纯的字符串，比JSON对象丢失了信息/功能。
- JAVA对象：一般用方括号表示：
User[name=shily，sex="女"，age=23]
—————————— AJAX ——————————
AJAX==> 异步JS and XML
AJAX 局部修改网页，而不用全部刷新
创建XMLHttpRequest 对象：var xmlhttp=new XMLHttpRequest()；
GET：
POST：
GET 更简单也更快，
在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
获取服务器响应：
- responseText 属性： document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
- responseXML 属性（含解析）：
readyState:
下图中粉红色部分是标准的函数（和上图中的一样），将ajax_info.txt里面的内容传进 标准的函数，达到复用函数的效果。
BOM Browser 浏览器 对象 模型
window 浏览器窗口
window.alert()
navigator 浏览器信息
screen 全屏幕(尺寸) 属性
history
location 当前页面的URL信息
document 当前页面 文档树（DOM）
—————————— DOM ——————————
(Document Object Model)
文档 对象 模型 是 HTML 和 XML 文档的编程接口
getElementById() 方法:
操作DOM对象
1）选择DOM树节点：
2）修改DOM：
3）删除节点：
步骤：先获取父节点，再通过父节点删除本节点：
4）插入DOM节点：
1.已有的DOM迁移
2.全新DOM元素
—————————— jQuery ——————————
jQuery 是一个 JS 函数库
官网 jquery.com/
中文文档 jquery.cuishifeng.cn/
引入jQuery：
上面是直接给url，也可以将包下载到前端：
jQuery公式：$(selector).action(function())
// selector 和 CSS选择器一样
// action 就是使用库里面的（事件）函数
例如：click、双击 dbclick、
blur 失去焦点、focus得到焦点
页面载入 ready、mouseMove指针在元素中移动、toggle显示/消失切换
submit 提交、hover 鼠标移动到元素上
jQuery例子：
—————————— Axios ——————————
axios和jQuery都可以实现通信
https://www.bilibili.com/video/BV1LE411T78Z (70min)
https://www.bilibili.com/video/BV1QA411b7TR (140min)
——————— Flex布局（弹性布局）———————
Flex：移动端首选，PC端很方便 但兼容性不完善
任何容器都可以指定为flex布局
父盒子设置为 flex布局后，子元素的float、clear、vertical-align属性都失效
flex分为：容器（container）属性（大） 项目（item）属性（小）
图很形象生动：https://zhuanlan.zhihu.com/p/25303493
容器属性（container）
- flex-direction （主轴）方向
flex-direction: row 主轴默认横向x轴| row-reverse | column 纵向y轴 | column-reverse; - flex-wrap 换行
flex-wrap: nowrap 不换行+缩放 | wrap 自动换行 | wrap-reverse; - justify-content 对齐（仅主轴上的对齐效果）
justify-content: flex-start左对齐 | flex-end右对齐 | center 居中 | space-between 两边贴边+均分 | space-around 均分;
- align-items 侧轴（默认y轴）对齐：这样就可以同时设置 横向+纵向 对齐方式了
align-items: stretch | flex-start | flex-end | center 侧轴居中| baseline; //stretch:占满整个容器的高度 //flex-start：最上方对齐 - align-content 侧轴（多轴）对齐：适合于有换行的多行情况，上面是适合 "侧轴单行" 的情况
align-content: flex-start | flex-end | center | space-between 多轴 贴边+均分| space-around | stretch;
（上面5个属性的默认值均为第一个）
项目属性（item）
flex的核心作用是，按屏幕大小、动态、按比例来分配子元素的空间占用比例：
- flex-basis
flex-basis: <length> | auto; //当主轴为水平方向的时候，当设置了 flex-basis，项目的宽度设置值会失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能发挥效果。
- flex-grow：相对伸张比例
flex-grow: <number>; - flex-shrink：是否收缩
flex-shrink: <number>; //如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时: 0不参与压缩，1参与压缩。 - flex ==> （ flex-grow，flex-shrink，flex-basis ）的简写，默认值（0 1 auto）
举例子：
flex:1 等同于下面三行
用到的最多的还是下面的：
（ flex: 1 里面的1指的是 flex-grow=1 ）
：nth-child(2) 单独写，脱离组织的特性
align-self align-self 对单个项目生效的，
align-items 则是对容器下的所有项目生效的。
order 排序 按数值升序排序 order: <integer>;
（默认是0，-1在默认值的前面）
—————————— CSS ——————————
Cascading Style Sheet 层叠样式表
可以模仿网站练习CSS：用F12中Element的箭头，可以自己修改效果（刷新就没了）
CSS和Html分离，写起来略麻烦，但是可以复用、也便于维护；
一般CSS比对应的Html行数多很多
CSS 预处理器：SASS基于Ruby；LESS基于NodeJS（建议用LESS）
这些预处理器，为CSS增加一些编程特性，
用一种专门的编程语言，设计页面样式，再通过编译器转化为CSS文件
样式优先级（就近原则）：
内联/行内样式（元素内部）>内部样式表（<head>内部）>外部样式表（用link标签）>浏览器默认设置
选择器：
1、标签选择器：针对p1/h3/ li/...自己建的标签=>应用到所有的同名标签 CSS里面：p1{ }
2、类选择器：HTML：class="className" CSS里面： . className{ } //这里的class可以复用，直接写到需要的html标签里 //复用的时候可以跨类型
3、id选择器：HTML：id="Name" CSS里面： # Name{ } //id必须保证全局唯一，不可以复用
不遵循就近原则，优先级：3>2>1 （id>class>标签）
CSS属性选择器==》 方括号里面[正则表达式]
- p[id] //含有任意id的p
- p[id=first] //id=first的p //id是唯一的, 不用双引号
- p[class="links item first"] //class完全匹配等号后面引号内的内容
- p[class*="links"] //class可以有多个，这里 *= 是含有"links"
- p[href^=http] // 正则：^=开头匹配； p[$=.pdf] //$=结尾匹配
CSS组合选择符:（层次选择器）
- 后代选择器 空格 div p{} div中的p //无论深入多少层都可以；（下面的子元素只能一层：
- 子元素选择器 大于号 div > p{} div中直接到p（中间不能有别的在里面）
- 相邻 兄弟选择器 div + p{} <div>之后的第一个<p>
- 后续 兄弟选择器 div ~ p{} <div>之后的全部<p> //div可以是 body /.myclass等
CSS结构伪类选择器（伪类特征是带有冒号）
伪类：
比如一个ul里面几个li，
ul li：first-child{ style }
ul li：second-child{ style }
父元素：
p：nth-child(2){ style } //父元素中第二个 ，只有为p才显示
p：nth-of-type(2){ style } //父元素中第二个为p的元素
div: nth-of-type(3) { }
div: nth-child(3) { }
【CSS样式】
盒模型
content
padding: 20px 内边距
border: 边框
margin 外边距
盒子的具体参数可以在F12里面的盒子上直接修改参数、查看效果
盒子的大小=margin+border+padding+内容
border: 1px solid red
margin / padding:
0 0 0 0; //分别是上、右、下、左（顺时针）
0 auto; //上下为0，左右居中
10px；//上下左右都是10px
背景
background-color: gray 背景色 // rgb rgba：a是透明度
background-image 背景图像
background-repeat: no-repeat
background-position: center/ right top/ 50% 50%/ 50px 100px
上面这些，可以全部写在一个background后面
url图片背景：
渐变色：
字体
font-family: Times 字体 //font-family: 微软雅黑/楷体
font-size: 60px（px===pixels像素）
2.5em（1em相当于当前的尺寸）/100%
font-weight：900（100-900是9级粗度，400是normal）
font: bold 20px/50px Arial； //加粗 字体大小 行高 字体
文本
text-indent: 2em 缩进
- vertical-align middle 上下居中
- text-align：center 水平居中对齐
行高line-height 和 height一样的时候，就是上下居中 //height是整个块的高度
text-decoration 装饰
justify单行拉伸铺满一行
word-spacing/letter-spacing
列表
ul
li
list-style-image : url(xxx.gif) //将图像设置为列表项标志
list-style:none
表格
border：1px solid black；
text-align: right
width/height
轮廓
outline
【CSS 位置相关】
【display】
块元素<display: block>
类似<h1><p><div>是自动的块元素（占据整行）
内联元素<display: inline>
<span><a>这些是自动内联元素
>>>可以通过修饰改变其自然的属性
两者结合 inline-block：inline特性：一行可以多个并排的块元素
block特性：一个元素占据多行的高度
【float】
float: left / right =>所有inline/inline-block都排队贴着左边
clear: both //两侧都不允许有浮动
float可以摆脱父级边框的限制，不在父元素内
解决办法，避免父级边框塌陷，框不住子级元素：
1) 父类添加 overflow: hidden
2) 在父类添加一个伪类（最好的方法，不改动原有的代码）：
【overflow】
解决溢出：overflow: auto
overflow: scroll 滚动条
overflow：hidden 裁剪
【position定位】
relative：相对原先位置（对父级，保留原先的位置）
例如：top: -20px; left: 30px;
absolute：相对已定位的父元素位置（如果没有父元素，则相对于浏览器定位）
fixed：相对浏览器窗口 位置是固定的（例如："返回顶部" 图标）
sticky：基于用户的滚动位置来确定
z-index：垂直于屏幕的层级：从0 1 2 3 开始的自然数层级，0在最下层
块元素 居中，用margin: auto
文本 居中，用text-align: center；text-align: right/justify居右/等宽
左右对齐，用float: left/right（一般用于多个图片的位置浮动）
CSS伪类p：hover{ style } //hover是 "鼠标悬停" 特效 （一般会写一个初始状态和一个悬停状态）
———————————— VSCode 使用技巧 —————————————
- 代码行缩进 Ctrl+[， Ctrl+] //可以一次多行
- 上下移动一行： Alt+Up 或 Alt+Down
- Alt+Shift+F: 自动调整格式
巧妙使用Tab:
.d然后Tab，<div></div>
.className然后Tab，<div class="className"></div>
bgc Tab得到background-color
span*5, Tab得到5个<span></span>
————————————— 浏览器 ——————————————
