- 博客(138)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 css实现字体描边+引入第三方字体
红底白边描边字体实例：.stroke-text { color: rgb(194, 59, 29); text-shadow: 2px 0px 0px #ffffff, 0px 2px 0px #ffffff, -2px 0px 0px #ffffff, 0px -2px 0px #ffffff;}css引入第三方字体 建议全局引入字体包@font-face { font-family: mFont; src: url("@{PATH}字体.ttf");}...
2022-05-17 11:20:22
228
原创 从接口获取的微信图片偶尔展示（兼容性处理）
// 增加meta标签，绕过防盗链<meta name="referrer" content="never">
2022-01-10 11:36:07
151
原创 git命令自动补全插件-zsh
下载该插件到.oh-my-zsh的插件目录git clone git://github.com/zsh-users/zsh-autosuggestions $ZSH_CUSTOM/plugins/zsh-autosuggestions编辑.zshrc文件（mac系统）open .zshr在zshrc搜索plugins=(git)将plugins=(git)替换为刚才下载的plugins=(git zsh-autosuggestions)关闭重启终端即可实现命令行提示自动补全插件的效.
2021-11-04 16:51:50
1226
原创 解决移动端适配1px问题
核心思路：在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr，在css中可以使用媒体查询min-device-pixel-ratio区分dpr。我们根据这个像素比，来算出他对应大小,但是暴露个非常大的兼容问题暴露的问题：Chrome把0.5px四舍五入变成了1px，而firefox/safari能够画出0.5px，Chrome会把小于0.5px的当成0，而Firefox会把不小于0.55px当成1px，Safari是把不小于0.75px当成1px，进一步
2021-10-11 14:28:22
277
原创 script标签中的async和defer的作用
defer如果script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；defer脚本会在文档渲染完毕后，DOMContentLoaded事件调用前执行。文档解析时，遇到设置了defer的脚本，就会在后台进行下载，但是并不会阻止文档的渲染，当页面解析&渲染完毕后。会等到所有的defer脚本加载完毕并按照顺序执行，执行完毕后会触发DOMContentLoaded事件。asyn
2021-09-24 10:23:32
210
原创 iframe的优缺点
iframe的优点：iframe能够原封不动的把嵌入的网页展现出来。如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。iframe的缺点：会产生很多页面，不容易管理。iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、
2021-09-24 10:16:28
92
原创 谈一下对html语义化的理解
什么是html的语义化根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。为什么要语义化为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）
2021-09-24 10:10:05
126
原创 使用css绘制一个三角形
话不多说直接上代码div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color: red blue green pink;}单个三角形只需要隐藏掉其他的三个就可以了div{ width: 0; height: 0; border-width: 50px; border-style: solid; border-color:
2021-09-23 14:34:21
87
原创 什么是JWT？
介绍JWT（json web token）：前端鉴权JWT的构成第一部分头部（header)第二部分载荷（payload)第三部分签证（signature)总结优点json的通用性，JWT是可以进行跨语言支持的。有了payload部分，JWT可以在自身存储一些其他业务逻辑所必要的非敏感信息。便于传输，jwt的构成非常简单，字节占用很小，所以它是非常便于传输的。不需要在服务端保存会话信息, 所以它易于应用的扩展。...
2021-09-22 10:51:58
98
原创 yosay插件的使用
安装yosaynpm install yosayoryarn yosay使用yosayconst yosay = require('yosay')console.log(yosay("hello world"));效果：完成，使用就是这么简单官网链接
2021-08-09 10:22:06
147
原创 初步了解webpack（HMR）热更新原理
webpack-dev-server启动一个服务浏览器和服务端是通过websocket进行长连接webpack内部实现的watch就会监听文件修改，依赖中间件webpack-dev-middleware和webpack之间进行交互，监听本地文件的修改，然后进行构建带有hash的js文件, 且产生一个update.json客户端去请求update.json（network可见）以及应该更新的hashid的js，进行热更新，如果失败了就刷新页面更深层次的理解：HMR runtime等机制？怎.
2021-08-06 14:32:53
129
原创 简述什么是mvvm模式
含义：MVVM：Model-View-ViewModel缩写就是把MVC中的Controller演变成ViewModel。Model层代表数据模型，View代表UI组件，ViewModel是View和Model层连接的桥梁，数据会绑定到viewModel层并自动将数据渲染到页面中，视图变化的时候会通知viewModel层更新数据，数据变化后也会通知视图...
2021-07-28 10:31:22
820
转载 TypeScript相比于JavaScript 的显著优势
静态输入静态类型化是一种功能，可以在开发人员编写脚本时检测错误。查找并修复错误是当今开发团队的迫切需求。有了这项功能，就会允许开发人员编写更健壮的代码并对其进行维护，以便使得代码质量更好、更清晰。大型的开发项目有时为了改进开发项目，需要对代码库进行小的增量更改。这些小小的变化可能会产生严重的、意想不到的后果，因此有必要撤销这些变化。使用TypeScript工具来进行重构更变的容易、快捷。更好的协作当发开大型项目时，会有许多开发人员，此时乱码和错误的机也会增加。类型安全是一种在编码期间检测错误的功.
2021-07-23 15:18:10
188
原创 常用的编程范式和设计模式有哪些
编程范式面向过程（Process Oriented Programming，POP）面向对象（Object Oriented Programming，OOP）面向接口（Interface Oriented Programming， IOP）面向切面（Aspect Oriented Programming，AOP）函数式（Funtional Programming，FP）响应式（Reactive Programming，RP）函数响应式（Functional Reactive Programm
2021-07-23 15:11:17
378
原创 装饰器模式
定义：在不改变现有类结构的情况下，为这个类添加一个新的功能，这就是装饰器模式继承的劣势：使用继承的方式，会带入许多静态的方法，导致子类过度饱和，膨胀装饰器的特点：需要创建一个装饰类来包装原有的类，并且提供额外的功能装饰器的实现：装饰类包含原有类的实例对象，即可实现装饰器模式...
2021-07-23 15:03:49
50
原创 程序编译分为哪几个主要部分
词法分析语法分析中间代码生成代码优化目标代码生成特点：前端的特点是仅与编译的源语言有关，后端则仅与编译的目标语言及运行环境有关
2021-07-23 14:46:48
834
转载 前端常用工具函数2
获取一个随机布尔值 (true/false)const randomBoolean = () => Math.random() >= 0.5;console.log(randomBoolean());// Result: a 50/50 change on returning true of false检查日期是否为工作日const isWeekday = (date) => date.getDay() % 6 !== 0;console.log(isWeekday(.
2021-07-07 16:00:11
61
原创 浏览器的渲染过程有哪些？
创建 DOM 树。用 HTML 解析器分析 HTML 元素，创建一棵 DOM 树。创建 CSS 规则树（CSS rule tree）。用 CSS 解析器解析 CSS 文件和 inline 样式，生成页面的样式表。创建 Render 树。将 DOM 树和 CSS 规则树关联起来，构建 Render 树。布局 Layout。根据 Render 树，浏览器开始布局，为每个 Render 树上的节点确定一个在显示器上出现的精确坐标。绘制 Painting。在 Render 树和节点显示坐标的基础上，调用每.
2021-07-01 16:06:29
49
原创 快速理解VUE的响应式原理
快速理解VUE的响应式原理主要通过下面三点：数据劫持/数据代理依赖收集发布订阅模式数据劫持/数据代理实现方式1：核心：Object.defineProperty实现Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图实现方式2：核心：Proxy实现Proxy 是 JavaScript 2015 的一个新特性。Proxy 的代理是针对整个对象的，而不是对象的某个
2021-06-30 14:12:30
199
2
原创 什么是js纯函数
概念：不依赖外部状态（无状态）：函数的运行结果不依赖全局变量，this 指针，IO 操作等。没有副作用（数据不变）：不修改全局变量，不修改入参。优点：便于测试和优化可缓存性自文档化更少 Bug...
2021-06-25 18:15:20
45
原创 函数式编程
特点：函数是一等公民。可以利用这点让它支持抽取到外部。声明做某件时间。函数式编程大多数声明某个函数需要做什么，而不是它怎么做的。便于垃圾回收。函数内部的变量方便垃圾回收，不会产生太多的变量，用户不需要大量的定义。数据不可变。函数式编程要求所有的数据都是不可变的，如果需要修改某个对象，应该新建后再修改，而不是污染原本的数据。无状态。不管什么时候运行，同一个函数对相同的输入返回相同的输出，而不依赖外部状态的变化。无副作用。功能 A 应该仅仅为了完成它的实现，而不会随着外部的改变而改变，这样当它执行
2021-06-25 18:14:25
50
原创 渐进式网络应用-（PWA）
概念：渐进式网络应用（PWA）是谷歌在 2015 年底提出的概念。基本上算是 Web 应用程序，但在外观和感觉上与原生 App 类似。支持 PWA 的网站可以提供脱机工作、推送通知和设备硬件访问等功能。优点：更小更快: 渐进式的 Web 应用程序比原生应用程序小得多。他们甚至不需要安装。这是他们没有浪费磁盘空间和加载速度非常快。响应式界面: PWA 支持的网页能够自动适应各种屏幕大小。它可以是手机、平板、台式机或笔记本。无需更新: 大多数移动应用程序需要每周定期更新。与普通网站一样，每当用户交互发
2021-06-25 18:13:25
482
原创 babel 编译原理
babylon 将 ES6/ES7 代码解析成 ASTbabel-traverse 对 AST 进行遍历转译，得到新的 AST新 AST 通过 babel-generator 转换成 ES5
2021-06-25 18:11:57
270
原创 js的异步
概念：JavaScript 是一个单线程的语言。单线程在程序执行时，所走的程序路径按照连续顺序排下来，前面的必须处理好，后面的才会执行。好处：是实现起来比较简单，执行环境相对单纯。坏处：是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段 JavaScript 代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。所以，JavaScript 将任务的执行模式分为两种：同步和异步。Js为什么需要异步：如果调
2021-06-25 18:11:12
56
原创 什么是Event Loop
概念：JavaScript 从 script 开始读取，然后不断循环，从 “任务队列” 中读取执行事件的过程，就是 事件循环（Event Loop）Event Loop 执行过程：一开始整个脚本 script 作为一个宏任务执行执行过程中，同步代码 直接执行，宏任务 进入宏任务队列，微任务 进入微任务队列。当前宏任务执行完出队，检查微任务列表，有则依次执行，直到全部执行完毕。执行浏览器 UI 线程的渲染工作。检查是否有 Web Worker 任务，有则执行。执行完本轮的宏任务，回到步骤 2
2021-06-25 18:09:05
63
原创 前端代码遵循的规范化
CommonJS 规范优点：所有代码在模块作用域内运行，不会污染其他文件require 得到的值是值的拷贝，即你引用其他 JS 文件的变量，修改操作了也不会影响其他文件缺点：应用层面。在 index.html 中做 var index = require(’./index.js’) 操作报错，因为它最终是后台执行的，只能是 index.js 引用 index2.js 这种方式。同步加载问题。CommonJS 规范中模块是同步加载的，即在 index.js 中加载 index2.js，如果 in
2021-06-24 16:27:50
75
原创 js获取屏幕位置
clientHeight：表示可视区域的高度，不包含 border 和滚动条offsetHeight：表示可视区域的高度，包含了 border 和滚动条scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分clientTop：表示边框 border 的厚度，在未指定的情况下一般为0scrollTop：滚动后被隐藏的高度，获取对象相对于由 offsetParent 属性指定的父坐标（CSS 定位的元素或 body 元素）距离顶端的高度。...
2021-06-22 16:27:21
484
转载 什么是this
什么是this？对于函数而言，指向最后调用函数的那个对象，是函数运行时内部自动生成的一个内部对象，只能在函数内部使用；对于全局而言，this 指向 window。对于严格模式下，this 指向 undefined...
2021-06-22 16:24:25
198
原创 JS的事件流
什么是事件流：事件流描述的是从页面中接收事件的顺序，事件流包括下面几个阶段。事件捕获阶段处于目标阶段事件冒泡阶段如何让事件先冒泡后捕获：在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获之间。addEventListeneraddEventListener 方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数
2021-06-22 16:18:00
64
原创 null 和 undefined 的区别
nullNumber(null) 得到 0作为函数的参数，表示该函数的参数不是对象作为对象原型链的终点。Object.prototype.proto === nullundefinedNumber(undefined) 得到 undefined变量被声明但是没有赋值，等于 undefined调用函数时，对应的参数没有提供，也是 undefined对象没有赋值，这个属性的值为 undefined函数没有返回值，默认返回 undefined...
2021-06-22 16:11:44
54
原创 DOM 常用 API
DOM的增删改查// 获取元素const node = document.getElementById(id); // 或者 querySelector(".class|#id|name");// 创建元素const heading = document.createElement(name); // name: p、div、h1...heading.innerHTML = '';// 添加元素document.body.appendChild(heading);// 删除元素doc
2021-06-22 16:09:01
60
原创 在安卓手机上面使用window.location.href失效的问题
问题：在低版本的安卓手机中使用window.location.href跳转失效解决思路1：分析：在跳转链接后面添加时间戳，因为考虑到是低版本可能存在缓存的问题所以采用在跳转链接后面添加动态的参数时间戳来刷新缓存的数据// 在跳转链接后面添加时间戳，因为考虑到是低版本可能存在缓存的问题所以采用在跳转链接后面添加动态的参数时间戳来刷新缓存的数据window.location.href = url+'?time='+((new Date()).getTime());解决思路2：分析： 在采用上面的方
2021-06-22 10:46:01
5267
原创 ios使用transform的时候圆角变方框，border-radius失效问题
背景：ios使用transform的时候圆角变方框，border-radius失效原因：在设置border-radius的同时，给元素添加了 css3的transform动画导致设置border-radius失效解决方法：在使用border-radius的元素上面同时设置属性-webkit-transform:rotate(0deg);...
2021-06-22 10:33:39
584
原创 h5页面解决ios滚动条生涩，不能滚动的问题-react篇
背景：h5页面有滚动条的场景，在ios手机或者微信上面滚动显得生涩css解决： -webkit-overflow-scrolling:touch; -webkit-text-size-adjust:none;场景 页面有两层滚动条嵌套，（页面滚动，并且弹窗滚动条也可以滚动）解决思路：弹窗出现时候页面fixed定位，弹窗上面滚动条通过获取原生属性scrollTop设置为0，默认滚动条在最顶部react解决： this.scrollBox = React.createRef() this
2021-06-20 14:59:31
1438
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人