- 博客(32)
- 收藏
- 关注
RSS订阅
原创 scss--从入门到包会
scss打开scss官网，你会看到一句话：世界上最成熟、最稳定、最强大的专业级CSS扩展语言!老牛皮哄哄了如此引(吹)人(就)入(完)胜(事)的语言介绍，那确实得有点东西啊，scss属于一种css的预处理语言，何为预处理，就是提供一个环境解析你的css代码，这个环境可以存在变量，函数，使后期维护html样式变得更加轻松...
2020-06-15 00:50:21
352
原创 前端那些事--url输入到浏览器到页面的呈现的过程（全网最详细）
面试官：url输入到浏览器到页面的呈现经历了什么？萌新：浏览器发送请求，服务器收到数据返回，浏览器拿到数据渲染页面面试官：再详细点呢？萌新：不造啊ok，不多聊了，GG这真的是一道津津乐道的面试题了，要说过程，还真没我们想的那么简单，这里给大家带来最最最详细的过程介绍①输入url网址②查看缓存(如果有就跳过③)③DNS解析域名获取IP④建立TCP连接(三次握手)⑤浏览器向服务器发出HTTP请求拿取数据包⑥服务器收到请求，返回数据⑦浏览器拿到数据进行页面渲染⑧关闭TCP连接(四次挥手
2020-07-20 13:12:07
919
原创 Node的那些事--express模块
上手一个node服务项目，搭建完服务器，最烦最烦的事-静态私服,脸上笑嘻嘻，心里乐( m )呵( m )呵( p ),这么多配置项要处理，不得烦死？？？于是你默默许愿：如果node有一个能一键配置所有需要读取的文件的技术该有多好，你心里刚想完，express就闪亮登场Express啥是express？从官网来看，express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能。看出来了，说白了就是极简还强的一批优化版node呗,接下来我们
2020-07-13 10:11:09
245
原创 数据库那些事--关系型数据库和非关系型数据库
数据库引用百科的话而言，数据库是按照数据结构来组织、存储和管理数据的仓库，是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。这种集合以一定方式储存在一起、能与多个用户共享、具有尽可能小的冗余度、与应用程序彼此独立，可视为电子化的文件柜——存储电子文件的处所，用户可以对文件中的数据进行新增、查询、更新、删除等操作。数据库嘛，无非就是两种：关系型数据库和非关系型数据库关系型数据库含义以行和列的形式存储数据，以便于用户理解。这一系列的行和列被称为表，一组表组成了数据库。代表数据
2020-07-13 10:10:43
313
原创 前端的那些事--正反向代理
正向代理正向代理（forward proxy）：正向代理，意思是一个位于客户端和原始服务器(origin server)之间的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端才能使用正向代理。正向代理，其实是"代理服务器"代理了"客户端"，去和"目标服务器"进行交互。这种技术的应用实例就是我们耳熟能详的爬梯子，有时候我们想访问外网的资源，用以往的直接访问，是访问不到的，这时候就得挂vpn，借助某些加速器的
2020-07-06 19:27:49
2626
原创 前端的那些事--跨域
跨域前端程序员，一定少不了接触跨域，在你写一个ajax请求一个网站时，发现报错提示中含有Cross-Origin，那肯定就是你遇到跨域了，不过，这个请求已经是发出去了的，服务端也接收到并处理了，但是返回的响应结果不是浏览器想要的结果，所以浏览器将这个响应的结果给拦截了，至于为什么浏览器不满意结果，就得说说同源策略同源策略诞生同源策略是由NetScape提出的一个著名的安全策略。最初的 “同源策略”，主要是限制Cookie的访问，A网页设置的 Cookie，B网页无法访问，除非B网页和A网页是“同源”
2020-07-06 09:04:21
133
原创 前端小干货（中级篇）
①渐进增强和优雅降级这两个名词是css3出来后火起来的.transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }...
2020-06-27 14:09:47
282
原创 前端小干货（基础篇）
①：谷歌字体谷歌浏览器作为前端工程师最喜欢的浏览器，无异于他的各方面兼容做的及其牛逼，这里我就不点名某i厂（做出的东西自己都嫌弃~），谷歌的默认字体大小是12px，最小也不能小于12px，但是某些时候我们需要10px或者更小的字体，解决方案有-webkit-transform:scale(0.8);②：body页面宽高100%:root{height:100%;width:100%}bod...
2020-06-22 15:29:03
135
原创 前端的那些事--懒加载
何为瀑布流布局，一般就是值图片等宽不等长，像下面这个车的图片，高度不等，像瀑布一样往下排列，这种瀑布流布局在旅游类网站比较常见。这里我讲解一下最简单的瀑布流，就是用css3的新增属性...
2020-06-21 21:11:36
198
原创 TypeScript和JavaScript
TypeScript简介TypeScript是一种由微软开发的开源、跨平台的编程语言。是 JavaScript 的一个超集，支持 ECMAScript 6 标准。2012年10月，微软发布了首个公开版本的TypeScript，2013年6月19日，在经历了一个预览版之后微软正式发布了正式版TypeScript。开发初衷由于JavaScript语言本身的局限性，难以胜任和维护大型项目开发。因此微软开发了TypeScript ，使得其能够胜任开发大型项目。当然，它可以编译成纯 JavaScript，编译
2020-06-15 01:18:20
319
原创 前端的那些事--AJAX
前面的js的时间线以及异步讲到了js的单线程，在这种底层多线程又做着单线程的事的这种环境下，有些需求的开发就成了难题，比如在一个登陆页面中，输入用户名完后即刻在数据库中读取这个账户是否存在，由于进行按钮的提交跳转，页面没有刷新，此时就有一门技术可以解决这种难题–AJAXAJAX(Asynchronous Javascript And XML)从直译来看，就是异步js和xml，这是一种交互式动态网页开发，独立于 Web 服务器软件的浏览器技术。被所有的主流浏览器支持，不需要加载整个网页就完成局部刷新，从语
2020-06-08 11:19:05
88
原创 status状态码大全
有时候网页打开报错404，504的你是否一脸蒙蔽？不要紧，下面的总结的简化状态码大全让你一次看个够，不在为不知道理由的网页报错而一脸懵逼1xx：信息提示客户端在收到常规响应之前的临时响应状态码含义100继续101切换协议2xx：成功提示服务器成功地接受了客户端请求，网页处于可访问状态。状态码含义200服务器已成功处理了请求201创建了新的资源202接受了请求但没有处理203返回别的未知信息204未返回内容
2020-06-08 11:17:40
5399
原创 前端的那些事--定时器的异步过程
话不多说题目入手：setTimeout(function(){ console.log(1);},0)console.log(2);上面这一道题目测试两个语句的输出顺序，有基础的同学估计很快就得出答案，2 1，那么入门的同学就好奇了，js不是按顺序一步一步执行吗，这里就且罢听我道说。浏览器的工作原理名称作用进程cpu资源分配的最小单位线程cpu调度的最小单位就是说，进程包括线程，一个进程包含多个线程，浏览器是多进程：进程名称作用Bro
2020-06-02 11:55:57
356
原创 前端的那些事--防抖和节流
近段时间写项目，图片过多，为了减少浏览器请求负担就用了懒加载，写完懒加载后发现很多地方需要优化，比如单位时间内多次执行scroll函数会不停执行for循环，小项目尚可，大项目中这无疑是一个大负荷，于是去学习了一下防抖和回流测试例子：以浏览器窗口scroll事件为例打印当前时间function test(){ let time = new Date(); console.log(`${time.getHours()}:${time.getMinutes()}`)}防抖（debounce）高频触
2020-05-09 22:03:36
224
原创 关于ES6的详解（上）
ESECMAScript的简写，es6，就是ECMAScript的第六个版本，在2015年6月发布，这是一个标准，不是啥插件，这个版本主要是为了解决 ES5 的先天不足，新加了类这个之前没有的概念诞生历史：1997 年 ECMAScript 1.0 诞生。1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。1999 年 12 月 ...
2020-03-15 18:49:06
116
原创 前端的那些事--时间线
单线程都说js是一个很牛逼的语言，要说js是什么，有很多答复，面向对象，弱类型，解释性语言，还有一条，就是单线程，强如java是多线程，多线程处理效率高，js的单线程是属于表面单线程实质底层多线程，js是在浏览器中运行的，浏览器是多线程，它单单开通一条线给js运行，就是js引擎，当然js也不能成为多线程，因为js是操作dom的，假如一个div又要变宽又要变高，浏览器不能同时执行，所以js理所当然...
2020-03-10 21:21:42
535
原创 关于响应式布局和自适应布局
现在随着移动设备的增多，各种不同分配率大小的设备也见怪不怪了，怎样在移动端布局不会崩塌自适应布局为不同的设备提供不同的网页，比如专门写一个mobile / iPhone / iPad版本。虽然解决了适配，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个入口，会大大增加架构设计的复杂度。自适应还暴露出一个问题，如果屏幕太小，即使网页能够根据屏幕大小进行适配，但是会感觉在小屏幕上查看，内...
2020-01-08 19:47:29
205
原创 css3旋转门
<style type="text/css"> body{ height: 100vh; margin: 0; perspective: 2000px; perspective-origin: 100px 100px; transform-style: preserve-3d; } .father{ width: 300px; height: 300p...
2020-01-07 17:15:24
259
原创 关于回调地狱
现在有一个小demo，有四个<div class="ball"></div>，样式是设成一个个小圆球，我们希望小球能一个一个往右移动，但是必须是第一个移动完才能移动第二个，以此类推，移动完4个小球一般写法，无非就是写一个函数，对函数传参数下表进行递归，可是后期改需求，不是依次移动小球，而是按不同顺序移动，那么，就得写异步回调函数，进行层层嵌套,那么这样写结果如何呢，用回调...
2019-12-30 21:05:01
134
原创 混合计算器
css：<style type="text/css"> *{margin: 0px auto;padding: 0px;user-select:none} .keyboard{ width: 400px; height: 600px; border: 1px solid black; display: flex; flex-flow: row wrap; }...
2019-12-30 08:32:42
471
原创 带倒影的轮播图
<style> body{ margin: 0; padding: 0; overflow: hidden; } .all{ height: 200px; position:relative; margin: 150px auto; transform-style: preserve-3d; perspective: 800px; } .all...
2019-12-28 10:14:27
282
原创 用canvas写随机验证码
body部分<canvas id="vas"></canvas><button>刷新验证码</button>js部分①：设置属性/获取元素var vas = document.getElementById("vas");//获取canvasvar pen = vas.getContext("2d");//绘制画笔var btn = d...
2019-12-27 10:45:29
257
1
原创 关于canvas的小白基础篇
一、Canvas元素（画布）游戏：HTML5 Canvas元素可以开发出非常漂亮的2D或者3D游戏广告：如果你不希望使用GIF图片或者Flash的话，Canvas绝对是个不错的选择图形图表：互动类的图表和图形一直都被flash占领但是Canvas绝对不逊于flash的使用体验其他：例如艺术或者需要点缀的应用场景，发挥你的想象二、什么是Canvas?在HTML中是一个新增的H5的标签那...
2019-12-26 14:45:41
194
原创 关于JQuery的那些事(无new构造)
JQuery，作为风靡一时的前端框架，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它是具有良好的dom操作性能，被前端工程师所喜爱，JQuery也是js封装起来的类库，...
2019-12-25 20:42:17
188
原创 关于JQuery的那些事(链式调用)
<script> function Jquery(ele){ var res = typeof ele === "string"?document.querySelectorAll(ele):ele; for(var i = 0; i < res.length; i ++){ this[i] = res[i]; } this.length = i; t...
2019-12-02 20:08:46
161
原创 关于事件（下）
事件冒泡：浏览器对象事件执行顺序遵循从最里面到document的顺序一层层剖析，向上执行，仿佛在水里冒泡泡一样，从下往上，所以称为事件冒泡<div class="outside"> <span>最外面的div</span> <div class="side"> <span>中间的div</span> <...
2019-12-02 16:43:16
65
原创 关于事件（上）
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
2019-11-30 14:19:31
99
原创 浅谈js函数对象和闭包
函数函数对象的创建：1、函数声明fn();function fn(){}上面这种函数统称函数声明,fn()是调用这个函数对象,fn()的调用位置不必刻意放在对应声明的函数下面，因为浏览器对js代码的解析机制是先声明函数，即声明提前，所以调用放哪都不会报错2、函数表达式var fn = function(){}fn();函数表达式的展开语法是var 变量名 = function...
2019-11-14 20:39:15
194
原创 潜谈函数作用域和作用域链
作用域的分类全局作用域局部作用域1、全局作用域定义：在js的任意地方都可以获取和使用(1)最外面的定义的变量就拥有全局作用域var a = 1;function test(){ var b = 1;}console.log(a);//1(2)任何变量，如果没有声明就赋值，此变量会为全局对象所有function test(){ var b = 1;}...
2019-11-12 08:18:53
124
原创 用for循环重写js数组的api（下-改变原数组）
首先我们先了解常见的数组api(改变原数组)数组api属性pop()删除数组最后一位，并返回删除结果push()向数组的最后一位添加一个或者多个数据shift()删除数组第一位，并返回删除结果unshift()向数组的第一位添加一个或者多个数据reverse()将数组转字符串splice()遍历数组所有的项首先创建一个用于修改数...
2019-11-11 11:32:04
1079
原创 用for循环重写js数组的api（上-不改变原数组）
var arr = [1,2,3,4,5];var att = [];arr.__proto__ = { //解析多维数组 flat:function (...arr) { var num = 0; for(var i = 0; i < arr.length; i++){ if(Array.isArray(arr[i])){ ...
2019-11-10 22:18:14
736
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人