![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 93
不见浅诗~
向上攀爬的这条路比站在顶峰更让人热血澎湃
展开
-
根据微前端原理解决代码冲突--居然还有额外好处
本篇文章参考以下博文如何“取巧”实现一个微前端沙箱?文章目录前言页面样例前言 我们开发的过程中,如何能提高开发效率?这是一个合格程序员始终都要考虑的问题,在前段时间的开发过程中,发现同事们在代码提交的时候,总会或多或少的有一些代码冲突,由于公司是使用的 SVN 进行代码管理的,要迁移到 Git 的话成本太高,所以就思考,有没有什么方法能够避免掉这个冲突,修改又不用很大? 结合以前的项目,配置路由的时候,把所有页面的入口引入到一个配置文件中,路由在匹配入口的时候,也从配置文件中读取,这样解原创 2021-05-10 14:38:17 · 569 阅读 · 2 评论 -
页面白屏不要慌,开发工具来帮忙
本篇文章参考以下博文《页面卡顿?内存泄漏?一文详解如何排查》–魔术师卡颂文章目录前言1.定义2.JS数据存储3.垃圾回收前言 我们页面白屏了,大部分情况下是某个报错导致,只要打开开发者工具,查看报错提示就可以了。。如果 webpack 配置了 source-map ,那么就更容易定位了,可以直接精确定位到哪一行,哪一列的代码出现了问题。 但是有时候白屏问题的出现,是因为页面的内存泄漏,那这就都有无从下手的感觉了,今天我们就来看看,这个内存泄漏,该怎么办?1.定义 内从泄露作为一名开发原创 2021-04-25 14:30:16 · 1023 阅读 · 0 评论 -
前端性能如何优化?
本篇文章参考以下博文前端性能优化 24 条建议(2020)React技术揭秘文章目录前言一、减少延迟感知二、提高页面加载速度2.1 减少 HTTP 请求2. 使用 HTTP2前言 最近在学习过程中突然看到这个问题,也想总结以下自己关于性能优化的理解,这个问题比较大,我们需要逐步解耦来处理,回答需要有条理,有逻辑,才不至于涵盖面不全,有遗漏点。 首选我们要弄清楚一个问题,为什么要性能优化?或者说性能优化的目的是什么?那肯定是为了快速响应客户的操作。那么怎么样才能实现快速响应呢?可以从两方面原创 2021-03-11 17:26:35 · 374 阅读 · 0 评论 -
代码要写成别人看不懂的样子(二十八完结篇)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言MVVM 模式视图模型层总个小结前言 各位,本节是看不懂系列的最后一篇文章了,非常感谢张容铭老师的 《JavaScript设计模式》 这本书我从头到尾完整的读了三遍,对我个人的提升真的非常巨大,也推荐各位有机会也读一读。 本节要介绍的设计模式,也是书中的最后一章,是目前公认的最优框架模式, MVVM ,从名字就可以看出, MVVM 也是从 MVC 模式演变过来的,准确的说是从 MVP 模式演变的。原创 2021-01-12 09:53:20 · 313 阅读 · 2 评论 -
代码要写成别人看不懂的样子(二十七)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言MVC 模式总个小结前言 嗨!各位乡绅,上一节的字符串模板,有没有很崩溃,模板引擎写起来是有点费劲,但是思路比较简单,慢慢梳理就好。 本节我们来个硬货,如果各位经常浏览招聘信息,那么很多公司都会在岗位要求上面写上,熟悉 MVC 框架者优先。今天我们就来搞搞,到底什么是传说中 MVC 。MVC 模式 MVC 即模型(model)—视图(view)—控制器(controller),用一种将业务逻辑、数据、视图原创 2021-01-08 17:58:13 · 196 阅读 · 0 评论 -
代码要写成别人看不懂的样子(二十六)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言MVC 模式总个小结前言 嗨!各位乡绅,上一节的字符串模板,有没有很崩溃,模板引擎写起来是有点费劲,但是思路比较简单,慢慢梳理就好。 本节我们来个硬货,如果各位经常浏览招聘信息,那么很多公司都会在岗位要求上面写上,熟悉 MVC 框架者优先。今天我们就来搞搞,到底什么是传说中 MVC 。MVC 模式 MVC 即模型(model)—视图(view)—控制器(controller),用一种将业务逻辑、数据、视图分原创 2021-01-06 10:30:27 · 269 阅读 · 2 评论 -
代码要写成别人看不懂的样子(二十五)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言Widget模式总个小结前言 大家如果熟悉组件,那么学习本节内容会比较又感触,上一节我们学习了模块化开发,可以把功能细化,逐一实现每个微功能,这是一种很好的变成实践。不过对于页面视图的开发,这种思想应该怎么实现?Widget模式 (Web Widget 指的是一块可以在任意页面中执行的代码块)Widget 模式是指借用 Web Widget 思想,将页面分解成部件,针对部件开发,最终组合成完整的页面。 多人合作开发的时候,原创 2020-12-29 21:19:36 · 144 阅读 · 0 评论 -
代码要写成别人看不懂的样子(二十四)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言异步模块模式总个小结前言 上一节的同步模块应用范围多在服务端,那对于客户端的架构模式,我们通常选择异部模块模式,因为浏览器环境不同于服务器环境,在浏览器中对文件的加载时异步的。因此要使用未加载文件中某些模块方法时必然经历文件加载过程。 对未加载文件中的模块引用,同步模块模式是无能为力的,为了解决这个问题,我们一起研究下今天的课题。异步模块模式 模块化:将复杂的系统分解成高内聚、低耦合的模块,使系统开发变得可控,可维护,可扩原创 2020-12-28 21:06:51 · 172 阅读 · 0 评论 -
代码要写成别人看不懂的样子(二十三)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言同步模块模式前言 同学们好,技巧类的设计模式我们告一段落了,本届开始,我们一起学习一个新的种类,架构型设计模式,之前我们学习的都是解决具体问题的相关设计模式,本节开始,我们学习项目框架,这就涉及多人共同开发大型复杂项目了。 架构型设计模式是一类框架结构,通过提供一些子系统,指定他们的职责,并将他们条理清晰的组织在一起。同步模块模式 模块化:将复杂的系统分解成高内聚、低耦合的模块,使系统开发变得可控,可维护,可扩展,提高模块原创 2020-12-26 14:05:06 · 155 阅读 · 2 评论 -
代码要写成别人看不懂的样子(二十二)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言等待者模式前言 本节我们处理一个老生常谈的问题,异步。为什么会出现异步这个问题呢?这要从 JS 出生之前说起。 很久很久以前,天和地还没有分开,宇宙混沌一片。有个叫盘古的巨人,在这混沌之中,一直睡了一万八千年。 有一天,盘古突然醒了。他见周围一片漆黑,就抡起大斧头,朝眼前的黑暗猛劈过去。只听一声巨响,混沌一片的东西渐渐分开了。轻而清的东西,缓缓上升,变成了天;重而浊的东西,慢慢下降,变成了地… 扯远了哈,异步问题是因为原创 2020-12-25 11:49:47 · 177 阅读 · 0 评论 -
代码要写成别人看不懂的样子(二十一)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言参与者模式前言 熟悉 react 的同学,给绑定事件传递额外参数,这种操作是不是信手拈来,这是得益于 jsx 语法,所有代码都是 js 当然可以为所欲为了,但是当不使用框架的时候,我们又应该怎么实现这种功能呢? 本节就来学一个参与者模式,帮我们解决传参问题。参与者模式 在特定的作用域中执行给定的函数,并将参数原封不动地传递。 ...原创 2020-12-24 11:30:33 · 135 阅读 · 0 评论 -
代码要写成别人看不懂的样子(二十)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言惰性模式前言 各位接触过机器学习没有,没了解过也没关系,这东西的大体思路就是,当第一次执行某种情况时,机器会去判断一些情况,到第二次执行的时候,就不需要再重复判断了,那么机器学习就会在第一次执行完成后,记录当时的计算过程,参数等数据,然后重新定义这种特定情况,当再次遇到后,不需要重复判断,直接获取上次的结果就行。 这个机器学习,就很像我们今天要说的惰性模式。真的超级像(我个人猜测,有可能当年发明机器学的人,就是惰性模式用的比较好原创 2020-12-22 21:05:49 · 164 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十九)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言简单模板模式前言 大家有没有遇到过操作大量节点的情况,比如我们在页面上想要创建一个展示区域,这块区域,需要跟不同的选项来展示不同结构的内容,那我们就需要根据选项来操作不同的节点。首先创建节点,然后创建节点内容,将节点内容插入到创建的节点中,最后将节点插入到父节点中。 这一套操作下俩,一个节点就需要 4 步,如果节点比较多,那这性能消耗就有点遭不住了。 为了解决这一个问题,我们可以使用简单模板方法。如果各位接触过模板字符串原创 2020-12-17 22:01:29 · 225 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十八)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言节流模式前言 今年3月份的时候,写过几篇文章,,介绍了一下浏览器的回流,重绘,以及对应的解决办法分别是节流和防抖。当时刚开始写博客,还很青涩,各位要是不嫌弃,可以简单扫一眼,链接在下面。react中的防抖和节流,大佬封装的方法用起来就是爽–我们一起读源码JavaScript防抖和节流–造轮子它不香吗浏览器的小秘密–回流和重绘 今天我们一块研究的设计模式,就跟节流有关,这个东西平时不常用,但是一旦遇到相关问题后,不用还不原创 2020-12-17 12:05:06 · 120 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十七)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言数据访问对象模式前言 各位作为一名前端开发,大家有没有遇到过前端存储,比如用户初次进入程序,会有一个个性化引导,一般来说这块功能是交给后台同事来做的,但是有时候需要放在前端,来保存是否第一次登陆的字段。 那我们在本地存储的时候呢,可能会遇到很多问题,每添加一组数据,担心会不会覆盖别人的数据等等,本节的设计模式,就介绍怎么合理前端存储。数据访问对象模式 抽象和封装对数据源的访问与存储, DAO通过对数据源链接的管理方便对数据原创 2020-12-15 15:10:16 · 155 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十六)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言链模式前言 大家一定用过 JQuery 吧,这东西的一大特性就是链式调用,获取到某个元素后,直接连续执行多个方法,贼帅,其实我们也可以做到。 本节开始,就给大家介绍一些技巧性的设计模式,平时能经常用到,类似语法糖一样,简单易懂,而且功能奇妙,不会像前面的设计模式那样长篇大论,肯定比前面容易接收,而且有趣。链模式 通过对象方法中,将当前对象返回,实现对同一个对象多个方法的链式调用。原创 2020-12-10 15:41:01 · 117 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十五)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言链模式前言 大家一定用过JQuery吧,这东西的一大特性就是链式调用,获取到某个元素后,直接连续执行多个方法 链模式 通过对象方法中,将当前对象返回,实现对同一个对象多个方法的链式调用。 ...原创 2020-12-09 17:12:59 · 175 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十四)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言解释器模式前言 解释器模式 在不破坏对象封装性的前提下,在对象之外捕获,并保存该对象的内部状态以便日后对象使用或者对象恢复到以前的某个状态 。 ...原创 2020-12-08 21:20:15 · 146 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十三)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言备忘录模式前言 各位有没有做过分页,做分页一定会涉及到上一页,下一页,我们为了页面的流畅性,一般都是只请求当前页的数据,当点击上下页按钮的时候,才会请求对应的数据。 这个策略没错,但是用户一般都很调皮,不会老老实实,只点下一页,或者只点上一页,有时候可能会来回,上一页,下一页疯狂点击,那么这种情况就会疯狂请求数据。 页面很可能会卡死,那有没有什么方法能解决这种调皮鬼行为呢? 有时候我们可以增加点击限制,数据没返回之前,不原创 2020-12-08 17:07:55 · 191 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十二)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言访问者模式前言 访问者模式 针对对象结构中的元素,定义在不改变对象的前提下访问结构中元素的新方法 。 ...原创 2020-12-07 19:16:59 · 167 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十一)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言状态模式前言 状态模式原创 2020-11-19 15:51:36 · 292 阅读 · 0 评论 -
代码要写成别人看不懂的样子(十)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言状态模式前言 各位写代码的时候,经常会出现条件判断吧,那么条件判断里面脸最熟的当属 if 了吧,这个东西在我们开始编码的时候,真的是隔一段时间不写,就浑身难受。 但是呢,if 这个东西,哪怕是再简单的判断,也会有隐含问题,而且在代码可读性上,条件判断的效果很不友好,当存在多重判断的时候,简直就是灾难。 所以为了解决条件判断的这些弊端,状态模式应运而生。状态模式 状态模式:当一个对象的内部状态发生改变时,会导原创 2020-11-13 17:32:13 · 335 阅读 · 0 评论 -
代码要写成别人看不懂的样子(九)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言模板方法模式前言 前几节的结构型设计模式,各位学的乱不乱,我个人刚开始接触的时候,也觉得很抽象,不太好理解,尤其是实战的时候,总是不知道在什么情况下使用。记住一点,当我们单纯的创建一个 模板方法模式 ...原创 2020-11-12 16:11:35 · 247 阅读 · 0 评论 -
代码要写成别人看不懂的样子(八)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言注意事项前言 铁汁们,我又来了,上节的组合模式,各位乱了没?不慌哈,这一节我们一起学个更乱的,就不会觉得上一个乱了。 通过不同的组合我们可以拼出很多我们像要的东西,只有想不到的需求,没有实现不了的方案。注意事项 组合模式刚上手有点乱,不过核心思想还是比较清晰明确的,把需求拆分成一个一个子类,让所有子类继承一个虚拟父类就可以了。之前问过一位高人,如何才能写好代码,前辈指点:“ 惟手熟尔 ”。设计模式初学的时候,一定要原创 2020-11-02 11:20:20 · 814 阅读 · 0 评论 -
代码要写成别人看不懂的样子(七)
本篇文章参考书籍《JavaScript设计模式》–张容铭文章目录前言一、组合模式前言 来了各位,本节整个硬活,一、组合模式 var News = function() { //子组件容器 this.children = []; //当前组件元素 this.element = null;}News.prototype = { init: function() { throw new Error('重写方法'); }, add: function() { throw n原创 2020-10-29 17:13:16 · 186 阅读 · 0 评论 -
代码要写成别人看不懂的样子(六)
文章目录前言一、代理模式前言 由于现在网络的发展,访问量,需求量越来越高,很难再使用一台服务器解决所有请求了,这就需要设置专门功能的服务器,来处理专门的业务。比如一个大型应用中,地图功能需要配置一台地图服务器,实况功能需要配置一台媒体服务器,数据上传专门来一台服务器,数据库系统再来一台,管理这些服务器还需要一台。在一些高并发的地方,一台服务器处理不过来,要把请求分散到各个服务器上进行处理。 服务器越来越多,不可避免地要考虑一个问题,跨域请求,跨域本身是一种安全策略,为了网络安全,不能直接请求非本服原创 2020-10-26 17:04:18 · 247 阅读 · 2 评论 -
代码要写成别人看不懂的样子(五)
文章目录前言一、外观模式二、适配器模式前言 通过前面几篇文章,大家估计对对象的创建有了一个新的认识,在很多大型应用里面,对象会相当复杂,但是其刚创建的时候,并不是这样,而是通过后续的组合,封装,才一步一步完善起来的,从本章节开始,我们一块来学一学,如何把这些对象组合的更合理,从而使想强大的功能。一、外观模式 大家一定绑定过事件,而且一定像下面这样绑定过document.onclick = fucntion(e) { e.preventDefault(); if(e.target !== d原创 2020-10-22 21:04:15 · 313 阅读 · 0 评论 -
代码要写成别人看不懂的样子(四)
文章目录前言一、简单工厂模式二、安全工厂模式三、抽象工厂模式如何使用四、建造者模式前言 书接上回,我们学习了装饰器模式,不知各位道友是否还有印象,本集,我们来学一学工厂相关的设计模式,分为三部,简单工厂,工厂方法和抽象工厂。 先个大家打个预防针,工厂相关的设计模式,都是需要面向对象来实现的,而面向对象只是一种思想上的转变,平时我们实现某个功能,是想着如何操作Dom,现在我们需要考虑,把我们要实现的东西转化成一个活生生的对象。 比如在页面左侧增加一个固定窗口展示广告,平常我们会写一个div,然后原创 2020-10-22 14:43:03 · 191 阅读 · 2 评论 -
代码要写成别人看不懂的样子(三)
文章目录前言前言 书接上回,我们学习了装饰器模式,不知各位道友是否还有印象,原创 2020-10-21 14:21:30 · 285 阅读 · 2 评论 -
代码要写成别人看不懂的样子(二)
文章目录前言前期准备如何才能让别人看不懂1.四两拨千斤2.指桑骂槐前言 上一期我们,浅尝辄止,稍微介绍了下代码如何写才能更高级,更有内涵,主要是需要配合继承,或是某些数据特性来说。这一节咱们放个大招,运用兵法来写代码,保证初学者看不懂,既便能看懂,也不知道为什么这样做,即便知道为什么这样做,没有系统学习过的人也做不好。 这部兵法就是–设计模式。前期准备 各位乡绅,读这本书前,个人建议要对 继承 , 类 (虽然JS在ES6之前没有类,但是可以通过一些手段实现类), 构造函数 ,原创 2020-09-29 14:23:45 · 448 阅读 · 0 评论 -
代码要写成别人看不懂的样子(一)
本篇文章参考以下博文文章目录前言前言 最近读了一本书,张容铭老师的 《JavaScript设计模式》 ,书中提到的编码模式,编码风格,让我想起了我刚学 JS 的时候,特别向往像大神一样,全篇没什么 div 罗列,都是方法或者构造函数之类的东西,一顿操作后, body 里面只要添加一个 <div id=“demo”> ,大功告成。 逼格满满有没有,当时就想,什么时候我也能这样,别人看不懂我的代码,所有的事情不用自己手写,只要给一个容器,然后执行函数就原创 2020-09-28 15:59:48 · 1294 阅读 · 0 评论 -
使用Object.definePropety报错 Maximum call stack size exceeded
本篇文章参考以下博文关于 Object.defineProperty() 小结 最近在监听界面样式变化是,用到了 Object.definePropety 使用过程中,报错 Maximum call stack size exceeded 翻译为: 超出了最大调用堆栈大小 。 使用方法如下:let demo = document.getElementById('demo').style;Object.defineProperty(demo, 'display', {原创 2020-09-27 11:05:52 · 1653 阅读 · 0 评论 -
Property description must be an object
本篇文章参考以下博文Uncaught TypeError: Property description must be an objectObject.defineProperties()文章目录报错区别Object.definePropertyObject.defineProperties报错 最近在使用 Object.defineProperties 定义属性时报错: Property description must be an object 报错说明:属性描述必须是原创 2020-09-24 20:44:21 · 8527 阅读 · 0 评论 -
WebAssembly—“求求你别更新了,学不动了”
本篇文章参考以下博文几张图让你看懂WebAssembly文章目录原创 2020-08-25 21:10:38 · 467 阅读 · 0 评论 -
抛弃axios + promise,拥抱 superagent
本篇文章参考以下博文文章目录原创 2020-07-28 22:23:13 · 863 阅读 · 0 评论 -
JavaScript数组去重各种方法,看谁最快
本篇文章参考以下博文数组里面对象去重的3种方法数组方法reduceJavaScript 高性能数组去重文章目录一、数组去重性能测试1.1数组去重对象一、数组去重性能测试1.1 数组去重对象 橘色 蓝色 红色 绿色 ...原创 2020-07-05 22:43:30 · 465 阅读 · 0 评论 -
JavaScript ES6 Array.filter()方法总结
本篇文章参考以下博文Array.prototype.filter()文章目录一、定义二、语法一、定义 filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 filter 的中文意思是“筛选”,顾名思义,会对数组中的元素挨个进行检查,检查通过的,才能组成新的数组,返回出去。二、语法var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])原创 2020-07-03 14:44:17 · 1496 阅读 · 0 评论 -
JavaScript ES6 Array.from方法总结
本篇文章参考以下博文ES6,Array.from()函数的用法JavaScript from() 方法文章目录 橘色 蓝色 红色 绿色原创 2020-06-30 21:21:30 · 506 阅读 · 0 评论 -
JavaScript reduce用法总结
本篇文章参考以下博文JS中reduce方法JS — reduce()函数文章目录一、前言二、定义三、归并原理四、案例4.1 数组元素求和4.2 计算数组某一元素出现的次数4.3 合并二维数组4.4 数组中的元素是对象时去重一、前言 最近在解决去重问题上,搜到一个使用 reduce 来进行去重的,几行代码解决了当数组元素是对象时,要求按照某一属性对数组中的对象进行去重的问题, reduce 这个方法感觉可以挖掘的东西还很多,写此文章记录总结一下,方便后面复习查看。二、定义原创 2020-06-30 16:18:06 · 491 阅读 · 2 评论 -
JavaScript数据,对象判空
数组和对象都是引用数据类型,栈内存中存储指针,堆内存中存储实际数据。下面这种判断不能进行数组或对象判空let arr = [];if(arr !== []) { //该方法无法判断空数据 ... }上面方法由于获取的是数组的地址,地址 !== [] ,所以不能用来进行判空,需要使用 length === 0 来进行判断。let arr = [];if(arr.length !== 0) { ... }记录一下这个问题,防止自己以后再犯...原创 2020-05-30 17:21:24 · 344 阅读 · 0 评论