- 博客(35)
- 收藏
- 关注
RSS订阅原创 css 实现div 4个角尖角边框样式
经常使用的一个小技巧，在不添加额外元素的情况下，使用background绘制div的4个角border.is-active:before{ content: ''; position: absolute; top: 2px; left: 2px; width: 100%; height: 100%; background: linear-gradient(to lef
2021-10-27 11:27:12
1197
原创 前端笔记整理（HTML）
前端基础知识DOCTYPEDOCTYPE 声明css hack标签属性DOCTYPEDOCTYPE 声明<!DOCTYPE>声明有助于浏览器中正确显示网页。网页上不同的文件通过正确声明的HTML的版本，使浏览器就能正确显示网页内容。特点：声明不区分大小写，无结束标签HTML 4.01 中，<!DOCTYPE>声明需引用 DTD（文档类型声明），因为 HTML 4.01 是基于 SGML （Standard Generalized Markup Language 标准
2021-05-28 19:12:12
182
原创 前端笔记整理（编程）
前端基础知识数组去重遍历循环 .indexOf()利用Set类型数组去重遍历循环 .indexOf()let arr = [1,'1',2,'2',1,2,'x','y','f','x','y','f'];function unique1(arr){ let result = [arr[0]]; for (let i = 1; i < arr.length; i++) { let item = arr[i]; if(result.indexOf(item) === -1){
2021-05-23 21:45:27
294
原创 前端笔记整理（Vue）
前端基础知识MVVM原理了解响应原理v-model双向绑定原理声明周期Vue 路由vue路由模式路由导航方式组件通信axios拦截器配置MVVMMVVM即Model-View-ViewModel，将其中的 View 的状态和行为抽象化，让我们可以将UI和业务逻辑分开。MVVM的优点是低耦合、可重用性、独立开发。原理了解响应原理Vue采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty劫持data属性的setter，getter，在数据变动时发布消息给订阅
2021-05-23 19:21:24
2580
20
原创 前端笔记整理（CSS）
前端基础知识CSS3新特性CSS盒模型BFC水平垂直居中CSS3新特性文字换行：word-wraptext-overflow、text-decoration、text-shadowgradient 渐变transition、transition-duration 过渡transform 拉伸、压缩、旋转灯变换animation 动画calc()transition和animation的区别:transition需要触发一个事件才能改变属性，而animation不需要触发任何事件的情况
2021-05-21 13:32:35
227
1
原创 前端笔记整理（JS）
前端基础知识数据类型JS数据类型类型判断手写instanceof类型转换this闭包new数据类型JS数据类型基本类型：number、string、null、symbol、boolean、undefined对象类型：Object（Array、RegExp、Math、Map等）、Function类型判断typeof ：基本类型的数据中除了null，其它类型都可以通过typeof判断；对于对象类型来说，除function以外，其它类型判断的值均为object；instanceof ：通过
2021-05-20 20:06:24
740
2
原创 前端开发面试题-问答（四）
1、变量提升定义：函数以及变量的声明被提升到函数的最顶部。即在js中，变量可以在使用后再声明。其中，函数声明式的提升，即将整个代码块提升到它所在的作用域的最开始执行。function test () { console.log(a); //undefined var a = 123; };test();只有声明的变量会提升，初始化的不会。2、let和var的区别ES6新增了let命令，用来声明局部变量。用法类似于vr，但是所声明的变量，只在let命令所在的代码块中有效
2021-05-17 18:12:06
294
2
原创 前端开发面试题-编程（一）
1、水平垂直居中实现已知宽高：/*(1)absolute+负margin*/div{ position:ablsolute; width:200px; height:200px; top:50%; left:50%; margin-left:-100px; margin-top:-100px; z-index:10;}/*(2)absolute+auto*/div{ margin: auto; position: absolute; width:200px;
2021-05-17 18:09:01
216
原创 前端开发面试题-问答（三）
1、ES6 Promise all 和race的区别与实现Promise是ES6语法标准里的新定义，一般用来处理异步方法的同步执行。Promise.all 是等所有异步方法返回结果后再执行操作，而Promise.race 是哪个方法先结束，就返回该方法的结果。function promiseAll(arr){ const result = []; return new Promise((resolve, reject) => { for(let i = 0; i
2021-05-14 15:16:12
120
原创 前端开发面试题-问答（二）
1、js实现防抖和节流函数的节流和防抖都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或者卡顿现象防抖（将多次操作合并为一次操作进行）：触发高频时间后n秒内函数只会执行一次，如果n秒内高频时间再次被触发，则重新计算时间；节流（使得一定时间内只触发一次函数）：高频时间触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率；//防抖debounce代码：function debounce(fn,delay) { var timeout
2021-05-12 15:06:21
285
4
原创 前端开发面试题-问答（一）
1、谈谈你对前端性能优化的理解（减少页面加载方法）请求数量：合并脚本和样式表、css sprites、拆分初始化负载；请求宽带：精简JavaScript、移除重复脚本、图像优化；缓存理由：使用CDN、使用外部JavaScript和css、天价Expires头、皮遏制ETag，使Ajax可缓存；页面结构：将样式表放置顶部，将脚本放置底部，尽可能快速刷新文档的输出；代码校验：避免css表达式、避免重定向2、对盒模型的理解盒模型分为IE6盒模型以及W3C盒模型（标准盒模型）。页面文档的每个元
2021-05-10 20:51:11
242
原创 Github+jsDelivr+PicGo 搭建图床
一开始搭建图床用了gitee来搭建，感觉效果不错。折腾的毛病有点犯了，准备吧jsDelive倒腾一下，Github不错啊，利用jsDelivr CDN加速访问（jsDelivr 是一个免费开源的 CDN 解决方案），PicGo工具一键上传，操作简单高效。有工具的途径总是那么让人心欢~1. 新建github仓库github的登陆注册需要的爬楼吧。在仓库下新建一个我们的图床仓库，记得新增一份REA...
2019-12-05 16:32:40
452
1
原创 Git版本控制-TortoiseGit
1. TortoiseGitGit 本地安装后基本是通过命令行的方式进行增删改查等操作。命令行的操作方式并非所有人都喜欢的啦，有需求就有新东西，TortoiseGit就是界面化Git的命令行操作的一个开放的git版本控制系统的源客户端，简单直接贼爽~2. 下载安装2.1 下载TortoiseGit下载地址：https://download.tortoisegit.org/tgit/La...
2019-12-03 13:54:20
228
1
原创 使用gitee搭建免费图床
最近在捯饬自己的播客，图片太多每次都要一堆心思在图片路径的考虑上。懒的人总是喜欢折腾的，折腾一时轻松一世 O(∩_∩)O~ 对比几个免费图床的部署和使用上，最终把gitee（码云）敲定了图床：就是专门用来存放图片的，同时允许吧图片对外连接到网上空间。1.创建gitee账号注册...
2019-12-03 10:38:24
304
原创 Git安装配置
一、下载安装官方地址：https://git-scm.com/download/win下载完成，傻瓜式安装即可。检查：右键是否有Git GUI Here和Git Bash Here两个操作快捷。二、配置1. 基本信息配置1.1 设置用户名和邮箱（该配置会在github主页上显示谁提交了该文件）：//git config --global 参数，这台机器上所有的git仓库都会使用这个...
2019-11-23 15:00:43
141
原创 Node安装及环境配置
一、 安装包下载下载地址：https://nodejs.org/zh-cn/download/.msi就是Windows installer的数据包，把所有和安装文件相关的内容封装在一个包里。zip包安装时是直接解压缩后就可以了，msi是傻瓜式一路next就可以了二、安装完成配置检查node是否安装成功：打开CMD窗口，执行node -v，看是否有node版本显示环境变量配置（....
2019-11-23 14:36:27
216
原创 锦囊妙计（二）
页面布局中，如何理解结构与表现分离？如果盲人需要让屏幕阅读器朗读这部分内容，那它就是结构；如果不需要，那它就是表现。结构：HTML文件表现：Css文件行为：JS文件是web开发的一种思路这样做便于后期代码的管理、维护对于前后端分离，你是怎么理解的？前端只做展现交互 不做数据处理如何自定义鼠标指针的图案？怎样去除html标签之间换行产生的空格？父元素上...
2019-08-22 08:56:48
332
原创 锦囊妙计（三）
form表单是怎么上传文件的？你了解它的原理吗？简单来说就是把文件转换为字节流，然后使用http进行传输，后端接受后吧二进制转化为原先的文件格式；HTML表单中，可以上传文件的唯一控件是<input type="file">当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data（表明表单需要...
2019-08-21 16:58:50
292
原创 编程(一)
用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值function randomArr(arr) { var num = randomNumber(); if (arr.indexOf(num)< 0){ arr[i] = num; i++; } else { num = randomNumber(); ...
2019-08-15 15:12:43
158
原创 实现双向数据绑定原理
解析DOM节点和data中的数据进行一一对应，和数据进行绑定。还有就是绑定监听事件方法，事件触发时，将每一个DOM节点内容(比如innerHTM，value等等)赋值给相应的data重写set,get方法，监听数据变化，但是拿不到某个数据对应的DOM节点内容(比如innerHTM，value等等)定义watcher方法，再定义一个主题对象Dep。在解析每一个DOM节点的时候，都new一...
2019-08-02 16:21:17
286
原创 详解Vue的diff算法
vue的diff位于patch.js文件中，复杂度为O(n)。diff过程其实就是调用patch方法，比较新旧节点，一遍比较一遍给真是DOM打补丁虚拟DOM（将真实DOM的数据抽取出来，以对象的形式模拟树形结构）虚拟DOM就是虚拟节点，是通过js的Object对象模拟DOM中的节点，然后通过特定的render方法将其渲染成真实的DOM节点（虚拟dom对应的是真实dom，使用document....
2019-08-02 14:03:07
258
原创 vue为什么要求组件模板只能有一个根元素
从两方面考虑：new Vue({el:’#app’})单文件组件中，template下的元素div一、当我们实例化Vue的时候，填写一个el选项，来指定我们的SPA入口：var vm = new Vue({ el:'#app'}) 同时我们也会在body里面新增一个id为app的div<body> <div id='app'></div&...
2019-08-02 13:16:34
6761
1
原创 Vue.js最佳实践
Vue.js 小技巧watch组件创建的时候，我们需要获取列表、监听input框。每次发生变化的时候重新获取筛选后的列表watch:{ //searchInputValue为 监听input框change事件 searchInputValue:{ handler:'featchPostList', immediate:true //immediate表示创建组件的时候立...
2019-07-17 14:43:20
156
转载 实现CSS等分布局的5种方式
实现CSS等分布局的5种方式等分布局是指子元素平均分配父元素宽度的布局方式，本文将介绍实现等分布局的5种方式原文链接：https://www.cnblogs.com/xiaohuochai/p/5456695.html【思路一】float缺点:结构和样式存在耦合性，IE7-浏览器下对宽度百分比取值存在四舍五入的误差【1】float + padding + background-c...
2019-07-08 10:39:50
1073
原创 js实现404等错误页面返回上一页
返回上一页没有上一页就返回首页不同的浏览器返回的window.history.length值不同，需要特殊情况特殊处理function Goback() { //IE if((navigator.userAgent.indexOf('MSIE') >= 0) && (navigator.userAgent.indexOf('Opera') < ...
2019-05-08 09:03:50
1700
原创 ajax（原理、构造、封装......）
ajax的核心是XMLHttpRequest对象。首先我们先创建一个XMLHTTPRequest对象var xhr = new XMLHttpRequest();XMLHttpRequest在使用XMLHttpRequest对象的第一步，我们首先要调用open方法来初始化请求参数，xhr.open('get','/test',true)虽然名字叫open，但是此时请求还并没有发送。...
2019-05-07 09:39:07
170
转载 ajax钩子,全局处理ajax请求全局事件
ajax钩子:https://github.com/wendux/Ajax-hookajax全局事件:https://www.cnblogs.com/RachelChen/p/5433881.html
2019-05-05 19:34:07
371
转载 Jquery DataTables 使用AJAX POST的问题
Jquery DataTables 使用AJAX POST的问题最近项目在用需要用表格，听说DataTables很好很强大，于是用了一下。Get请求没什么问题，问题处在POST请求上Jquery原生的POST请求没有问题，代码如下 $.ajax({ url:getDatumArticlesURL, type:"POST", contentType: "applicatio...
2019-05-05 19:15:28
477
原创 登录采用BASIC AUTH鉴权
在web应用中，通过直接提供用户名、密码来进行验证身份的一种优化的解决方案。具体原理：将username和password通过“：”来连接，组合成“username:password”，然后将此组合串进行base64加密，将加密后的串传递到web服务器，服务器进行base64解密，得到username和password，然后进行匹配验证。原由：1、加密后的base64密文，用户直接查看是不晓...
2019-04-29 13:28:22
3235
原创 css的滚动条
通常设置div滚动条时候，使用的是/*始终显示滚动条*/overflow:scroll/*按需显示滚动条*/overflow:auto自适应宽度同时自动显示滚动条的场景overflow: scroll 内容自动撑开容器的宽度不包括滚动条，相当于滚动条是一个和内容并列显示的组件。overflow: auto 内容撑开容器的宽度包括滚动条，即使用whitespace:...
2019-04-10 11:40:15
279
原创 css设置居中
水平垂直居中vertical-aligh: middle最常见垂直居中方法 前提条件：display:inline-block .out{ width: 300px; height: 300px } .in{ width: 50%; height: 50%; ...
2019-03-13 20:57:47
1305
原创 渐变色配色网站
CoolHue经常在网页中要做一些背景，用图片的处理简单的背景图有点吃亏，加载和分辨率之类的考虑等，使用css3的渐变色处理往往会有惊喜。CoolHue是一个意外中的收获，它是一个相当实用的渐层背景网站，提供大约 30 种不同配色的渐层背景，可以免费下载为图片格式或产生 CSS3 语法。简直好用的惊喜尖叫~uigradients这个就有点厉害了，特别是有些对配色有困难的小可爱们，这个网站...
2019-03-09 19:42:11
28280
转载 12个炫酷实用的HTML5带发光动画
https://www.html5tricks.com/12-html5-shining-animation.html
2019-03-07 10:33:58
442
1
原创 css3小三角形运用
css3小三角形运用border属性<style> .triangle{ width: 100px; height: 100px; border: 30px solid palegreen; margin: 0 50px; }</style><div class="triangle...
2019-03-04 15:26:34
74
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人