- 博客(185)
- 收藏
- 关注
RSS订阅
原创 前端：Vue2 basic
本文摘要： 文章对比了四种Web开发模式：服务端渲染、前后端分离、单页应用和Vue框架应用，通过序列图展示了它们的数据交互流程差异。重点介绍了Vue框架的核心概念，包括数据注入、虚拟DOM机制和组件挂载流程。详细讲解了Vue组件的开发方式，包括创建组件配置对象、全局/局部注册方法，以及组件命名规范和属性传递机制。最后阐述了组件树的形成过程，展示了组件化开发的整体架构。全文系统性地介绍了Vue的核心工作原理和组件化开发实践。
2026-01-06 15:11:53
994
原创 前端：工程化
本文介绍了前端模块化的必要性及两种主要标准：CommonJS和ES Module。模块化解决了全局变量污染和依赖混乱问题，便于代码拆分和维护。CommonJS是社区规范，仅支持Node环境，通过module.exports导出、require导入。ES Module是官方标准，支持Node和浏览器，提供具名导出和默认导出两种方式，使用import导入。文章还涵盖了npm包管理器的基本使用，包括初始化、安装、卸载、查看包信息等操作，并解释了包、包管理器、CLI等概念。
2025-12-22 17:06:21
774
原创 前端：网络
前端开发中，网络通信是重要基础。文章系统讲解了网络核心概念：客户端（Client）发起请求（Request），服务器（Server）返回响应（Response），构成C/S结构（浏览器作为客户端时为B/S结构）。URL地址包含协议、主机、端口、路径、参数等部分，用于定位网络资源。HTTP协议规定了请求-响应的消息格式：请求行（含GET/POST等方法）、请求头和请求体。GET请求常用于获取资源，POST用于提交数据。理解这些概念对阅读接口文档和编写网络相关代码至关重要。
2025-12-12 15:51:44
653
原创 前端upgrade：html、css、js提升
本文介绍了CSS中的布局与视觉样式技术。布局部分重点讲解了弹性盒（Flexbox）和网格（Grid）两种现代布局方式，包括弹性容器与项目的生成、主轴/侧轴排列、项目伸缩、网格行列定义等核心概念。视觉样式部分涵盖了阴影效果（盒子阴影和文字阴影）、圆角设置、背景渐变以及变形（平移、缩放、旋转）等视觉增强技术。文章提供了MDN文档链接和相关学习资源，帮助开发者掌握这些CSS特性的使用方法与适用场景。
2025-12-10 14:29:58
305
原创 前端basic：js篇
本文总结了JavaScript环境准备和核心知识要点。环境部分介绍了Node.js安装、运行JS代码的方法及VS Code插件使用。知识要点包括：1. 数据表达的三种方式（变量、字面量、表达式）及标识符命名规则；2. 对象和数组的数据结构及属性访问方法；3. 各类运算符的使用技巧和隐式类型转换；4. 函数的作用、三要素（函数名、参数、返回值）及流程切割思想；5. 作用域规则和闭包概念；6. 全局对象特性及全局污染问题。全文重点突出了实际开发中的最佳实践和简化代码的技巧。
2025-12-10 14:28:21
191
原创 前端basic：html、css篇
本文介绍了CSS中的几个重要知识点：1) 使用border-box控制元素尺寸；2) rgba颜色透明度的设置方法；3) 百分比尺寸的相对计算规则；4) 最大最小宽高的应用场景。还讲解了绝对定位的使用条件、fixed与absolute的区别、常用伪类选择器，以及contenteditable属性和table元素的简要说明。这些内容涵盖了CSS布局、颜色、尺寸控制等核心概念，为前端开发提供了实用的技术参考。
2025-12-10 14:27:24
328
原创 前端basic：笔记篇
本文摘要：文章分为两部分内容。第一部分比较了前端包管理工具npm、yarn和pnpm的优缺点：npm存在依赖重复和幽灵依赖问题；yarn通过并行下载和锁定文件优化性能；pnpm采用内容寻址存储和符号链接技术，在节省空间、安装速度和依赖可靠性方面表现突出。第二部分系统梳理了JavaScript中的常用简写语法和数据类型，包括逻辑运算符、可选链、类型转换等快捷写法，以及8种数据类型（6种原始类型和2种对象类型）。最后简要提及CSS浮动清除方法和属性值计算过程的4个步骤。全文涵盖前端开发中的关键工具和技术要点。
2025-09-18 18:16:37
670
原创 《人是一根能思想的苇草》
能思想的苇草——我应该追求自己的尊严，绝不是求之于空间，而是求之于自己的思想的规定。人的伟大——人的伟大是那样地显而易见，甚至于从他的可悲里也可以得出这一点来。由此我们便可以认识到，人的天性现在既然有似于动物的天性，那末他就是从一种为他自己一度所固有的更美好的天性里面堕落下来的。我要让他恨自身中的欲念，——欲念本身就限定了他，——以便欲念不至于使他盲目做出自己的选择，并且在他做出选择之后不至于妨碍他。人的伟大——我们对于人的灵魂具有一种如此伟大的观念，以致我们不能忍受它受人蔑视，或不受别的灵魂尊敬；
2025-09-30 09:44:25
96
原创 搞懂函数式编程
高阶函数是函数式编程中最为常用的技巧,高阶函数还演化出其他概念,例如React中的高阶组件,即接收一个组件作为参数或返回一个组件作为返回值的组件。例如要遍历一个数组,命令式编程的操作是通过for或while循环对数组遍历,在函数式编程中对数组的遍历可以抽象成一个forEach函数,数组可以通过该函数对数组的每个元素进行遍历,除此之外,forEach还可以抽象成map、set结构的遍历操作,相比较命令式编程,函数式编程更加简洁。通过组合一些小的高阶函数可以创建有意义的表达式,能简化很多繁琐的程序。
2024-12-23 17:06:46
1019
原创 主要看看 Session 与 Token
通俗地讲就是验证当前用户的身份，证明“你是你自己”（比如：你每天上下班打卡，都需要通过指纹打卡，当你的指纹和系统里录入的指纹相匹配时，就打卡成功）互联网中的认证：用户名密码登录邮箱发送登录链接手机号接收验证码只要你能收到邮箱/验证码，就默认你是账号的主人用户授予第三方应用访问该用户某些资源的权限你在安装手机应用的时候，APP 会询问是否允许授予权限（访问相册、地理位置等权限）你在访问微信小程序时，当登录时，小程序会询问是否允许授予权限（获取昵称、头像、地区、性别等个人信息）cookie。
2024-11-14 10:27:19
1008
转载 前端微服务qiankun的使用
本文从开始搭建到部署非常完整地分享了整个架构搭建的一些思路和实践，希望能对大家有所帮助。要提醒一下的是，本示例可能不一定最佳的实践，仅作为一个思路参考，架构是会随着业务需求不断调整变化的，只有合适的才是最好的。示例代码：。
2024-04-11 17:58:32
1839
原创 single-spa 到底是个什么
以上就是 singles-spa 文档里的所有内容了（除了 SSR 和 Dev Tools，前者用的不多，后者自己看一下就会了，不多废话）。single-spa 文档就这些了嘛？没错，就这些了。文档好像给了很多“最佳实践”，但真正将所有“最佳实践”结合起来并落地的又没多少。比如文档说用 Shadow CSS 来做子应用之间的样式隔离，但是 single-spa-leaked-globals 又不让别人在一个 url 上挂载多个子应用。感觉很不靠谱：这里行了，那里又不行了。
2023-10-16 14:07:59
1384
原创 React hooks的使用详解
这很合理，由于副效应不依赖任何变量，所以那些变量无论怎么变，副效应函数的执行结果都不会改变，所以运行一次就够了。实际使用中，由于副效应函数默认是每次渲染都会执行，所以清理函数不仅会在组件卸载时执行一次，每次副效应函数重新执行之前，也会执行一次，用来清理上一次渲染的副效应。上面的例子是错误的写法，副效应函数里面有两个定时器，它们之间并没有关系，其实是两个不相关的副效应，不应该写在一起。每次渲染都执行，这时可以使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。
2023-07-26 10:55:17
953
转载 什么是前台、中台、和后台？
在传统的前台-后台架构中，各个项目相互独立，许多项目都在重复发明同样的功能，让项目本身变繁琐，也让开发效率变低。面向内部运营人员的管理系统、配置系统，如：电商配置后台的商品管理、订单管理、会员管理、财务管理等。也包括服务端各种实时响应用户请求的业务逻辑，如：商品查询、订单系统等。整合某种通用能力提供给前台，包括业务中台、技术中台、数据中台、算法中台。算法平台：为各个项目提供算法，如推荐算法、搜索算法等。如：支付、商品管理、营销、用户、搜索、交易中心等。如：用户画像、数据可视化、日志分析等。
2023-02-27 09:40:09
6028
原创 angular 随笔而记
如果没有 ngForm 这个属性值，itemForm 引用的值将是 HTMLFormElement 也就是 元素。而 Component 和 Directive 之间的差异在于 Angular 在没有指定属性值的情况下，Angular 会引用 Component，而 Directive 不会改变这种隐式引用（即它的宿主元素）。而使用了 NgForm 之后，itemForm 就是对 NgForm 指令的引用，可以用它来跟踪表单中每一个控件的值和有效性。
2023-02-25 10:17:26
488
原创 当我真正开始爱自己
当我真正开始爱自己， 我才认识到，所有的痛苦和情感的折磨， 都只是提醒我：活着，不要违背自己的本心。 今天我明白了，这叫做“真实”。 当我真正开始爱自己， 我才懂得，把自己的愿望强加于人， 是多么的无礼，就算我知道，时机并不成熟， 那人也还没有做好准备， 就算那个人就是我自己。 今天我明白了，这叫做“尊重”。 当我开始爱自己， 我不再渴求不同的人生， 我知道任何发生在我身边的事情， 都是对我成长的邀请。 如今...
2022-05-26 16:52:51
427
转载 第一性原理
马斯克通过"第一性原理思维"实现颠覆式创新：从物理定律推演解决商业问题，而非依赖经验归纳。这种思维与"追本溯源"不同，它从已知原理出发推导新方案，而非从问题倒推原因，因而能发现创新路径。培养这种思维需跨学科学习各类模型定律，突破传统思维局限，这正是马斯克涉足多个前沿领域的关键所在。
2022-04-08 09:53:18
5420
转载 理解CSS3 transform中的Matrix(矩阵)
转载自：理解CSS3 transform中的Matrix(矩阵) « 张鑫旭-鑫空间-鑫生活
2022-03-15 14:58:35
147
原创 CSS动画 animation与transition
一、区分容易混淆的几个属性和值 先区分一下css中的几个属性：animation（动画）、transition（过渡）、transform（变形）、translate（移动）。 CSS3中的transform(变形)属性用于内联元素和块级元素，可以旋转、扭曲、缩放、移动元素，它的属性值有以下五个：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix； transform(变形)是CSS3中的元素的属性，而translate只是transfo
2022-02-11 17:04:15
5690
原创 js blob base64 file 的相互转换
file和base64file文件转换为base64，得到base64格式图片var reader = new FileReader();reader.readAsDataURL(this.files[0]);reader.onload = function(){ console.log(reader.result); //获取到base64格式图片};12345base64转换为filefunction dataURLtoFile(dataurl, filename)...
2022-01-19 16:24:07
644
原创 JS共享传参
目录导航一、概念 按值传递 VS. 按引用传递 按共享传递 call by sharing 二、实例解析 探究JS值的传递方式 按共享传递 call by sharing 基本类型的不可变(immutable)性质 一、概念 我们需了解什么是按值传递(call by value)，什么是按引用传递(call by reference)。在计算机科学里，这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传..
2021-12-06 17:07:00
439
原创 看懂复杂的 TypeScript 泛型运算
对于从 JavaScript 转来的 TypeScript 的初学者来说，一开始无脑用一个新的 interface规定一切的方式确实很过瘾。但是，当不得不尝试提高函数或组件的通用性时，使用泛型成了必须的选择。当尝试阅读一些用 TypeScript 开发的库的源码时，可能会被各种尖括号包裹的复杂泛型运算搞的晕头转向。本文的目的在于对泛型中的常见关键词和用法进行介绍，并且尝试用一定数量的例子来方便理解泛型。在 TypeScript中， type和 interface关键字中在多数情况下功能是相同的，..
2021-11-17 15:43:12
815
转载 typescript各类符号
!非空断言操作符在上下文中当类型检查器无法断定类型时，一个新的后缀表达式操作符 ! 可以用于断言操作对象是非 null 和非 undefined 类型。具体而言，x! 将从 x 值域中排除 null 和 undefined 。typescriptfunction myFunc(maybeString: string | undefined | null) { const onlyString: string = maybeString; // Error const ignoreUn.
2021-11-01 11:35:40
653
转载 await不能用在forEach中？
不知道你是否写过类似的代码: functiontest(){ letarr=[3,2,1] arr.forEach(asyncitem=>{ constres=awaitfetch(item) console.log(res) }) console.log('end') } ...
2021-10-27 15:44:10
2957
2
原创 mac mysql navcat
mac上搭建mysql环境配置和Navicat连接mysqlmac上搭建mysql环境配置1、下载mysql for mac:MySQL :: Download MySQL Community Server (Archived Versions)注意：mysql版本要和你的MAC版本保持一致2、一路傻瓜式点击下一步此处选择“Use Legacy Password Encryption”，否则使用navicat连接mysql的时候，会报无法加载身份验证的错误。3、环境配置.
2021-10-26 09:57:05
231
原创 chrome调试
1.Elements 1.选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件 2.在 Element 选项卡中可以修改html 2.断点在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断点, 在循环中需要断点时比较有用 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信.
2021-10-20 14:52:35
563
转载 ThreeJS中的点击与交互——Raycaster的用法
基础概念坐标系我们的手机屏幕是二维的，但是我们展示物体的世界是三维的，当我们在构建一个物体的时候我们是以一个三维世界既是世界坐标来构建，而转化为屏幕坐标展示在我们眼前，则需要经历多道矩阵变化，中间webGL替我们操作了许多事情。世界坐标系：在webGL中，世界坐标系是以屏幕中心为原点(0, 0, 0)，且是始终不变的。你面对屏幕，你的右边是x正轴，上面是y正轴，屏幕指向你的为z正轴。长度单位这样来定：窗口范围按此单位恰好是(-1,-1,-1)到(1,1,1)。 屏幕坐标系：web...
2021-09-02 14:15:08
1887
原创 前端设计模式
最近对各种设计模式挺感兴趣，无论是架构设计还是代码优化都有可能用到，所以，每天掌握一个锻炼一下编码思维。废话不多说，直入正题。对前端编程来说，尤其是vue的使用者们，观察者模式是最常用而且最挂在耳边的，所以，不妨从这个开始搞起。下面的话这段带色的话，可以忽略，不影响后续阅读，仅做了解用：设计模式总体来说设计模式分为三大类：创建型模式，共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式，共七种：适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行
2021-07-16 16:13:32
344
原创 JS基础-一个完美的递归函数
一、什么是递归函数 二、完美的递归方法三、总结一、什么是递归函数 递归函数是在一个函数内通过名字调用自身的情况。二、完美的递归方法 写法一：/**方法说明：递归阶乘函数*/function test(num){ if(num <=1){ //递归停止的条件，必须得需要 return 1; } else{ //调用递归 retu...
2021-07-16 14:57:01
204
转载 JavaScript 内存泄漏
一、什么是内存泄漏？程序的运行需要内存。只要程序提出要求，操作系统或者运行时（runtime）就必须供给内存。对于持续运行的服务进程（daemon），必须及时释放不再用到的内存。否则，内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。有些语言（比如 C 语言）必须手动释放内存，程序员负责内存管理。char * buffer;buffer = (char*) malloc(42);// Do s..
2021-07-16 14:53:31
139
转载 浅析 Tree Shaking
当 Javascript 项目达到一定体积时，将代码分成模块会更易于管理。但是，当这样做时，我们最终可能会导入实际上未使用的代码。Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。我们来举个例子，下面是一个简单的 Javascript 文件，命名为mathUtils.js，主要实现了基础的数学运算。export function add(a, b) { console.log("add"); return a + b;}export fun...
2021-07-13 11:08:19
174
转载 webpack的out.libraryTarget属性
https://blog.csdn.net/frank_yll/article/details/78992778
2021-07-08 14:26:17
150
原创 canvas rotate中心点问题
ctx = document.getElementByIdx_x_x_x('canvas').getContext('2d');ctx.fillStyle = "rgb(250,0,0)";ctx.save();ctx.translate(50,50);//这个translate(50，50)发生在rotate()之前,其目的是将旋转点从默认点(0，0),移动到(50，50),下面紧跟着的rotate就是按照这个点来转//rotate方法的旋转点完全是按照...
2021-06-24 17:54:30
1396
转载 前端之Vue项目如何做单元测试
关于单元测试，最常见的问题应该就是“前端单元测试有必要吗？”，通过这篇文章，你将会了解单元测试的必要性，以及在Vue项目中如何能够全面可靠的测试我们写的组件。单元测试的必要性一般在我们的印象里，单元测试都是测试工程师的工作，前端负责代码就行了；百度搜索Vue单元测试，联想词出来的都是“单元测试有必要吗？”“单元测试是做什么的？”虽然我们平时项目中一般都会有测试工程师来对我们的页面进行测试“兜底”，但是根据我的观察，一般测试工程师并不会覆盖所有的业务逻辑，而且有一些深层次的代码逻辑测试工程师在不了解.
2021-06-23 17:02:02
2752
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人