12 2020 档案
摘要：一、class类: 类是一批具备相同或属性和行为的事物的抽象。类的主要作用是描述属性和行为。 属性 方法 对象：对象是类的实例化。对象具备类所描述的属性和行为。 面向过程：将一个大的功能，拆分若干步骤，一步一步的去完成面向对象：以对象为基点，通过对象来进行编程1）在class中，属性需要在const
阅读全文
摘要：1.JS代码执行顺序 我们直觉上会认为JS的代码在执行时是由上到下一行一行执行的，但实际并不完全正确，下面的例子会证明： a = 'haha' var a console.log(a) 上面的代码会输出什么呢？ 如果按照我们认为的由上到下一行一行执行，那么应该输出undefined，但是实际结果是'
阅读全文
摘要：目录 1.什么是Promise reject的用法 catch的用法 all的用法 race的用法 1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。（ps:什么是原型
阅读全文
摘要：我们大部分 React 类组件可以保存状态，而函数组件不能？ 并且类组件具有生命周期，而函数组件却不能？ React 早期版本，类组件可以通过继承PureComponent来优化一些不必要的渲染，相对于函数组件，React 官网没有提供对应的方法来缓存函数组件以减少一些不必要的渲染，直接 16.6
阅读全文
摘要：1. 区分Real DOM和Virtual DOM Real DOMVirtual DOM 1. 更新缓慢。 1. 更新更快。 2. 可以直接更新 HTML。 2. 无法直接更新 HTML。 3. 如果元素更新，则创建新DOM。 3. 如果元素更新，则更新 JSX 。 4. DOM操作代价很高。 4
阅读全文
摘要：这个是面试题中经常问的，再回答这个问题之前，我们需要知道以下几个知识点： 1.执行上下文context 2.函数调用栈 3.队列数据结构 4.promise，process.nexttick,setImmediate（其中promise大家都知道，后两个是node循环中必不可少的部分，node的高并
阅读全文
摘要：宏队列与微队列 1，宏队列：用来保存 待执行的宏任务（回调）， 比如：定时器回调 、DOM事件回调、ajax回调 2，微队列：用来保存待执行的微任务（回调）， 比如：promise的回调、MutationObserve的回调 3，JS执行时会区别这 2个队列 JS引擎首先必须先执行所有的初始化同步任
阅读全文
摘要：forEach forEach()会遍历数组, 循环体内没有返回值,forEach()循环不会改变原来数组的内容, forEach()有三个参数, 第一个参数是当前元素, 第二个参数是当前元素的索引, 第三个参数是当前元素所属的数组. let array = [1, 2, 3, 4]; array.
阅读全文
摘要：import Vue from 'vue' import Vuex,{store} from 'vuex' Vue.use(Vuex) const store = new store({ state:{} getters:{}过滤改变state mutations:{ 改变state,处理同步请求
阅读全文
摘要：什么是高阶组件？？？ 高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。基本上，这是从React的组成性质派生的一种模式，我们称它们为 “纯”组件， 因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。 const EnhancedComponent
阅读全文
摘要：什么是递归？？？？？？？ 递归，就是在运行的过程中调用自己 构成递归需具备的条件。 1.子问题须与原始问题为同样的事，且更为简单。 2. 不能无限制地调用本身，须有个出口，化简为非递归状况处理。 递归关系就是实体自己和自己建立关系。 我们在两面相对的镜子之间放一根正在燃烧的蜡烛，我们会从其中一面镜子
阅读全文
摘要：什么是链表？链表是一种物理存储结构上非连续、非顺序的存储结构，数据元素的逻辑顺序是通过链表中指针链接次序实现的，这里就不展示图片了简单说一下 index.html script 引入link.js <script > let link = new LinkNode() link.push(1) li
阅读全文
摘要：首先什么是击鼓传花 ？击鼓传花，也称传彩球。中国民间游戏，流行于中国各地。数人、十数人或数十人围成一个圆圈席地而坐，另外一个人背对着人圈以槌击鼓。鼓响时，开始传花，花由一个人的手里传。人们在击鼓声zhi中传花，鼓声停止到时，花传到谁手上，谁就要“受罚”。而待最终的鼓声落下，无论在谁手中，那花儿总是成
阅读全文
摘要：23-面试技巧 by smyhvae #写简历的注意事项 最多可以写“深入了解”，但不要写“精通”。 #遇到不知道的问题，该怎么回答 这块儿我没了解过，准备回去看一下。 这块儿我没研究过，您有没有好的资料，我可以补充一下细节。 写不出详细的代码，但是知道思路。 #项目经历 面试要体现项目的设计思路、
阅读全文
摘要：22-网友面经 #2018-03-08 jawil | 一年经验初探阿里巴巴前端社招 此博主的博客签名： 20180308_1703.png 2017我遇到的前端面试题 作者整理的这些题目，很多是来自面试跳槽的视频。非常推荐。 作者说，性能优化和ES6，是必问的。 2018年web前端经典面试题及答
阅读全文
摘要：21-面试题整理 by smyhvae #JavaScript #存储相关：请描述以下cookie、localStorage、sessionStorage的区别 在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了， 就开始用后面的两个做本地存储。 1、cookie： 本身
阅读全文
摘要：16-01.MVVM #前言 MVVM的常见问题： 如何理解MVVM 如何实现MVVM 是否解读过Vue的源码 题目： 说一下使用 jQuery 和使用框架的区别 说一下对 MVVM 的理解 vue 中如何实现响应式 vue 中如何解析模板 vue 的整个实现流程 #说一下使用 jQuery 和使用
阅读全文
摘要：15-虚拟DOM #前言 vdom 是 vue 和 React 的核心，先讲哪个都绕不开它。 vdom 比较独立，使用也比较简单。 如果面试问到 vue 和 React 和实现，免不了问 vdom： vdom 是什么？为何会存在 vdom？ vdom 的如何应用，核心 API 是什么 介绍一下 di
阅读全文
摘要：大牛答面试 #一、 说说React生命周期？ 面试概率级别应用模块或方向解决问题考核点 90% 4星 react react核心概念 组件化 #1. 通常解法 React的生命周期相比于vue要更加有深度，名称叫起来也比较长，不是很容易记忆，尤其是react生命周期的使用，有很多细节可以体现出开发人
阅读全文
摘要：面试准备 #前言 #面试分为三部分 技术面试：问技术问题。 负责人面试：考察综合能力。比如：项目把控能力、项目深度、项目架构、业务等。 hr 面试：侧重于性格、沟通、潜力等。 每轮面试在一小时左右。 #每轮面试的知识点 一面： 主要考察基础知识。 页面布局 CSS盒模型、DOM事件 HTTP 协议、
阅读全文
摘要：HTTP和HTML 浏览器 #说一下http和https #参考回答： https的SSL加密是在传输层实现的。 (1)http和https的基本概念 http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从WWW服务器传输超文本到本
阅读全文
摘要：前端面试官的套路，你懂吗？ 最近一年陆陆续续都在面试各种不同程度的 Web 前端开发，总觉得现在前端氛围太过于浮躁，急于求成的人比比皆是。 然而很多童鞋还是没有掌握面试的技巧，一次次碰壁。鉴于此，我觉得是时候总结一些面试经验了，只不过这一次我打算从面试官的角度来阐述。 我是如何面试前端的？
阅读全文
摘要：面试技巧 面试一般分为技术面和hr面，形式的话很少有群面，少部分企业可能会有一个交叉面，不过总的来说，技术面基本就是考察你的专业技术水平的，hr面的话主要是看这个人的综合素质以及家庭情况符不符合公司要求，一般来讲，技术的话只要通过了技术面hr面基本上是没有问题（也有少数企业hr面会刷很多人） 那我们
阅读全文
摘要：前端常见专有名词 #性能相关 F2E: 前端 防抖和节流 滚动穿透 FP FPC FMP TTI 白屏时间 预渲染时间 文档获取时间 GUI时间 FMP：First Meaningful Paint 包含页面所有元素及数据。是指页面的首要内容出现在屏幕上的时间。 同构 直出 同构直出一般用于首屏渲染
阅读全文
摘要：11-00.JavaScript高级面试 #前言 一、基础知识： ES 6常用语法：class 、module、Promise等 原型高级应用：结合 jQuery 和 zepto 源码 异步全面讲解：从原理到 jQuery 再到 Promise 二、框架原理： 虚拟DOM：存在价值、如何使用、dif
阅读全文
摘要：11-02.ES6 #Class和普通构造函数有何区别 我们经常会用ES6中的Class来代替JS中的构造函数做开发。 Class 在语法上更加贴合面向对象的写法 Class 实现继承更加易读、易理解 更易于写 java 等后端语言的使用 本质还是语法糖，使用 prototype
阅读全文
摘要：10-01.页面性能优化 #前言 提升页面性能优化的方法有哪些： 1、资源压缩合并，减少http请求 2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别 如果回答出非核心代码异步加载，就会层层深入。 3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理 缓存是所有性能优化的
阅读全文
摘要：11-01.ES6：模块化的使用和编译环境 #前言 #ES6的主要内容 模块化的使用和编译环境 Class与JS构造函数的区别 Promise的用法 ES6其他常用功能 本文来讲“模块化的使用和编译环境”。 #面试常见问题 ES6 模块化如何使用，开发环境如何打包 Class 和普通构造函数有何区别
阅读全文
摘要：09-02.js运行机制：异步和单线程 #前言 面试时，关于同步和异步，可能会问以下问题： 同步和异步的区别是什么？分别举一个同步和异步的例子 一个关于 setTimeout 的笔试题 前端使用异步的场景哪些？ 面试时，关于js运行机制，需要注意以下几个问题： 如何理解JS的单线程 什么是任务队列
阅读全文
摘要：10-02.前端错误监控 #前言 错误监控包含的内容是： 前端错误的分类 每种错误的捕获方式 上报错误的基本原理 面试时，可能有两种问法： 如何监测 js 错误？（开门见山的方式） 如何保证产品质量？（其实问的也是错误监控） #前端错误的分类 包括两种： 即时运行错误（代码错误） 资源加载错误 #每
阅读全文
摘要：06-跨域通信类 #前言 从本章起，对代码的要求没之前那么高了，但是，要求你对知识面的掌握要足够宽。 前端通信类的问题，主要包括以下内容： 1、什么是同源策略及限制 同源策略是一个概念，就一句话。有什么限制，就三句话。能说出来即可。 2、前后端如何通信 如果你不准备，估计也就只能说出ajax。这个可
阅读全文
摘要：07-安全问题：CSRF和XSS #前言 面试中的安全问题，明确来说，就两个方面： CSRF：基本概念、攻击方式、防御措施 XSS：基本概念、攻击方式、防御措施 这两个问题，一般不会问太难。 有人问：SQL注入算吗？答案：这个其实跟前端的关系不是很大。 #CSRF 问的不难，一般问： CSRF的基本
阅读全文
摘要：08-算法问题 #前言 算法主要包括： 1、排序 排序一定要准备。 2、堆栈、队列、链表 队列和链表可以不准备，但是堆栈一定要准备。 一个小技巧：JS的数组本身就具备堆栈和队列的特性。比如：top、push、shift、unshift这四个api，本身就帮我们实现了堆栈和队列。 堆栈：先进后出。 3
阅读全文
摘要：09-01.浏览器渲染机制 #前言 接下来的几篇文章，讲一下二面的内容。 二面的内容： 渲染机制 JS 运行机制 页面性能 错误监控 本文接下来讲渲染机制。 渲染机制包括的内容： 什么是DOCTYPE及作用 浏览器渲染过程 面试经常会问：在浏览器中输入url，发生了哪些事情。其中有一部就是浏览器的渲
阅读全文
摘要：05-01.创建对象和原型链 #前言 #面向对象的三大特性 封装 继承 多态 #原型链的知识 原型链是面向对象的基础，是非常重要的部分。有以下几种知识： 创建对象有几种方法 原型、构造函数、实例、原型链 instanceof的原理 new 运算符 #创建对象有几种方法 #方式一：字面量 var ob
阅读全文
摘要：04-HTTP协议 一面中，如果有笔试，考HTTP协议的可能性较大。 #前言 一面要讲的内容： HTTP协议的主要特点 HTTP报文的组成部分 HTTP方法 get 和 post的区别 HTTP状态码 什么是持久连接 什么是管线化 二面要讲的内容； 缓存 CSRF攻击 #HTTP协议的主要特点 简单
阅读全文
摘要：03-DOM事件的总结 #前言 要学习事件的基础内容，请看先本人之前的基础文章： 《04-JavaScript基础/27-事件对象Event》 《04-JavaScript基础/28-事件捕获和事件冒泡》 《04-JavaScript基础/29-事件委托》 知识难度不大，只是大家需要系统地学习。 知
阅读全文
摘要：02-CSS盒模型及BFC #题目：谈一谈你对CSS盒模型的认识 专业的面试，一定会问 CSS 盒模型。对于这个题目，我们要回答一下几个方面： （1）基本概念：content、padding、margin。 （2）标准盒模型、IE盒模型的区别。不要漏说了IE盒模型，通过这个问题，可以筛选一部分人。
阅读全文
摘要：01-页面布局 #前端面试（前言） #面试基础 页面布局 CSS盒模型：是CSS的基石。 DOM事件 HTTP协议 面向对象 原型链：能说出原型链的始末 #面试进阶 通信：普通的通信、跨域通信 安全：CSRF、XSS。 算法 #回答问题时要注意的 （1）题干的要求真的是字面要求的这么简单吗？ （2）
阅读全文
摘要：征服JavaScript面试系列 | 众城翻译 征服 JavaScript 面试：什么是闭包？ 征服 JavaScript 面试：什么是函数组合 征服JavaScript面试系列：类继承和原型继承的区别 征服 JavaScript 面试：什么是纯函数 征服 JavaScript 面试: 什么是函数式
阅读全文
摘要：webpack #可以做的事情 代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布 #配套视频 #最终目的 webpack的基本配置 webpack的高级配置 webpack的优化策略 ast抽象语法树 webpack的Tapable 掌握webpack的流程 手写webpack
阅读全文
摘要：10-HTML基础回顾 #本文主要内容 html 的常见元素 html 元素的分类 html 元素的嵌套关系 html 元素的默认样式和 CSS Reset html 常见面试题 #html 的常见元素 html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。
阅读全文
摘要：09-HTML5详解（三） #Web 存储 随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，
阅读全文
摘要：08-HTML5详解（二） #本文主要内容 拖拽 历史 地理位置 全屏 #拖拽 如上图所示，我们可以拖拽博客园网站里的图片和超链接。 在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。 #1、拖拽元素 页
阅读全文
摘要：07-HTML5举例：简单的视频播放器 我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。 index.html的代码如下： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title>
阅读全文
摘要：06-HTML5详解 #HTML5的介绍 #Web 技术发展时间线 1991 HTML 1994 HTML2 1996 CSS1 + JavaScript 1997 HTML4 1998 CSS2 2000 XHTML1（严格的html） 2002 Tableless Web Design（表格布局
阅读全文
摘要：05-HTML标签图文详解（二） #本文主要内容 列表标签：<ul>、<ol>、<dl> 表格标签：<table> 框架标签及内嵌框架<iframe> 表单标签：<form> 多媒体标签 滚动字幕标签：<marquee> #列表标签 列表标签分为三种。 #1、无序列表<ul>，无序列表中的每一项是<
阅读全文
摘要：04-HTML标签图文详解（一） #一、排版标签 #注释标签 <!-- 注释 --> #段落标签<p> <p>This is a paragraph</p> <p>This is another paragraph</p> 属性： align="属性值"：对齐方式。属性值包括left center
阅读全文
摘要：03-初识HTML #本文主要内容 头标签 排版标签：<p>、 <div>、 <span>、<br> 、 <hr> 、 <center> 、 <pre> 字体标记：<h1>、 <font>、 <b>、 <u> 、<sup> 、<sub> 超链接 <a> 图片标签 <img&g
阅读全文
摘要：02-浏览器的介绍 #常见的浏览器 浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示： 我们重点需要学习的是 Chrome 浏览器。 #浏览器的市场占有份额 浏览器的市场占有份额：https://tongji.
阅读全文
摘要：01-认识Web和Web标准 #Web、网页、浏览器 #Web Web（World Wide Web）即全球广域网，也称为万维网。 我们常说的Web端就是网页端。 #网页 网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等
阅读全文
摘要：17-CSS3的常见边框汇总 #CSS3 常见边框汇总 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 边框</title> <style> body, ul, li, dl, dt, dd, h1
阅读全文
摘要：16-浏览器的兼容性问题 我们在div里放一个img，发现： 在html和html5中，div的长宽是不同的，后者的高度要超过几个像素。 比如说，下面这个是html的。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t
阅读全文
摘要：15-Sass入门 #Sass简介 大家都知道，js 中可以自定义发量，css 仅仅是一个标记语言，不是编程语言，因此不可以自定义发量、不可以引用等等。 面对这些问题，我们现在来引入 Sass，简单的说，他是 css 的升级版，可以自定义发量，可以有 if 语句，还可以嵌套等等，很神奇吧！那下面我们
阅读全文
摘要：14-CSS3属性详解：Web字体 #前言 开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。 支持程度比较好，甚至 IE 低版本的浏览器也能支持。 #字体的常见格式 不同浏览器所支持的字体格式
阅读全文
摘要：13-CSS3属性：Flex布局图文详解 #前言 CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对多个元素之间的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。 #flex 初体验 我们先来看看下面这个最简单的布局： 上面这张图中的布局
阅读全文
摘要：12-CSS3属性详解：动画详解 #前言 本文主要内容： 过渡：transition 2D 转换 transform 3D 转换 transform 动画：animation #过渡：transition transition的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状
阅读全文
摘要：11-CSS3属性详解（一） #前言 我们在上一篇文章中学习了CSS3的选择器，本文来学一下CSS3的一些属性。 本文主要内容： 文本 盒模型中的 box-sizing 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 #文本 #text-shadow：设置文本的阴影 格式举例： text-sh
阅读全文
摘要：10-CSS3选择器详解 #CSS3介绍 CSS3在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。 #CSS3的现状 浏览器支持程度不够好，有些需要添加私有前缀 移动端支持优于PC端 不断改进中 应用相对广泛 #应对的策略：渐进增强 （1）坚
阅读全文
摘要：09-CSS案例讲解：博雅互动 #前言 CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以博雅互动的官网首页举例。 #版心 首页的版心如下： 这里我们要普及一个概念，叫“版心”。版心是页面中主要内容所在的区域。 比如说，网站左上角的logo，设计图给出的左边距是143像素，此时，我们千万不要以
阅读全文
摘要：08-CSS属性：定位属性 CSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。 position: absolute; <!-- 绝对定位 --> position: relative; <!-- 相对定位 --> position: fixed; <!-- 固定定位 --> 下面逐一介绍
阅读全文
摘要：07-浮动.md #文本主要内容 标准文档流 标准文档流的特性 行内元素和块级元素 行内元素和块级元素的相互转换 浮动的性质 浮动的清除 浏览器的兼容性问题 浮动中margin相关 关于margin的IE6兼容问题 #标准文档流 宏观地讲，我们的web页面和photoshop等设计软件有本质的区别：
阅读全文
摘要：06-CSS盒模型详解 #盒子模型 #前言 盒子模型，英文即box model。无论是div、span、还是a都是盒子。 但是，图片、表单元素一律看作是文本，它们并不是盒子。这个很好理解，比如说，一张图片里并不能放东西，它自己就是自己的内容。 #盒子中的区域 一个盒子中主要的属性就5个：width、
阅读全文
摘要：05-CSS样式表的继承性和层叠性 #本文重点 CSS的继承性 CSS的层叠性 计算权重 权重问题大总结 CSS样式表的冲突的总结 权重问题深入 同一个标签，携带了多个类名 !important标记 #CSS的继承性 我们来看下面这样的代码，来引入继承性： 上方代码中，我们给div标签增加红色属性，
阅读全文
摘要：04-CSS选择器：伪类 #伪类（伪类选择器） 伪类：同一个标签，根据其不同的种状态，有不同的样式。这就叫做“伪类”。伪类用冒号来表示。 比如div是属于box类，这一点很明确，就是属于box类。但是a属于什么类？不明确。因为需要看用户点击前是什么状态，点击后是什么状态。所以，就叫做“伪类”。 #静
阅读全文
摘要：03-CSS样式表和选择器 #本文主要内容 CSS概述 CSS和HTML结合的三种方式：行内样式表、内嵌样式表、外部样式表 CSS四种基本选择器：标签选择器、类选择器、ID选择器、通用选择器 CSS几种扩展选择器：后代选择器、交集选择器、并集选择器 CSS样式优先级 #前言 #CSS 概述 CSS：
阅读全文
摘要：02-CSS属性：背景属性 #background 的常见背景属性 css2.1 中，常见的背景属性有以下几种：（经常用到，要记住） background-color:#ff99ff; 设置元素的背景颜色。 background-image:url(images/2.gif); 将图像设置为背景。
阅读全文
摘要：01-CSS属性：字体属性和文本属性 #本文重要内容 CSS的单位 字体属性 文本属性 定位属性：position、float、overflow等 #CSS的单位 html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。 CSS中的单位是必须要写的，因为它没有默认单位。
阅读全文
摘要：07-CSS面试题 #常见问题 #你是如何理解 HTML 语义化的？ 语义化：指对文本内容的结构化（内容语义化），选择合乎语义的标签（代码语义化）。 举例：段落用 p，边栏用 aside，主要内容用 main 标签。 好处： 便于开发者阅读和维护 有利于SEO：让浏览器的爬虫和辅助技术更好的解析，
阅读全文
摘要：06-CSS开发积累 #让flex盒子中的子元素们，居中 flex布局常用的三行代码： display: flex; justify-content: center; // 子元素在横轴的对齐方式 （左右居中） align-items: center; // 子元素在竖轴的对齐方式（上下居中） #让
阅读全文
摘要：05-CSS的一些小知识 #隐藏盒子的几种方式 隐藏盒子，有以下几种方式： （1）方式一： overflow：hidden; //隐藏盒子超出的部分 （2）方式二： display: none; 隐藏盒子，而且不占位置(用的最多) 比如，点击X，关闭京东首页上方的广告栏。 （3）方式三： visib
阅读全文
摘要：04-如何让一个元素水平垂直居中？ #前言 老板的手机收到一个红包，为什么红包没居中？ 如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。 你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场
阅读全文
摘要：03-网页设计和开发中，关于字体的常识 #前言 我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东西所困扰。 这篇文章，我们来讲一讲关于字体的常识。这些常识所涉及到的问题，有很强的可操作性，都是在实际业务中真实遇到的，都是需要开发同学和产品经理、设计师不断重复沟通的。 字体真的只是“系统默
阅读全文
摘要：02-CSS布局 #前言 #常见的布局属性 （1）display 确定元素的显示类型： block：块级元素。 inline：行内元素。 inline-block：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。 （2）positon 确定元素的位置： static：默认
阅读全文
摘要：01-CSS中的非布局样式 #前言 CSS中，有很多非布局样式，这些样式（属性）和与布局无关，包括： 字体、字重、颜色、大小、行高 背景、边框 滚动、换行 装饰性属性（粗体、斜体、下划线）等。 这篇文章，我们来对上面的部分样式做一个回顾。 #边框 如何用边框画一个三角形？详见《02-CSS基础/06
阅读全文
摘要：前言 css 进阶的主要内容如下。 #1、css 非布局样式 html 元素的分类和特性 css 选择器 css 常见属性（非布局样式） #2、css 布局相关 css 布局属性和组合解析 常见布局方案 三栏布局案例 #3、动画和效果 属于 css 中最出彩的内容。 多背景多投影特效 3D特效编写实
阅读全文
摘要：二十、综合案例 题目一： **1. ** 数组随机 描述，写randomArray函数，传递一个数组，传递一个数值，返回一个指定个数的随机的新数组，不允许有重复数据 用例： randomArray([ '小明', '小红', '小绿', '小白', '小黄', '小蓝', '小黑', '小青' ],
阅读全文
摘要：十九、综合案例 题目一： 封装一个函数equal(a1,a2),传入两个一维数组，判断两个数组是否包含相同的元素，如果相等，函数的返回值为true， 不相等，函数的返回值为false 1）例：arr1 = ['a', 'b'] arr2 =['b', 'a'],equal(arr1,arr2)的返回
阅读全文
摘要：十八、字符串 #18.1.认识字符串 #什么是字符串 字符串可以是引号中的任意文本。字符串可以由双引号（"）或单引号（'）表示 ，如 ‘hello’ ， “中国” #为什么 当我们需要对某些事物进行描述时，就需要用文本，如果不给文本加引号，它就成了非法字符。而且在实际开发过程中，我们会频繁的操作字符
阅读全文
摘要：十七、数组-3 #课堂案例 \1. 封装一个chunk(arr,size)的函数，把该数组arr按照指定的size分割成若干个数组块。 例如：chunk([1,2,3,4],2) 返回结果:[[1,2],[3,4]] chunk([1,2,3,4,5],3) 返回结果:[[1,2,3],[4,5]]
阅读全文
摘要：十六、数组-2 #4.3万能法：splice(): #4.3.1.删除功能 语法：arr.splice(index,num); //num表示删除的长度 功能：从下标index位置开始，删除num个元素；0 返回值：被删除项组成的数组; #4.3.2.添加功能 语法：**arr.spli
阅读全文
摘要：十四、对象 #1.初识对象 什么是对象？ 在js中，一切皆是对象。 对象，生活中可见和不可见的东西，在世界中，客观存在的都是一个对象。 桌子，笔记本，手机，人。 在日常生活中，我们是如何来描述这个对象的呢？ 描述手机 规格参数，静态的特征：如CPU，内存，摄像头，屏幕 提供的功能，动态的行为，打电话
阅读全文
摘要：十五、数组-1 #1.什么是数组 组：由多个成员构成的一个集体。 数组：数组是值的有序集合 值就是前面所讲过的这些数据（各种数据类型的都可以） 是数组中，每一个值（如100，’js’，true）都称之为一个元素。 每一个元素在数组中所处的位置，称之为索引。是数字来表示，从0开始。 数组的作用 可以存
阅读全文
摘要：13-1.函数的参数 函数的本质： ü 函数的作用，代码重用，编写一个函数，就是为了解决一类问题。 ü 函数每次调用，都有一个结果，那么结果和什么相关呢？y = x , y = x2，y = sin(x)。和我们给定的某一个值相关的。 这就涉及到参数的问题。 函数中的参数分为 形参：函数定义时小
阅读全文
摘要：11-1.引入（认识函数） 引入： 说起函数，其实我们并不陌生，在初中数学中我们就接触过函数；例如我们所学的 y = 2X+1 ; 这是一个二元一次方程，也是我们数字中的函数； 当我们每次输入一个X的值时，经过这个函数的运算，就会输出一个对应的y; 从这里我们可以看出：函数能够揭示一些规
阅读全文
摘要：11-1.跳转语句 在js中，有如下四种跳转语句： ü break ü continue break：结束本层循环 continue：跳过（结束）本次循环，继续进入下一次循环 就是两个关键字 #11-2.多重循环 在实际的开发中，经常需要用到多重循环，尤其是二重循环。 不管是while还是for都可
阅读全文
摘要：十、循环语句-1： 非常之重要。 作用：重复执行一段代码 ü while ü do...while ü for 它们的相同之处，都能够实现循环。 不同的地方，格式不一样，使用的场景略有不同。 #10-1.while循环 语法格式： 基本使用： while循环的使用细节： ü 在循环体中，一定要修
阅读全文
摘要：9-3.if...else if ...else语句 多分支的if语句，多选一。 格式： 基本使用 注意： ü 在js中，else和if要分开写，不能连写。 在js中，else...if的多分支，本质上是if...else的嵌套使用，只不过可以用简化的写法，让程序看起来要简洁一些。 #9-4、pro
阅读全文
摘要：1.什么是语句 概念：在JavaScript中表达式是短语，语句就是整句或命令。 作用：用来执行以使某件事发生 特征：用 ; 结尾 Js中语句的常见形式： ü 表达式语句 ü 复合语句 ü 声明语句 ü 条件语句 ü 循环语句 ü 跳转 #2.表达式语句 具有副作用的表达式式，就可以形成一个完整的语
阅读全文
摘要：(1).什么是表达式 任何有值的内容都是表达式 一个表达式会产生一个值,它可以放在任何需要一个值的地方,比如a=3中的3就是一个表达式，a=3整体也可以作为一个表达式。 常见表达式有如下几种： ü 原始表达式 ü 运算符构成的表达式 ü 对象和数组初始化表达式 ü 函数定义表达式 ü 调用表达式 ü
阅读全文
摘要：6.1.关系运算符 用来进行比较的。比较的结果通常是布尔值真和假。 ü ==：相等，只比较值是否相等 ü ：全等，比较值的同时比较数据类型是否相等 ü ！=：不相等，比较值是否不相等 ü ！==：不全等，比较值的同时比较数据类型是否不相等 ü 返回值：boolean型 相等运算符，使用两个=表示。
阅读全文
摘要：5.1.认识运算符 什么是运算符？ 运算符用于执行程序代码运算，会针对一个以上操作数项目来进行运算。 运算符的应用： 购物车：计算总价，数量； **Js ** 中有哪些运算符？ 算术运算符、赋值运算符、关系运算符、逻辑运算符、三元运算符 #5.2.如何理解运算符 ü 运算数的个数：一元、二元、三元
阅读全文
摘要：1、 转布尔类型 Boolean()：可以将任意类型的数据转为布尔类型； 语法：Boolean(值) 规则： #2、转字符型 1、 String():可以将任意类型的数据转为字符型 语法：String(值) 返回值：转换的内容加引号 2、 **toString()😗*除了null和undefi
阅读全文
摘要：3.1.什么是数据类型 a. 什么是数据类型？ 想从生活中出发： 考验智商的时刻到了： 1（只）+1（只）=1（双） 3（天）+4（天）=1（周） 5（月）+7（月）=1（年） 4（时）+9（时）=1（时） 6（盎司）+10（盎司）=1（磅） 在日常生活中，描述不同的东西，有不同的一些单位。 实际上
阅读全文
摘要：1.JavaScript词法结构 所谓词法结构是指一套基础性规则，用来描述如何使用这门语言来编写程序，包括如下几项： ü 字符集unicode ü 区分大小写 （true和TRUE） ü 忽略空白字符（空格、制表符和换行符） ü 注释 ü 标识符和关键字（保留字） 解释： 命名：英文命名； 空白：由
阅读全文
摘要：1.JavaScript简介 **JavaScript ** 是什么？（重点） Js是一种专门为网页交互设计的客户端（浏览器端）的脚本语言； Js与html和css有相似之处，都在浏览器端解析； Js和java,c#,php等一样，是一门真正的编程语言 javaScript简称js 小故事：js的创
阅读全文
摘要：一．购物车 效果图: 功能思路分析: 1. 面向对象框架 2. 模拟数据 1.多个店铺数组套对象 2.每个店铺多个商品，数组套对象 3. 渲染数据 先渲染店铺，在渲染店铺中嵌套渲染商品 4. 加购物车 \1. 点击加号按钮计算小计: 小计 = 数量 * 单价 \2. 调用合计方法 5. 减购物车 \
阅读全文
摘要：一．吸顶楼层 效果图: 功能思路分析: 1. 面向对象框架 2. 渲染导航 \1. 数据 \2. 对象结构的数据用for in遍历 \3. 渲染时将属性名设为锚点(a标签的href) 3. 渲染车系 \1. 车系分类是对象的数据结构，外层渲染用for in \2. 每个分类的内容是数组的数据结构，内
阅读全文
摘要：一．分页 效果图: 功能思路分析: 分页就是将所有的数据按指定条数分成若干份: 假如有24条数据，每页只显示5条，则需要分成Math.ceil(24 / 5) = 5页; 每次只显示1页数据，所以需要在总数据中利用slice截取出1页数据渲染 每一页的数据分布如下: 第一页: 显示1 - 5条数据
阅读全文
摘要：一．面向对象轮播 效果图： 功能思路分析: **1. ** 面向对象框架搭建 **2. ** 渲染数据 1.通过**map().join(‘’)**分别渲染导航和内容的数据 2.渲染时在导航菜单上挂载自定义属性保存下标 3.默认给第一个高亮( 添加类名 ) **3. ** 封装公用切换方法 1.先把
阅读全文
摘要：一．封装格式化日期 功能思路分析: \1. 第一个参数format表示指定的时间格式 \2. 第二个参数date为指定的时间(可以不传，默认当前时间) \3. 获取第二个参数中指定时间的年月日时分秒 \4. 将format中的格式利用replace（）方法替换 #二．表单验证 效果图: 功能思路分析
阅读全文
摘要：一．正则表达式简介 什么是正则表达式 正则表达式，也叫规则表达式, 是对字符串操作的一种逻辑公式。 为什么要使用正则？ 1、使用极简单的方式，去匹配字符串 2、速度快，代码少 3、在复杂的字符串中快速精准的匹配想要的字符 正则表达式创建: 字面量: var reg = / 规则/修饰符; 实例化:
阅读全文
摘要：一．软键盘拖拽 效果图:  功能思路分析: 1
阅读全文
摘要：一．对象 什么是对象: 一组无序的属性集合 创建对象两种方式: 对象字面量: var obj = {} 实例化: var obj = new Object() 对象取值: **[] ( ** 中括号)： 变量、数字等不规范的属性名 .（点） : 符合命名规范的属性名 删除对象的属性: delete
阅读全文
摘要：一．垃圾分类 效果图: 功能思路分析: 1. 鼠标按下 (1) 获取鼠标到元素的距离(e.offsetX) (2) 开启开关变量 (3) 获取事件源 (4) 记录垃圾初始位置 2. 鼠标移动 (1) 当开关变量为真时，修改垃圾的位置即的left和top (2) 垃圾位置 = 鼠标位置到页面位置
阅读全文
摘要：一．成绩分类 效果图: 功能思路分析: 1. 渲染数据 2. 鼠标按下开启拖拽 \1. 给成绩盒子绑定鼠标按下事件(mousedown)，用事件委托做多个标签的拖拽 \2. 开启控制拖拽的变量 \3. 获取鼠标到元素的距离（e.offsetX） \4. 获取事件源 \5. 克隆一个副本，设置定位，放
阅读全文
摘要：一．元素尺寸信息 元素.offsetWidth： 元素的外宽高 width + padding + border 元素.offsetHeight： 元素的外宽高 height + padding + border 元素.clientWidth： 元素的内宽高 width + padding 元素.c
阅读全文
摘要：一．事件流 事件流描述的是从页面中接收事件的顺序，目前主要有三个模型： #1. 事件冒泡: 事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素 #2. 事件捕获 不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相反 #3. DOM事件流 DOM2级事件规定事件流包括三
阅读全文
摘要：一．摇一摇 效果图: 功能思路分析: 1. 功能一:页面切换 (1) 点击第一页的设置按钮，从第一页切换到第二页 (2) 点击第二页的返回按钮，从第二页切换到第一页 (3) 第二页的标题发生改变后，第一页的标题也跟着改变 2. 功能二:抽奖 (1) 点击”摇”时，从第二个页面拿到所有的内容进行随机抽
阅读全文
摘要：一．折叠菜单 效果图: 功能思路分析: 功能一:数据渲染 \1. 模拟数据，一级数据为数组套对象的形式，二级数据为数组； \2. 先渲染一级数据，然后再嵌套渲染二级数据（map().join(‘’)）; 功能二:子菜单的显示隐藏 \1. 定义一个初始下标index = 0; \2. 给每一个一级菜单
阅读全文
摘要：一．简易购物车 效果图: 功能思路分析: 功能一:数量加减 \1. 找到所有的加号按钮，循环绑定点击事件。点击加号时让对应的数量+1 （找清楚加号和数量的关系，让数量标签的内容++） \2. 找到所有的减号按钮，循环绑定点击事件。点击减号时让对应的数量-1 （找清楚减号和数量的关系，让数量标签的内容
阅读全文
摘要：语法: 元素.getAttribute(‘自定义属性名’) 功能：获取自定义属性 语法: 元素.setAttribute(‘自定义属性名’,’值’) 功能：设置自定义属性 语法: 元素.removeAttribute(‘自定义属性名’) 功能：删除自定义属性 #一．课堂案例 #1. 标签库 效果图:
阅读全文
摘要：语法：parentNode.appendChild(child) 功能：向父节点的子节点列表的末尾添加新的子节点 语法：parentNode.removeChild(child) 功能：从子节点列表中删除某个节点 语法：document.createElement(‘标签名’) 功能：创建元素节点
阅读全文
摘要：一．DOM简介 Document Object Model 文档对象模型 DOM包含了所有HTML元素的属性和方法，以及访问他们的方式； #二．DOM节点 #1. 什么是节点？ HTML中所有的元素都是一个节点 整个文档是文档节点 所有的标签都是元素节点 标签内的属性是属性节点 标签内的文本是文本
阅读全文
摘要：一．初识DOM 1．什么是DOM？为什么学习DOM 2．DOM是实现js在网页实现交互的关键环节，我们的js代码就是通过DOM的方法来实现对于html内容的操作。 3．认识DOM实现了js和网页结合的原理； 4．认识DOMTREE;认识DOM的分类； 5．简单获取元素，简单事件绑定； 6．认识DOM
阅读全文
摘要：Zepto 的介绍 #什么是 Zepto zepto是轻量级的JavaScript库，专门为移动端定制的框架。 与jquery有着类似的API，俗称：会jquery就会用zepto #zepto的特点 针对移动端 轻量级，压缩版本只有8kb左右 响应，执行快 语法、API大部分同jquery一样，学
阅读全文
摘要：jQuery 设置宽度和高度 宽度操作： $(selector).height(); //不带参数表示获取高度 $(selector).height(200); //带参数表示设置高度 宽度操作： $(selector).width(); //不带参数表示获取宽度 $(selector).width
阅读全文
摘要：文本主要内容 样式和类操作 节点操作 #样式操作和类操作 作用：设置或获取元素的样式属性值。 #样式操作 1、设置样式： //设置单个样式： css(属性，值); $("div").css("background-color","red"); //设置多个样式： css(json); $("div"
阅读全文
摘要：前言 jQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了自定义动画的功能。 #显示动画 方式一： $("div").show(); 解释：无参数，表示让指定的元素直接显示出来。其实这个方法的底层就是通过display: block;实现的。 方式二： $(
阅读全文
摘要：引入 jQuery 的原因 在用 js 写代码时，会遇到一些问题： window.onload 事件有事件覆盖的问题，因此只能写一个事件。 代码容错性差。 浏览器兼容性问题。 书写很繁琐，代码量多。 代码很乱，各个页面到处都是。 动画效果很难实现。 如下图所示： jQuery的出现，可以解决以上问题
阅读全文
摘要：一、什么是better-scroll better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件 #滚动原理 1. 与浏览器滚动原理一致，父容器高度固定，子元素内容撑开，必须产生滚动条，才能滚动。 2. better-scroll只处理容器（wrapper）的第一个子元素
阅读全文
摘要：一、什么是swiper 开源、免费、强大的触摸滑动插件 Swiper常用于移动端网站的内容触摸滑动 Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果 #二、如何使用 1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件 <link rel
阅读全文
摘要：一、折线图 1. 获取画布画笔 2. 封装画线的方法 3. 画坐标轴 4. 循环数据画横轴 > 4.1 画刻度 > 4.2 刻度文字 > 4.3 画折线 > 4.4 画点 5. 纵轴刻度文字 #二、柱状图 1. 获取画布画笔 2. 封装画线的方法 3. 画坐标轴 4. 循环数据画横轴 > 4.1 画
阅读全文
摘要：一、canvas画布 Canvas是HTML5中新出的一个元素，开发者可以通过JS脚本动态绘制图像。 #1. 创建canvas画布 在页面中创建canvas标签,并设置其id和宽高 (不要通过css设置,会有bug) <canvas id="myCanvas" width="500" height=
阅读全文
摘要：一、音频audio、视频video #1. 如何使用 <audio src="horse.mp3" controls loop="loop" autoplay="autoplay"> <source src="horse.ogg" type="audio/ogg"> <source src="hor
阅读全文
摘要：一、file上传文件 <input type="file" multiple> multiple 设置多选 通过change事件监听是否上传文件 files 属性获取上传的文件集合 #二、FileReader接口 用来把文件读入内存，并且读取文件中的数据。 1. 创建读取文件对象 var f = n
阅读全文
摘要：拖放事件 #1. 三个对象 源对象 -- 被拖放的元素 过程对象 -- 经过的元素 目标对象 -- 到达的元素 #2. 源对象中的事件 要想让某个元素可以拖拽需要设置draggable="true"大多数的标签该属性默认值是false，但是img标签和a标签的draggable属性默认是true d
阅读全文
摘要：一、Cookie #1. 什么是 Cookie？ Cookie 是一些数据, 存储于你电脑上的文本文件中。 cookie最大存储：4kb 当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。 Cookie 的作用就是用于解决 "如何记录客户端的用户信息": 当用户
阅读全文
摘要：一、touch事件 PC端的鼠标事件无法满足移动设备触摸屏的特点， touch事件是移动端特有的 #1. 事件类型 touchstart 开始触摸 touchmove 手指滑动 touchend 触摸结束 touchcancel 触摸意外中断 (如:前女友的来电) #2. touch事件的基本用法
阅读全文
摘要：一、transform 转换属性 #1. translate位移 transform : translate(50px,100px); //把元素水平移动 50 像素，垂直移动 100 像素 transform : translateX(50px); //把元素水平移动 50 像素 transfor
阅读全文
摘要：一、rem布局 rem是相对于根元素的字体大小单位。 假设html的字体大小为16px,那么1rem = 16px; 一旦根元素html定义的font-size变化,整个页面中运用到的rem都会随之变化。 #1. 100等分法 1. html的font-size设置为100px -- 便于换算 2.
阅读全文
摘要：一、弹性布局(flex布局) #1. Flex 布局是什么？ Flex 是 Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 .box{ display: flex; } 行内元素也可以使用 Flex 布局。 .box{
阅读全文
摘要：一、流式布局(百分比布局) 通过高度定死宽度百分比来适应不同的屏幕 #1. 经典的流式布局 左侧固定,右侧自适应 * { box-sizing: border-box; } .box { width: 100%; height: 700px; position: relative; } .right
阅读全文
摘要：一、什么是SASS SASS是一种强化CSS的辅助工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单可维护。 #二、安装和使用（VS Code中） #1.安装 下载扩展文件 ==Easy Sass== 在用户设置中加入以下代码既可 "easysass.targetDir"
阅读全文
摘要：node是什么? 一句话: 服务器 什么是服务器: 一句话: 客户端访问 并且能够响应 为什么: 一句话: 执行效率高 #安装 #控制台 切换磁盘: e: 改变目录: cd 目录 cd.. 上一层目录 运行node文件: node 文件名.js 自动补全: tab键 上一次/下一次代码:
阅读全文
摘要：npm的初步使用 #一: npm的介绍 node package manager : node的包的管理器 伴随node的安装而安装 npm -v 如果出现版本号 说明安装好了 通过命令执行 #二: npm的安装包 第一步:创建一个package.json的文件 npm init package n
阅读全文
摘要：什么是babel babel是一款基于node开发的工具，其功能是对es6的新语法和新特性进行转码。 #babel7的改进 babel7把各个功能进行了拆分到了不同的包中，所以我们需要对各个包的功能了解，比较常用的有以下 @babel/cli : 提供了命令 babel @babel/core :
阅读全文
摘要：什么是promise 简单回答: 一种异步的解决方案 回顾一下什么是异步 事件 / setTimeout 异步执行的时机 同步->异步微任务->GUI渲染->异步宏任务 #为什么会有Promise 传统的异步解决方案: 回调 回调: 顾名思义 回头调用 function a (fn:函数
阅读全文
摘要：什么是面向对象 机器语言->汇编语言->低级语言(面向过程)->高级语言(面向对象)->框架->api 面向对象 : 把一些公共的东西封装起来 , 通过new出来的对象直接调用就行 #面向对象的知识点-call #类和构造函数 # #改变this指向 #call 是什么 function fn(..
阅读全文
摘要：1 [了解nodejs] 1.1 [node简介] 1.2 [node的特点] 1.3 [如何安装] 1.4 [如何运行] 2 [es6--基本语法] 2.1 [变量的解构赋值] 2.2 [解构赋值] 2.3 [字符串的扩展] 3 [es6--方法的扩展] 3.1 [数值] 3.2 [函数] 3.3
阅读全文
摘要：第二十单元(vux的配置中模块modules的用法) #课程目标 1.什么是module？ 2.怎么用module？ 3.样板代码目录结构 #知识点 #1.modules 在Vue中State使用是单一状态树结构，应该的所有的状态都放在state里面，如果项目比较复杂，那state是一个很大的对象，
阅读全文
摘要：第十九单元(mapState mapMutations等方法的使用) #课程目标 1.熟练使用mapState 2.熟练使用mapGetters 3.熟练使用mapActions 4.熟练使用mapMutations #知识点 首先在讲解用法前我们先创建一个仓库实例 import Vue from
阅读全文
摘要：第十八单元(单向数据流 vuex状态管理) #课程目标 1.理解什么是数据管理模式 2.什么是vuex 3.什么时候使用vuex 4.vuex安装及工作原理 5.vuex语法 #知识点 1.首先来看下图示例，当我们想实现A->D组件的通信时 需要A先跟B通信，B跟C通信，C再跟D通信，过程很繁琐，数
阅读全文
摘要：第十七单元(电商项目逻辑处理，电商划分) #课程目标 1.什么是电商项目 2.什么是B2B，B2C，C2C模式，常见的电商项目 3.移动端电商项目常见的逻辑处理 4.【知识扩展】传统系统架构及分布式系统架构 #知识点 #1.电子商务项目 通过电子商务模式（互联网）为主导，线上线下相结合的业务模式。
阅读全文
摘要：第十六单元(element-ui vue-lazyload 等常用插件) #课程目标 1、掌握插件的引入方式 2、精通UI框架 3、掌握前端常见的几种效果实现 #知识点 一、elementUI的使用 1、官网：https://element.eleme.cn/#/zh-CN/ elementUI
阅读全文
摘要：第十五单元(熟练使用vue-router插件) #课程目标 1、掌握路由嵌套 2、掌握导航守卫 #知识点 #一、路由嵌套 很多时候，我们会在一个视口中实现局部页面的切换。这时候就需要到了嵌套路由。 也就是说一个被渲染组件同样可以包含自己的嵌套 <router-view>。 const router
阅读全文
摘要：第十四单元(认识单页面应用，理解vue-router的基本用法) #课程目标 1、了解单页应用与多页应用以及各自的优缺点 2、掌握路由如何实现单页应用 3、精通路由的基本语法 #知识点 #一、单页应用与多页应用 1、多页应用（MPA） 传统的应用形式，即每一次页面跳转的时候，后台服务器都会给返回一个
阅读全文
摘要：第十三单元(指令的作用，指令的钩子函数) #课程目标 1.了解自定义指令的应用场景 2.掌握自定义全局和局部指令 3.掌握指令的钩子函数 #知识点 #一、认识自定义指令 除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。 举例说明：当页面加载时，inpu
阅读全文
摘要：第十二单元(vue中过渡效果的实现) #课程目标 熟练掌握transition组件的用法 熟练使用transition组件做过渡特效 熟练使用transition组件做动画特效 了解使用transition组件自定义过渡的类名 #知识点 #1.过渡简介 Vue 在插入、更新或者移除 DOM 时，提供
阅读全文
摘要：第十一单元(内置组件) #课程目标 熟练掌握component组件的用法 熟练使用keep-alive组件 #知识点 #1.component组件 component是vue的一个内置组件，作用是：配合is动态渲染组件 <component :is='组件'></component> 1 不同组件之
阅读全文
摘要：第十单元(动态组件 keep-alive（钩子函数） 递归组件（name） 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件，以及相应的钩子函数 熟练掌握递归组件，以及递归组件的实现原理 了解组件的命名约定 #知识点 #1.动态组件 首先得明白什么叫做动态组件
阅读全文
摘要：第九单元(非父子通信 events 单向数据流) #课程目标 了解非父子组件通信的原理，熟练实现非父子组件间的通信（重点） 了解单向数据流的含义，并且明白单向数据流的好处 #知识点 #1.非父子组件间的通信 在昨天我们已经学习了父子间通信，子父间通信的实现方式，那么如果两个组件不是父子组件那么如
阅读全文
摘要：第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参（重点） 掌握props属性的使用以及prop验证的常用规则 掌握使用自定义事件让子组件给父组件传参（重点） 了解v-model在组件中的绑定原理，掌
阅读全文
摘要：第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标 掌握安装 vue-cli 命令行工具的方法，掌握使用命令行在本地搭建开发环境，使用命令行在本地运行项目。 精通项目结构，以及各文件和文件夹的作用。 精通单文件组件的文件组织形式，模板、js
阅读全文
摘要：第六单元(vue的实例和组件-vue实例的相关属性和方法-解释vue的原理-创建vue的组件) #课程目标 掌握vue实例的相关属性和方法的含义和使用 了解vue的数据响应原理 熟悉创建组件，了解全局组件与局部组件的区别，掌握组件的相关注意事项 #知识点 #1.vue实例的相关属性和方法ß #1.1
阅读全文
摘要：第五单元(v-if和v-show以及v-for的灵活应用 watch以及computed的区别 （常见效果） #课程目标 精通 v-if v-else v-else-if 的使用 精通 v-show 和 v-if 的区别 精通 v-for 的使用 精通 computed 的使用 精通 watch 的
阅读全文
摘要：第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data 用法及特点 掌握 vue 基本指令的用法 掌握 methods 用法 #知识点 直接用 <scri
阅读全文
摘要：第三单元(webpack的应用-能根据具体的需求构建对应的开发环境) #课程目标 理解什么是单页面应用。 掌握单页面和多页面的差异。 了解单页面的实现原理。 掌握模块化的方式实现webpack配置，区分线上环境和开发环境，能够快速切换对应的配置。 #知识点 单页面应用（spa），是仅仅使用一个htm
阅读全文
摘要：第二单元(webpack的配置-学习webpack的常用配置) #课程目标 掌握webpack的常用配置 掌握如何根据实际的需求修改webpack的对应配置 了解webpack-dev-server的意义和使用 掌握webpack-dev-server的用法 #知识点 webpack的配置项 ent
阅读全文
摘要：第一单元(初识webpack-webpack的功能-webpack的初步使用) #课程目标 了解webpack出现的意义，以及webpack解决的前端问题 掌握webpack的使用流程和步骤 掌握webpack相关的命令 了解webpack的打包原理 #知识点 webpack是node的一个包，该包
阅读全文
摘要：第X单元(redux) #课程目标 理解redux解决的问题，理解redux的工作原理 熟练掌握redux的api 熟练掌握redux和react组件之间的通信（react-redux） 把redux应用个在实际的案例中 #知识点 #授课思路 #案例和作业
阅读全文
摘要：第二十单元(react+react-router-dom+redux综合案例2) #课程目标 #知识点 #授课思路 #案例和作业
阅读全文
摘要：第十九单元(react+react-router-dom+redux综合案例1) #课程目标 复习 综合练习 实战能力 #知识点 react react-router redux #授课思路 #案例和作业 电商首页 电商购物车添加 电商购物车编辑
阅读全文
摘要：第十八单元(redux中间件redux-thunk,redux工程目录的样板代码，规范目录结构) #课程目标 中间件：中间件增强redux的可扩展性，实现功能复用的目的。 redux-thunk异步逻辑处理 redux-thunk的使用规范 #知识点 applyMiddleware 控制反转，act
阅读全文
摘要：第十七单元(redux和组件之间的通信，react-redux的相关api的用法) #课程目标 什么是redux-redux react-redux的作用是什么 react-redux如何应用 #知识点 redux与react结合起来的工具 当一个react项目组件层级越来越深，页面越来越多的时候，
阅读全文
摘要：第十六单元(redux的认识，redux相关api的掌握) #课程目标 掌握组件化框架实现组件之间传参的几种方式，并了解两个没有任何关系组件之间通信的通点 了解为了解决上述通点诞生的flux架构 了解单向数据流及在redux结合react组件之间的数据流向 掌握redux的三大原则，单一数据源，st
阅读全文
摘要：第十五单元(react路由的封装，以及路由数据的提取) #课程目标 熟悉react路由组件及路由传参，封装路由组件能够处理路由表 对多级路由能够实现封装通用路由传递逻辑，实现多级路由的递归传参 对复杂的react应用，能够提取路由表并使用路由组件简化路由配置 在路由组件中实现路由拦截功能 #知识点
阅读全文
摘要：第十四单元(react路由-react路由的跳转以及路由信息) #课程目标 理解前端单页面应用与多页面应用的优缺点 理解react路由是前端单页面应用的核心 会使用react路由配置前端单页面应用框架及实现页面之间的跳转 认识react路由元信息，学会从react路由元信息中拿到所需要的路由信息 会
阅读全文
摘要：第十三单元(react路由-react路由的跳转以及路由信息) #课程目标 熟悉掌握路由的配置 熟悉掌握跳转路由的方式 熟悉掌握路由跳转传参的方式 可以根据对其的理解封装一个类似Vue的router-view #知识点 路由的配置属性 路由配置属性主要有 path、name、component 等。
阅读全文
摘要：第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组件及其属性搭建项目路由 #知识点 路由的由来 路由就是指随着浏览器地址栏的变化，展示给用户的页面也不
阅读全文
摘要：第十一单元(受控组件和非受控组件-实现类似于vue双向绑定的功能) #课程目标 理解因为react的单向数据流 理解表单组件会因为react数据流变的不好维护 理解受控组件与非受控组件的实质区别 理解受控组件在实际项目中的运用场景 利用受控组件完成一个表单控件的封装 #知识点 react单向数据流
阅读全文
摘要：第十单元(children的深入用法-React.Children对象上的方法) #课程目标 理解什么是children 掌握React.Children对象上的方法 #知识点 什么是children 上图中我们看到了，我们之前学过的React.createElement方法，现在大家发现jsx的内
阅读全文
摘要：第九单元(propTypes验证) #课程目标 理解类型验证的必要性 灵活掌握类型验证的使用 #知识点 在给react组件传属性的的时候，我们可以定义属性的类型，此时我们需要下载prop-types这个库。 安装prop-types npm install prop-types -S 1 引入和使用
阅读全文
摘要：课程目标 理解纯函数 熟练掌握组件性能优化的几种技巧 pureComponent和Component的区别 #知识点 一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数 函数的返回结果只依赖于它的参数 函数执行过程里面没有副作用 const a = 1 co
阅读全文
摘要：第七单元(组件的高级用法-组件的组合（children的用法）-高阶组件-封装组件) #受控组件 简而言之，就是受到状态state控制的表单，表单的值改变则state值也改变，受控组件必须要搭配onchange方法，否则不能使用 class App extends Component{ state=
阅读全文
摘要：第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 4.掌握嵌套组件传值方法 context #知识点 1.组件和组件之间的关系 （1）父子 props
阅读全文
摘要：第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 知识点 在原生的dom模型上触发的事件会进行事件传递。而所谓的事件传递指的是当在A元素上触发某一事件
阅读全文
摘要：第四单元(ref与DOM-findDomNode-unmountComponentAtNode) #课程目标 理解react的框架使用中，真实dom存在的意义。 使用真实dom和使用虚拟dom的场景。 灵活掌握并能够合理使用操作真实dom的方法。 #知识点 react中提供了ref这个属性来获取原生
阅读全文
摘要：第三单元(react组件的生命周期) #课程目标 灵活掌握react组件的生命周期以及组件的活动过程。 能够灵活使用react的生命周期 #知识点 react的类组件的生命周期分为三个阶段 实例期 存在期 销毁期 实例期在组件第一次被实例化的时候触发一次，在这个过程中会执行的生命周期函数如下： co
阅读全文
摘要：第二单元(react的组件-state-props-setState) 课程目标 理解组件和组件的创建、以及能够根据实际场景去划分合理的组件。 理解并且能够灵活的应用组件中的state、props。 可以使用组件去实现各种前端交互。 知识点 组件的定义：组件能够表示一块视图的结构表现以及逻辑交互，并
阅读全文
摘要：第一单元(react简介) 课程目标 理解react这个框架在前端开发中的地位 理解react诞生的原因和意义（react是一个用于快速构建前端视图的javaScript库） 理解什么是虚拟dom、原生js模拟出虚拟dom的表示，模拟出创建虚拟dom的方法，模拟出虚拟dom转换成真实dom的方法。
阅读全文
摘要：一、js 数据类型 javaScritp的数据类型有：数值类型、字符串类型、布尔类型、null、undefined、对象(数组、正则表达式、日期、函数)，大致分成两种：基本数据类型和引用数据类型。 （1）基本数据类型：数值、字符串、布尔、null、undefined （值类型）、symbol(ES6
阅读全文
摘要：一、脚手架(可以快速生成项目) 1、新建一个项目文件夹，使用如下命令： 2、npm init egg --type=simple 3、npm i 它会根据package.json里记录的所需包进行快速安装 4、npm run dev 启动命令 ：默认地址为http://localhost:7001
阅读全文
摘要：Symbol的含义？ ES6（2015） 引入了第七种原始数据类型Symbol，Symbol英文文意思为 符号、象征、标记、记号，在 js 中更确切的翻译应该为独一无二的 Symbol的使用？ Symbol 值通过Symbol函数生成，这里需要注意Symbol函数前不能使用new命令,切记，切记，切
阅读全文
浙公网安备 33010602011771号