运营转前端-JavaScript基础学习篇-3

D27

464(掌握)事件-鼠标常见的事件演练

• 常见的鼠标事件
  

• 案例
  

464.1(掌握)mouseover和mouseenter的区别

• mouseenter和mouseleave
  • 不支持冒泡
  • 进入子元素依然属于在该元素内，没有任何反应
• mouseover和mouseout
  • 支持冒泡
  • 进入元素的子元素时
    • 先调用父元素的mouseout
    • 再调用子元素的mouseover
    • 因为支持冒泡，所以会将mouseover传递到父元素中；

464.2(掌握)mouseover和mouseenter应用的区别

• mouseover和mouseenter应用区别,over可以用在事件委托上,enter不可以
  

464.3(掌握)事件-键盘常见的事件和案例

• 常见的键盘事件
  

• 事件执行顺序:onkeydown,onkeypress,onkeyup

  • down事件先发生
  • press发生在文本被输入
  • up发生在文本输入完成(抬起,松开)

• key和code

  • code：“按键代码”（“KeyA”，“ArrowLeft” 等），特定于键盘上按键的物理位置。
  • key：字符（“A”，“a” 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）

  主要区别:key区分大小写,code不区分

465(掌握)事件-表单常见的事件演练

• 常见的表单事件
  
• 表单事件案例
  

466(掌握)事件-监听文档加载事件

• DOMContentLoaded：浏览器已完全加载 HTML，并构建了 DOM 树，但像 < img> 和样式表之类的外部资源可能尚未加载完成。

• load：浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
  

https://developer.mozilla.org/zh-CN/docs/Web/Events

468(掌握)window定时器用法的详细解析

• 有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）”。

• 计划调用的两种方法

  • setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
  • setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。

• 取消方法

  • clearTimeout：取消setTimeout的定时器；

  • clearInterval：取消setInterval的定时器；

469(掌握)案例实战-消息轮播展示

470(掌握)案例实战-m站头部移除

471(掌握)案例实战-侧边栏展示实现一

• 实现侧边栏展示

  • 方案一:mouseenter(不用事件委托)
    

  • 方案二:mouseover(使用事件委托)
    

473(理解)案例实战-侧边栏展示动画方向

• 动画方向为什么设置成right:35px,而不设置成left:-62px?

474(掌握)案例实战-tabControl的active切换

474.1(掌握)案例实战-王者轮播图实现(一)

476(理解)案例实战-侧边栏的实现-禁止事件

• 添加CSS属性:icon和name添加pointer-event: none,这样当鼠标进入icon和name中时,会禁止鼠标交互
  

477(掌握)案例实战-王者轮播图-定时器

478(掌握)案例实战-王者轮播图-代码重构

• 封装一个切换轮播的函数然后进行调用
  

• 代码重构的逻辑思路

  • 把重复的代码进行封装，然后再调用
    
    

479(掌握)案例实战-王者轮播图-移除定时器

479.1(理解)案例实战-王者轮播图-默认轮播效果

• 默认轮播图的思路
  • 1.每个image对应的item的位置问题
    • for循环判断索引
      • 小于currentIndex,排在左边
      • 等于currentIndex,放在中间
      • 大于currentIndex,排在右边
  • 2.谁身上有动画,谁身上没有动画
    • currentIndex需要动画
    • 原来在中间的位置的那个元素需要动画

481(掌握)案例实战-购物车-数据的展示

482(掌握)案例实战-购物车-删除的操作

• 删除按钮 > 删除那一行 > 重新计算价格
  

483(了解)案例说明和BOM的概览

484(理解)BOM-认识BOM浏览器对象模型

• BOM:浏览器对象模型(Browser Object Model)
  • 由浏览器提供的用于处理文档（document）之外的所有内容的其他对象；
  • 比如location,history等对象
• JavaScript有个非常重要的运行环境—浏览器
  • 浏览器本身又作为一个应用程序需要对其本身进行操作；
  • 所以通常浏览器会有对应的对象模型（BOM，Browser Object Model）；
  • 我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁；
• BOM主要包括以下对象模型
  • window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
  • location：浏览器连接到的对象的位置（URL）；
  • history：操作浏览器的历史；
  • navigator：用户代理（浏览器）的状态和标识（很少用到）；
  • screen：屏幕窗口信息（很少用到）；

485(掌握)BOM-window对象的使用

• window对象在浏览器中可以从两个视角来看待：

  • 视角一:全局对象
  • 视角二:浏览器窗口对象

• window对象包含大量的属性,方法和事件,还有从EventTarget继承过来的方法
  

• MDN文档查询:https://developer.mozilla.org/zh-CN/docs/Web/API/Window

486(掌握)BOM-location对象的使用

• location对象用于表示window上当前链接到的URL信息。

• 常见的属性:

  • href: 当前window对应的超链接URL, 整个URL；
  • protocol: 当前的协议；
  • host: 主机地址；
  • hostname: 主机地址(不带端口)；
  • port: 端口；
  • pathname: 路径；
  • search: 查询字符串；
  • hash: 哈希值；

• 案例展示
  

• location对象常见的方法

  • assign：赋值一个新的URL，并且跳转到该URL中；
  • replace：打开一个新的URL，并且跳转到该URL中（不同的是不会在浏览记录中留下之前的记录）；
  • reload：重新加载页面，可以传入一个Boolean类型；

• URLSearchParams定义了一些实用的方法来处理 URL 的查询字符串。

• 

  • get：获取搜索参数的值；
  • set：设置一个搜索参数和值；
  • append：追加一个搜索参数和值；
  • has：判断是否有某个搜索参数；

• MDN文档查询:https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams

• 中文会使用encodeURIComponent和decodeURIComponent进行编码和解码

487(掌握)BOM-history对象的使用

• history对象允许我们访问浏览器曾经的会话历史记录
  • 两个属性
    • length:会话中的记录条数
    • state:当前保留的状态值
  • 五个方法
    • back()：返回上一页，等价于history.go(-1)；
    • forward()：前进下一页，等价于history.go(1)；
    • go()：加载历史中的某一页；
    • pushState()：打开一个指定的地址；可以返回上一级
    • replaceState()：打开一个新的地址，并且使用replace；不可以返回上一级

488(了解)BOM-navigator和screen对象

• navigator 对象表示用户代理的状态和标识等信息。
  

• screen主要记录的是浏览器窗口外面的客户端显示器的信息：

  • 比如屏幕的逻辑像素 screen.width、screen.height；

489(掌握)JSON-JSON的由来和应用场景

• JSON是一种可以在服务器和客户端之间传输的数据格式。

• JSON的全称是JavaScript Object Notation（JavaScript对象符号）：

  • 是一种轻量级资料交换格式,算是JavaScript的一个子集
  • 可以独立于编程语言,在哥哥编程语言中使用
  • 很多编程语言都实现了将JSON转成对应模型的方式；

• 其他的传输格式

  • XML
  • Protobuf:可能会取代JSON

• JSON的使用场景

  • 网络数据的传输JSON数据；
  • 项目的某些配置文件；
  • 非关系型数据库（NoSQL）将json作为存储格式

490(掌握)JSON-JSON的基本语法格式

• JSON的顶层支持三种类型的值

  • 简单值：数字（Number）、字符串（String，不支持单引号）、布尔类型（Boolean）、null类型；
  • 对象值：由key、value组成，key是字符串类型，并且必须添加双引号，值可以是简单值、对象值、数组值；
  • 数组值：数组的值可以是简单值、对象值、数组值；

491(掌握)JSON-JSON的序列化和反序列化

• 某些情况下我们希望将JavaScript中的复杂类型转化成JSON格式的字符串
• 如果我们直接存放一个对象，这个对象会被转化成 [object Object] 格式的字符串,这样不行
• JSON全局对象，该对象有两个常用的方法
  • stringify方法：将JavaScript类型转成对应的JSON字符串；
  • parse方法：解析JSON字符串，转回对应的JavaScript类型；

492(理解)JSON-stringify和parse方法的补充

• JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串：
  • 如果指定了一个 replacer 函数，则可以选择性地替换值；
  • 如果指定的 replacer 是数组，则可选择性地仅包含数组指定的属性；
• stringify的参数space:表示转成对象格式前面会空几个格子
• 如果对象本身包含toJSON方法，那么会直接使用toJSON方法的结果：

• JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象。

495(理解)for循环中监听函数中打印变量(一)

496(理解)for循环中监听函数中打印变量(二)

• 注意代码执行顺序,循环里的变量会依次往上找
• 拿到对应的btnItemEl的两个方案
  • 直接获取this
  • 先获取索引
    

498-499(掌握)华为商城-导航-操作界面搭建

13阶段行项目-华为商城>1商品列表-界面搭建

500(掌握)华为商城-动态商品列表的展示

13阶段行项目-华为商城>2商品列表-动态列表

• 这种方式适合和用户交互

501(掌握)华为商城-动态商品列表的展示

• 获取图片比较麻烦,需要对资源服务器的地址和图片路径和图片名称进行拼接,中间还需对比华为商城官网的图片网址,添加428_428或800_800_这样的数字

• 这种方式适合展示用,不适合和用户交互用
  

502(掌握)华为商城-优惠服务的点击处理

• 过滤算法原理

503(掌握)华为商城-服务优惠的点击过滤展示

• 作用域的提升

• 服务优惠的点击过滤和展示函数封装
  

• 过滤与展示的过程

  1.获取服务优惠中的item

  2.监听item的点击

  ​ * 切换active

  3.根据item的点击获取filterItem

  ​ * 将其放在一个数组中

  4.根据最新的filter,过滤数据

  ​ * filterResultListAction

  5.根据过滤的最新数据进行展示

  ​ * showResultListAction

504(理解)数据过滤-颜色选择的算法

505(掌握)华为商城-最后一行的布局处理

506(掌握)华为商城-轮播图界面基本搭建

507(掌握)华为商城-轮播图图片动态数据展示

508(掌握)华为商城-轮播图的控制按钮处理

509(掌握)华为商城-轮播图的自动轮播效果

511(掌握)华为商城-轮播图指示器的动态展示

512(掌握)华为商城-轮播图指示器的切换操作

513(掌握)华为商城-轮播图位移动画的实现

514(掌握)华为商城-轮播图的无限轮播效果

515(掌握)华为商城-轮播图的定时器处理

• 处理窗口失去焦点时,停止自动播放

517(掌握)商品列表数据的排序实现

519(掌握)this绑定-三条绑定规则的回顾

• this指向
  • 1.函数在调用时，JavaScript会默认给this绑定一个值；
  • 2.this的绑定和定义的位置（编写的位置）没有关系；
  • 3.this的绑定和调用方式以及调用的位置有关系；
  • 4.this是在运行时被绑定的；

• this绑定规则一:默认绑定

  • 函数被独立调用,this就指向window
    

• this绑定规则二:隐式绑定

  • 函数在调用的这一刻,由谁发起,就绑定谁
    

• this绑定规则三-new绑定
  

520(掌握)this绑定-显示绑定的规则

• 用call和apply方法
  

521(掌握)this绑定-apply-call的显示绑定

• JavaScript所有的函数都可以使用call和apply方法
  • 第一个参数是相同的,要求传入一个对象,调用函数时,会将this绑定到这个传入的对象上
  • 后面的参数,apply为数组,call为参数列表
• 因为上面的过程明确的绑定了this指向的对象,所以称之为显式绑定
  

522(掌握)this绑定-bind的显式绑定

• 如果希望一个函数总是显示的绑定到一个对象上用bind方法
  • 使用bind方法，bind() 方法创建一个新的绑定函数（bound function，BF）；
  • 绑定函数是一个 exotic function object
  • 在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用

523(掌握)this绑定-内置函数的this思考

• 有些内置函数会要求我们传入另外一个函数
• 我们自己并不会显示的调用这些函数，而且JavaScript内部或者第三方库内部会帮助我们执行；
  

524(掌握)this绑定-this绑定的优先级比较

• 绑定this的优先级顺序(高-低)
  • new
  • bind
  • apply/call
  • 隐式绑定
  • 默认绑定

525(了解)this绑定-this绑定的规则之外的情况

• 如果在显示绑定中，我们传入一个null或者undefined，那么这个显示绑定会被忽略，使用默认规则：
• 情况二：创建一个函数的间接引用，这种情况使用默认绑定规则
  • 赋值(obj2.foo = obj1.foo)的结果是foo函数；
  • foo函数被直接调用，那么是默认绑定

526(掌握)箭头函数-箭头函数的用法和简写规则

• 箭头函数不会绑定this、arguments属性；不能和new一起使用

• 箭头函数编写

  • (): 函数的参数

  • {}: 函数的执行体

527(掌握)箭头函数-箭头函数中this查找的应用

• 注意作用域:只有代码块和函数才能形成作用域

• 箭头函数中的this应用

529(掌握)this指向题目一/二

• this指向题目1
  

• this指向题目二
  

530(掌握)this指向-题目三

• this指向题目三

531(掌握)this指向题目四

• this指向题目四