- 博客(19)
- 收藏
- 关注
RSS订阅原创 Chrome浏览器本地调试：阻止不安全、本地网络请求
今天打开Chrome浏览器，本地开发联调突然报错。Access to script at 'http://localhost:8001/xxx.js' from origin 'http://xxx.xxx.xxxx.com' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address spacelocal.报错说我本地的
2021-09-24 14:21:04
8855
2
原创 macOS环境安装zsh的跌跌撞撞：vscode终端修改为zsh, zsh: command not found:npm
通过安装zsh安装后，遇到的问题了几个小问题。 vscode终端怎么修改为zsh? 默认vscode终端为bash,我们需要在设置中修改默认配置文件。默认配置文件路径为：`code->首选项->设置->搜索终端，修改选项为zsh zsh: command not found:npm 先确认本地是否安装了nodejs环境？如果你没有安装nodejs环境，自行安装一下。nodejs环境安装好就会自带npm。 如果已经安...
2021-09-09 17:49:06
4590
原创 docker入门
准备工作到Docker官网下载并安装Docker客户端。安装成功后，在终端执行docker --version,成功看见下图信息说明docker安装成功。注册Docker账号国内从 DockerHub 拉取镜像有时会遇到困难，此时可以配置镜像加速器。Azure中国镜像（https://dockerhub.azk8s.cn）阿里云加速器（需登录账号获取）七牛云加速（https://reg-mirror.qiniu.com）设置成功之后，再在终端上执行docker i
2021-03-24 18:03:39
191
原创 怎么用纯css手画三角形&梯形
相信大家肯定在设计稿上面看见过三角形和梯形，大家是怎么做的？让设计师切一个图给你？哈哈哈，这个方法确实省时省力。不过我今天分享的是怎么用纯css来画一个。完整的代码，可以在这里查看。画三角形之前，我们先来给一个正方形加个边框，不同边为不同的颜色，看看能看出什么端倪？#square1 { width: 100px; height: 100px; border-top: 10px solid red; border-bottom: 10px solid yellow; border-l
2021-03-22 17:53:17
417
原创 一看就懂的防抖与节流
防抖和节流这两个词应该不陌生吧！防抖和节流就是为了解决不可控的高频触发和快速连续触发导致响应跟不上触发，造成页面卡顿，假死现象。lodash的_debounce、_throttle已经替我们封装好了这两个方法。如果你不想引用第三方库并且想知道个所以然，那下面的文章就很适合你。防抖(debounce)概念延时一段时间执行一个函数，如果在这个等待时间又触发了这个事件，那么上一个事件的延时失效，以新时间的延时为准。直到没有新的事件了，函数才可以真正的执行。生活中的类似场景防抖就好像我们生活中关电梯门，
2021-03-18 21:50:53
297
2
原创 解决跨域问题的n种办法
今天我们来聊聊跨域的事情，那我们先从浏览器的报错开始吧！见到这个报错信息，那么就要恭喜你，遇到了跨域这个磨人的小妖精了。关于这篇文章的代码，需要的自取。什么是跨域？那么说到跨域，我们就需要先搞懂什么是同源策略？同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。所谓"同源"指的是“三个相同”。协议相同域名相同端口相同当协议、域名、端口中任意一个不相同时，都算作跨域。需注意即使两个
2021-03-17 14:18:37
4265
10
原创 从输入url到页面渲染可以做哪些性能优化？
上一篇我们罗列了从输入url到页面渲染到底经历了什么？那我们今天再来说说这个步骤中，我们能做哪些的性能优化？DNS Prefetch上一篇文章只说了浏览器访问一个域名的时候需要经过DNS解析。其实DNS解析是有一个解析过程的，按浏览器缓存、系统缓存、路由器缓存、ISP（运营商）DNS缓存、根域名服务器、顶级域名服务器、主域名服务器的顺序,逐步读取缓存，直到拿到IP地址。通过主机名加载一个页面通常仅需要解析DNS一次，但是如果页面的资源文件比如：fonts、images、scripts等都是不同的主机名
2021-03-10 16:26:06
463
原创 从输入url到页面渲染到底经历了什么？
想知道从输入url到页面渲染到底经历了什么？就必须要知道浏览器的工作原理。下面我先用一个流程图简单的说一下从导航中输入url到页面渲染的几个重要步骤。正文正式开始啦！DNS解析对于一个web页面来说导航的第一步是要去寻找页面资源的位置。如果导航中输入一个域名地址，浏览器并不能通过域名找到对应的服务器，需要通过DNS解析成IP地址，一旦获取到服务器IP地址，浏览器接下来就要试图和服务器建立连接了。TCP三次握手浏览器通过TCP“三次握手”与服务器建立连接。所谓三次握手(Three-
2021-03-05 20:19:31
533
原创 css实现水平&垂直居中
项目中经常需要实现水平、垂直居中，一直想着整理一下居中的几种方法，拖拖拉拉到今天才有时间整理，下面话不多说就直接用多种方法实现div水平垂直居中吧！.container设置容器几何属性，.container_center设置容器的居中属性。 本文的背景是body是响应式的，没有固定宽高；同时子元素也不确定宽高和数量。<html> <body> <div class="container container_center">center</div&g
2021-02-26 17:13:52
248
1
原创 前端架构之babel(一)之基础认识
babel是一个javascript编译器。通过babel你可以使用下一代的Javascript，以及下一代的Javascript工具。babel可以为你做的以下的事情：语法转换：babel通过语法转换器来支持新版本的Javascript语法。增加垫片：通过polyfill方式在目标环境中添加缺失的特性（通过@babel/polyfill）js代码转换一、安装babelnpm install --save-dev @babel/core @babel/cli @babel/pre
2020-10-13 15:17:57
456
原创 前端架构之eslint（三）之 插件开发
前面两节已经对eslint的配置，eslint源码进行了详细的解释，那接下来我们就来手写一个plugin。该plugin包含自定义rule、自定义processor、共享配置信息。完整的项目请看eslint-project一、创建一个插件 - myPlugin初始化项目。每个插件是一个命名格式为 eslint-plugin-<plugin-name> 的 npm 模块，你也可以用这样的格式 @<scope>/eslint-plugin-<plugin-name&
2020-08-12 17:35:37
2375
原创 前端架构之eslint（二）之源码解析
上节对eslint的配置进行了详细的解释，这节再来对源码进行分析一波。执行eslint的流程图如下：eslint的入口：eslint/bin/eslint.js#maineslint.js是命令的执行文件，用来启动eslint，并向cli传递命令行参数。...await require("../lib/cli").execute( process.argv, // 命令行eslint后面的参数 process.argv.includes("--stdin") ? await readSt
2020-08-11 00:02:59
854
翻译 前端架构之eslint（一）之基础配置
一、安装eslintnpm install eslint --save-devoryarn add eslint --save-dev二、eslint配置Configuration Comments - 使用 JavaScript 注释把配置信息直接嵌入到一个代码源文件中。在javascript使用注释配置eslint信息。/* eslint-env node, mocha */ // 使用注释来指定环境/* global var1:writable, var2:rea
2020-08-10 23:59:06
1059
原创 一看就懂的Vue之vue构造函数、vue实例、挂载
之前一直对vue构造函数、vue实例、挂载比较迷惑，今天就想着彻彻底底的搞懂这些知识点，下面我们就进入正题吧。Vue构造函数vue的构造函数有两种Vue、Vue.extend();vue实例vue实例是通过构造函数生成的，下面我们来通过一个具体的场景来讲解。场景说明：有一个组件配置对象Notice.vue需要追加body里设计：有一个全局$create函数将Notice.v...
2020-03-25 14:57:07
2738
原创 一看就懂的this指向问题
## 一看就懂的this指向问题 最近为了勉励自己对学习到的知识做个总结，最后决定写成博客分享给大家。欢迎大家指正，下面就进入正题。##### 一、this的指向 在es5中，this的指向只有在运行的时候才可以确定，也就是说创建的时候并不能确实指向。**this永远指向最后调用它的对象。**我们来举例说明：例子1:```var a = 1function tes...
2020-03-19 15:22:49
102
原创 快速理解JS闭包
快速理解JS闭包为了快速理解JS闭包，加强记忆，整理一下JS闭包知识变量的作用域如何外部读取函数内部的变量闭包的概念闭包的用途使用闭包的优缺点详细说明变量的作用域> 变量分为全局变量和局部变量，全局变量即：定义在函数外的变量；局部变量即：定义在函数内的变量。代码块 var num1 = 1; // 全局变量 function test() { var num2 = 2; //
2017-12-06 16:38:38
206
原创 grunt安装及使用
Grunt是一个基于JavaScript上的一个很强大的任务管理器(task runner)，简单来说就是你可以在你的终端机上，用JavaScript去执行一些程序来完成一些任务。比如说验证HTML、CSS、JavaScript的语法，压缩CSS、JavaScript、图像，Sass、LESS和Stylus编译成CSS等等.Grunt还是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。
2016-06-14 18:30:51
9534
原创 git学习小结
学习了廖雪峰老师的git教程，自己也想根据自己的理解做一些总结，以便初学者快速学习。git是分布式版本控制系统一. git安装1.在Ubuntu,Debian 通过sudo apt-get install git 就可以直接安装 老一点的Debian和Ubuntu 用sudo apt-get install git-core2.Mac OS X上安装git
2016-05-09 18:06:40
352
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人