- 博客(164)
- 收藏
- 关注
RSS订阅
原创 CSS3新特性
1、过渡。过渡，运用比较频繁，主要就是用于让一些交互效果（主要是hover）变得更加生动。CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须要规定两项内容：指定要添加效果的CSS属性指定效果的持续时间。1.1语法。transition: css属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)eg1:/*宽度从原始值到指定值的一个过渡，运动...
2019-10-30 16:16:27
145
原创 基于vue+element-ui的手机交易网站的设计与实现
该项目是我的大学毕业设计，它是一项前端基于vue+element-ui，后台基于springboot+mybaitis的前后端分离项目。因为本人着重于前端，因此后端的代码比较简单，不在赘述。因为是第一次独立完成一个项目，因此有很多地方需要改进，还需看客海涵。 首先，手机交易网站主要分为前台客户浏览功能模块以及后台管理员管理两大部分：前台客户浏览界面包含手机分类、手机详情浏览、添加购物...
2019-08-13 23:49:32
3684
4
原创 前端面试-javascript篇
前端面试-javascript篇VueVue的响应式原理中的Object.defineProperty有什么缺陷？为什么Vue3推出了Proxy？Vue为什么要在列表中写key，其作用是什么？React待续VueVue的响应式原理中的Object.defineProperty有什么缺陷？为什么Vue3推出了Proxy？Object.defineProperty无法监听到数组下标的变化，导致通过数据下标添加元素，不能实时响应；Object.defineProperty只能劫持对象的属性，从而需要对每
2021-09-08 20:37:45
279
原创 前端面试--CSS篇
前端面试--CSS篇介绍下BFC及其应用怎样让一个div水平垂直居中？介绍下重流和重绘，以及如何进行优化？分别比较opacity：0，visibility：hidden，display：none的优劣和适用场景？简述CSS盒模型简述rem及其转换原理简述伪类和伪元素行内元素的margin和paddingCSS中那些属性可以继承？CSS3新增伪类有哪些？用CSS创建一个三角形min-width/max-width和min-height/max-height属性间的覆盖规则？介绍下BFC及其应用BFC块级格
2021-09-07 20:21:09
1745
原创 前端面试--HTML篇
HTML页面倒入样式时，使用link和@import有什么区别？简述浏览器的渲染原理HTML5的form的自动完成功能是什么呢？如何实现浏览器内多个标签页之间的通信？简述前端性能优化页面倒入样式时，使用link和@import有什么区别？从属关系区别。@import只能导入样式表，link还可以定义RSS、rel连接属性、引入网站图标等；加载顺序区别。加载页面时，link标签引入的CSS被同时加载；@import引入的CSS将在页面加载完毕后被加载。简述浏览器的渲染原理首先解析收到的文档，根
2021-09-07 16:57:35
197
原创 如何实现自适应布局
如何创建自适应布局百分比布局使用媒体查询（CSS3@media查询）rem响应式布局vw响应式布局flex弹性布局响应式网页设计是一种新的网站设计模式，从此构建的网站可自动适应不同的的访问设备，方便用户阅读和导航浏览，减少用户的放大/缩放/滑动的操作，提升良好的用户体验。百分比布局可以通过对属性的设置百分比来适配不同的屏幕，但是需要注意的是百分比是相对于父元素的。使用媒体查询（CSS3@media查询）利用媒体查询设置不同分辨率下的CSS样式，来适配不同的屏幕。body { backgro
2021-04-28 00:20:38
608
原创 前端性能优化----如何减短首屏加载时间？
为什么首屏加载会出现短暂几秒白屏呢？随着Vue、React等框架的出现，SPA单页面应用越来越广泛被开发者应用。但是呢，SPA应用页面打包之后的js文件是非常大的。要等这个js文件加载完成之后才能进行首屏渲染，这样就导致了白屏的问题。
2021-04-27 23:54:39
894
原创 函数绑定与函数柯里化
函数绑定与函数柯里化一、函数绑定（bind）什么是函数绑定？bind()二、函数柯里化利用柯里化实现复杂的bind()柯里化实现add(1)(2,3)(5)一、函数绑定（bind）什么是函数绑定？函数绑定需要创建一个函数，可以在特定的this环境中以指定参数调用另一个函数。常与回调函数及事件处理程序一起使用，以便在将函数作为变量传递的同时保留代码执行环境。var handler = { message: 'Event handled', handleClick: functio
2021-04-24 20:39:11
273
原创 Vue-router中的hash模式和history模式的区别
vue-router中的hash模式和history模式的区别拓展：history模式需要后台配置支持。比如：当我们进行项目的主页的时候，一切正常，可以访问。但是如果我们刷新页面或者直接访问路径的时候就会返回404，这是因为history模式下，只是动态的通过js操作window.history来改变浏览器地址栏的路径，并没有发起http请求。但是当我们直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器并不存在，因此会返回404。这个时候我们需要把所有的请求都转发
2021-04-24 14:05:42
160
原创 小程序的生命周期
小程序的生命周期小程序实例(应用)的生命周期什么是前台后台？页面的生命周期应用和页面的生命周期触发顺序几个常见情况？小程序实例(应用)的生命周期小程序实例的生命周期必须在app.js中调用，在app.js中定义了一些实例的生命周期函数。onLauch：初始化小程序的时候触发，全局只能触发一次，可以在这个生命周期函数中进行小程序的版本检测。onShow：小程序初始化完成或用户从后台切换到前台显示时触发。onHide：用户从前台切换到后台隐藏时触发。onError：小程序发生脚本错误，或api调用
2021-04-24 13:08:57
159
原创 CSS常见面试题
常见面试题CSS实现宽度100%，高度为宽度一半的的盒子CSS实现宽度100%，高度为宽度一半的的盒子通过vw视口单位实现所谓视口单位是相对于视口（viewport）的尺寸而言，100vw等于视口宽度的100%，即1vw等于视口宽度的1%。这个方法有个优点就是，无论图片是否加载成功，容器高度始终是计算完成的，不会造成页面的抖动，也不会造成页面重绘，从而提升性能。 .box { width: 100%; height: 50vw; } .box img { wid
2021-04-19 22:19:13
181
原创 JS之手写XX
JS之手写XX手动实现bind、apply及bind手动实现new手动实现浅拷贝、深拷贝手动实现节流、防抖手动实现instanceof原理手动实现Object.create原理手动实现数据双向绑定手动实现ajax手动实现bind、apply及bind实现call()// 实现call方法Function.prototype.myCall = function(obj) { const args = [...arguments].splice(1); //拿到除了第一个参数外的所有参数
2021-04-19 18:38:10
646
原创 实现Es5继承及Es6继承
// 继承function Person(name) { // 给构造函数添加了参数 this.name = name; this.sum = function() { alert(this.name); }}// 给构造函数添加了原型属性Person.prototype.age = 10;// 原型继承function Per() { this.name = 'ker';}Per.prototype = new Person
2021-04-19 15:52:20
136
原创 webpack基础入门
webpack基础一、核心概念详解Webpack核心概念（一）、Entry（二）、Output（三）、Module（四）、Resolve（五）、Plugin一、核心概念Entry：入口，Webpack执行构建的第一步是从Entry开始，可抽象为输入；Module：模块，在Webpack里一切皆模块，一个模块对应一个文件。Webpack会从配置的Entry开始递归找出所有依赖的模块；Chunk：代码块，一个Chunk由多个模块组合而成，用于代码合并与分割；Loader：模块转换器，用于将模块的原内
2021-04-17 16:11:20
614
2
原创 vue-cli+webpack搭建一个多页面应用
vue-cli+webpack搭建一个多页面应用什么是单页面应用和多页面应用？单页面和多页面的区别如何使用vue-cli+webpack初始化一个项目？vue-cli+webpack搭建多页面应用项目结构调整webpack配置更改什么是单页面应用和多页面应用？SPA单页面应用：指的是只有一个主页面的应用（只有一个html页面），项目启动时加载主页面时会一次性加载所有的js、css等相关资源（需要进行首屏优化）。所有内容都包含在主页面中，对每一个功能模块组件化。单页面的跳转实质上就是切换相关组件，仅仅刷新
2021-04-16 20:23:12
1121
原创 原生js实现对某一个结点的拖拽
// HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。// HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。// MouseEvent.clientX 是只读属性， 它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。window.onload =
2021-04-11 20:01:59
218
原创 原生js对DOM操作
原生js对DOM操作常见的添加、移除、复制、创建和查找节点。// 创建document.createElement('标签名');// 获取var div = document.querySelector('div');// 删除document.body.removeChild('标签名');// 移动document.body.replaceChild('标签名');// 复制document.body.cloneNode(true/false);// 查找document.g
2021-04-11 19:20:00
110
原创 javascript时间戳和日期字符相互转换
javascript时间戳和日期字符相互转换一、日期字符转换为时间戳// 日期字符转换为时间戳(以s为单位)二、时间戳转换为字符串一、日期字符转换为时间戳// 日期字符转换为时间戳(以s为单位)// 方法1 使用+new Date()// +new Date()相当于调用 Date.prototype.valueOf()方法;可返回日期的毫秒数；和Date.prototype.getTime()方法一样；var timestamps = new Date();var myDate = timest
2021-04-11 18:50:33
262
转载 JS的三大组成部分
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。JavaScript的三大组成部分是：1、ECMAScript：JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）
2021-04-11 16:53:10
688
原创 实现一个Event类
实现一个Event类使用ES6实现一个事件类Event，包含了下面功能：绑定事件、解绑事件和派发事件。on(eventName,func())：监听eventName事件，事件触发的时候调用func函数；emit(eventName, arg1,arg2,arg3....)：触发eventName事件，并且把参数arg1、arg2、arg3...传给事件处理函数；off(eventName, func)： 停止监听某个事件。实现Event类的核心其实就是发布订阅模式，即组件间通信使用事件监听和
2021-04-11 15:32:09
527
原创 CDN原理
CDN原理CDN原理为什么有CDN？其他作用原理适用场景流量劫持面试的时候搞混了CDN和DNS（好吧，我是个小菜鸡）。以此篇文章重新构建一下我的知识体系。CDN原理CDN是将源站内容分发至全国所有节点，从而缩短用户查看对象的延迟，提高用户访问网站的响应速度与网站的可用性的技术。它可以有效解决网络带宽小，用户访问量大，网点分布不均等问题。CDN称为“内容分发网络”，源站内容（image、html、js、css等）这个属于内容分发。为什么有CDN？互联网应用包含大量的静态内容，这些内容又是最容易
2021-04-11 12:24:11
239
原创 HTTP请求流程：为什么很多站点第二次打开速度会很快？
HTTP请求流程文章目录HTTP请求流程前言一、浏览器发起HTTP请求流程二、服务器端处理HTTP请求流程1.返回请求2.断开连接3.重定向三、总结前言日常是否会有以下疑问？第一次访问一个站点时，打开速度很慢？再次访问，速度就快多了？一、浏览器发起HTTP请求流程如果在地址栏里面键入地址：http://www.baidu.com/index.html，那么浏览器接下来会完成那些动作呢？构建请求：首先，浏览器构建请求行信息GET /index.html HTTP1.1，构建好后，浏览器
2021-04-10 23:17:08
798
原创 从输入一个URL到页面展示这期间发生了什么？
从输入一个URL到页面展示这期间发生了什么？chrome进程从用户输入URL到页面显示发生了什么？chrome进程我们先了解一下多进程浏览器打开页面后都有哪些进程？从图中可以看出，现在的chrome浏览器包括：一个浏览器主进程、多个渲染进程、多个插件进程、网络进程、1个GPU进程。1.浏览器进程：主要负责界面显示、用户交互、子进程管理、提供存储功能等功能2.渲染进程：将HTML、CSS、Javascript转换为用户可以交互的界面，默认情况下，chrome会为每个Tab标签提供一个渲染进程，渲染进程
2021-04-10 21:47:48
114
原创 移动端开发兼容问题
移动端h5开发遇到的兼容问题ios兼容问题高版本兼容时间格式兼容ios执行document.execCommand("copy")不生效input框ios将数字当成电话。安卓系统兼容问题禁止安卓识别email。禁止图片点击放大。其他ios兼容问题高版本兼容1、场景。h5页面在touchmove时，由于ios自身的下拉回弹效果，底部会多出来一块空白屏。2、解决方案。直接禁止ios系统默认的滑动事件。3、代码。document.body.addEventListener('touchmove',
2020-06-17 17:57:49
624
转载 javascript中function前面加(/!/+/-/~的含义
自执行匿名函数常见格式：(function(){ /* code */ })(); 解释：包围函数(function(){ /* code */ })的第一对括号向脚本返回未命名的函数，随后一对空括号立即执行返回的未命名函数，括号内为匿名函数的参数。 作用：可以用它创建命名空间，只要把自己的所有代码都写在这个特殊的函数包装内，那么外部就不能访问，除非你允许（变量前加上window，这样该函...
2019-12-12 18:51:36
351
原创 JavaScript学习笔记之防抖与节流
防抖与节流：相同点：在不影响客户体验的前提下，将频繁的回调函数，进行次数缩减，避免大量计算导致页面卡顿。不同点：防抖是将多次执行变为最后一次执行，节流是将多次执行变为在规定时间内只执行一次。防抖：在规定时间内回调函数只能执行一次，如果在规定时间内又触发了该事件，则会重新开始算规定时间。其实就是延迟执行。应用场景：输入搜索联想，用户在不断输入值时，用防抖来节约请求资源 按钮点击...
2019-12-03 22:13:47
190
原创 JavaScript事件循环机制
javascript是一门单线程的非阻塞的脚本语言。单线程意味着javascript在执行代码的任何时候，都会只有一个主线程来处理所有的任务。那么js引擎怎样去实现？因为事件循环（eventloop）。1、同步和异步任务分别进入不同的执行场所，同步的进入主线程，异步的进入Event Table并注册函数。2、当指定的事情完成时，Event Table 会将这个函数移入Event...
2019-11-28 10:57:49
155
原创 手写Promise.all()方法
Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），失败原因的是第一个失败 promise 的结果。 // 手写Promis...
2019-11-27 23:11:57
6872
原创 JavaScript数据结构之二叉树常见算法
一、二叉树层级遍历 // 初始化二叉树 function TreeNode(val){ this.val = val; this.left = this.right =null; } function levelOrder(root) { var res = []; if(!root) return re...
2019-11-27 23:10:49
289
原创 JavaScript学习笔记之常见设计模式
一、单例模式单例模式（Singleton）:又被称为单体模式，只允许实例化一次的对象类。有时也会用一个对象来规划一个命名空间，有条理的去管理对象上的属性和方法。比如，有一个需求，需要在活动页面实现新闻列表中的鼠标滑动特效。 function g(id){ return document.getElementById(id); } function...
2019-11-27 12:00:19
161
原创 Vue学习笔记之Vue基础入门
一、创建一个Vue实例<html lang="en"><head> <meta charset="UTF-8"> <title>Vue</title> <script src="./vue.js"></script></head><body><div ...
2019-11-26 22:26:01
177
原创 webpack学习笔记
一、webpack基本配置module.exports = { context: path.resolve(__dirname, '../'), entry: { app: './src/main.js' }, output: { path: config.build.assetsRoot, filename: '[name].js', },...
2019-11-26 19:32:50
107
原创 MVC、MVVM
MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模...
2019-11-25 13:59:58
124
原创 JS中apply、call、bind的区别
使用 apply、call、bind 函数是可以改变 this 的指向的。使用applyvar a = { name : "Cherry", func1: function () { console.log(this.name) }, func2: function () { setTimeout( function () { this.func1() }.ap...
2019-11-25 12:50:26
112
原创 ES6与ES5部分对比
一、常量 // 常量ES5写法 // 为对象增加属性 Object.defineProperty(window,"PI",{ value: 3.1415926, wirtable: false, }) // ES6常量写法 const PI = 3.1415926;二、作用域 // 作用域...
2019-11-25 12:32:17
152
原创 JavaScript学习笔记之reduce()数组方法
一、语法arr.reduce(function(prev,cur,index,arr){//....},init);含义arr：表示原数组 prev：表示上一次调用回调时的返回值，或者初始值init。 cur：表示当前正在处理的数组元素。 index：表示正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1； init：表示初始值。 常用参数为：prev...
2019-11-22 23:17:15
211
原创 JavaScript学习笔记之Promise（承诺）实战
一、为什么会出现promise？在实际开发过程中，经常会遇到某些耗时的js操作。其中，包含异步操作也包含同步操作，但是他们都不是立马可以得到结果的。此时，一般会为其指定一个回调函数，即事先规定，一旦他们运行结束，应该会调用那些函数。JS采用回调来处理异步编程，但是如果出现多层嵌套，也就是常说的"回调地狱"。"回调地狱"不但维护困难，也更容易滋生bug。因此promise出现。Promi...
2019-11-22 22:38:06
286
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人