- 博客(143)
- 收藏
- 关注
RSS订阅原创 async函数、await函数、promise、then四者的关系
async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法1.特点await后面接一个会return new promise的函数并执行它await只能放在async函数里2.案例function 摇色子(){ return new Promise((resolve, reject)=>{ let sino = parseInt(Math.random() * 6 +1) setTimeout(()=>{
2021-05-22 15:44:04
3580
原创 什么是异步？为什么异步不能return
什么是异步？JS中的异步操作：1、定时器都是异步操作2、事件绑定都是异步操作3、AJAX中一般我们都采取异步操作（也可以同步）4、回调函数可以理解为异步（不是严谨的异步操作）剩下的都是同步处理为什么异步不能return原博客编译器进入函数时是同步的，进入函数到打印出 ‘我是同步’ ，这个过程都还是同步在主线程执行的遇到setTimeout的时候，认定为异步操作就得把这段代码放到任务队列中执行主线程是不等人的，都说主线程是同步的嘛，所以主线程解析async函数到结尾都没有遇到r
2021-05-22 15:17:26
2213
1
原创 0-8 【React】 Hooks（所有API）
1.useState在React的函数组件中，默认只有属性没有状态注意事项1：不可局部更新如果state是一个对象，不能部分setState，因为setState不会帮我们合并属性解决：要先把整个对象拷贝过来（...use），然后再局部修改覆盖它setUser({ ...user, name:'Jack'})注意事项2 ：地址要变在set的之后不能set之前的对象，地址要变，不然React发现地址没变就认为数据也没变事项3：useState初始值可以写成函数好处：减少多.
2021-05-21 12:48:33
502
1
原创 0-7【React】Hooks 原理解析（useState、useRef、useContext）
1.useState执行setN的时候：n会变吗？App()会重新执行吗？1.n不会变，setN不会改变n2.App()会重新执行，会产生一个新的n注意：旧n和新n同时存在这就是React的思想，永远产生新的对象，不改变旧值App()重新执行，那么useState(0)的时候，n每次的值会不同吗?答：会。1.1 分析setN1.setN 一定会修改数据x，将n+1存入x2.setN 一定会触发 <App />重新渲染（re-render）useStateuseS
2021-05-20 19:58:26
1116
原创 0-6 React函数组件（useState、useEffect、自定义Hook组件）
目录创建方式没有state怎么办没有生命周期怎么办useState的原理1.创建方式就是创建一个函数组件只是说明能和别人组合起来const Hello = (props)=>{ return <div>{props.message}</div>}//等价于const Hello = props => <div>{props.message}</div>//等价于function Hello(props) {
2021-05-20 17:56:29
776
原创 0-5【React】Class 组件（生命周期）
生命周期let div = document.createElement('div')//这是div的 create/construct 过程div.textContent='hi'//这是初始化state（这不是生命周期）document.body.appendChild(div)//这是div的 mount 过程div.textContent='hi2'//这是div的 update过程div.remove()//这是div的 unmount 过程React组件也有这些过程，可
2021-05-20 13:18:45
570
2
原创 0-4【React】Class 组件（ES6创建、Props、state）
1.两种创建class组件的方式ES5（过时）由于ES5不支持classES6 方式import React from 'react'class B extends React.Component{ constructor(props){ //从父组件接收来的，会把props放到this上面 super(props) } render(){ return ( <div>hi</div> ) }}//B作为组.
2021-05-20 11:30:57
652
1
原创 对象里的this一般指什么
来自：JavaScript中的this的指代对象详解在JavaScript中，this是一个特殊对象，作为一个单独的指针，在不同的情况下指向不同的位置。1.在全局作用域时这个是最好理解的，即在全局作用域下this指向window，也就是在全局作用域下，this与window是等价的console.log(this === window); //true由于在此时，this等价于window，所以我们在全局作用域声明的变量也会指向this：var x = 1;console.log(
2021-05-20 08:54:56
1564
原创 this
遇到this，就把所有的函数调用改为call=记住this是参数如果是对象后面接函数，那么call后面的第一个参数是对象如：a.sayName() => a.sayName.call(a) => this为a如果直接是一个函数，那么就默认为 window.fn，那么第一个参数this就是window如：sayName() => wimdow.sayName.call(window) => this为windowJS中加不加括号都是一样的如：(a.sayName)(
2021-05-19 22:47:24
177
原创 01-3 React组件（类组件、函数组件、props、state）
目录类组件和函数组件如何使用 props 和 state外部数据和内部数据如何绑定事件复习this1.组件 component1.1 Element 和 componentconst div = React.createElement('div',...)这是一个React元素（d小写）const Div = ()=> React.createElement('div',...)这是一个React组件（D大写）1.2 什么是组件能跟其他物件组合起来的物件，就是组件
2021-05-19 21:17:08
2213
2
原创 01-2 【React】React起手式（JSX、判断、循环）
JSXX表示扩展，JSX就是JS扩展版1.vue-loader和react-loaderVue有vue-loader1..vue文件里写<template>、<script>、<style>2.通过vue-loader变成一个构造选项（组件）React有 JSX1.react-loader就是 babel-loader2.而babel-loader被webpack内置了2.使用JSX方法一：CDN（不用这个，效率太低）1.标签就写成标签，放
2021-05-19 16:32:28
994
1
原创 01-1【React】React起手式（引入、函数延迟执行、React元素）
目录如何引入React函数的本质——延迟JSX的用法条件判断与循环1.如何引入React1.1 CDN引入(很麻烦,没人用)操作1.需要引入两个库,注意顺序2.react、react-dom—react.development.js—react-dom.development.js3.引入这两个库之后就可以使用自己的JS文件项目默认可以使用parcel来运行// 对象console.log(window.React);// 函数console.log(win
2021-05-19 15:25:22
1683
1
原创 0-12 Vue 动画原理（列表过渡）
列表过渡常用怎么渲染整个列表，比如对：v-for列表进行渲染答：使用<transition-group>组件1.区别于transition不同于 <transition>它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag attribute 更换为其他元素。过渡模式不可用，因为我们不再相互切换特有的元素。也就是mode=out-in内部元素总是需要提供唯一的 key attribute 值。如果key没有提供，或者不是唯一就会
2021-05-18 23:37:33
160
原创 0-11 Vue 动画原理（transition过渡、animation、velocity、多元素动画）
1.轮播组件 slides淘宝首页的广告位：轮播轮播最难的点：最后一个到第一变化Vue动画方式1 - CSS transition官方文档CSS过渡1.做一个简单的动画需要哪几布给元素外添加一个transition标签<transition name="fade">标签元素</transition>在CSS里面写一个以fade开头的一系列的类.fade-enter-active需要给变化元素初始值（有些属性有默认值就不需要初始值）添加一个事件监听
2021-05-18 23:00:07
634
1
原创 Vue Router - 前端路由实现思路（三种模式：hash、history、memory）
1.路由是什么搞清楚这几个概念：路由分发路由表默认路由如果没有#n，就给一个默认值number = number || 1;404 路由 / 保底路由如果用户输入了错误路径，就给一个404页面，保证用户总是能够看到一个页面嵌套路由1.1 路由器如果家里有1个即以上的人要上网，就需要一个路由器上网路由1.用户上网连接路由器，路由器看你想连哪里，就会把信号包发给相应的地方（百度、抖音、腾讯等）2.分发：分别发送到各个地方3.路由就是分发请求，路由器就是分发请求的东西4.路
2021-05-18 18:34:22
3834
2
原创 0-0 Vue：表单与v-model
官方文档1.v-model指令v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。双向绑定1.修改内存中的message，UI会自动变化（改了内存，页面会变化）2.如果用户修改了input内容，那么内存中message也会变化<template> <div id="app"> //双向绑定 <input v-model="message" plac.
2021-05-18 14:23:42
2277
原创 0-9 Vue进阶属性（provide 和 inject）
一、provide 和 inject提供和注入1.举例换肤class后面两个引号1.在div上面绑定了一个class2." "：是表示里面内容是class的值，这不是JS的双引号，是XML的双引号，中间有空格，如果删掉断句就错了3.``:是JS的双引号，说明里面有变量，删掉就不是JS字符串了含义是：div有两个class，一个是app，还有一个是theme-${thiemeName}theme-${thiemeName}：theme-bule、theme-red所谓换肤，就是改di
2021-05-18 12:31:28
236
原创 0-8 Vue进阶属性（directives、mixins、extends）
1.Directives 指令内置指令v-if、v-for、v-show、v-html等自定义指令自己造出 v-x，点击即出现一个x1.1 自定义指令一、声明一个全局指令Vue.directive('x',directiveOptions)就可以在任何组件里使用 v-x<img v-x alt="Vue logo" src="./assets/logo.png" width="25%">// 注册一个全局自定义指令 `v-focus`Vue.directive('f
2021-05-17 17:20:53
604
1
原创 0-7 Vue全解：指令、修饰符（.sync）
指令 Direction1.什么是指令以 v- 开头的东西就是指令1.和默认属性区分开2.只有两个缩写不用加 v-事件：@绑定：:语法1.v-指令名:参数=值，如： v-on:click=add2.如果值里没有特殊字符，则可以不加引号3.有些指令没有参数和值，如 v-pre（不对花括号进行操作）4.有些指令没有值，如 v-on:click.prevent（阻止默认事件）<a @click.prevent href="https://www.baidu.com">baid
2021-05-16 18:55:27
351
1
原创 0-6 Vue全解：模板、指令
Vue模板语法1.模板 template 三种写法一、Vue完整版，写在HTML里//写在HTML里<div id=xxx> {{n}} //被替换 <button @click="add">+1</button>//被理解，然后添加一个事件监听</div>new Vue({ el: '#xxx', //传一个选择器 data:{n:0}, //data 可以改成函数 methods:{ add(){} }})
2021-05-16 17:21:16
246
1
原创 computed和watch的区别
1.computed就是计算属性，watch就是监听2.computed就是用来计算出一个值，第一个是这个值在调用的时候不需要加括号，当属性使用；第二是它根据依赖会自动缓存，依赖不变computed的值就不会重新计算3.watch如果一个属性变化了，那么就执行一个函数，它有两个选项，第一个是immediate，表示在第一次渲染的时候是否执行这个函数，第二个是deep，监听一个对象的时候是否要看对象里面属性的变化。...
2021-05-16 11:11:08
8639
原创 0-3 Vue构造选项（computed、watch）
进阶属性1.响应式原理options.data1.会被 Vue 监听2.会被 Vue 实例代理3.每次对 data 的读写都会被 Vue 监控4.Vue 会在data 变化时 更新 UI那么：data变化时除了更新UI还能做点什么？2.computed-计算属性用途1.被计算出来的属性就是计算属性2.当属性变化时，重新计算3.用于：用户名展示4.用于：列表展示计算属性：可以让是其他属性计算而来的结果变成一个属性1.默认会去读这个属性的返回值2.列表选择展示：是通过列表u
2021-05-16 11:02:39
238
原创 0-4 Vue：数据响应式（响应式、set、篡改API）
1.什么是响应式若物体能对外界的刺激作出反应，它就是响应式的2.Vue的data是响应式const vm = new Vue({data:{n:0}})如果修改 vm.n，那么UI中的n就会来响应我Vue2通过 Object.defineProperty来实现数据响应式3.响应式网页如果改变窗口大小，网页内容就会做出响应，那就是响应式网页4.Vue的data有bugObject.defineProperty 的问题1.Object.defineProperty(obj,'n
2021-05-15 18:23:00
611
5
原创 0-4 Vue：数据响应式（data、Object.defineProperty、getter、setter、代理、监控）
Vue对data做了什么？1.getter和setterlet obj = { 姓:'高', 名:'圆圆', get 姓名(){ return this.姓 + this.名 }, set 姓名(xxx){ this.姓 = xxx[0] this.名 = xxx.substring(1) }}obj.姓名 = '刘诗诗'console.log('需求一：'+ obj2.姓名)//需求一：高圆圆console.log(`需求二：姓${obj.姓},
2021-05-15 15:41:38
534
2
原创 0-3 Vue构造选项（Vue实例、内存图、options、入门属性）
1.Vue实例实例就是对象比如：之前用jQuery去选择一个元素（如：#app），得到的是一个jQuery实例，这个实例封装了对那个元素的所有操作Vue也是一样的，用Vue做出一个Vue实例2.内存图const vm = new Vue(options)一般前面的const vm可以省略，直接写：new Vue(options)构造一个Vue的实例：new Vue(options)1.这个实例会根据你给的选项得出一个对象：vm2.vm封装了这个DOM对象，以及对应的所有操作（事件绑
2021-05-15 00:42:34
799
2
原创 0-2 Vue完整版和运行时版的区别
Vue完整版和运行时版的区别1.两个版本对应的文件名完整版：vue.js运行时版本：vue.runtime.js2.template 和 render 怎么用完整版：templatenew Vue({ el:'#app',//元素直接从HTML里面拿 template:` <div>{{n}}</div> ` data:{ // data可以是函数也可以是对象 n:0 }})运行时版：rendernew Vu
2021-05-14 17:42:48
251
原创 0-1 Vue (历史、@vue/cli 搭建项目、Vue实例、vue-loader、SEO友好)
框架1.Vue的历史View，意为：MVC中的VMVC中的V是Vue的重点，M和C则被简化主要关心视图版本1.2015年，1.0版本——Vue是MVVM框架2.2016年，2.0版本——Vue就不是MVVM框架如何学习Vue1.用CRM把所有文档过一遍2.写一篇博客2.使用 @vue/cli 搭建项目搞出一个使用Vue的项目2.1 方法一：使用@vue/cli官方文档1.安装：yarn global add @vue/cli(想要具体版本后面@4)2.创建文件：.
2021-05-14 17:24:21
351
3
原创 正则表达式
1.正则表达式是什么在编写处理字符串的程序或网页时，经常会需要查找符合某些复杂规则的字符串的小阳台正则表达式：就是用于描述这些规则的工具换句话说：正则表达式就是记录文本规则的代码例如*.doc：*会被解释成任意字符，意思是查找某个目录下的所有的Word文档2.案例在英文小说中查找hi，可以使用正则表达式 hi这是最简单的正则表达式，它可以精确匹配这样的字符串1.由两个字符组成2.前一个字符是h，后一个是i通常：处理正则表达式的工具会提供一个忽略大小写的选项，如果选中了这个选项可
2021-05-13 19:12:26
985
原创 9-4 Webpack（部署到github）
如何使用 webpack10.一键部署到 github做了网页目的就是给别人看步骤1.本地打包2.上传到github10.1 一个文件上传git add . – git commit -v – yarn build（重新生成dist目录）理论上来说dist目录中的内容就是一个独立的前端网站1.在本地用http-server测试一下2.cd dist – http-server -c-13.本地预览没问题就可以上传到github上传到github一个小tip：如果代码已经上传过
2021-05-13 17:39:30
684
2
原创 9-3 Webpack（框架图、引入SCSS、LESS、Stylus、引入图片、懒加载）
如何使用 webpack框架图loader转换是1对1plugin插件转换可以是n对1webpack内置打包JS文件，但其他的CSS需要自己下载loader和plugin的区别是什么？1.翻译一下：loader就是加载器，plugin就是插件2.中文解释：加载器就是用来load（加载）一个文件，比如说babel-loader就是用来加载高级的JS把它变成低版本浏览器支持的JS，css-loader和style-loader是用来加载CSS，然后把它变成页面上的标签，还可以加载图片文件，对图
2021-05-13 16:15:59
496
原创 9-2 Webpack（生成HTML、引入CSS、config模式切换）
如何使用 webpack4.用 webpack 生成 HTML做项目的时候最好是git提交一下，因为有可能做着做着做毁了，没办法撤回官网链接：HTMLWebpack安装：yarn add html-webpack-plugin --dev复制代码到之前的webpack.config.js文件中删掉重复的命令，也就多了两句话声明放前面，plugins放在module里面即可const HtmlWebpackPlugin = require('html-webpack-plugin');{
2021-05-13 12:54:35
398
1
原创 9-1 Webpack（配置webpack、转译JS文件、HTTP缓存）
框架的前奏，学会一些工具才能使用框架1.前置知识ES6的使用let / const / 箭头函数 / … / new / class / Promise继承 / this / 原型CSS语法和布局MVC概念Model / View / Controller / EventBus工具的使用VSCode 或 WebStorm终端命令行： npm / yarn / http-server / parcel / git2.用到的工具webpack@5官网链接安装方法见官网，在 .
2021-05-12 22:36:32
390
原创 总结：浅析 MVC
MVCMVC是设计模式的一种，但它太著名了，就不用称之为设计模式MVC就是一个万金油设计模式所有页面都可以使用MVC来优化代码结构MVC就是用来解决页面代码过于重复的问题1.MVC 三个对象分别做什么M - Model（数据模型），负责操作所有数据/** Model 負責存放資料 */M.data = "hello world";//对象mconst m={ data={}, create(){}, delete(){}, update(){}, get(){
2021-05-12 17:46:12
315
原创 8-4 MVC（路由、Vue初识）
路由1.路由是什么？和家里的路由器差不多在server.js中遇到过很多次if(path === '/index.html')if(path === '/style.css')举例：就像是走到了十字路口每一个路由指引走向不同的道路方向注意：使用this的时候不能使用箭头函数，因为那时候的this是windowVueVue认为M也不重要它会自动帮忙更新因此MCV只剩下V，引入Vue对象V的内容1.告诉它是哪个元素2.有什么数据3.有哪些方法4.怎么绑定事件Vue基本上
2021-05-12 17:28:06
284
原创 8-3 MVC（类优化、类继承）
引入类class引入继承class继承class路由MVC１.对象ｍ对象ｍ中的内容1.data：存数据2.增删改查函数：暂时只用到改2.对象v内容1.el2.html3.init()：初始化函数调用4.render()：渲染3.对象Cinit()events：事件一一映射哈希表autoBindEvent：事件绑定一对方法：add、minus、mul等抽象一：使用类抽象代码对于app1和app2中的对象m，都存在属性data和属性增删改查两个ap.
2021-05-12 16:50:12
228
原创 8-2 MVC（六大思维）
思维1.最小知识原则当：引入一个模块需要引入 html、css、js创建四个模块：1.需要在index.html中link引入CSS2.需要script引入JS3.需要分别写入四个模块的HTML标签当：引入一个模块需要引入 html、js将app.css独立文件，引入app.js中，由JS引入CSS，省掉link引入import "./app1.css";当：引入一个模块只需要引入 js将index.html中的每个app的HTML标签模块放入app.js中，然后插入到HTML文件里
2021-05-12 10:38:16
326
原创 8-1 MVC（MVC是什么、案例四个模块建立）
一、设计是个框，什么都能往里装MVC是设计模式的一种，但它太著名了，就不用称之为设计模式1.设计模式的定义代码写得特别好，别人肯定也用得到给这种写法取个名字，比如适配器模式（如果是IE就做什么，如果是Chrome就做什么）设计模式就是对通用代码取个名字而已2.为什么有设计模式DRY原则：Don’t Repeat Yourself不要重复自己3.什么是重复代码级别的重复：相同的三行代码写了两遍解决：那就应该重构它，给取一个名字，放入函数中，调用这个函数页面级别重复：类
2021-05-11 12:21:32
717
原创 伪元素
伪元素:before 和 :after可以做的东西是相当惊人的。对于页面上的每一个元素，你拥有了两个更灵活的、而且可以完成其它HTML元素都能完成的东西的元素。它们让一大堆有趣的设计成为可能，而且不会对你的语义标签产生负面影响。...
2021-05-10 18:32:02
148
原创 css中margin-top和top有什么区别
一、功能不同margin-top：功能为设置元素的上外边距。top：规定元素的顶部边缘。二、特点不同margin-top：允许使用负值。定义固定的上外边距。默认值是 0。top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。三、总结margin-top是你这个层的边距设置，是上边距，top是当css样式为绝对定位（即position:absolute; ）时，left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位
2021-05-10 18:17:38
4745
原创 7-8 前后分离（动态服务器、Cookie、session）
动态服务器1.静态服务器 V.S. 动态服务器也叫做：静态网页 V.S. 动态网页1.1 判断依据是否请求了数据库没有请求数据库，就是静态服务器请求了数据库，就是动态服务器数据库1.数据库不属于前端范围，但程序员应该懂一点数据库2.直接用json文件当作数据库1.2 /db/users.json基于静态服务器的文件创建一个db目录db：data base 数据库创建一个user.json读取数据库，test.js文件中第一行const fs = require('fs
2021-05-08 18:25:47
286
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人