- 博客(26)
- 收藏
- 关注
RSS订阅转载 script标签中的属性
script标签中defer和async属性的区别script标签中defer和async属性的区别script标签中defer和async属性的区别script标签存在两个属性，defer和async，因此script标签的使用分为三种情况：1.没有defer或async属性，浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前，不等待后续加载的文档元素，读到就开始加载和执行，此举会阻塞后续文档的加载； ①【如果放在head头里面引入，异步加载资源，但会阻塞的渲染，
2021-08-26 15:15:38
797
原创 Mac 常用快捷键
MacBook Pro 常用快捷键初次使用mac 的小伙伴会遇到很多快捷键使用问题，尤其是相比window系统有很大的不同，以下为本人在工作中会使用的到快捷键：刷新页面 command + r锁定屏幕 control + command + q显示或隐藏文件 shift + command + .切换应用程序 command + tab切换下一个vscode文件或浏览器标签页 control + tab切换到上一个vscode文件或浏览器标签页 control + s
2021-07-13 20:41:12
420
原创 git的常用命令
我工作中基本会用到Git 的 相关命令，总结如下，和大家一起分享：1、git clone的用法：$ git clone https://github.com/xxx.git 版本库的url;$ git clone [email protected]:xxx.git 使用SSH协议：2、git pull 拉取远程的所有信息，会合并代码3、git fetch：相当于是从远程获取最新版本到本地，不会自动merge4、git add . 将内容从工作目录添加到暂存区5、git commit
2021-01-30 18:48:09
142
原创 前端面试题总结1-JavaScript基础
一、JavaScript基础1、变量和类型（1）JavaScript规定了几种语言类型JavaScript中的每一个值都有它自己的类型，JavaScript规定了七种语言类型：①Undefined②Nulls③Boolean④String⑤Number⑥Symbol⑦.Object（2）JavaScript对象的底层数据结构是什么js基本类型数据都是直接按值存储在栈中的(Undefined、Null、不是new出来的布尔、数字和字符串)，每种类型的数据占用的内存空间的大小是确定的，
2020-11-02 16:47:52
386
原创 Vue3.0项目创建方式
1、 创建Vue3的3种方式① Vue-CLI 基于脚手架2.0或者脚手架3.0② Webpack 自己手动配置webpack环境③ Vite vue3新特性<!-- Webpack ->git clone https://github.com/vuejs/vue-next-webpack-preview.git projectNamecd projectNamenpm installnpm run dev// Vue-CLI npm insta.
2020-10-30 16:24:16
853
原创 vue3.0Performance（性能）提升分析
vue3.0相对于vue2.0来说性能快1.2到1.5倍，主要原因如下：1、diff方法优化①Vue2 中的虚拟dom是进行全量的杜比②Vue3 新增了静态标记（PatchFlag），只比对带有 PF 的节点，并且通过 Flag 的信息得知当前节点要比对的具体内容。具体如下展示：2、静态提升① Vue2中无论元素是否参与更新, 每次都会重新创建, 然后再渲染② Vue3中对于不参与更新的元素, 会做静态提升, 只会被创建一次, 在渲染时直接复用即可对上面的代码开启静态提升（hois.
2020-10-29 16:16:03
2784
1
原创 ES6的箭头函数，参数扩展以及解构赋值
1、箭头函数，就是函数的简写 ①如果只有一个参数，() 可以省 ②如果只有一个return，{}可以省// 普通函数function name() {}// 箭头函数，去掉 function， 加上 =>() => {}let show1 = function () { console.log('abc')}let show2 = () => { console.log('abc')}show1() // 调用函数 abcshow2.
2020-10-28 11:41:50
396
原创 JSON的格式、方法和应用
1、JSON 格式JavaScript Object Notation 的缩写，是一种用于数据交换的文本格式JSON 是 JS对象 的严格子集JSON 的标准写法只能用双引号所有的key都必须用双引号包起来2、JSON 对象和方法JSON 对象是 JavaScript 的原生对象，用来处理 JSON 格式数据，有两个静态方法①JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。②JSON.stringify(obj) ：接受一个.
2020-10-28 11:41:07
290
原创 ES6中定义变量以及简介
1、变量 let 和 常量 const(1)原来定义变量 var 存在的的问题① 可以重复声明，没有报错和警告② 无法限制修改③没有块级作用域， { }(2)let 和 const① 不能重复声明② 都是块级作用域, { } 块内声明的，块外无效③ let 是变量，可以修改④ const 是常量，不能修改⑤ 块级作用域举例<!DOCTYPE html><html lang="en"><head> <meta charset="U
2020-10-27 17:29:01
255
原创 ES6之生成器函数generator
1、generator 生成器函数简介（1）普通函数，一路执行到底（2）generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权。yield 有放弃、退让、退位的意思。需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步generator函数前面加一个 * 两边可以有空格，或靠近函数或function实际生成多个小函数，实现走走停停的效果。function show() { console.log('a') console.log('
2020-10-27 15:07:51
151
原创 ES6之Promise详细介绍
1、简介ECMAscript 6 原生提供了 Promise 对象。Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。promise本身是同步的，promise的回调then是异步的let oP = new Promise( (res, rej) => { console.log(1);});console.log(2);//结果：1// 22、具体应用（1）① 异步和同步 异步，操作之间没有关系，同时执行多个操作， 代码复杂 同步
2020-10-27 11:11:53
274
2
原创 ES6之数组新增方法 （map，reduce，filter，forEach）
对于数组，ES6中新增4个很实用的方法，分别有：map ，reduce，filter，forEach。接下来我们来一一讲解。1、map 映射 一个对一个let arr = [6，10，12, 5, 8]let result = arr.map(function (item) { return item*2})let result2 = arr.map(item=>item*2) // es6的箭头函数简写，若想了解，后面的文章有介绍console.log(result)cons
2020-10-26 16:09:42
409
3
原创 面向对象-基础（ES5与ES6对比）
一、ES5的面向对象1、概括：类和构造函数一样2、属性和方法分开写的3、具体案例讲解//定义一个类（构造函数）function User(name, pass) { this.name = name this.pass = pass}在js中，每个构造函数都有一个原型属性prototype，因为这个属性的值通常是一个对象，又叫原型对象！通常在这个原型对象中，会包含一个constructor属性指向该原型对象的构造函数。//定义构造函数user的原型方法User.pro
2020-10-26 15:33:14
354
原创 HTTP协议与HTTPS
1、什么是HTTP？链接: link.HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTT
2020-09-11 16:07:37
130
原创 浏览器从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
浏览器从我们输入 URL 到页面加载显示完成展示出我们想看到的结果页面和功能，中间主要经历了以下几个步骤，概括为：(DNS解析）=> ①(TCP连接:三次握手) => ②(发送HTTP请求) => ③(服务器处理请求并返回HTTP报文) => ④(浏览器解析渲染页面) => ⑤(连接结束：四次挥手) => ⑥具体每个步骤的详解如下：1、浏览器根据请求的URL交给DNS域名解析，找到真实IP。DNS（Domain
2020-09-11 14:29:42
2367
原创 浏览器缓存机制之cookie localStorage sessionStorage
Web Storage 是对 Cookie 的拓展一、cookie简介Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存，或是从客户端的硬盘读取数据的一种技术。一般记住密码，下次自动登录，购物车功能，记录用户浏览数据，进行商品（广告）推荐等场景下使用~（现在基本大多数登录的合法性验证都是用cookie验证的）。优点优点：兼容性最好，几乎所有的浏览器都支持缺点1、Cookie 存储空间小，仅为4kb；2、过多的 Cookie 会带来巨大的性能浪费因为Cookie 是紧跟域
2020-09-11 12:22:58
467
原创 微信小程序之数据的双向绑定
1、首先，我们先写个输入框，然后将输入的内容赋值给data中的num变量。注1：小程序中对输入框标签要求严格，闭合标签必须要存在，否则会报错，代码如下注2：bindinput是绑定输入框的属性名，与vue中的v-bind:input一样的~<input type="text" bindinput='bindInput' /><view>{{num}}</view><script>Page({ data: { num: 0 },
2020-08-26 17:59:37
9536
1
原创 微信小程序之小白用户
数据绑定1 普通写法小程序中，数据绑定和vue中数据绑定有些类似~数据类型可以是字符串，数字，布尔值，对象等等1、text标签相当于页面的span 标签 是一个行内元素2、view标签相当于页面的div标签<view> {{ message }} </view><view> {{ introduce.name }} </view><view data-num=“{{num}}”> {{ message }} </view>
2020-08-26 15:45:03
234
原创 如何改变url并且页面不进行刷新
如何改变url并且页面不进行刷新？1、location.hash（哈希方式）控制台里面输入：location.hash=‘aaa’,则地址栏里会相应的变化，并且不会刷新页面2、html5中 history的对象修改url，也不会刷新页面history.pushState(对象参数，title参数，url）之前的地址变成了bbb，并且#就没有了history.back() 相当于返回上一级url ===【 history.go(-1) ==> 跳到特定顺序的url】history.
2020-08-19 15:03:10
2411
原创 DOM事件流
1、DOM事件的级别DOM0：element.onclick = function(){}DOM2: element.addEventListener(‘click’, function(){}, false)DOM2: element.addEventListener(‘keyup’, function(){}, false)默认是false，是在冒泡中触发，true为在捕获中触发。2、DOM事件模型3、DOM事件流4、描述DOM事件捕获的具体流程同理，事件冒泡的流程也是一样的道
2020-08-11 17:58:27
101
原创 js面试题（原型链、面向对象、去重、排序）
原型链类1、创建对象有几种方法(1) A：var o1 = {name: ‘o1’}(1) B：var o1 = {name: ‘o1’}(2) var M = function(){this.name = ‘o2’} var o2 = new M()(3)var P = {name: ‘o3’} var o3 = Object.create§2、原型，构造函数，实例，原型链!3、instanceof 的原理4、new运算符...
2020-08-11 17:55:26
553
原创 面试题之CSS盒模型
面试题之CSS盒模型1、基本概念（1）标准模型 （宽、高）= content 的宽高（2）ie模型（宽、高）= content 的宽高 + padding 的宽高 + border 的宽高2、CSS如何设置这两种模型3、JS如何设置获取盒模型对应的宽和高4、解决盒模型边距重叠—BFC（1）BFC的基本概念（2）创建BFC的方式（3）BFC的使用场景1、基本概念基本概念：标准模型 + ie模型（1）标准模型 （宽、高）= content 的宽高（2）ie模型（宽、高）= content 的宽高 + p
2020-08-05 15:31:44
1395
原创 面试题—首尾固定中间高度自适应实现的4种方式
首尾固定中间高度自适应实现的4种方式1、定位postion2、弹性布局—flex3、表格布局—table4、网格布局—grid1、定位postion<!DOCTYPE HTML><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-
2020-08-05 12:37:52
428
原创 不固定高宽div垂直居中的方法
不固定高宽div垂直居中的方法1、伪元素和 inline-block / vertical-align<style> .box-wrap:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -0.25em; //微调整空格 } .centered { display: inline-block; vertical-al
2020-08-04 18:36:38
678
原创 固定宽高的div垂直居中
css中固定宽高div垂直居中的实现方式假设外层div宽高均为600px；内层宽高均为200px；代码如下:<style> .box { width: 600px; height: 600px; background-color:#f00; position: relative; } .box > div { width: 200px; height: 200px; background-color: #ff0; position:
2020-08-04 16:47:16
292
原创 左右固定宽，中间自适应（三栏布局）的方法
左右固定宽，中间自适应（三栏布局）五种实现方法简述：定高100px，左右宽度均为200px，中间自适应。1、浮动—floatfloat介绍2、定位—positionposition介绍3、弹性盒子布局—flexposition介绍4、表格布局—tabletable介绍5、网格布局—gridgrid网格布局介绍总结简述：定高100px，左右宽度均为200px，中间自适应。公共代码块 *{padding: 0; margin: 0;} html, body {padding: 0; margin:
2020-08-04 15:20:16
4506
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人