自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(19)
  • 资源 (1)
  • 收藏
  • 关注

原创 本地服务器请求外部服务器图片报错403,这样这解决!

今天在某个壁纸社区闲逛,发现一个小姐姐很好看,在本地服务器环境下,我把图片链接放到自己的html中放大几倍细细的品鉴,结果打开页面,什么都没有?打开控制台1个错误:纳尼?这什么鬼?又去了百度图片找了一个图片的链接,没有问题啊?这是个什么问题呢?我给大家画个图说明下:这个是正常的请求与响应模型,但是对于一些敏感的数据,比如有版权的图片,某些私密的信息,后端在相应的时候做了拦截处理,将敏感数据过滤。下面是示意图:在本地服务器发送请求的环境下,目标服务器会判断请求源服务器是否是自己“可

2020-06-07 23:28:14 762

原创 超级实用的JS工具函数!(随机函数、事件委托、事件监听(兼容IE))

//随机颜色函数 ---全部随机//author : yangyi function randomColor(){ var r = parseInt(Math.random() * 256); var g = parseInt(Math.random() * 256); var b = parseInt(Math.random() * 256); var en...

2020-03-15 13:40:54 181

原创 express 强缓存踩坑日记

闲来无事学学HTTP缓存机制,设置cache-control字段后哪怕设置了一年的时间都没有效果,即时是相应头有对应设置字段都无法命中强缓存。在ngix服务器,express服务器多次尝试都无法尝试未果,即将要放弃的时候,发现自己在控制台开启了disable cache ,这个选项意味着禁用浏览器缓存,关闭后成功命中了强缓存。app.use(express.static(path.join(__dirname, 'dist'), { maxAge: 31557600000 }));下面是成功的

2021-04-21 00:45:12 865 1

原创 浏览器渲染原理:如何将从0到1解析一个html文件!

浏览器解析HTML页面过程 总所周知的,执行JS有一个JS引擎,浏览器显示网站上的页面也有一个引擎,这个引擎就是浏览器渲染引擎,它负责将开发人员的HTML和CSS解析成一个个漂亮的页面。 开发人员所书写的html和css,浏览器其实并不认识,浏览器只认识0和1个字节数据,我们所写的文件都会先被解析成0和1代表的字节数据,浏览器首先会把这些字节数据第一步解析成字符串; 拿到这些字符串后,浏览器会进行词法分析,给每一个字符串打上标记,生成TOKEN,这一过程叫做标记化。 这里的TOKEN ,其实还

2021-03-20 18:14:09 277

原创 简单实现Promise原理

const PENDING = 'PENDING';const RESOLVED = 'RESOLVED';const REJECTED = 'REJECTED';// 对于不太经常更改的变量 定于为常量function MyPromise(fn){ //存一下this 因为在setTimeout中的resolve 调用中 resolve函数 this指向window var that = this; // 初始状态 that.state = PENDING;.

2021-03-14 00:20:40 144 1

原创 浅析Vue3.0响应式原理

自vue3.0发布以来也好几个月了,最近也一直在忙碌手头上的工作,没有时间来学习vue3.0。刚好快要过年了,公司的事情不是很多,这才抽出时间来学习下vue3.0的响应式原理!回顾Vue2.x 响应式原理利用观察者模式 + Object.defineProperty ,收集依赖效率较低,对于深层次数据收集不友好对于复杂类型数据的删除等操作,监听操作实现较为麻烦Vue3.0响应式原理使用了Proxy,收集依赖更加的高效,对于深层次数据的收集更加的方便可以更好的监听数据的新增、删除等操作V

2021-02-06 15:18:56 371 3

原创 前端工程师的全栈梦!实现属于自己的express服务器框架!

作为一名专业的前端工程师,我们不仅要实现自己前端业务的技术精进,想要升职加薪?我们除过磨炼自己的前台技术,同样需要在后台方面有自己的理解!我们的目标是:JS迟早一天统治全球!今天,我来给大家分享一下自己实现express框架的过程!服务端实现://引入 http 模块const http = require('http');//创建路由列表const router = [];function createRouter(pathname,handel,method){ rout

2020-10-15 22:25:29 134 1

原创 Vue后台管理系统之动态路由的实现!

Vue作为一种渐进式、自底层向上增量开发的MVVM前端框架!它的语法偏向于结构化、条条框框相对较多,更加的适合偏向于静态业务的后台管理系统。下面我将带大家了解一下后台管理系统中的动态路由,实现不同身份、不同权限的登陆者,体验对应不同的功能!...

2020-09-22 22:25:22 1117

原创 前端工程师必备前后端交互方式---AJAX!

不管是工作多长的前端老鸟、还是初入前端的小白,对于前后端交互都是有些怵的!因为前后端交互是前端与后端两方最需要配合的地方!稍有不慎,前端拿不到数据,双方开始扯皮。 所以对于一个合格的程序员来说,掌握AJAX这一技术是刻不容缓的,当然不是为了甩锅,而是为了让自己的技术栈更加的扎实! ...

2020-09-13 23:14:04 231

原创 手写源码系列:vue响应式实现原理!

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div id=".

2020-09-07 23:54:30 119

原创 20K+中高级前端工程师必备的专项技能,将在这里揭晓.....

最近四火在浏览拉钩等招聘网站的时候,注意到了一个有趣的地方,身处一线城市的互联网公司都在要求前端开发工程师掌握一项技能--前端工程化!通过上面的招聘简章,大家应该很清晰的看到了,企业对于工程化、自动化的开发的看重,你可以不精通但是必须的了解这一项技能!为什么在cmd命令行键入webpack 就可以打开一个本地的小型服务器?为什么不用认为引入js文件,工具帮你自动执行?下面我给大家分享我对于Webpack的理解:webpack主要是打包,所以其核心存在两个部分,入口和出口,你可以把we

2020-09-06 15:33:27 729

原创 大神必备的核心武器—柯里化

函数式编程思想是早期编程语言的核心思想,虽然现在大多数语言都有了类的概念,虽然类的引出,让我们的程序变的更加强大、更加的面向与模块功能的抽象,但是存在即合理,函数式编程需要什么功能就调用什么功能!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-

2020-08-26 11:24:14 180 1

原创 简单实现图片懒加载原理!

<!-- * @Description: 希望KEEP REAL * @Version: 版本更新中... * @Autor: AKAYangYi * @Date: 2020-08-13 01:04:13 * @LastEditors: YangYi * @LastEditTime: 2020-08-13 01:41:16--><!DOCTYPE html><html lang="en"><head> <meta char.

2020-08-13 01:44:10 132

原创 前端性能优化:requestAnimationFrame方式高效dom操作!

高效插入方案使用原生dom操作插入dom的时候,我们一般使用document.createElement(ele),创建好了以后,通过appendChild方法,插入到容器元素,这样的操作,平常很常见吧!但是对于那种海量插入的需求,比如一次插入1、2w的元素,这个时候可能有的同学能想到创建文档碎片的方式,将dom操作放到文档碎片当中,进行插入的方式!这样是一个优化的方式,但是这样优化的还不够彻底!以上两种方式进行速度对比var list = document.getElementById("li

2020-08-13 00:41:59 602

原创 使用javascript 实现二分查找算法!

什么是二分查找算法?我们不扯这么多的概念!容易晕,我们直说使用场景!适合于查找按照顺序排列的数据结构,插入效率较低,查询效率较高,举例说明(查找10000天数据,理论最多查找次数为log以2为底100000的对数约等于20次)下面是二分算法实现的思路:下面是代码实现:var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];console.log( search( arr , 0 , arr.length - 1 , 7 ) ); //

2020-07-08 00:20:13 359

原创 竖向瀑布流布局解析!

瀑布流是各种壁纸社区喜欢用的布局效果,精品的图片随着滚动条的下拉一张张从渲染出来,非常的好看。作为一名前端工程师,我们工作中可能会遇到类似的这种需求,今天我就给大家剖析下瀑布流的整体思路。因为这种效果可能牵扯到具体的公司需求,容器大约多少列、这种都不能统一,所以今天给大家分享下4列的设计原理,大家可以将这种编程的思路灵活的运用到自己的实际工作中。当我们从后端发送ajax请求的时候,拼接完html结构(如果有同学喜欢原生的话,建议使用创建dom元素的方式,下面到时会解释!),我们渲染所有结构,

2020-06-07 17:30:05 602

原创 Javascript中递归函数的原理与应用

递归函数在Js中属于比较抽象,比较难理解的问题,今天我来给大家揭晓一下他的本质和几个小的案例!1、先来一个图,大家瞧一瞧什么是递归: 很魔性吧,这个图片很清晰的给我们展示了递归函数的运行流程:从起始条件归到终止条件。2、如果单纯的以大段文字讲解原理,太过枯燥,我们直接将到应用的例子上,这样反而更加的生动形象。 第...

2020-03-01 14:30:48 515

原创 前端浮动造成高度塌陷的产生条件和解决方法

高度塌陷的产生条件和解决方法受疫情影响,近期都呆在家里“闭关修炼”,今天也抽出时间跟大家分享一些有关高度塌陷的知识以及相应的结局方法!一、什么是高度塌陷下面贴一张的图展示:大家可以很明显的看到子元素没有把父元素box撑起来,按照IE标准盒子来理解:box的宽高 = 子元素(content+padding+border+margin)这里子元素没有...

2020-02-23 14:22:46 675

原创 Vue 2.0 --webpack.dev.conf.js--本地模拟数据(因为2.0删除了build文件下的dev-server.s )!!

在Vue2.0下官方移除了build文件下的dev-server.js,但是我们想要模拟本地数据怎么办呢?可以在build/webpack.dev.conf.js里模拟数据所有的前提是你安装好了Vue-cli脚手架工具!!!第一步!一步安装express 建议 npm install --save express然后再 npm run dev第三张图第二个网页也是个模拟数据的网站,有需要的话可以...

2018-05-18 19:33:49 595

3.4.0_0.crx

REACT开发必备软件!可视化的显示状态的变化!亲测可用,建议大家写在,这一块工具真的很强大,是每一个web前端开发人员必备的插件之一!

2020-07-08

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除