• 对象的方法

    image.png

    • 它存在于对象里面的话，称为方法，实质上也是个函数，只是关联到了某个对象上

    • 可以通过用法区别：

      1. obj.xxx(参数)
      2. yyy(参数)

    • 前者为方法，后者为函数

    • [ ] 同步执行和异步执行，setTimeout()函数

      1. let i = 0
      2. for(i = 0; i<6; i++){
      3. setTimeout(() => {
      4.   console.log(i)
      5. },0)
      6. }   //6个6

      for 循环为同步执行，而 setTimeout 为异步执行，遇到上图同步异步混合的情况，会先从上往下执行同步代码，碰到异步的代码会将其插入到任务队列当中等待。 只有当for 循环任务同步执行完，才会执行任务队列里的任务 。也就是说等到 for 循环全部运行完毕后，才会执行 setTimeout ，执行 setTimeout 时需要从当前作用域内寻找一个变量 i ，此时for 循环已执行完毕，当前 i =6,所以执行 setTimeout 时输出为6，任务队列中的剩余5个 setTimeout 也依次执行，输出为6。

    • this大山

    8.3

    • 学习了浏览器默认的同源策略，不同域名之间不能获取其数据
    • 若要获取和共享不同域名网站的数据则采用CORS法和JSONP法(兼容IE）
    • 复习了http协议的组成，服务器协议中file协议和http协议的区别
    • 彻底弄清相对路径和绝对路径的概念和应用场景，常用相对路径，包括相对根路径和文档相对路径，即site root 和document，冷点有斜杆/ 和反斜杆\的区分，前者表示网络路径，后者为本地路径，即上传和下载作用之分
    • 复习vscode常用快捷键
    • 拓展了解event中的onload事件，属于jQuery库内容，用熟即可

    8.4

    • 部署一个静态服务器static server —— 自动查找对应的本地文件，即静态文件服务器
    • 区别于http server

    难点：

    • 查找不存在的本地文件，报错提示

    • [x] 批量添加不同格式的文件处理方法（避免手动逐个添加）

    • [x] 复习数据结构，用哈希对象实现一一映射关系 ，可替代if else的堆砌和遍历循环

    • 部署动态服务器，实现：
    • 用户注册

    用户提交name和password数据库里就新增用户提交的数据
    思路：

    1. 前端写一个form，让用户填写name和password
    2. 前端监听submit事件①，用户submit后，获取用户submit的name和password②

    （①先在要监听的标签上添加类名，通过jquery获取元素再进行链式操作）
    （②通过find函数，利于css属性选择器；const password = $form.find(‘input[name=password]’).val()
    →.val()为获取表单的值）

    1. 前端发送post请求，数据位于请求体 request header

    （用jquery发送ajax请求，）

    1. 后端接收post请求
    2. 后端获取请求体中的name和password
    3. 后端存储数据到数据库中
    • 获取post数据，
    • 使用cookie标记用户，
    • 使用cookie记录user id，
    • 使用session会话保存用户信息以及session的时效性
    • 复习遍历方法：对象遍历与数组遍历，for in 和each
    • 复习git命令行操作

    8.5

    • [x] 表单要阻止默认事件（养成习惯）preventDefault（）

    • [x] 复习ajax，轻量级特点（$.ajax({ xxx }）：大概思路：

    • [x] 四步走大法；

    ①创建和发送请求const request = new XMLHttpRequest(); request.open(‘GET’,’想要获取的内容的文件路径’);request.send()
    →②监听readyState和status，open为1，send为2，若readyState为4且状态码request.status为200，表示响应内容完全下载成功
    →③获取响应内容,request.onreadystatechange = () => {if(request.readyState ===4 && request.status ===200) {创建style/script/div等标签于html中;将response响应内容填写于标签中.innerHTML;}→④执行响应内容,将标签插入到页面中才能生效
    →④报错提示,else{xxx}

    • 对比传统方法：

    新增css文件和js文件，在html中引用css文件或者js文件，然后在server.js中添加路由复习JS引擎，JS渲染，js文件只是在js引擎中执行，浏览器能捕捉到的直接内容是html中的

    ajax利用js进行发送请求和接收响应的操作；而不是将既有的css和js文件一概插入html中等待浏览器发现并执行生效；
    ajax利用js文件进行异步操作，局部更新页面，而js文件可以用jquery写，即jquery将ajax封装成一个函数，需要的时候调用即可；故用$.ajax({xxx})

    • 简单了解数据库基本原理和操作

    创建数据库（用一个json文件模拟数据库即可）数据库结构上是： 一个数组
    数据库内容格式上只能是：字符串
    数据库需要运行在一个文件中，需调用的方法有readFileSync读文件和writeFileSync写进文件

    • 读取数据库：

    新建js文件，在其中创建fs对象，调用readFileSync方法同时将其转化为完全的字符串 读 数据库文件
    数据库只能是字符串，读数据库必须将其装换为对应的数组对象JSON.parse（反序列化）

    • 写数据库：

    在之前的数组对象中push新的内容，由于数组对象只是本地数组，要将其上传到数据库必须转化为字符串JSON. stringify（序列化）接着将字符串写进文件中，调用writeFileSync

    8.6

    • 完成期中考试
    • 浏览个人博客目前全部内容
    • src、href、url的区别

    href （ Hypertext Reference ）超文本引用
    指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
    src （ source ） 源

    1. 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
    2. 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。（不要在html中的img标签中使用src属性，通过css应用样式或者js引用事件增强用户体验）

    url（ Uniform Resource Locator）统一资源定位符

    1. 对可以从互联网上得到的资源的位置和访问方法的一种简洁表示，是互联网上标准资源的地址；互联网上的每个文件都有一个唯一的 URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它
    2. 组成：协议、域名、路径、查询参数、锚点
    • 对象的实例？

    涉及对象和实例的区别
    var person = new Object();
    var person = {};
    第二个采用对象字面量的方式生成的person是对象,内部没有调用new Object()，而是采用JSON的初始化方式
    第一个通过构造函数创建的对象是 Object 的实例
    实例都是对象，而对象不全是实例。
    new操作叫做 对象实例化
    类创建对象的 过程 称为实例化。

    • 简单理解：狗具备动物的特征,并且是唯一的,具体的

    动物 —- 对象
    一只狗 —- 实例

    • 复习数组遍历的方法：

    for in 快速遍历
    for循环具体遍历，for是关键字，功能更强大一些
    forEach(fn) ，数组原型特有的方法函数

    • 区分forEach和for循环

    forEach不能判断条件终止，无break，除非遇到falsy值，forEach是函数，遵循函数作用域
    for循环可以添加判断条件终止，for循环不是函数，只是关键字，只有块级作用域
    forEach 接收一个函数fn，函数fn会遍历该数组中的每一项
    for循环是访问、遍历数组的常见方法，for in快速遍历适合遍历对象，因为i没有固定为数值

    • 伪数组就是类数组
    • 拥有length属性，其它属性（索引）为非负整数(对象中的索引会被当做字符串来处理，这里你可以当做是个非负整数串来理解)
    • 不具有数组所具有的方法

    • 简单概括为：只要有length属性，且它的属性值为number类型

    • [x] 复习JS三座大山

    • 原型及原型链
    • this（常用于构造函数搭配new操作符产生的运行机制中）

    this出生缘由：
    写/调用函数时，为了获取不确定的对象的属性或方法——即用this获取未知对象的引用
    this出现场景：

    1.      1. 一般普通函数
    2.      1. 构造函数（涉及new操作符的运行机制，return的不同情况：手动/自动）

    区分：
    一般普通函数也能模拟构造函数的机制——构造对象
    new一个函数时候，这个函数会变成一个构造函数；一般情况下有意为之（即可提前声明一个构造函数等待被new）

    一般区别在return上：
    一般函数构造对象时候，return的值可以任意更改，可以 以 对象为返回值

    构造函数构造对象时候，搭配new操作符有奇效：
    return的值可以是手动添加，也可以省略；

    1.         - 手动添加的返回对象会覆盖new自动生成的this空对象，如果return不是一个对象，则返回this（new自动生成的新对象this）
    2.         - 省略手动return的话，会默认隐式地返回new自动生成的新对象this

    在一般普通函数上，每个函数都能用this获取未知对象的引用：
    调用这个带着this指向的函数时：
    不给任何条件，this默认指向window
    若要指定this只能通过call，fn.call()
    若call传的不是对象，this会自动将其封装为对象，除非用use strict
    不确定this指向的时候log一下：console.log(this)

    • [x] AJAX

    • [x] 复习手写DOM库的方法：

    直接操作DOM
    封装jquery库操作DOM

    • 复习异步操作：

    Ajax通过利用JS来控制浏览器发送请求和接收响应
    目前最新且专业的Ajax库——axios，抄袭jquery封装思路，jQuery.ajax

    • 复习异步编程模型：

    理解异步、同步、回调概念及其关系

    • 异步编程方法一：回调

    异步与回调的应用场景

    • 异步编程方法二：Promise

    以ajax的封装为例解释promise

    • [ ] 记熟promise写法套路

    • [ ] 完成字节跳动青训营笔试答题90分钟

    8.7

    • 复习数组和伪（类）数组
    • indexOf()方法

    返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

    1. arr.indexOf(searchElement[, fromIndex])  
    2. //searchElement 要查找的元素，必选
    3. //fromIndex 开始查找的位置，可选
    • Set数据结构

    Set本身是一个构造函数，用来生成 Set 数据结构
    ES6提供了新的数据结构Set，允许存储任何类型（原始值或引用值）的唯一值

    • Map数据结构

    Js 的对象（Object），本质上是键值对的集合，但是传统上只能用字符串当作键。
    ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串。各种类型的值（包括对 象）都可以当作键

    • 数组转换三方法
    • 数组排序方法——快速排序代入法
    • 复习数据结构

    数据结构是一种存储和组织数据的方式

    • 再看一遍所有个人博客和老师视频讲解
    • JS的继承方式
    • 原型继承
    • class继承

    • [x] splice方法在原数组上进行修改，返回值却是被摘掉的那个元素

    • [x] 关于函数中形参和实参的使用避坑：

    image.png

    • 函数调用时传参，传的是“值”，只是传简单数据类型的“值”，或者传对象“地址的值”，而“传”其实就是复制，复制值或者复制地址，这就是“传值”和“传址”的区别
    • swap方法实参传入numbers对象的地址，则swap方法返回值是根据numbers地址指向的对象进行操作，故会修改numbers对象本身内容

    image.png
    上图中swap方法返回的仍是简单数据类型，因为没有传址，所以没有真正地针对numbers对象的内容进行操作，操作的只是swap方法内部作用域

    • 补上昨天未完成任务清单
    • ipad画画

    8.9

    • 学习Promise对象的方法
    • Promise.prototype.then()
    • Promise.all()
    • Promise.race()
    • 项目——画静态皮卡丘

    使用parcel打包工具必须引入js，否则用不了parcel，可引入空的js

    8.10

    • 复习css选择器
    • css属性选择器

    只对有 href 属性的锚（a 元素）应用样式 a[href] {color:red;}

    • 同个标签加多个类名调用时注意：不要有空格
    • 父子直接关系标签的类名调用：需要空格隔开，或者直接>
    • 完成字节跳动青训营笔试
    • 关于transform的rotate的翻转应用

    （根据自定义原点进行翻转）举例左右翻转
    ①先设置transhform-origin，不设置原点的话默认以自身中心作为原点
    ②再设置rotateY（180deg）

    • substring（）

    String.prototype.substring()
    string的子字符串
    str.substring(indexStart[,indexEnd])
    返回一个字符串在开始索引到结束索引之间的一个子集字符串，或从开始索引直到字符串的末尾的一个子集

    • [x] clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务。

      注意：一般需要给计时器声明一个id，然后clearInterval（id）

    • [x] 学习MVC设计模式，完成20%

    • 模块化概：:将一堆代码放到一个专属文件中，方便在其他地方导入调用
    • 在js文件中引入 css文件 和jquery库：

    其中，引入jquery库的方法：一、bootCDN；二、npm或者yarn
    其中二：①先yarn init 初始化②再yarn add jquery（也可用npm）

    • parseInt(string, radix)

    解析一个字符串并返回指定基数的十进制整数， radix 是2-36之间的整数，表示被解析字符串的基数。
    string必选，radix可选；radix不写则是将字符串转换为整数

    • 本地存储localStorage

    获取本地存储数据：localStorage.getItem()
    保存、设置本地存储数据：localStorage.setItem()

    • 所有操作系统的滚动条一般宽度均为：14~19px
    • 样式与行为分离思想：js只管功能；css只管样式
    • jQuery 操作 CSS：
    • addClass() - 向被选元素添加一个或多个类
    • removeClass() - 从被选元素删除一个或多个类
    • toggleClass() - 对被选元素进行添加/删除类的切换操作
    • css() - 设置或返回样式属性—— 千万不学，包括利用show()和hide()方法设置css
    • js中active的用法：

    激活元素的作用
    设置js操作的当前这个元素的css类为active。
    至于active这个类里面是什么css代码，把元素设置了什么样式只有看具体的css代码了，相当容器作用，作用更广泛

    • css3中自适应布局单位：vw和vh单位的区别：

    1vw = 视口宽度的1%，其他同理
    vmin 选取vw中vh最小的那个
    vmin选取vw中wh最大的那个

    高度100vh表示与页面高度保持一致
    宽度100vw表示与页面宽度保持一致
    注意：
    canvas.width和canvas.style.width不同，前者html后者css
    vh和vw都是css属性，不能写于html中

    • 视口的概念：pc端和移动端上各不同

    pc端上指的是浏览器的可视区域
    移动端指的是viewport中的Layout Viewport布局视口
    而移动端本身涉及三个视口，分别是Layoutport布局视口，VisualViewport视觉视口， idealViewport理想视口

    • vh/vw和% 的区别：

    vh和vw是相对于视口宽高而言，%相对于其直接的父元素宽高而言

    8.11

    • 学习MVC设计模式-中
    • 查jQuery文档，复习jQuery选择器（稍微不同于css选择器）
    • css选择器中的冒号、空格、逗号的区别

    冒号：$(“input:checkbox”)表示input节点下带有checkbox属性的节点
    $(“input:checkbox[name=’aaaa’]”);表示input节点下所有name属性值为”aaaa”的checkbox
    空格：p span{}选择了P元素下的所有span元素。这是后代选择器，空格是后代选择器的标识符。
    逗号：p,span{}选择了P元素和span元素。这是多元素选择器，同时选择多个元素，元素之间用逗号分隔。

    • trigger() 方法

    触发被选元素的指定事件类型，括号内必填指定元素要触发的事件；自动触发事件机制不需要达到事件触发条件

    • target和currentTarget区分

    e.target指向直接操作的元素，即触发事件监听的对象e.currenTarget指向 添加监听事件的 对象，一般为父标签

    1. $tabBar.on("click","li",e => {
    2.     const $li = $(e.currentTarget)
    3.     })
    4. //其中，li包含span标签，点击span标签，则span为直接操作的元素
    5. li为监听事件的对象，在on函数中形参已确定
    • eq() 等于第几个，将第几个放在括号内表示，通常是变量
    • setItem()

    storage.setItem(keyName, keyValue);
    作为 Storage 接口的方法，
    接受一个键名和值作为参数，参数均为字符串，
    将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

    • 最小知识原则做开发——最小化、模块化

    从
    引入一个模块需要引入 html、css、js
    引入一个模块需要引入 html、js
    到
    引入一个模块只需要引入 js ，因为js文件中就能插入html内容并生效，即const html =html完整内容`，const $element = $(html).appenTo()和引用css，即import “./xxx.css”`

    • 缺陷：网速慢情况下页面加载一开始是空白页，可在html中一开始就加菊花或者骨架图以表示，等js文件中模块加载好了在文件最下方移除菊花们
    • prepend 方法可以在父节点的第一个子节点之前插入一系列节点（标签或者文本都行）
    • JS事件

    onclick事件对比addEvenlistener事件，可以多次绑定同一个事件并且不会覆盖上一个事件。
    removeEventListener的形参必须传两个参数，
    第一个参数为type，一个字符串，表示需要移除的事件类型，如 “click”，第二个参数为listener，表示需要从目标事件移除的 EventListener 函数。且处理函数不可为匿名函数

    • 基于事件委托机制，原生的addEventListener比jquery的on方法慢，常用on方法添加监听事件的对象，一般为父标签

    8.12

    • 学习MVC设计模式-下
    • 完成《浅析MVC》博客
    • 复习数据结构之 队列、栈、链表

    队列中，入队为push，出队为shift，先进先出原则，典例为排队、异步任务的任务队列
    栈中，压栈为push，弹栈为pop，先进后出原则，典例为函数的调用栈/执行栈
    链表中，典例为原型链，主要掌握其增删改查方法

    • 复习异步函数之回调

    异步函数是啥：
    JS是单线程的，处理多线程事件即同一时间处理多个任务需要异步操作以节省时间提高效率
    异步函数为啥要回调：
    异步函数的结果/返回值只能在异步任务中获取，不能在外部（同步任务）中获取，故扔个回调函数进去把异步结果回调出来
    回调函数是啥：
    简单来讲就是我设置了个函数但不调用它，把它作为实参传入异步任务函数中，让异步函数调用回调函数（即 将回调函数在异步函数体中调用，以将异步函数的结果从中调出来）
    核心：
    异步函数完成时调用回调函数，调用回调函数的时候把异步函数的结果作为回调的参数，由此将异步函数的结果调出来以获取

    8.13

    • 复习Promise用法
    • 对象的解构赋值
    • css选择器语法：

    .a.b ——表示a和b类名同时存在
    .a .b ——表示a类名中的b类名 所组成的数组元素们
    .a>.b ——表示a类名中的第一个b类名 的标签
    JS引号为反引号``
    html引号为双引号””
    ${}为JS替换语法

    • this的指向是动态的，是根据上下文来确定的

    只有函数调用的时候才能确定this到底指向谁，
    实际上this的最终指向的是那个调用它的对象