- 博客(36)
- 收藏
- 关注
RSS订阅原创 【前端进阶】15 提升开发效率 数据抽象与配置化
当我们将模块和组件的状态和内容抽象成数据后，就可以将这些数据独立出来进行管理，也可以更好地解决模块/组件间耦合、依赖、通信等问题。
2025-03-05 20:00:09
329
原创 【前端进阶】13 代码构建和webpack必备技能
为了提高代码的可读性、项目的可维护性，会将一些通用的工具和组件进行抽象，代码被有组织的按一定规则进行划分，比如按功能划分为页面、组件、工具库、脚本…这个过程被称为模块化。常说的模块化包括CommonJS/AMD/UMD/ES6 Moudle
2025-03-03 20:00:00
455
原创 【前端进阶】12 单页应用与前端路由库的设计原理
在单页应用出现之前，浏览器通过http请求向服务端请求页面内容的时候，服务端会根据页面不同的URL路由，拼接出相应的页面视图片段，最终以html的方式返回给浏览器，浏览器再进行解析和渲染，这种页面间没有关系，各自为完整页面的应用成为多页应用。例如JSP，PHP也都是通过拼接HTML模板的方式来实现的
2025-03-02 20:00:00
938
原创 【前端进阶】11 为什么小程序特立独行？
在小程序里，JavaScript代码运行在逻辑层中，页面渲染的逻辑运行在webview渲染层中，渲染层中有多个webview，这是因为小程序为了方便用户可以快速的前进、回退，存在着多个页面，而每个页面都是一个单独的webview线程，因此会有多个webview，在小程序启动之前，客户端会提前准备好webview，用于快速展示小程序首页，被使用和渲染时客户端也会提前准备好新的webview
2025-03-01 20:00:00
774
原创 【前端进阶】10 掌握前端框架模板引擎的实现原理
模板引擎会根据AST对象生成最终片段和逻辑，在这个过程中会通过添加特殊标识（例如元素id、属性标记等）的方式来标记DOM节点，配合DOM元素选择方式、事件监听方式等，在需要更新的时候，可以快速定位到该DOM节点，并进行节点内容更新，从未实现页面内容的更新
2025-02-28 20:00:00
279
原创 【前端进阶】08 深度剖析浏览器中页面的渲染过程
渲染器进程负责选项卡内部发生的所有事，核心工作是将html、css和JavaScript转换成可交互的页面，流程基本如下：解析-布局-绘制-栅格化
2025-02-26 20:00:00
640
原创 【前端进阶】07 http协议和前端开发有什么关系
通过http协议，设置浏览器对http响应资源进行缓存，使用浏览器缓存后，当我们再发起http请求时，如果浏览器缓存发现请求的资源已经被存储，它会拦截请求并返回该资源的副本，不需要再次请求服务端获取资源，因此减少了http请求的耗时，同时也有效的缓解了服务端压力。
2025-02-25 20:00:00
1323
原创 【前端进阶】06 一个网络请求是怎样进行的
在建立TCP连接之前，需要找到建立连接的服务器，DNS的解析过程可以让用户通过域名找到存放文件的服务器。
2025-02-24 20:00:00
364
原创 【前端进阶】05 单线程的JavaScript如何管理任务的
为了高效的进行页面间的交互和渲染处理，围绕着任务执行是否阻塞主线程，将JavaScript中的任务分为同步任务和异步任务。异步任务会提供回调函数，当异步任务有了运行结果之后，该任务则会被添加到回调队列中，主线程会在适当的时候从回调队列中取出相应的函数并执行。
2025-02-23 20:00:00
648
原创 【前端进阶】04 JavaScript引擎是如何执行JavaScript代码的
通过外部词法环境的引用，作用域可以层层拓展，建立起从里到外的一条作用域链，当某个变量无法从自身环境中找到时，可以根据外部词法环境向外找，直到最外层的词法环境中外部词法环境引用为null。
2025-02-22 20:00:00
608
原创 【前端进阶】03 JavaScript 如何实现继承？
一个对象可以通过__proto__访问原型对象的属性和方法，而该原型对象同样也可以使用__proto__访问它的原型对象，这样就在实例与原型之间构造了一条原型链。
2025-02-21 20:00:00
859
原创 【前端进阶】02 CSS页面布局的基本规则和方式
1.一个元素总宽高为50，要怎么在调整边框大小的时候，不需要重新计算和设置width/height呢？4.为什么将某个元素z-index设置为999999，但是它依然被其他元素遮挡住了呢？5.为什么将某个元素里的元素设置成floaf之后，这个元素的高度就歪了呢？float属性会使元素脱离文档流。
2025-02-20 20:00:00
693
原创 【前端进阶】01 重识HTML，掌握页面基本结构和加载过程
通常页面加载时间长或者响应慢，除了网络不稳定、网速过慢等原因，大多数是由于页面设计不合理导致的，很多时候体现在 script、style元素的设计上，它们会影响在加载页面过程中对avaScript和CSS代码的处理，因此，想要提升页面的加载速度，就需要了解浏览器页面的加载过程，从根本上解决问题。浏览器在渲染页面的时候需要解析HTML、CSS以得到DOM树和CSS规则树，它们结合后才能形成最终的渲染树渲染，因此，由于JavaScript在执行过程中可能会改变页面结构和样式，因此它们之间被设计为互斥的关系。
2025-02-19 21:00:00
864
原创 【Vue】富文本编辑器组件
在做项目的过程中，有时候会遇到一些复杂文本的编辑，这个时候就需要用到富文本编辑器来实现自己想要的效果。例如：文章的发布、文章详情的展示等。富文本编辑器的底层原理是什么呢？以下是个人的理解：说白了，富文本编辑器的内容最终还是要展示在浏览器上，那既然展示在浏览器上，那就还是html、css。
2023-11-20 20:00:00
730
原创 【前端】开发规范-Vue
现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。——引自《阿里规约》的开头片段。
2023-11-15 20:00:00
465
原创 ElementPlus分页等组件文字改成中文
在使用ElementPlus组件时，有时候在官网复制粘贴过来组件文字是英文的，我们可以根据组件的属性来设置中文文字，但是如果多处用到的话，每个组件都需要重新配置一遍就很麻烦，这个时候我们可以通过ElementPlus提供。// 由于element-plus版本不同，可能引用路径也不同，该路径版本 "element-plus": "^2.3.8"组件，在App.vue全局设置，可以使用默认的，也可以自定义文字。// 自定义文字（使用默认文字不用设置）
2023-07-24 16:21:08
3034
2
原创 响应式布局
Vue.js 是一个用于构建用户界面的渐进式框架，它可以轻松实现移动端和网页端的响应式设计。以上是实现移动端和网页端响应式的主流方式。根据你的具体需求和项目规模，选择适合的方式来实现响应式设计。一套代码能够兼容适配不同的屏幕设备，内容不变布局效果变了，这样的网页就是响应式网页。// 自定义屏幕宽度阈值。// 自定义屏幕宽度阈值。/* 移动端样式 *//* 网页端样式 */
2023-07-18 11:22:35
113
原创 前端通过JavaScript实现 搜索、分页、排序 等功能
前端通过JavaScript实现 搜索、分页、排序 等功能搜索 /** * 按名称搜索 * @param array 源数组 * @param value 搜索的值 * @returns {*|[]} */ queryList(array, value) { let list = [] list = array.filter(item => { return item.name.inclu
2021-04-02 15:48:00
793
原创 Vue基础及核心图解
一、什么是渐进式框架？Vue 是一套用于构建用户界面的 渐进式框架。什么是渐进式框架？ 简单理解就是：Vue不强求你一次性接受并使用它的全部功能特性。Vue 被设计为可以自底向上逐层应用，也就是说用你想用或者能用的功能特性，你不想用的部分功能可以先不用。举例来说场景一：如果你只是使用Vue做一些基础操作，如：页面渲染、数据的双向绑定、或者一些Vue的指令，只要按需引入即可，并不需要你去引入其他复杂特性功能。场景二：如果我们想实现代码组件化，实现代码的复用，或者是基于组件原型的跨项目的代码复
2021-03-28 17:27:03
3290
原创 Vue中ElementUI分页组件Pagination的使用
一、概要无论是前端分页和还是后端分页，最终都需要拿到两个参数：pageNum（当前页）、pageSize（每页多少条）。前端分页的实现：向后台发送请求，获取全部数据，前端通过pageNum、pageSize对数据进行处理，最终得到相应的分页数据后端分页的实现：向后台发送请求，传入pageNum、pageSize两参数，直接得到相应的分页数据二、实现ElementUI 提供了 el-pagination 组件，只要配置相应得参数和事件，即可实现分页。 <div class="pag
2021-03-28 13:48:35
18029
原创 前端通过Blob实现文件下载、导出功能
一、概要实现思路： 前端点击下载文件向后台发送请求–>后台以流的形式响应–>前端接到响应后通过Blob对象获取下载路径–>最终通过a标签实现下载。注意： 请求时一定要加上 responseType = ‘blob’ ，不然下载的文件会出现乱码。#mermaid-svg-roCnZcYDPWVS34Vl .label{font-family:'trebuchet ms', verdana, arial;font-family:var(--mermaid-font-family);f
2021-03-23 20:50:02
1510
1
原创 Vue中关于ElementUI上传组件Upload的整理
Vue中关于ElementUI上传组件Upload的整理一、概要二、功能梳理1、Attribute2、Methods3、Slot三、代码示例参考文档一、概要ElementUI为我们提供了上传组件Upload：（以下功能 ElementUI官网 均有演示）可以使用 drag 设置点击或者拖拽上传文件。可以通过 slot 自定义的上传按钮类型和文字提示。可以通过 limit 和 on-exceed 限制上传文件的个数和定义超出限制时的行为可以通过 before-remove 来阻止文件移
2021-03-21 23:08:09
1994
原创 Vue中关于父子组件之间的通信
Vue父子组件之间的传值一、概要二、实现1、通过 Prop 向子组件传递数据2、通过 $emit 向父组件发送信息三、props 配置参考地址一、概要在vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。二、实现1、通过 Prop 向子组件传递数据如何在组件上注册的一些自定义 attribute，Vue为我们提供了 props 数据选项。我们能够在组件实例中访问这个值，就像访问 data 中的值一样。父
2021-03-18 23:38:10
310
原创 基于JavaScript封装的一些常用方法
/** * 本算法来源于简书开源代码，详见：https://www.jianshu.com/p/fdbf293d0a85 * 全局唯一标识符（uuid，Globally Unique Identifier）,也称作 uuid(Universally Unique IDentifier) * 一般用于多个组件之间,给它一个唯一的标识符,或者v-for循环的时候,如果使用数组的index可能会导致更新列表出现问题 * 最可能的情况是左滑删除item或者对某条信息流"不喜欢"并去掉它的时
2021-03-16 21:54:50
155
原创 Vue中关于ElementUI表单验证整理
ElementUI表单验证整理摘要：使用方法：1.绑定2.触发、重置、移除3. 自定义校验规则参考地址：摘要：Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可，如下：rules为验证规则，field为表单字段名。<el-form :rules="rules"> <el-form-item prop="field"></el-form-item><
2021-03-16 14:44:59
456
原创 一些关于【前端】学习资源（网站、视频、文章）收藏的网址
技术栈Github：https://github.com/join/planB站：https://www.bilibili.com/w3school： https://www.w3school.com.cn/极客教程： https://www.w3cschool.cn/tutorial菜鸟教程： https://www.runoob.com/bootstrap中文网 https://www.bootcss.com/echarts：https://echarts.apache.org
2021-03-16 01:50:25
624
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人