- 博客(47)
- 收藏
- 关注
RSS订阅
原创 前端面试题全面整理-带解析
前端面试题全面整理-带解析前言上期整理了一些vue面试题，本期整理总结这些前端面试题，涵盖面很广，并且面的都是知名大厂，所以这些题还是很有代表性的，都掌握以后一面基础面应该没什么问题，二面也能应付大半，奉上：css相关万能居中1.margin: 0 auto;水平2.text-align: center;水平3.行高，垂直4.表格，center,middle；水平垂直5.display:table-cell；模拟表格，all6.绝对定位，50%减自身宽高7.绝对定位，上下左右全0，
2020-12-16 20:11:11
204
原创 Vue模板语法汇总
Vue模板语法汇总最近在看 Vue 的编程思想，真的是大开眼界，作者为什么能够写出 Vue 这样的框架，为什么有这么强的编程能力，反思中…。回到本文的主题，我们可以先看看 Vue 的模板语法： {{ title }} {{ age + 1}} {{ age > 18 ? '大朋友' : '小朋友'}}<!-- 通过 v-bind 来绑定属性 --><a v-bind:href="url">点我</a>
2020-12-16 19:39:29
159
原创 2021-11-16
//设置cookie setCookie(c_name, c_pwd, exdays) { var exdate = new Date(); //获取时间 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数 //字符串拼接cookie window.document.cookie = "userName" + "=" + c
2021-11-16 17:15:45
172
原创 vue vite特点与优缺点
Vite 的特点：和 Webpack相比，Vite 具有以下特点：快速的冷启动，不需要等待打包即时的热模块更新真正的按需编译，不用等待整个项目编译完成由于完全跳过了打包这个概念，Vite的出现大大的撼动了Webpack的地位，且真正做到了服务器随起随用。Vite 优点 Vite 缺点Vite 优点Vite 缺点开发服务器比 Webpack 快 10-100 倍只能针对现代浏览器（ES2015+）将 code-splitting 作为优先事项与 CommonJS 模
2021-09-09 19:01:46
3974
1
原创 前端安全问题
前端安全问题XSS: 跨站脚本攻击在用户可以输入的地方，并且将作为代码编译时，攻击者可以通过输入一个脚本地址的方式进行对页面注入脚本攻击。解决方式: 任何用户输入的地方都不要相信，对用户输入内容进行转义，如 < 使用转义字符串 < 代替。CSRF: 跨站伪装请求攻击在用户已登录的情况下，伪装用户的身份发起请求，进行相关攻击。解决方式，确认用户的身份。比较好理解的解决方式是: 二次确认，通过用户的二次确认确认请求方为真实用户。然后就是 X-Requested-With 请求标志，通过该请求
2021-09-09 09:51:59
177
原创 观察者模式,适配器模式,装饰器
观察者模式观察者模式：定义对象之间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式的别名包括发布-订阅模式、模型-视图模式、源-监听器模式或从属者模式。观察者模式是一种对象行为型模式。适配器模式适配器模式 ：将一个接口转换成客户希望的另一个接口，使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。适配器模式的别名是包装器模式，是一种结构型设计模式。装饰器装饰器：指在不改变现有对象结构的情况下，动态地给该对象增加一些职责（即增加其额外功能）
2021-09-09 09:39:30
262
原创 请求拦截和响应拦截
拦截器分为请求拦截和响应拦截(前提是你的请求头已经完成了)请求拦截 首先我这边这个请求头我用const给他定义一下就叫Service吧 其次给他绑定interceptors.request.use()这个方法 接着因为这个方法有个箭头函数作为参数 再给其一个config做形参将vuex当中定义好的方法拿过来 使用Store.dispatch调用定义好的方法 返回config响应拦截 以相同的道理给Service绑定一个interceptors.response.use()方法 这时候他
2021-09-08 19:12:47
634
原创 前端工程化有哪些？
前端工程化有哪些模块化模块化只是在文件层面上，对代码或资源的拆分；组件化而组件化是在设计层面上，对UI（用户界面）的拆分。规范化目录结构的制定编码规范前后端接口规范文档规范组件管理Git分支管理Commit描述规范定期CodeReview视觉图标规范自动化自动化测试持续集成自动化构建自动化部署...
2021-09-08 19:09:15
189
原创 作用域插槽和v-slot指令
vue2.6插槽更新v-slot用法v-slot在组件中使用slot进行占位时，也是在slot标签内使用name 属性给slot插槽定义一个名字。但是在html内使用时就有些不同了。需要使用template模板标签，template标签内，使用v-slot指令绑定插槽名，标签内写入需要添加的内容.作用域插槽（slot-scope）在组件模板中书写所需slot插槽，并将当前组件的数据通过v-bind绑定在slot标签上。在组件使用时，通过slot-scope=“scope”,接收组件中slot
2021-09-08 19:04:04
169
原创 webpack常用loader
1.sass-loader转化sass为css文件，并且包一层module.exports成为一个js module。style-loader将创建一个style标签将css文件嵌入到html中。css-loader则处理其中的@import和url()。2.vue-loader、coffee-loader、babel-loader等可以将特定文件格式转成js模块、将其他语言转化为js语言和编译下一代js语言3.file-loader、url-loader等可以处理资源，file-loader可以复制和
2021-09-07 09:33:16
462
原创 单页面（SPA）和 多页面
单页面（SPA）优点：加载速度快,内容的改变不需要重新加载整个页面,前后端分离,视觉效果好缺点：页面初次加载比较慢多页面：优点:对SEO友好缺点：页面切换速度慢,每次切换页面需要选择性的重新加载公共资源...
2021-09-03 09:38:58
298
原创 本地存储和离线缓存
本地存储和离线缓存离线缓存:在没有网的情况下可以进行访问离线缓存是针对整个应用，浏览器缓存是单个文件离线缓存断网了还是可以打开页面，浏览器缓存不行离线缓存可以主动通知浏览器更新资源相同：本地存储与离线缓存都是为了方便网页的加载，提高用户体验等。不同：本地存储一般存储的都是数据，而离线缓存一般存储的是网页等。...
2021-09-03 09:37:34
615
原创 做过哪些前端优化
1、节流、防抖2、重绘、回流3、对代码进行压缩，删除不必要的空格4、图片的懒加载5、js是阻塞的 合理的使用defer和async6、减少对http的请求7、减少 DOM 元素数量8、css代码放在上面，js放在下面...
2021-09-02 09:40:39
186
原创 git常用指令
git branch 查看本地所有分支git status 查看当前状态 git commit 提交 git branch -a 查看所有的分支git branch -r 查看本地所有分支git commit -am "init" 提交并且加注释 git remote add origin git@192.168.1.119:ndshowgit push origin master 将文件给推到服务器上 git remote show origin 显示远程库origin里的资源 git
2021-09-02 09:35:57
77
原创 commit常用类型
commit常用类型**feat:: 类型为 feat 的提交表示在代码库中新增了一个功能（这和语义化版本中的 MINOR 相对应）。fix:：类型为 fix 的 提交表示在代码库中修复了一个 bug （这和语义化版本中的 PATCH 相对应）。docs:: 只是更改文档。style:: 不影响代码含义的变化（空白、格式化、缺少分号等）。refactor:: 代码重构，既不修复错误也不添加功能。perf:: 改进性能的代码更改。test:: 添加确实测试或更正现有的测试。build:: 影响
2021-09-02 09:34:39
776
原创 IIFE是什么？
中文名：自执行函数(function(形参){ alert(‘哈哈’) })(实参)作用？1、隐藏实现2、不会污染外部（全局）命名空间3、用它来编写js模块
2021-09-02 09:32:49
189
原创 vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？
vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？hash 模式：#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。history 模式：history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，
2021-09-02 09:27:04
159
原创 H5和C3的新特性
/H51.新增了语义化标签,比如 header头部标签,nav导航标签,footer底部标签,section盒子容器等等2.新增了视频和音频标签 video 和 audio3.新增了本地存储 localstorage(永久性的存储,页面关闭了都还在) sessionstorage(临时性存储,浏览器关闭就没了)4.新增了canvas画布5.新增了表单属性, 比如time, date等/C3颜色: rgba()过渡: transition动画: @keyframes,animation2D
2021-09-02 09:20:33
292
原创 开发模式-迭代模型
迭代模型（Stagewise-Model）（迭代增量式开发/迭代进化式开发）在迭代式开发方法中，整个开发工作被组织为一系列的短小的、固定长度（如3周）的小项目，被称为一系列的迭代。每一次迭代都包括了需求分析、设计、实现与测试。采用这种方法，开发工作可以在需求被完整地确定之前启动，并在一次迭代中完成系统的一部分功能或业务逻辑的开发工作。再通过客户的反馈来细化需求，并开始新一轮的迭代。迭代和版本的区别，可理解如下：迭代一般指某版本的生产过程，包括从需求分析到测试完成；版本一般指某阶段软件开发的结果，一个可交
2021-09-02 09:18:08
2350
原创 CSS三大特性
CSS的三大特性:继承性，层叠性，优先级1.继承性: 子元素可以继承祖先元素中的部分样式2.层叠性:通过不同的选择器可以多次指向同一个元素，如果设置的属性不一样则所有的效果都生效，如果作用相同的属性，则根据选择器的优先级决定3.！important>行内样式>id选择器>类选择器>标签选择器>默认样式权重可叠加...
2021-09-02 09:11:42
86
原创 垃圾回收机制的标记清除引用计数是什么？内存如何管理？
标记清除标记清除主要是js的常用垃圾回收方式当变量进入环境（例如函数中申明一个变量）时，将这个变量标记为“进入变量”。从逻辑上讲，永远不能释放进入环境所占的内存，因为我们在这个环境中可能随时会用到它们。当变量离开环境时，则其标记为“离开环境”；引用计数该方法的原理就是跟踪记录每个值被引用的次数，如果被引用的次数为0时，就代表被清除。内存管理内存生命周期（1）得到小内存生命空间，得到他的使用权，（2）存储数据，可以反复进行操作（3）释放小内存空间释放内存（1）局部变量：函数执行完自动释放
2021-09-02 09:03:01
170
原创 数组和字符串相互转换
数组和字符串相互转换 var arr = [{ "a": 12, "b": 5 }, { "a": 112, "b": 15 }]; // 讲数组转为字符串 var str = JSON.stringify(arr); console.log(str); // "[{"a":12,"b":5},{"a":112,"b":15}]" // 将字符串转为数组 console.log
2021-09-01 19:18:12
319
原创 将手机号码的中间四位数替换为*
将手机号码的中间四位数替换为*let phone = 15012347052function formatPhone(phone) {if(typeof phone == 'number') phone = phone.toString()return phone.substring(0, 3) + '****' + phone.substring(7, phone.length)
2021-09-01 16:31:28
862
原创 React LazyLoad 图片懒加载
React LazyLoad 图片懒加载先写个lazyload的Js文件 放到src下即可import React from 'react'const threshold = [0.01]class LazyLoad extends React.Component{ constructor(props){ super(props) this.state = { io: null, refs: null,
2021-09-01 16:17:45
260
2
原创 react中解决this指向问题的四种方法
react中解决this指向问题的四种方法一.行间定义事件后面使用bind绑定this run(){ alert("第一种方法！") } <button onClick={this.run.bind(this)}>第一种</button>二.在构造函数内部声明this指向 constructor(props) { super(props); this.state={ //定义数据 } this.run = this.run
2021-08-30 09:42:34
246
原创 react生命周期--面试题
react生命周期：componentWillMount 在渲染前调用。componentDidMount 在第一次渲染后调用。componentWillReceiveProps 在组件接收到一个新的props时被调用。这个方法在第一次渲染时不会被调用。shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。componentWillUpda
2021-08-30 09:31:52
993
原创 前端性能优化面试题
前端性能优化内容方面：减少 HTTP 请求 (Make Fewer HTTP Requests)减少 DOM 元素数量 (Reduce the Number of DOM Elements)使得 Ajax 可缓存 (Make Ajax Cacheable)针对CSS：把 CSS 放到代码页上端 (Put Stylesheets at the Top)从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)精简 JavaScri
2021-08-30 09:18:57
186
原创 查找字符串中出现次数最多的字符以及次数
查找字符串中出现次数最多的字符以及次数第一种 <script> var str = 'aaabbbacc'; var arr = []; for (var i = 0, length = str.length; i < length; i++) { var index = -1; var j = 0; do { index = s
2021-06-08 19:28:18
371
原创 用css样式里的transform: scale()设置小于12px的字体
用css样式里的transform: scale()设置小于12px的字体<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini
2021-06-08 19:23:34
511
原创 什么是圣杯布局以及双飞翼布局--圣杯布局以及双飞翼布局的区别、作用、布局
什么是圣杯布局以及双飞翼布局作用：圣杯布局和双飞翼布局解决的问题是相同的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。区别：圣杯布局：为了让中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。双飞翼布局：为了让中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，
2021-06-07 19:37:28
118
原创 小数点精度的问题--函数封装
小数点精度的问题–函数封装<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> // console.log(.1+.2); // console.log(2.14*5); // console.log(.3-.1)
2021-06-07 19:31:57
223
原创 块元素，行内块元素和行内元素的区别--元素的标签有哪些
块，行内块，行内的区别块：独占一行，可设置宽高(div,h,session,p,li,ul,ol,nav,header,footer,dt,dd,tr)行内块：不独占一行，可设置宽高(img,input,select,button,textarea)行内：不独占一行，不可设置宽高(span,b,i,u,a,em)...
2021-06-07 19:29:14
191
原创 清除浮动的方法
清除浮动8种方法1.设置父级的高2.设置父级的浮动3.父元素中添加br 设置br属性为clear：both4.给父级元素添加div 设置clear：both5.给父级div设置display：table6.父级div定义overflow：auto7.父级div定义overflow：hidden8.父级div定义 伪类：after(content: “”;display: block;height: 0;clear: both;)和zoom(兼容ie浏览器，加给父级div样式里，作
2021-06-07 19:25:20
115
原创 什么是webpack--如何打包webpack--打包的方法
day01 webpack1、什么是webpackwebpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性2、两个文件夹src 源码文件夹dist 发布文件夹3、如何打包npx webpack webpack4、webpack.config的配置一、module.export={}将模块导出二、对象中有以下几个属性entry：’路径‘打包哪个文件
2021-06-07 16:04:21
403
原创 jq 第四天 回顾 html()/text()/val() css() hasClass() attr()/prop() 事件绑定 添加元素
jq 第四天文章目录jq 第四天回顾html()/text()/val()css()hasClass()attr()/prop()事件绑定添加元素回顾dom操作三步骤1.分析骨架2.样式布局3.功能实现 3.1 事件和影响元素的对应关系 1-1 1-多 多-1：封装函数--典型代表：计算总计 多-多：==》 多-1（下标） 典型代表：轮播图 3.2影响元素的哪些方面？ 内容： js:innerHTML/innerText/value jq:html()/te
2020-12-18 20:12:44
222
1
原创 jq 第三天 css隐藏元素方式 css透明度属性 css手型光标 可见性过滤器 属性选择器 表单选择器 高级选择器 html()/text() parent()/parents()/close
jq 第三天文章目录jq 第三天回顾css隐藏元素方式css透明度属性css手型光标可见性过滤器属性选择器表单选择器高级选择器html()/text()parent()/parents()/closest()回顾1.动画分类：基本动画和自定义动画 1.1 基本动画： show()/hide() slideDown()/slideUp() fadeIn()/fadeOut() 1.2 自定义动画 animate(样式对象,动画时间) 1.3 清空动画队列： stop()
2020-12-18 20:11:42
252
1
原创 jq 第2天 基本过滤器 内容选择器 animate() 对js中dom操作步骤 轮播图 hover() show()/hide() slideDown()/slideUp() children()
jq 第2天文章目录jq 第2天基本过滤器内容选择器animate()对js中dom操作步骤轮播图hover()show()/hide()slideDown()/slideUp()children()基本过滤器*ul li:first 匹配第一组ul的第一个li（只匹配一个）*ul li:first-child 匹配每组ul的第一个li（匹配至少一个li）li:not(.c1) 匹配类名不是c1的li*li:gt(2) 匹配下标大于2的lili:lt(2) 匹配下标小于2的li*
2020-12-16 18:46:51
238
原创 jq day-01 jq引入 dom对象和jq对象相互转化 $(this) 与 this window.onload 与 $(document).ready()区别css() 连缀 基本选择器 pre
jq day-01文章目录jq day-01回顾jsjq引入dom对象和jq对象相互转化$(this) 与 thiswindow.onload 与 $(document).ready()区别css()连缀基本选择器prev()/prevAll()/next()/nextAll()回顾js1.创建正则方法： 1.1 var reg = /o+/g; 1.2 var reg = new RegExp(/o+/,"g")2.元字符简写 . \d \w \s [\u4e00-\u9fff] 简
2020-12-16 18:45:49
189
原创 js高级 第九天 文章目录 js高级 第九天 正则表达式 语法 模式 元字符 元字符简写 量词 开头和结尾 test方法
js高级 第九天文章目录js高级 第九天正则表达式语法模式元字符元字符简写量词开头和结尾test方法正则表达式regular expression:正则表达式正则表示式是由元字符/量词以及模式组成式子。 /元字符{量词}元字符2{量词}/模式 hello world 123 h:1 e:1 l:3 o:2 只能针对字符串的处理语法1.字面量 /元字符{量词}/模式 比如：var reg = /a{1,}/g;2.实例化 new RegExp(
2020-12-15 17:33:04
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人