自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(80)
  • 问答 (13)
  • 收藏
  • 关注

原创 webpack热更新原理-连阿珍都看懂了

前端进阶的必看的模块热更新原理。了解hmr的运行机制,有助于对我们项目运行原理的理解,对项目优化有新的认知~

2022-10-17 14:08:43 5166 1

原创 webpack原理-webpack5内部分包原理解析

今天我要带来的才艺是:解析webpack5内部的分包规则,也就是ChunkGraph。webpack分包规则与ChunkGraph的关系|ChunkGraph构建的|ChunGraph长什么样子

2022-09-09 02:58:00 1270 2

原创 webpack原理 - 5分钟了解ModuleGraph

webpack内部是以什么样的数据结构来体现模块之间的依赖关系?ModuleGraph是如何收集构建的?

2022-09-01 13:59:11 858

原创 webpack原理解析【万字长文】

大家好,我是Webpack,AKA打包老炮,我的slogan是:"打天下的包,让Rollup无包可打"

2022-07-29 15:50:22 497 1

原创 总结Vue父子组件的7种通信方式

vue-advance前沿学习vue的高级用法父子组件要始终保持单向数据流动否则随着业务增长,代码会变得难以维护与调试,因为数据变化的触发点很难找到解决方案:子组件通过this.$emit()事件通知父组件来做处理(sync关键字是帮助这种情况而实现的 语法糖)父子组件的通信props传参<child :name="name">this.$emit通知//父.vue<child @update="update"></child>/

2021-02-09 18:03:36 1186

原创 【webpack系列】webpack小老弟打包大项目

上集回顾:话音刚落 ~ npm老大哥又来电话了【有大工程】。“喂,老大哥,对方啥阵形啊?”“4-4-2? 踢你的?”“行,马上带上大姨夫嗷,拜拜!”webpack小老弟在接到npm老大哥的介绍后,立马动身参与到大项目中。准备狠狠地大展身手~~~本篇文章知识内容:webpack中常见的loaderwebpack中常见的 pluginswebpack中output 配置小老弟大吃一惊webpack哼着小曲:“画画的baby,画画的baby…”;过了半个小时车程后,终于见到了大工程负

2020-12-05 20:24:11 245

原创 webpack系列:webpack小老弟接了个简单活

webpack深入浅出系列:进阶篇前沿,本篇文章的讲解思路是以webpack的五大核心为线索,以webpack对象为第一视角来讲述(以前记得看过一个文笔非常厉害的技术啊婆写的,非常有趣。然后我就想着模仿一下)。该篇目的是为了掌握webpack的打包运作流程认识webpack.config.js认识plugins - HtmlWebpackPlugin认识entry正文开始大家好,我是webpack 大家好,我是一个专门做打包的打工仔,我的英文名叫webpack。今天npm老大哥找我

2020-12-03 15:38:35 32855

原创 webpack深入浅出系列:入门(系统性了解webpack)

文章目录前言webpack是什么?为什么需要webpack?npm与webpack的关系?webpack的核心?webpack是如何运作的?前言最近常常反思,做前端仔也有些日子了,除了存款跟技术跟买的股票该涨的没涨之外;年龄、三脂这些倒是涨了不少。那我该怎么办?又没有马保国的武德,又不会卖燕窝;那只能勤加努力,把技术再往上提一提,起码要定位到高级工程师先。所以计划先把webpack这个前端家喻户晓的东西弄透彻一点。我跟你不一样,我要学的是真谛,直击灵魂的那一行代码。所以你跟我一样,请start me。

2020-12-02 19:27:56 257

原创 2020年最新前端面试总结

前言在十一月份经历了求职的路程,本以为年底加上今年疫情的原因会相对困难,但有幸被幸运女神眷顾的感觉,求职的路程居然异常顺利。虽然过程中也有被技术问到无地自容的时候,但总算平稳渡过。在经历了11家公司的面试,拿到了6个offer后,我想在这次记录这次难得的经历,特别对技术的总结,以及面试经验上的分享。希望对后来同为打工人的你有所帮助。在确认拿到offer后不用再跑面试的时候的心情:如果文章还有人看的话,就考虑把问题都整理出一份答案。Boss与拉钩选择一个好的求职平台非常重要。在11月1号,我

2020-11-15 19:54:21 277

原创 优雅手撕bind函数

为什么面试官总爱让实现一个bind函数?他想知道些什么?一个小小的bind里面到底暗藏多少知识?今天来刨析一下实现一个bind要懂多少相关知识点,也方便我们将零碎的知识点串联起来。首先我们要明白bind函数的作用:返回一个能够改变this指向的函数。要点:改变this指向返回函数那么实现bind的思路大致就想出来了:创建一个待返回的函数,函数内部利用call/apply改变指向,call/apply的参数从arguments中获取。实现代码如下: Function.prototype

2020-11-01 23:55:19 296

原创 优雅实现深度遍历DFS与广度遍历BFS

深度遍历DFS&广度遍历BFS定义深度遍历DFS:深度优先搜索属于图算法的一种,英文缩写为DFS即Depth First Search.其过程简要来说是对每一个可能的分支路径深入到不能再深入为止。广度遍历BFS:广度遍历是最简便的图的搜索算法之一,以广度优先,横向逐层地遍历,直到没有下一层为止。实现方式数据源:搜索其中的name值 const data = [ { name: 'a', chi...

2020-10-19 18:22:31 196

原创 优雅实现防抖与节流函数

防抖&节流定义防抖:防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行。节流:节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次触发。使用场景搜索框按钮监听滚动频繁使用鼠标总的来说:任何东西被频繁的调用都有可能需要防抖或者节流去优化实现方式防抖 function showLog() { console.log('show'); } /...

2020-10-18 19:30:57 235 2

原创 终极版~深拷贝

这次让面试官非常满意:手撕深拷贝-------------人工分割线-------------浅拷贝这里不做介绍了,深拷贝的实现要点,除了一定要深!还要能兼容各种类型,如函数,正则、Date等等。其实日常业务开发中,Json.parse(Json.stringfy(obj))已经能够解决90%左右的克隆需求。还有Object.assign() Object.create()都能满足一定的克隆需求。但上班拧螺丝,面试造航母的精神不容小觑!本着专研精神去看待怎么才能写个牛逼、各种场合都能...

2020-10-17 02:55:12 209

原创 Javascript判断数据类型的五种方式及其特殊性

Javascript判断数据类型的X种方式及区别五种方式typeofinstanceofObject.prototype.toStringisArrayiisNaN-------------人工分割线-------------typeofMDN:typeof操作符返回一个字符串,表示未经计算的操作数的类型。 let data = { number : 1, string : 'b', boolean : true, ...

2020-10-15 03:25:08 277

原创 汇总遍历对象的六种方式及其区别~值得收藏

遍历对象属性的方式先定义数据源 let person = { name: 'tony', } let human = { eat: 'food', } // 设置prototype为human Object.setPrototypeOf(person, human); // person增加属性:不可枚举 age Object.defineProperty(person, "age", {

2020-10-14 19:56:44 736

原创 你不知道的闭包原理【三个栗子彻底理解】

你不知道的闭包原理想要理解闭包之前,就必须理解函数的创建过程、活动变量AO、作用域链。我曾写过相关的文章网上相关对闭包的定义:MDN:函数和对其周围状态(lexical environment,词法环境)的引用捆绑在一起构成闭包(closure)。也就是说,闭包可以让你从内部函数访问外部函数作用域。在 JavaScript 中,每当函数被创建,就会在函数生成时生成闭包。你不知道的JavaScript:是指有权访问另外一个函数作用域中的变量的函数。创建闭包的常见方式就是在一个函数内部...

2020-10-13 03:52:47 182

原创 javascript-七个栗子深入理解this指向

在先了解this之前有必要了解一下-函数的生命周期在调用一个函数的时候是先经历函数的创建然后再到执行的过程。而this的指向是再创建阶段就已经完成了。关于创建及执行的阶段做的事情看下面图图:执行上下文生命周期描述创建上下文分别创建变量对象,确认作用域链,以及确定this指向执行创建阶段之后,则执行代码,这个时候会完成变量赋值,函数引用,及其他代码在创建函数的时候就确定this及作用域这些操作【对应上js是一门词法分析这个知识点是相互呼应的】,意思就是this在创建阶

2020-10-10 04:10:10 227

原创 JavaScript设计模式之命令模式【命令解耦】

在讲解命令模式之前我们先来了解一个生活中的命令模式场景:场景1:医院看病抓药:当你因为肾虚到医院看医生,医生一番操作之后得出结论:要吃个疗程【夏桑菊】、【小柴胡】(药名纯属虚构,真的肾虚就找医生),于是医生开了个药单【夏桑菊、小柴胡】,让你拿着药单到收费窗口;于是射射发抖的到收费窗口把药单【夏桑菊、小柴胡】给到收费人员,收费人员不管给你看医生的是谁,你是否得肾虚,他只要对着药单得收费项进行收费,完成后在药单上盖个收费章,然后让你拿着药单到取药窗口拿药,于是你又跑到取药窗口,将药单【夏桑菊、小柴胡】给到

2020-08-19 19:41:02 231

原创 JavaScript设计模式之策略模式【组合委托】

前言:语言只是工具,思想才是核心今天要总结的是 策略模式策略在开发中的应用非常广泛,所以也是非常常见且使用的设计模式。在实际开发中,往往在实现一个功能时,有多种解决方案可行。常见场景:解压:gzip算法解压,gzip算法解压表单验证:手机号验证,邮箱验证,密码格式验证工资计算:技术猛男工资,鼓励师妹妹工资,冷血产品经理工资总结策略模式的使用场景,在想实现某个效果时,有多种不同的达成方式。这个时候就要考虑策略模式(如果你写了很多ifelse)使用策略模式的优点:1.使代码更加.

2020-08-12 21:02:51 259

原创 JavaScript设计模式之单例模式【惰性单例】

在提高开发水平,往中高级前端工程师中,利用设计模式是必不可少的一条道路。掌握设计模式的思想远远比硬套重要,因为设计模式是一种思想,不局限于开发语言。但实际上由于语言的特性不同,往往在实现的时候会有不少差异。《javascript设计模式文章系列》是参照《JavaScript设计模式与开发事件》以及网络博客结合自身经验总结所写,希望在写下文章分享知识的同时能够加深记忆。javascript设计模式之单例模式如果你学过Java那么你会想到先定义单例类,然后提供getInstance静态方法返回单例对象.

2020-08-11 18:41:03 328

原创 JavaScript继承方式及原理

继上篇文章深入剖析prototype、constructor、_proto_原理后,接下来整理、理解JS中的继承就水到渠成,一气呵成!话不多说,上个文章中说过,原型链最主要就是为了解决JS在面向对象中继承功能的实现。所以在js继承中第一种要介绍的方式当然是从原型链继承。过程中会插入我对该种继承产生过的一些疑惑并作出解答,希望这对你的理解能带来帮助原型链继承: function Father () { this.name = 'father'; } .

2020-08-04 02:35:03 358

原创 深入剖析prototype、constructor、_proto_原理

JavaScript中比较难理解的点之【prototype、_ _ proto _ _、constructor】,通常不明白这三者关系的同学都有个毛病:继承也不懂!深刻理解这个知识点不仅可以对学习继承有帮助,而且对new关键字、this、性能方面都会有更好的认识。最关键是,几乎作为面试必考题目之前,没啥理由不好好看完~友情提示:文章相对枯燥且绕,一定要耐心。这篇文章会尽量按照我这段时间所产生过的疑惑,以懵逼当事人之一的角度去一一解开谜底。在这个复杂三角恋的关系中,我认为最让人容易混淆的有如下几个点:

2020-07-29 18:28:33 537

原创 前端进阶必读:《JavaScript核心技术开发解密》核心提炼三

前言最近读勒基本关于前端的数据《JavaScript核心技术开发解密》,《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用,但从未从更深的层面去思考他们是如何运作,为什么会产生这种特性,等等…这本书先从《JavaScript核心技术开发解密》开始讲解,分为两篇讲完,读完本篇你能学到:《核心提炼三》前言九、ES6与模块化9.1 常用语法知识9.2 模板字符串9.3 解析结构9.4 展开运算符9.5 Promise9.6 事件

2020-07-21 16:50:09 381

原创 前端进阶必读:《JavaScript核心技术开发解密》核心提炼二

前言最近读勒基本关于前端的数据《JavaScript核心技术开发解密》,《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用,但从未从更深的层面去思考他们是如何运作,为什么会产生这种特性,等等…这本书先从《JavaScript核心技术开发解密》开始讲解,分为两篇讲完,读完本篇你能学到:五、作用域与作用域链在JS中,作用域是用来规定变量/函数可访问的规则5.1作用域5.1.1全局作用域在非严格模式,未定义的变量/函数会

2020-07-21 16:49:34 503

原创 前端进阶必读:《JavaScript核心技术开发解密》核心提炼一

前言最近读勒基本关于前端的数据《JavaScript核心技术开发解密》,《webpack从入门到进阶》…这几本书帮助到我更好的理解JS、webpack在前端技术领域中的作用。以前可能更多的是知道怎么使用,但从未从更深的层面去思考他们是如何运作,为什么会产生这种特性,等等…这本书先从《JavaScript核心技术开发解密》开始讲解,读完这本书你能学到:一、三种基础数据结构栈(stack)堆(heap)队列(queue)不要小看这些数据结构,他们不同的结构以及规则产生了我们平常所知道的一些特性:

2020-07-21 09:05:35 966

原创 Axure9发布后无法正常打开的解决方法

最近用的Axure9画图比较多,一开始就遇到发布之后自动跳转到购买页面。然后把这个问题解决之后,又发现右侧的原型内容不可见。最后把这个问题解决了就出现过了。这里记录下这个问题,希望帮到其他人。1.resources\scripts\player\axplayer.js找到这一块删除掉【好像Axrue7/8只要这一步就能正常使用了】 if (CHROME_5_LOCAL &&...

2020-03-17 09:23:49 8024 1

原创 JavaScript高性能编写技巧

前言这段时间把《高性能JavaScript》书籍读完,受益良多。在读书的过程把重点精简地提炼并结合自己的经验记录下来。也希望看完这篇文章能够给对JavaScript多了解一点点。目录加载和执行数据存取DOM编程算法和流程控制快速响应的用户界面Ajax编程实战构建并部署高性能的JavaScript应用1. 加载和执行了解: 当浏览器在执行JavaScript代码时,是不能...

2019-10-15 22:48:11 309

原创 微信端字体图标显示不正常(不显示/显示成方框)

微信端字体图标显示不正常(不现实/显示成方框)一开始的思考方向发现错误的原因出错的原理解決方案iOS 中微信端打开项目发现图标显示成一个个方框;切换页面也同样没显示。但是在Android端、IOS的浏览器显示正常【借用下网上的效果】一开始的思考方向一开始怀疑是字体图标的导入出错了,所以重新导入,但是仍然没解决。因为网上也很多说字体图标文件导入顺序等等问题影响。但这并没有解决我的问题。发...

2019-10-10 17:35:54 4778

原创 小程序WebView调用JSSDK(使用扫一扫功能)采坑记录

小程序WebView调用JSSDK(使用扫一扫功能)如何使用JSSDK一: 我开发的是小程序,哪里来的公众号设置?二: 引入的JS文件(http://res.wx.qq.com/open/js/jwexin-1.4.0.js)报错? ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190731190417577.png)三: 获得签名(权限验证)?最近项目仲...

2019-07-31 19:21:01 6363 8

原创 Vue集成微信支付发生的支付失败(当前页面的URL未注册)

微信支付失败:当前页面的URL未注册https://www.xxx.com/iPay/index.html#/inputPay这是因为微信会做一个验证,在后台配置的支付路径与当前的路径不相等导致的。所以,亲测可用的解决办法在# 前面加一个? 号https://www.xxx.com/iPay/index.html?#/inputPay在这里小小的记录一下,希望帮到有用的人。...

2019-07-25 22:03:57 768

原创 支付宝开通支付步骤

一、打开支付宝支付宝链接:https://b.alipay.com/signing/productSetV2.htm?mrchportalwebServer=https%3A%2F%2Fmrchportalweb.alipay.com选择产品中心–手机网站支付二、选择手机网站支付,点击申请**进入手机网站支付后,滚动到最底部。点击立即接入三、填写资料四、最后通过的话就麻烦各...

2019-06-06 09:57:11 1843

原创 《CSS揭秘》总结二:css常用样式实现

《CSS揭秘》总结二:css常用样式实现裁缝效果实现思路:使用outline属性,将定义的虚线outline,通过outline-offset往内偏移 <div class="parent"> 裁缝 </div> .parent { background: #324057; width: 400px; height: 20...

2019-04-03 18:02:49 333

原创 css经典bug:margin垂直方向塌陷。多种解决方式

先看代码,上效果图:.parent { margin-top: 200px; width: 200px; height: 200px; background: red; } .child { margin-top: 50px; width: 100px; height: 100px; backgroun...

2019-03-29 16:38:24 1835 2

原创 《CSS揭秘》总结二:超实用的项目开发技巧

读《CSS揭秘》总结一前言:文章是看《CSS揭秘》书边看边总结的笔记目录:减少重复1.考虑css值是依赖关系的时候,要用比例代码表达。2.灵活控制3.使用currentColor变量简化代码4.使用inherit继承关键字关于响应式布局的设计1.响应式布局的设计建议---------------------------------人工分割线-----------------...

2019-03-28 18:31:43 312

原创 Android从零开始(第五篇)手把手教撸一个仿饿了么LoadingView(一)

前言过年放假前最后一天班,就想着做个简单又有趣的小东西。于是决定来写个自定义的LoadingView作为这个App框架的加载效果吧。走过路过点歌Start O(∩_∩)OGithub项目地址这篇文章叫你如何搭建手写LoadingView,看完这篇文章你能学会:属性动画使用自定义View--------------------------------关门,上分割线---------...

2019-01-31 13:43:14 767

原创 Android从零开始(第四篇)MVP + Retrofit + Rxjava

前言终于到了网络请求模块了。因为以前一直使用的都是Okhttp,所以这次使用Retrofit的话花了两天时间去了解。总的来说Retrofit就是初始化搭建麻烦,挺多东西要注意的。不过看到各界大佬一致好评的请求框架,苦点就苦点。走过路过点歌Start O(∩_∩)OGithub项目地址这篇文章叫你如何搭建MVP+Retrofit+Rxjava,看完这篇文章你能学会:Retrofit的基本...

2019-01-29 18:01:50 530

原创 Android从零开始(第三篇)MVP架构搭建

这几天都在研究如何搭建一个实用稳固的MVP架构作为快速开发的基底。也纠结了很久Presenter层该如何复用,在网上查阅了很多资料之后仍然没能找到一个适用的办法,有的写法单纯是为了presenter的复用而写,却给其他模块增负担;有的实现的手法过于僵硬,不符合写代码的原则。在看完各种奇奇怪怪的实现思路之后,自己内心也有了一个实现presenter复用的一套方法,不过还不知道可不可行,到时撸完了...

2019-01-23 11:12:13 1755

原创 APP开发两年的心得:App代码架构设计(1)

前言工作两年,一直都是从事App开发方面,做过原生App,混合App,公众号,小程序也偶尔写一下简单的后台接口。在开发一个App的过程中,开发原生以及混合的方式有很大不同。在原生(java)的时候经常会尽力的去构想如何构建基类,如何抽象。代码的分层分类都井然有序的感觉。而在混合开发(前端代码)中,对封装,基类,类等等的构思十分少,仅仅是做一些类似工具类的封装。我原本以为前端是不支持继承多态之类...

2018-12-28 17:51:06 2651 2

原创 ionic获取平台信息,在浏览器中运行device.platfrom为空(ionic serve启动方式会使得很多ionicNative失效)

兜兜转转,第二份工作主要还是做web app,所以又选择了Ionic框架来动工。遇到问题:因为项目中要对平台进行区分做处理,所以使用了IonicNative-Device,但是按照官方的demo(炒鸡简单),device.platform缺发现是空,而且device的所有参数都为空。这是为什么?赶紧百度原因如果不是代码问题的话,那就十有八九就是用了:ionic serve来启动的;这...

2018-12-05 14:07:22 804

原创 Android从零开始(第二篇)Mvp+Retrofit+Rxjava网络框架整合

前言:上一篇介绍了一个App在开始之前的技术选型之类的准备工作,这一篇开始真正的实操项目。首先确认了App整体使用MVP的架构模式,在网络请求方面整合了Retrofit+Rxjava,并完成了项目的基本建设。看完这篇文章你会学到:Android MVP架构搭建基础的基类设计:BaseApplication、BaseActivity、BaseView、BasePresenter…MVP...

2018-11-29 16:31:44 1444

空空如也

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

TA关注的人

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