- 博客(50)
- 收藏
- 关注
RSS订阅
原创 vue2.0指南
文章目录一、vue简介1. vue基础2. vue高级二、MVVM模式三、双向数据绑定的原理视图变化更新数据数据变化更新视图四、虚拟DOM虚拟 DOM五、axios1. axios特点2. vue项目中简单使用axios3. vue中axios封装以及api接口统一管理4. axios拦截器[最好能实现一个精简版的]六. VueRouter七. vue SSR八. Vue的性能优化九、Vue 项目常见问题的解决方案一、vue简介Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进
2020-09-28 17:11:01
804
原创 es7~es11相关知识
1. es7新特性(1). Array.prototype.includes数组的includes(value)方法，用来检测数组中是否包含某个元素，返回布尔值。const aa = ["张颜齐","段宜恩","郑秀晶"];console.log(aa.includes("张颜齐"));//true(2). [**]用来实现幂运算[**]与Math.pow()是一样的。console.log(2 ** 10);//1024 Math.pow(2,10);2. es8新特新(1).Ob
2020-09-07 13:28:23
270
原创 vue3.0指南
1. 创建vue3项目使用vue-cli【依赖于webpack】想要创建vue3.0的项目，脚手架的版本必须在4.5.0以上vue create 项目名称使用vite创建vite–新一代的前端构建工具npm init vite-app 项目名称cd 项目名称npm i项目目录（脚手架创建的项目）...............
2022-05-03 12:19:41
10586
原创 websocket
websocket协议是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)web sockets原理：在js创建了web socket之前，会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后，建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。只有在支持web socket协议的服务器上才能正常工作。web sockets使用了自定义协议。未加密的连接是ws://,加密的连接是wss:////创建WebS.
2022-04-28 16:59:35
1446
原创 react-hooks
hooks = 函数组件 + 状态。hooks是对函数式组件的极大加强。react-hooks是react16.8以后，react新增的钩子API，目的是增加代码的可复用性，逻辑性，弥补函数组件没有生命周期，没有数据管理状态state的缺陷。1. useState ---- 数据存储，派发更新useState出现，使得react无状态组件能够像有状态组件一样，可以拥有自己state。useState的参数可以是一个具体的值，也可以是一个函数，函数返回作为初始值。usestate钩子返回
2022-03-19 16:01:19
269
原创 react-router
现代的前端应用大多都是SPA（单页面应用程序），也就是只有一个HTML页面的的应用程序，因为SPA的用户体验感更好，对服务器的压力更小，随意更受欢迎，为了有效使用单页面来管理多页面的功能，前端路由应运而生前端路由的功能：让用户从一个页面导航到另一个页面前端路由就是一套映射规则，在react中，就是url和组件之间的映射关系1. react-router安装及简介react-router提供多个包可以单独使用在浏览器中运行只需要安装react-router-dom，reac-router-dom
2022-03-19 15:49:14
1866
原创 react 16.4+ 基础
1. 基础1. 超基础API创建react元素React.createElement(参数1，参数2，参数3,…)// 参数1元素名称// 参数2元素属性// 参数3以及以后的参数都表示元素子节点渲染react元素ReactDOM.render(参数1，参数2)// 参数1要渲染的元素或组件// 参数2要渲染的元素或组件的挂载点例：const ele = React.createElement('h1',{id: 'kkk'},'Hello React')ReactDOM.
2022-03-19 13:59:18
657
原创 微信小程序知识点
1. 简单了解浅谈微信小程序小程序运行机制小程序开发指南2. 基础知识小程序框架参考文档小程序组件参考文档小程序 API 参考文档深入学习从源码看微信小程序启动过程
2021-11-24 17:30:54
941
原创 vue-router
1. VueRouter的两种模式vue的路由实现：hash模式和history模式hash模式：#以及#后面的字符就是hash内容，用window.location.hash读取，可以通过onhashchange监听hash改变。一般在开发中常用特点：hash内容虽然在URL中，但是不被包括在Http请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。history模式：不带#的地址。用window.location.pathname获取，history模式利用H5的 hist
2021-11-07 11:20:43
170
原创 typescript
typescript官网1. 基础知识基础类型type / interface联合类型 |交叉类型 &【 联合类型一次只能一种类型。交叉类型一次是多个类型的合并类型】typeofTypeof 操作符可以用来获取一个变量声明或对象的类型。function toArray(x: number): Array<number> { return [x];}type Func = typeof toArray; // type Func = .
2021-10-18 19:54:35
130
原创 vue高级用法
1. 动画特效----transition2. 插槽 slot插槽就是子组件中的提供给父组件使用的一个占位符，父组件可以对插槽填充任何内容。插槽和组件的区别是：①组件之间的传递是单纯的数据的传递，而插槽的传递是视图的传递。②插槽的内容显示是由谁调用就由谁来决定插槽的内容，组件的内容是提前已经写好了，只进行数据的简单改变。3. Mixin4. 过滤器vue3已弃用过滤器的使用5. keep-alive的实现原理keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现
2021-10-11 08:03:51
932
原创 vue基础用法
1. vue指令(0). vue文本渲染三种方法 {{}}、v-text、v-html{{ }}将元素当成纯文本输出v-htmlv-html会将元素当成HTML标签解析后输出v-textv-text会将元素当成纯文本输出<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue文本渲染三种方法</title><
2021-10-11 08:03:03
223
原创 自定义promise
一步步实现一个Promise平常用promise的时候, 是通过new关键字来new Promise(), 用构造函数或者classclass MPromise { constructor() { }}定义promise三种状态类型const PENDING = 'pending'const FULFILLED = 'fulfilled'const REJECTED = 'rejected'设置初始状态class MPromise { const
2021-10-04 14:40:02
396
原创 es6的class
1. class语法基础ES6通过class关键字，可以定义类。基本上，ES6的class本质上构造函数的一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而己，用法几乎与java的class相同了。知识点:class 声明类constructor 定义构造函数初始化，可以没有。extends 继承父类，父类的静态方法和属性不能被继承super 调用父类构造方法static定义静态方法和属性，静态方法和静
2021-09-05 10:47:38
92
原创 promise
文章目录1. 必备知识点1. 函数对象&实例对象2. 链式调用3. 回调函数的分类4. 错误和错误处理2. promise是什么？3. promise语法注意:4. 为什么使用promise？5.[自定义promise](https://blog.csdn.net/acm_cn1234567890/article/details/108428108)6. async function 与 await expression7. 宏队列与微队列1. 必备知识点1. 函数对象&实例对象将函
2021-08-23 10:23:50
182
原创 基本知识点
1. 常用术语什么是单页面应用？单页面应用可以叫做单页面多片段切换应用。通过控制页面的删除或者隐藏来实现单页面应用。单页面在移动端使用比较广泛。可以带来极致的体验。2. 产品生命周期（产品功能迭代的生命周期）产品生命周期（产品功能迭代的生命周期）：发现问题并产出需求---->需求开发---->需求落地step1：发现问题并产出需求由pm（产品经理）主导，他们通过多途径多方式发现产品中存在的问题点，从思维层面给出解决方案。产物：prd （prd就是产品需求文档）数据的
2021-07-24 16:51:11
209
1
原创 前端性能相关
1. 前端性能优化性能优化原则：多使用内存、缓存等，减少CPU计算量，减少网络加载耗时。1. 加载资源优化对于页面加载慢的问题，一般是由于页面加载资源过多，并且资源过大导致。解决页面加载资源过多，资源过大：对于图片过多通过懒加载的方式处理非首屏的图片，懒加载原理就是先不将图片的真实地址赋值src，而是使用一个属性比如data-src,暂存，然后监听滚动条事件，当滚动条距离浏览器顶部的高度满足一定条件时，就将 data-src 的值赋值到 src 上。对于小图标可以采用 iconfont
2021-07-24 11:06:42
111
原创 html+css基础面试题
✨对HTML语义化标签理解html5的新特性script标签中defer和async的区别ss引入的方式有哪些? link和@import的区别是?两者都是外部引用CSS的方式link和页面一同加载,import在页面加载完之后再加载link兼容性比import好,因为link本身就是html标签link可以使用js对其修改,import不可以link还可以定义 RSS、rel 连接属性等,import只能导入样式HTML行内元素、块状元素、行内块状元素c..
2021-07-23 22:25:28
277
原创 开发完成一个需求的基本过程
需求粗评需求细评拿到需求文档，确定需求排期（前端和后端的排期一般拉平、测试排期，一般是一个完整的表格自己填自己的部分）开发联调 ○ 拉取master分支代码$ git clone 项目的地址 ○ 创建自己的分支：$ git checkout -b 自己的分支名 ○ 把master分支代码合并到自己的分支上（建议每次开发前都做一次，防止最后一次操作导致冲突过多）§ 切换到主分支 $ git checkout master § 把最新的主分支数据拉下来 $ git pull § .
2021-07-23 10:28:48
1131
原创 面经---2021届校招总结
携程一面30分钟不到就结束了，也没代码题，不知道是啥情况。自我介绍项目相关平时学习，看过哪些书JS获取DOM节点的方法怎么获取所有节点cookie 和 localstoragecookie的属性有哪些，然后根据每个都有具体的提问。数组的方法有哪些...
2021-04-05 14:19:56
336
2
原创 前端大文件上传
参考链接大文件上传需要实现的基本需求：支持拆分上传请求(即切片)支持断点续传1. 文件切片在JavaScript中，文件File对象是Blob对象的子类，Blob对象包含一个重要的方法slice，通过这个方法，我们就可以对文件进行拆分。可以在每个切片请求上传递一个相同文件的context参数标识切片来自同一个个文件。为了确认每个切片的顺序，按序拼接切片，还原文件，可以为每个切片上设置一个位置索引值。2. 断点续传断点续传指的是：可以从已经上传部分开始继续上传未完成的部分，而没有必要.
2021-01-31 09:15:52
531
1
原创 BOM / DOM 相关知识点
0. 理解DOM事件流的三个阶段事件处理过程的三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段；（1）事件捕获阶段：当我们在 DOM 树的某个节点发生了一些操作，例如单击，就会有一个事件发射过去。这个事件从 Window 发出，不断经过下级节点直到触发的目标节点。在到达目标节点之前的过程，就是捕获阶段，所有经过的节点，都会触发这个事件。捕获阶段的任务就是建立这个事件传递路线，以便后面冒泡阶段顺着这条路线返回 Window。（2）处于目标阶段：当事件不断的传递直到目标节点的时候，最终在目标节点上触发这
2021-01-05 20:02:26
221
原创 行内元素、行内块元素、块级元素
行内元素、行内块元素、块级元素块标签：div p h1-h6 hr ul ol li form特点：支持宽高，自上而下排列不受空格影响一般用于其他标签的容器默认独占一行行内标签：span i label特点：不支持宽高（宽高根据内容大小自动撑开），自左向右排列受空格影响不独占一行行内块标签：img textarea input特点：支持宽高，自左向右排列受空格影响不独占一行标签之间的转换display：inline（转为行内元素）disp
2020-12-26 16:28:17
130
原创 前端web安全
1. 常见的web攻击方式有哪些？XSS跨站脚本攻击：XSS攻击就是攻击者通过各种办法，在用户访问的网页中注入恶意代码，通过恶意脚本对客户端网页进行篡改，在用户浏览网页时，对用户浏览器进行控制或者窃取用户隐私数据的一种攻击方式。如何防范XSS跨站请求攻击：对用户输入做过滤在把任何内容写到页面之前都要进行输出转义将重要的cookie标记为httponlyCSRF(或者XSRF)跨站请求伪造攻击:攻击者盗用用户身份，发送恶意请求，把该请求向一个用户自己曾经认证访问过的网站发送出去，对
2020-12-25 11:06:48
83
原创 PromiseA+规范以及应用
自定义/手写 promise (p19~p34)/*自定义Promise函数模块: IFFEes5定义模块方法: 匿名函数(自)调用*/(function (window) { const PENDING = 'pending' const RESOLVED = 'resolved' const REJECTED = 'rejected' /* Promise构造函数 excutor: 执行器函数(同步执行), 含2个参数(resolve, reject) =>
2020-11-26 08:51:16
176
原创 浏览器相关
1. 浏览器浏览器内核：支持浏览器运行的最核心的程序浏览器内核分类：Chrome，Safari：webkitfirefox：Gecko /ˈɡekəʊ/IE：Trident /ˈtraɪdnt/浏览器都是多线程运行的2. 线程 VS 进程进程（Process）狭义定义：进程是正在运行的程序的实例（an instance of a computer program that is being executed）。详细解释就是，启动一个程序的时候，操作系统会为该程序创建一块内存
2020-11-12 14:48:23
571
原创 http状态码
状态码RFC 标准把状态码分成了五类，用数字的第一位表示分类，而 0-99 不用，这样状态码的实际可用范围就大大缩小了，由 000-999 变成了 100-599。这五类的具体含义是：1××：提示信息，表示目前是协议处理的中间状态，还需要后续的操作；2××：成功，报文已经收到并被正确处理；3××：重定向，资源位置发生变动，需要客户端重新发送请求；4××：客户端错误，请求报文有误，服务器无法处理；5××：服务器错误，服务器在处理请求时内部发生了错误。1××1××类状态码属于提示信息，是协议处
2020-11-09 18:45:40
527
原创 数组去重
方式一：双层for循环function distinct(arr) {//需要去重的数组arr for (let i=0, len=arr.length; i<len; i++) { for (let j=i+1; j<len; j++) { if (arr[i] == arr[j]) { arr.splice(j, 1); // splice 会改变数组长度，所以要将数组长度 le
2020-11-04 11:21:02
100
原创 CSS引入的方式有哪些? link和@import的区别是?
CSS引入的方式有哪些?①内联方式（很糟糕的书写方式）直接在html标签中的style属性中添加css。②嵌入方式在html头部中的 < style >标签下书写css代码③链接方式在html的头部的 < head > 标签中使用link引入外部的css文件。最常见也是最推荐的引入css的方式，使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以
2020-11-04 11:20:38
475
原创 对HTML语义化标签理解
标签语义化根据html内容的结构,选择合适的标签,即用正确的标签做正确的事情。便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。HTML语义化的原因（优点）即使在没有CSS样式的条件下，也能很好地呈现出内容结构、代码结构；语义化HTML会使HTML结构变的清晰，有利于维护代码和添加样式；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；提升搜索引擎优化(SEO)的效果。和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下
2020-11-04 11:20:30
981
原创 css实现各种形状
正方形 / 长方形<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .square { width: 120px; height: 120px; background-color: #0000FF; } </style>
2020-11-04 11:20:18
210
原创 经典布局面试题
问题描述: 实现一个div垂直居中, 其距离屏幕左右两边各10px, 其高度始终是宽度的50%。同时div中有一个文字A，文字需要水平垂直居中。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { padding: 0;
2020-11-04 11:20:08
179
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人