- 博客(47)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 css精髓：这些布局你都学废了吗？
前言最近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。单列布局单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。单列布局一般有两种形式：(图片来源：https://blog.csdn.net/Ace_Arm/article/details/81036129)一栏布局一栏布局头部、内容、底部宽度一致效果图代码实现html<header&g
2020-12-17 09:15:31
328
1
原创 这些鲜为人知的前端冷知识，你都GET了吗？
背景最近公司项目不多，比较清闲，划水摸鱼混迹于各大技术博客平台，瞬间又GET了好多前端技能，一些属于技巧，一些则是闻所未闻的冷知识，一时间还消化不过来，不由的发出一声感叹！前端可真是博大精深于是突发奇想，现分类整理出来分享给大家，也补充了一些平时的积累和扩展了一些内容，俗话说，独乐乐不如众乐乐，大家一起来接受前端的洗礼吧！！！论被玩坏了的前端HTML篇浏览器地址栏运行JavaScript代码这个很多人应该还是知道的，在浏览器地址栏可以直接运行JavaScript代码，做法是以javas
2020-12-02 13:39:23
2006
14
原创 h5页面在浏览器上好好的，到手机上熄火了又看不到报错信息怎么办？
背景最近小编接了一个新需求，用h5开发页面，通过webview嵌入原生APP中，自己在浏览器上开发爽歪歪，什么信息都能看到，可是一嵌入原生app中，瞬间就熄火了，啥也看不到了，不知道为什么，反正就是页面点不动了。这可把我急坏了，不知道有没有小伙伴有和我一样的困扰，我们在开发手机版网页的时候，常常会出现下面的情景：(1) 开发时，在自己电脑上运行得好好的，在手机上打开就挂了，但是手机上又看不到error log；(2) 上线后，某用户表示页面失灵，但我们自己又重现不出来，看不到用户侧的出错信息。如
2020-09-19 11:18:03
740
原创 【面试篇】金九银十面试季，这些面试题你都会了吗?
你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?IE: trident内核Firefox：gecko内核Safari:webkit内核Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核Chrome:Blink(基于webkit，Google与Opera Software共同开发)每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？ 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 H
2020-09-15 09:24:50
253
原创 史上最强vue总结~万字长文---面试开发全靠它了
vue框架篇vue的优点轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十kb；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了angular的特点，在数据操作方面更为简单；组件化：保留了react的优点，实现了html的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom操作是非常耗费性能的，不再使用原生的dom操作节点，极大解
2020-07-14 21:33:57
2010
6
翻译 [译]8个惊人的CSS按钮悬停效果，不看后悔一辈子
发送按钮悬停效果效果图HTML<div id="send-btn"> <button> // 这里是一个svg的占位 Send </button></div>CSS#send-btn{ display: flex; align-items: center; justify-content: center; height: 100vh;}button { background: #5f55af;
2020-09-03 10:17:28
432
原创 web网页人脸识别tracking.js
what？你没有看错，强大的JavaScript也可以实现人脸识别功能。小编精心整理了一个人脸识别的JavaScript库（tracking.js），通过这篇文章，你可以了解到如何在网页中实现一个人脸识别功能。tracking.jsTracking.js 是一个独立的JavaScript库，用于跟踪从相机实时收到的数据。跟踪的数据既可以是颜色，也可以是人，也就是说我们可以通过检测到某特定颜色，或者检测一个人体/脸的出现与移动，来触发JavaScript 事件。它是非常易于使用的API，具有数个方法和事件
2020-08-18 09:22:18
2568
3
原创 手把手教学~基于element封装tree树状下拉框
在日常项目开发中，树状下拉框的需求还是比较常见的，但是element并没有这种组件以供使用。在这里，小编就基于element如何封装一个树状下拉框做个详细的介绍。通过这篇文章，你可以了解学习到一个树状下拉框组件是如何一步一步封装成功的。话不多说，先看效果图：封装组件该组件主要基于element的select组件、tree组件及input组件进行二次封装的。组件布局首先我们需要基于这几个组件对我们的组件进行布局，话不多说直接上代码：<template> <el-selec
2020-08-10 15:35:02
629
原创 【项目实战】sass使用基础篇（上）
Sass是一种CSS预处理语言。CSS预处理语言是一种新的专门的编程语言，编译后形成正常的css文件，为css增加一些编程特性，无需考虑浏览器的兼容性（完全兼容css3），让css更加简洁、适应性更强，可读性更佳，更易于代码的维护等诸多好处。CSS预处理语言有Scss(Sass) 和Less、Postcss。Scss和Sasssass一开始用的是一种缩进式的语法格式采用这种格式文件的后缀名是.sass在sass3.0版本后我们常用的是sassy css语法，扩展名是.scss，更接近与css语法
2020-08-06 11:37:46
195
原创 项目实战之跨域处理~一文搞定所有跨域需求
什么是跨域？跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。什么是同源策略？同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，它是由Netscape提出的一个著名的安全策略。同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。其主要限制以下几个方面：C
2020-07-31 13:27:47
327
原创 项目实战之接口处理篇~一文搞定接口请求
在项目开发中，接口请求是必不可少的，为了方便使用和维护，大家都会将接口请求的方法二次封装。下面小编将我项目中接口封装使用的方法分享给大家，希望可以帮到大家。喜欢的给个三连击再走哟。目前前端常用的请求方式主要有两种：axios、Fetch。下面小编就这两种给大家详细的介绍介绍。axiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。特点从浏览器中创建 XMLHttpReq
2020-07-24 11:06:00
590
原创 项目实战之本地存储篇
在前端项目开发中，前端的本地存储是必不可少的，今天小编就前端的本地存储在项目中的使用详细的介绍一下。前端本地存储主要有：cookielocalStoragesessionStoragewebSQL/indexDB接下来就这三种前端常用的存储方式进行介绍。cookiecookie就是存储在客户端的一小段文本，大小不能超过4kb，在请求接口的时候，cookie会被请求携带着，进而被服务器所读取使用。打开浏览器控制台，F12>>Application>>Cookies,
2020-07-22 11:56:26
357
原创 手把手从零开始---封装一个vue视频播放器组件
现在，在网页上播放视频已经越来越流行，但是网上的资料鱼龙混杂，很难找到自己想要的，今天小编就自己的亲身开发体验，手把手从零开始—封装一个vue视频播放器组件。作为一个老道的前端搬砖师，怎么可能会一心闭门造车呢？还是先去网上找找轮子吧经过在网上不断的查阅之后，我最终选择了video.js这个轮子，作为我的播放器。好，现在轮子找好了，乍一看，天，好像有点丑。不着急，我再来把它美化美化（二次封装）。引入video.js安装//安装video.js插件npm install video.js -S
2020-07-13 14:14:17
1890
原创 react的setState到底是同步还是异步？
在介绍这个问题之前，我们先来看一下一个例子：state = { number:1};componentDidMount(){ this.setState({number:3}) console.log(this.state.number)}看完这个例子，也许很多小伙伴会下意识的以为setState是一个异步方法，但是其实setState并没有异步的说法，之所以会有一种异步方法的表现形式，归根结底还是因为react框架本身的性能机制所导致的。因为每次调用setState都
2020-07-11 14:50:08
683
原创 前端性能优化总结
gzip压缩gzip压缩效率很高，可以达到70%的压缩率//npm i -D compression-webpack-plugin 安装插件依赖configureWebpack: config => { const CompressionPlugin = require('compression-webpack-plugin') config.plugins.push(new CompressionPlugin())}去掉console.log生产环境中，不需要打印日志。通过对
2020-07-10 22:08:52
120
原创 Event Loop我知道，宏任务微任务是什么鬼？
在介绍宏任务和微任务之前，先抛出一个问题。相信大家在面试的时候，会遇到这样的相似的问题：setTimeout(function(){console.log('1')});new Promise(function(resolve){ console.log('2'); resolve();}).then(function(){console.log('3')});console.log('4');请说出控制台打印的数据，很多小伙伴经过深思熟虑之后，会自信的说出
2020-07-09 10:53:12
186
原创 vscode常用插件快捷键
俗话说，工欲善其事必先利其器，我们码农的器是什么尼？没错，就是我们亲爱的IDE，前端开发者最爱的编辑器应该是vscode了吧。但是我们要怎么去锋利它尼？不外乎就是熟悉它的使用方法、快捷键以及第三方的插件。接下来，我整理了一些vscode常用的快捷键以及常用插件，希望可以帮助各位码农锋利自己的武器。快捷键器篇窗口文件相关快捷键新建文件Ctrl+N文件之间切换贴Ctrl+Tab打开一个新的VS Code编辑器Ctrl+Shift+N关闭当前窗口Ctrl+W关闭当前的VS Code编辑器C
2020-07-07 17:33:18
711
原创 vue开发必须知道的小技巧
近年来，vue越来越火，使用它的人也越来越多。vue基本用法很容易上手，但是还有很多优化的写法你就不一定知道了。本文列举了一些vue常用的开发技巧。require.context()在实际开发中，绝大部分人都是以组件化的方式进行开发。随之而来就有了许多的组件需要引入。比如以下场景：import outExperInfo from "@/components/userInfo/outExperInfo";import baseUserInfo from "@/components/userInfo/b
2020-07-06 16:02:16
391
原创 面试宝典带你走向人生巅峰
又到了七月面试季，全国各大高校的毕业生如洪水猛兽一般涌入市场，随之而来的则是大量的投递简历、参加面试、等待通知。但是很多小伙伴可能初次找工作，最终结果往往都不如人意，接下来我就我自己的面试经历简单的说说面试那些事，希望可以帮到大家。面试找工作前准备找工作前的准备的话主要是相关行业的知识点以及一份简历，这两样是必不可少的。对于知识点而言，我个人是极度不赞成死记硬背的，因为这样遗忘率太高，而且再面试的时候会回答的过于流畅以及死板，往往达不到面试官的要求；我个人的建议是在准备知识点的时候，准备一张纸，发散
2020-07-05 10:35:21
138
原创 深入探讨深拷贝浅拷贝两兄弟
基本数据类型在深入探讨深拷贝和浅拷贝之前，我们需要先了解一下Javascript得数据类型。众所周知JavaScript得数据类型，分为基本数据类型和引用数据类型。那么这两种类型到底有什么区别？接下来我们详细的谈谈。导图：js内存接下来我们还需要了解一个重要的知识点----js中的内存js中的内存为两种-----栈和堆。基本数据类型存储基本数据类型的值存在栈里面，并且值与值之间独立存在，修改一个值，不会影响其他的值。举个列子：把a的值传给b下面解释为什么当a的值变为124时，b为什么
2020-07-03 15:03:49
113
原创 JavaScript易错知识点
JavaScript易错知识点整理1.变量作用域上方的函数作用域中声明并赋值了a，且在console之上，所以遵循就近原则输出a等于2。上方的函数作用域中虽然声明并赋值了a，但位于console之下，a变量被提升，输出时已声明但尚未被赋值，所以输出undefined。上方的函数作用域中a被重新赋值，未被重新声明，且位于console之下，所以输出全局作用域中的a。上方函数作用域中使用了ES...
2020-07-01 17:47:49
70
原创 canvas简易画布
今天学习了canvas，利用它做了一个简易版的画板，校验自己所学的知识，分享出来以供大家学习指教。先上效果图。主要是使用了canvas的stroke和clearReact来实现画板的绘画和橡皮擦功能，然后通过监听鼠标的按下、移动、弹起事件，完成绘画及擦除功能。直接上才艺代码html:<input type="button" value="画笔" class="active" /><input type="button" value="橡皮擦" /><br />
2020-07-01 17:26:56
406
原创 React、Vue添加全局的请求进度条（nprogress）
全局的请求进度条，我们可以使用nprogress来实现，效果如下：首先需要安装插件：npm i nprogress -S然后使用的时候主要有两种方式，第一种是切换页面的时候，第二种则是请求接口的时候。切换页面可以在入口文件添加如下代码：import NProgress from 'nprogress' // 引入nprogress插件import 'nprogress/nprogress.css' // 这个nprogress样式必须引入router.before..
2020-06-11 14:55:44
881
原创 react后台管理系统路由方案及react-router原理解析
最近做了一个后台管理系统主体框架是基于React进行开发的，因此系统的路由管理，选用了react-router（4.3.1）插件进行路由页面的管理配置。实现原理剖析1、hash的方式 以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示function Router() { this.routes = {}; this.curren
2020-06-11 14:53:42
1145
原创 函数节流和去抖的用法和区别
我们都知道频繁触发执行一段js逻辑代码对性能会有很大的影响，尤其是在做一些效果实现方面，或者逻辑中需要进行后端请求，更是会导致卡顿，效果失效等结果，所以在处理类似的情况时，可以考虑使用函数节流和函数去抖来解决，至于具体使用哪一种方式，根据实际情况分析定夺,先来讲解一些这两者的概念,以下是我个人的一些看法,若有不足,希望大家可以提出.函数节流在频繁触发的情况下，需要执行的逻辑只有执行完之后，...
2019-02-14 10:15:28
439
原创 ant design pro生产和开发环境的坑
1、axios的get请求开发环境会自动带上cookie，但是生产环境则不会，需要手动设置以下代码：axios.defaults.withCredentials=true;2、models全局和局部问题局部model在生产环境中，在未渲染之前调用会报错，在开发环境中则不会，生产环境中需要使用其他的局部model，需将其提升为全局的model。...
2018-12-17 17:44:36
3502
1
转载 原型链继承
【寒暄】好久没有更新博客了，说来话长，因为我下定决心要从一个后台程序员转为Front End，其间走过了一段漫长而艰辛的时光，今天跟大家分享下自己对javascript中原型链继承的理解。总的说来，js中的常用的继承方式可以分为两种，一种是原型链式继承，这也是本文要谈的重点；另外一种是借用构造函数继承，...
2018-05-15 09:44:15
217
原创 js中通过ajax调用网上接口
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-05-10 15:20:22
23656
4
原创 css做旋转相册效果
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;
2018-05-10 15:18:48
547
原创 网页中分页的数据查询
有些网页中通常会有一个分页的样式，点击上一页或者下一页或者是具体的某一页的页码，页面中可以显示具体的从数据库查询的对应的数据。 以下介绍两种分页查询的方法。 第一种也是最常用的，就是通过数据库的limit来指定查找某个位置的几条数据。limit语法格式为： limit[offset] rows ...
2018-05-08 10:13:06
908
1
原创 JavaScript中用画布canvans做贪吃蛇
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style type="text/css"> *
2018-05-07 20:47:51
737
原创 粗谈对ajax的理解
ajax: Asynchronous JavaScript and XML 异步JavaScript和XML技术 Asynchronous： JavaScript：XMLHttpRequest XML：实现数据存储和交换 ----- JSON 特点： AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 不重新加载整个页面的情况下实现页面局部内容的刷新（无刷新技术-...
2018-05-03 20:40:16
208
原创 封装ajax函数
/* *封装ajax函数* @param options * options = {* type : "get|post", // 请求方式，默认为 get* url : "", // 请求服务器资源url* data : {username:"xxx", password:""}, // 向服务器传递的数据* dataType : "text|json", // 预期从服务...
2018-05-03 20:30:38
244
原创 JavaScript产生随机颜色
//获取rgb类型的颜色 IE7不支持 function randomColor(){ var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math....
2018-04-26 20:04:34
165
原创 自己封装的tools.js文件
/* * 生成指定范围的随机整数 * @param lower 下限 * @param upper 上限 * @return 返回指定范围的随机整数，上/下限值均可取 */function random(lower, upper) { return Math.floor(Math.random() * (upper - lower)) + lower;}/* * 生成rgb...
2018-04-24 19:58:08
702
原创 JavaScript写放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #middle {
2018-04-24 19:55:04
133
原创 javascript写无缝平移的轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> * {margin: 0
2018-04-24 19:53:24
1073
原创 javascript写淡入淡出效果的轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
2018-04-24 11:42:42
216
原创 jQuery做轮播图
这是我自己做的一个简单的轮播图，效果图如下：我觉得轮播图中最主要的是要理解到图片为什么会滑动，是怎么控制的。上面这个我自己做的，是搭好的一个结构，在无序列表中插入需要的图片。然后在插入图片的后面添加一个空的无序列表，作为轮播图中下方的小点。 <div class="box"> <ul class="imageList"> <li><img s...
2018-04-23 11:28:26
1198
原创 常用正则表达式
一、校验数字的表达式1 数字：^[0-9]*$2 n位的数字：^\d{n}$3 至少n位的数字：^\d{n,}$4 m-n位的数字：^\d{m,n}$5 零和非零开头的数字：^(0|[1-9][0-9]*)$6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$8 正数、负数、和小...
2018-04-19 19:44:56
119
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人