brokenkay的博客

前言矩阵相关的算法在互联网世界有着广泛的应用,比如图片的像素修改(上一小结介绍过)、获取地图路径方案等.在数学中,一个矩阵说穿了就是一个二维数组.矩阵相关的基础算法也都是基于二维数组的基础上完成各类数据操作.本小节列举了前端面试中高频出现的leetcode真题,通过题目的思路讲解和代码实现系统的学习矩阵的基础知识.从宏观上建立起基本的认知,从而加深应用场景下使用矩阵解决实际问题的理解.真题图片旋转一组由 N × N 矩阵表示的图像,其中每个像素点的大小为 4 字节.请你设计一种算法,将图像旋转9

基础概念众所周知,图片是由一个个像素点组成.每一个像素点包含四个值,决定了渲染出来的状态.这四个值为rgba(red, green, blue, alpha).前三个值是红绿蓝,值的大小范围从0到255,或者从0%到100%之间.第四个值alpha,规定了色彩的透明度,它的范围为0到1之间.其中0代表完全透明,1代表完全可见.红绿蓝是色彩中的三元色,通过设置这三种颜色所占的比重,可以变幻出其他所有颜色.比如某个标签的文字想设置为红色,就可以通过css设置rgba值(代码如下).span {

前言树型数据结构广泛存在于现实世界中,比如家族族谱、企业职能架构等,它是一类在计算机领域被广泛应用的非线性数据结构.二叉树是树型数据中最常用的一类,本文从前端角度以js语法构建和操作二叉树的相关知识.基础概念观察上图,二叉树的数据结构如图所示.树中每一个圆圈代表一个节点,其中根部的节点A称为根节点B和C是A的子节点.子节点的个数称为度,A节点的度为2,D节点的度数为1.度为0的节点称之为叶子节点,比如图中的 H、E、F、G 都属于叶子节点节点的深度: 从根节点到当前节点的唯一路径上的节点总

前言链表是一种物理存储结构上非连续的数据结构,数据的逻辑顺序是通过链表中的指针链接次序实现相互勾连.链表相对数组而言有很多不同之处,在特定场景下能发挥独特的优势.例如链表的插入和删除操作比数组效率高,数组需要改变其他元素的位置,而链表只需要改变指针的指向.javascript中没有直接生成链表的api,但仍然可以利用语言本身的特性实现一条链表并完成其他操作.链表的实现链表的数据结构如下图,每一个节点都包含一条数据和指向下一个节点的索引.如果获取了链表中的某一个节点,比如第一个节点,那么就可以获

前言vuex作为跨组件通信的利器,在开发复杂应用过程中必不可少.但vuex在组件中渲染状态和调用action和mutation的语法过于繁琐,严重影响开发效率.本文借助vue3提出的hook思想对vuex进行封装,使其使用起来更加快捷高效.从而使前端同学能更加关注业务本身,而少写样板代码(源代码贴在了文尾).vuex的基础使用配置vuex 4相当于3版本没有多大的区别,4版本增加了ts的支持和Composition Api.配置之初,在项目根目录下执行命令安装vuex.yarn add vue

前言前端工程师开发常规项目时,很少会涉及排序算法的编写.即使碰到了需要进行排序的需求,使用js提供的array.sort()也能轻松搞定,很少需要编写底层的排序代码.但有些业务场景应用了特殊的数据结构,比如需要实现链表的排序,堆的排序,此时就使用到了排序算法的思想.另外前端面试中算法相关题目偶尔出现在笔试里,要求面试者能够手写.本文依次整理了冒泡排序、快速排序、插入排序、选择排序、奇偶排序以及二分查找法,这些算法的实现难度都不大,花些时间即能理解.冒泡排序冒泡排序会重复地遍历要排序的数列,依次比较

前言脚手架已经成为了前端日常工作中必不可少的开发利器,通过它不仅能够减少机械的重复工作,而且还能有效的组织和管理企业的项目模板.企业内部涵盖的前端项目类型不一,比如针对不同平台有pc端、h5、小程序等.不同框架有react和vue技术栈.业务类型又可以将项目区分为后台管理系统、门户网站以及数据大屏等.这么多不同类型的项目,它们采用的技术栈组合也会随着相应的场景搭配.后台管理系统通常会采用vue+Element UI + vuex + ts 搭建项目.手机端项目除了基础的设置,它还需要额外配置不同屏幕下

前言随着企业内部开发的项目逐渐增多,组件的维护工作变得愈益困难.前端同学通常会面临的困境之一.开发完了A项目,在A项目下封装了大量的公共组件.当B项目启动时,由于设计风格相似,以至于A项目的很多组件可以直接复制到B项目下使用.A和B项目开发完毕,后续的C和D项目又启动.每当有新项目启动时,手工复制就要重复一遍,这样的工作不仅乏味而且低效.如果仅仅只是在新项目启动时,将旧项目的组件代码复制一遍还能勉强接受.倘若有一天,产品经理要求D项目下的某个公共组件做一下样式的调整,并且A、B和C项目下的对应的公

前言前面两个小节已经系统介绍了webpack中两个核心概念:plugin和loader.今天将plugin和loader串联起来,从0手写一个基于插件体系搭建的程序架构,完成一个mini模仿版的webpack.目标需求:实现js的模块打包搭建plugin体系,允许接入开发者自定义plugin搭建loader体系,允许接入开发者自定义loadermini-webpack有了plugin和loader的赋能,开发者就可以自己编写插件直接对打包的中间过程进行干预.除了实现最基本的js编译,我们还

基本概念plugin(插件)是webpack的支柱功能,webpack整体的程序架构也是基于插件系统之上搭建的,plugin的目的在于解决loader无法实现的其他功能.plugin使用方式如下面代码.通常我们需要集成某款plugin时,会先通过npm安装到本地,然后在配置文件(webpack.config.js)的头部引入,在plugins那一栏使用new关键字生成插件的实例注入到webpack.webpack注入了plugin之后,那么在webpack后续构建的某个时间节点就会触发plugin定义

基础概念webpack是一款强大的模块打包工具,它可以引入配置文件完成前端高度定制化的构建工作.webpack默认只能理解JavaScript和JSON文件,但实际工作中各种需求层出不穷,文件类型也多种多样.比如.vue、.ts、图片、.css等,这就需要loader增强webpack处理文件的能力.在webpack的配置文件中,我们经常会看到如下设置.module.exports = { ... module: { rules: [ { t

前言移动端网页的日常开发中,偶尔会包含一些渲染长列表的场景.比如某旅游网站需要完全展示出全国的城市列表,再有将所有通讯录的姓名按照A,B,C...首字母依次排序展示.长列表的数量一般在几百条范围内不会出现意外的效果,浏览器本身足以支撑.可一旦数量级达到上千,页面渲染过程会出现明显的卡顿.数量突破上万甚至十几万时,网页可能直接崩溃了.为了解决长列表造成的渲染压力,业界出现了相应的应对技术,即长列表的虚拟滚动.虚拟滚动的本质,不管页面如何滑动,HTML 文档只渲染当前屏幕视口展现出来的少量Dom元素.

前言随着跨端技术的发展,前端开发职能不再局限于浏览器,而是具备了很多客户端开发的能力,比如桌面应用框架Electorn,移动App框架React native.一般而言,前端同学对http协议非常熟悉,在平时的工作中使用http与后端通信居多.但在原生客户端领域,比如Java语言开发的安卓应用,与后端通信的方式大多采用socket.众所周知,http连接是一种短连接,即客户端向服务器端发送一次请求,服务器端响应后连接即会断掉.而socket连接是一种长连接,理论上客户端和服务器端一旦建立起连接将不会主

前言Electron是一款使用 JavaScript, HTML 和 CSS 等 Web 技术创建原生程序的框架,它内部集成了Chromium 和 Node.js.前端工程师通过Electron相关技术,可以开发基于Windows、Linux以及Mac系统的客户端应用,这些能力拓展了前端所能触摸的边界,释放了更大的想象空间.如果客户端应用仅仅局限于页面内容的展现和操作,通过web相关技术就可以实现.但由于Electron集成了Node.js,这便使开发的应用具备调用操作系统级别服务的能力.Elect

前言本文撰写的初衷是为了向组内成员推行使用svg sprites的方式管理项目的图标,由于实际工作中很多项目仍然采用font class的方式,这样不自觉带来一个痛点.当项目一期开发完毕后,过段时间进入到项目二期。新增的开发需求不可避免的会增加新的图标,而font class需要全量打包图标的字体文件.哪怕新需求只添加了一个图标,而前端同学却要将旧图标和新图标融合后重新打包生成一次字体文件,这样的结果让人无法接受.svg sprites能完美的解决这一问题.整体思路是先将项目中每一个图标都生成一个s

前言近期工作上收到开发需求,公司欲大肆出售运行在特殊场景下的服务器硬件(基于Linux操作系统),前端工程师需要配合开发Linux系统下的图形化应用程序一起交付.最终需要的应用程序通过调用硬件工程师编写的shell脚本直接获取机器当前运算数据和相关参数,然后渲染界面提供给用户查看.整个过程由前端与硬件工程师对接,不需要后端参与.由于之前拥有使用Electron在windows下开发客户端软件的经验,这一次仍然选择Electron作为技术方案实现开发目标.Electron是一个使用 JavaScrip

前言vuex作为一款强有力的状态管理工具被广泛应用于实际工作当中,通过学习vuex的源码可以帮助我们解决藏于心中很久的困惑.比如vuex的全局状态存放到了哪个地方?为什么修改store里面的状态,页面也会同步更新?action、mutation它们是如何协作修改状态的?为什么action里面建议写异步操作,而mutation定义成同步?很多实际使用过vuex的同学相信心中会存在这些疑问.本文将摒弃从头到尾直述源码的方式,从提出问题再结合场景去研究源码的实现过程,从而将上述疑问一一解答.核心原理首先

next实现原理全局前置守卫router.beforeEach在上面已经介绍过,我们这次主要想要研究一下函数里面的next是如何实现的(代码如下).next()函数如果什么都不传表示放行直接进入下一个导航钩子.如果next里面填入的是一个对象,对象里面只包含path属性时,导航会push到该路径.对象要是除了path外,还有存在replace:true,那么导航会重定向到path路径.最后next(false)传递的是一个false或者Error实例,那么导航就会终止本次跳转操作,接下来

前言在正式进入vue-router之前,我们先从框架的思维跳出来,仔细思考一下前端路由的实现原理,观察如下案例.<body> <a onclick="jump('/a')">A</a> <a onclick="jump('/b')">B</a> <a onclick="jump('/c')">C</a> <div id="app"> </div

前言前端权限架构的设计一直都是备受关注的技术点.通过给项目引入了权限控制方案,可以满足我们灵活的调整用户访问相关页面的许可.比如哪些页面向游客开放,哪些页面必须要登录后才能访问,哪些页面只能被某些角色访问(比如超级管理员).有些页面即使用户登录了但受到角色的限制,他也只被允许看到页面的部分内容.出于实际工作的需要,很多项目(尤其类后台管理系统)需要引入权限控制.倘若权限整体的架构设计的不好或者没有设计,会导致项目中各种权限代码混入业务代码造成结构混乱,其次想给新模块引入权限控制或者功能扩展都十分棘手.

前言近期开发的移动端项目直接上了vue3,新特性composition api确实带来了全新的开发体验.开发者在使用这些特性时可以将高耦合的状态和方法放在一起统一管理,并能视具体情况将高度复用的逻辑代码单独封装起来,这对提升整体代码架构的健壮性很有帮助.如今新启动的每个移动端项目基本上都包含注册登录模块,本次实践过程中针对登录注册中的表单控件做了一些经验上的总结,通过抽离提取共性代码来提升代码的可维护性和开发效率.接下来观察一下美工同学提供的图片.注册页面在这里插入图片描述登录页

前言在一次无意间逛某个网站时,被其首页的轮播效果深深地吸引了.通过浏览器的一顿调试,终于明白了实现原理,并最后自己手写了一份Demo,最终效果如下:(源码在最后)平面效果:3D效果:这款轮播图它将图片切成了几份,然后依次将切块用动画效果播放出来,最后拼接成了一张新图片.在回忆前端技术栈的过程中,似乎是没有一种技术是可以直接对图片进行裁剪并分成几块的.我们平时应用的图片裁剪效果也只是使用canvas来模拟生成.通过本人的调试,结果发现这款轮播图采用的是一种比canvas更简单的方式就达到了相同

前言目前现代化的前端框架都采用了MVVM架构,开发者只需要定义一些页面上的状态数据以及执行相关修改就可以达到渲染页面的目的,这样的壮举彻底解放了前端工程师的双手,不再像之前那样花费大量的时间陷入了dom操作的泥潭.模板编译在实现MVVM的环节中发挥着重要的作用,只有通过了模板编译才能将数据状态和html字符串结合起来返回给浏览器渲染.本文将模板编译单独抽出来讲解其核心代码,可以窥探到底层到底采用了什么方式去实现的.需求如下: const data = { num: 1, pri

前言AngularJS虽然已经慢慢退出了淡出了历史舞台,但它作为第一代MVVM框架,为后来其他框架的诞生和发展提供了很多功能设计的参考.比如响应式状态,依赖注入以及模块化开发.AngularJS源码非常难以阅读,并非是因为它的代码写的不好,而是内部功能大量使用了函数式编程进行层层抽象和封装,导致大部分功能嵌套的函数层级过深,往往需要埋头调试跟踪一大轮才能真正窥探到底层的做法.本文将抽离出框架的核心逻辑进行讲解,顺着自上而下的流程从整体上把握框架是如何设计和实现的.从AngularJS的实现流程里我们也

前言本篇文章将从一个实战案例的角度逐步解析vue服务器端渲染的具体实现方式,整个过程不使用第三方服务器端渲染框架,以讲解底层实现原理为主.服务器端渲染(ssr)主要解决了以下两个问题.提升了首页的加载速度,这对于单页应用而言有明显的优势.服务端渲染优化了seo.使用服务器端渲染的页面更容易被搜索引擎捕获从而提升网站排名,这一点非常重要.在一些To c的项目中,如果用户在搜索引擎里面输入关键字后,发现网站搜都搜不出来,那就更谈不上盈利了.只要是跟经济效益挂钩的技术,对于每一个技术人而言都应该重点关注

前言前端模块化已经成为了当下主流的开发模式.模块化能将不同页面的逻辑分别写在对应的文件中管理,其次还能将一些公共的函数或插件单独封装成模块.页面要调用相关功能只需在代码中引用一遍就可以使用.通过模块化可以使大型复杂的项目拆分成不同的模块管理,有助于后期维护和拓展.本文将手写一遍模块加载器的核心代码,整个过程要实现以下功能.设计模块加载器的整体架构父模块如何一步步加载子模块和后代子模块加载完毕了如何通知父模块调用方式先从用户的角度设计好模块加载器的调用方式,再从结果反推实现过程.假设当前页面

前言Tree组件在实际应用中非常广泛,例如省市县地域的展现.一般一些包含从属关系的数据都可以使用Tree组件来进行展示,下面通过一个实战的demo来深入学一下实现一个Tree组件所要了解的原理和实现细节.本文实现的功能包含以下三点.实现一个基础版可以显示嵌套数据的Tree组件点击Tree组件的某一级标签它的下一级数据支持异步加载Tree组件的节点支持拖拽最终Demo的效果图如下.基础版的Tree实现一个基础版的Tree组件十分简单,原理就是掌握组件嵌套的使用方法.外部调用首先设置外部

引言页面引用弹出框组件是经常碰见的需求,如果强行将弹出框组件放入到页面中,虽然功能上奏效但没有实现组件与页面间的解耦,非常不利于后期的维护和功能的扩展.下面举个例子来说明一下这种做法的弊端.<template> <div> <button @click="openModal()">点击</button> <Modal :is_open="is_open" @close="close()"/> </div>&

前言ESLint是一款代码开发工具,能够协调和统一团队的编码风格.刚开始接触ESLint的开发者,使用时会感觉处处受挫.ESLint的本质就是提供规范,制定条条框框去限制开发者的编码.比如ESLint里定义的这样的规则,代码缩进只能用2个空格,如果你用4个空格就会报错.作为开发者而言,不能随心所欲的写代码固然会很不舒服,但一旦过了适应期,以后书写出来的代码将会变的更加的美观和便于阅读.多人协作的团队里,共同完成一个大型的项目,ESLint是必不可少的开发工具.本文接下来将从三个方向去解读ESLint.

前言本文通过js构建一款简单版的模板引擎来了解其核心原理.1.渲染数据 const data = { country: 'China', }; const template = compile(` <div> <?= country?> </div> `); console.log(template(data)); <div>China</div&gt

节流函数节流函数用于控制函数执行的频率.比如用户设置时间间隔为1秒,那么在1s的时间内函数只执行一次.如果上面的表述还不清楚,通过下面的案例来深入理解.不加节流函数 window.onscroll = function (value) { console.log('移动了鼠标'); };从上面可以看出,不加节流函数时,滑动鼠标触发事件的次数是惊人的.如果被执行的函数里面包含了复杂的计算逻辑,在这么高的调用频率下,会造成严重的页面卡顿.增加节流函数 window.

前言实际开发中,模态框展现数据会经常出现.但不幸的是有时功能开发完了,UI同学突然提出需求希望模态框能拖拽.如何在不修改原来代码的基础上实现拖拽呢.最终效果图如下:实践1.创建高阶组件DragHoc新建文件ModalDrag/index.js,将下面代码copy进去DragObj是具体拖拽的原生js代码,后面再看DragHoc是创建高阶组件的函数,其中参数InnerComponent是需要被改造的模态框组件,函数最终的返回值是增强后的组件render方法中直接返回了 <InnerC

前言underscore是一个JavaScript工具库,提供了一整套函数式编程的实用功能.其内部包含了很多工具函数比如each,map,reduce,filter等等.虽然es5,es6已经包含其中大部分,但查看源码了解这些函数底层的实现有助于加深对原生js的理解.underscore内部定义的都是纯函数,并支持单向数据源的链式调用.在众多函数组成的链条中,可以神奇的发现数据就像经过管道一样从一个函数流向另一个函数. const result = _([1, 2, 3, 4, 5, 6, 7]

效果图 在我的上一篇文章已经介绍过如何实现图片压缩,本篇文章主要讲解在此基础上单独实现的图片裁剪功能.点击选择文件上传一张图片,点击裁切时会出现裁剪框,移动或拉伸裁剪框会在下方生成裁剪后的图片.点击下拉框选择裁剪图的压缩比例.最终点击生成就可以将裁剪压缩后的图片下载到本地.githup完整代码地址HTML结构 对应页面图 ...

前言图片压缩在许多交互场景下具有广泛的应用,html5标准还没有普及之前图片压缩主要通过服务器端编程实现,而随着浏览器的快速发展对许多先进属性的支持致使前端技术也可以实现相同的功能.本篇文章以实战角度去深入研究前端技术是如何压缩图片并生成出来.案例效果图如下,通过选择文件按钮打开本地的某张图片,并在页面上预览出来.随后选择压缩率,下方会展现压缩后的图片效果,最终点击生成下载被压缩的图片.Demo地址功能实现html结构 ...

前言先看下面三类案例: 第一张图函数fun定义在后面,应该把var定义的覆盖,可...

前言onmouseover和onmouseout事件是在pc端上使用非常广泛的鼠标划入划出事件.顾名思义,onmouseover是进入到dom元素中触发的事件,而onmouseout是移除dom元素触发的事件. 说明我们对最外面的红色框分别绑定onmouseover和onmouseout事件,鼠标进入dom元素时打印"进入",离开dom元素时打印"离开" 鼠标进入红色框的子元素灰色框时会先触发红色框绑定的onmouseout事件,再触发红色框绑定的onmouseover...

前言dva 是一款轻量级的应用框架,是阿里旗下的开源产品.dva是基于redux和redux-saga的数据流方案,然后为了简化开发体验，dva 还额外内置了react-router和fetch.写过原生redux代码的同学应该体会的到,redux里面充斥着大量的样板代码,对开发者而言使用体验十分的不友好.而dva将这些繁杂的工作封装到了底层去实现,开发者只需要调用它提供的几个简单Api就能实现完全相同的功能,从而大大的提升了开发效率.本篇博文将从实战的角度将dva和目前流行的reac...

前言目前vue3还处于beta版本,离正式版的发布还有一段时间.在此之前我们可以对vue3新特性CompositionAPI做一个demo练习,加深对其具体应用的场景的理解.相关文档API完整项目地址Demo需求 上图为Demo最终展现结果.Demo总共有三张页面:首页,商品详情页和登录页.首页有"猜你喜欢"和"今日推荐"两个数据列表.点击列表标题会随机触发列表项的颤动.点...

stroke-dasharraystroke-dasharray是做什么用的呢?先看下面代码<svg> <rect x="20" y="20" width="100" height="100" fill="none" stroke-width="1" stroke="red"> </rect></svg>结果: ...