zl_Alien的博客

一 前言说到源码，大家脑海里可能浮现出四个字 我太难了????????????。读源码貌似和我们遥不可及，因为在日常工作中，我们基本掌握在熟练的程度上，就能够满足工作需求，即便是想看源码，也会被源码复杂的逻辑拒之门外,成为了我们心中挥之不去的阴影。那么我们真的有必要阅读源码吗？ 我以一个过来人的角度看，答案是肯定的，阅读源码不只是停留在源码层面，它还会带来一些附加的价值 。笔者读过很多源码，比如 主流前端框架 vue2.0,vue3.0,react，node框架 express , koa，和它们衍生生

一 前言读完这篇文章你可能会学到哪些知识？①node实现终端命令行 ②终端命令行交互③深copy整个文件夹 ④nodejs执行终端命令 如 npm install⑤建立子进程通信⑥webpack底层操作，启动webpack,合并配置项⑦编写一个plugin,理解各阶段⑧require.context实现前端自动化1 实现效果展示项目效果mycli creat 创建项目mycli start 运行项目mycli build 打包项目体验步骤我们在这边文章里面用的是mycli ，但是我

笔者是一个 react 重度爱好者，在工作之余，也看了不少的 react 文章, 写了很多 react 项目 ,接下来笔者讨论一下 React 性能优化的主要方向和一些工作中的小技巧。送人玫瑰，手留余香，阅读的朋友可以给笔者点赞，关注一波 。公众号：前端Sharing 陆续更新前端文章。本文篇幅较长，将从编译阶段 ->路由阶段 ->渲染阶段 ->细节优化 ->状态管理 ->海量数据源，长列表渲染方向分别加以探讨。一 不能输在起跑线上，优化babel配置,w

前言相信实际项目中用过vue的同学，一定对vue中父子组件之间的通信并不陌生，vue中采用良好的数据通讯方式，避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式，优缺点，及其实际工作中的应用场景首先我们带着这些问题去思考1 vue中到底有多少种父子组件通信方式？2 vue中那种父子组件最佳通信方式是什么？3 vue中每个通信方式应用场景是什么？一 prop1 基本用法prop通信方式大家最常见的，也是最常用的父子组件通信类型，我们可以直接在标签里面给子组件绑定属性和方

前言：相信不少同学在实际工作中做项目的时候会遇到点击形成二维码，跳转新的页面展示二维码的项目需求。解决问题的思路实际又很多种，今天笔者介绍一个简单实现的思路，供大家参考，实际实现这个小功能其实是特别简单的。demo效果思考如何让实现如何实现这个需求呢首先我们需要生成二维码，而且要打开一个新的页面展示，那么我们需要img标签来展示图片的载体，那么生成图片src必不可少的。无论我们的项目是spa，还是多页面应用，我们这里都要用base64储存图片的信息。所以需要把生成的二维码转化成base64。接.

前言自从react16.8，react-hooks诞生以来，在工作中一直使用hooks，一年多的时间里，接触的react项目，渐渐使用function无状态组件代替了classs声明的有状态组件，期间也总结了一些心得。尤其对于近期三个月的项目里，一点点用自定义hooks来处理公司项目中重复逻辑，总体感觉还不错。今天给大家讲讲我在工作中对react-hooks心得，和一些自定义hooks的设计思想，把在工作中的经验分享给大家。自定义hooks设计又回到那个问题？什么是hooks。react-hooks

写在前面：为什么要学习react-router底层源码? 为什么要弄明白整个路由流程？ 笔者个人感觉学习react-router，有助于我们学习单页面应用(spa)路由跳转原理，让我们理解从history.push，到组件页面切换的全套流程，使我们在面试的时候不再为路由相关的问题发怵，废话不说，让我们开启深入react-router源码之旅吧。一 正确理解react-router1 理解单页面应用什么是单页面应用？个人理解，单页面应用是使用一个html下，一次性加载js, css等资源，所有页面.

7.8 月份面试题新鲜出炉啦，里面有很多大厂面试题原题，大家喜欢的可以给笔者点个赞，花费了很长时间整理，这些面试题更适合为中级前端进阶高级前端的小伙伴查缺补漏，和为打算金九银十换工作的同学们保驾护航。陆续还有相关文章分享连载，喜欢的可以关注一下笔者和笔者的公众号：前端Sharing废话不说，面试题奉上html篇问题一:Meta标签常用属性值的写法和作用答：meta 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜

之前的文章详细的介绍了vue3.0 相应式原理，知道了用proxy代替Object.defineProperty 的利与弊，了解了依赖收集和派发更新的大致流程，知道了vue3.0响应式原理，这节我们一起研究vue3.0中的 watch 有那些变化。一 watch 和 watchEffect之前我们讲解到，vue3.0取消了渲染watch概念，取而代之的effect副作用钩子，来完成当依赖项更改而促使视图。 /* 创建一个渲染 effect */instance.update = effect(fun

一 基于proxy的Observer1 什么是proxyProxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。proxy是es6新特性，为了对目标的作用主要是通过handler对象中的拦截方法拦截目标对象target的某些行为（如属性查找、赋值、枚举、函数调用等）。/* target: 目标对象，待要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。 *//* handler: 一个通常以函数作为属性的对象，各属性中的函数.

前言知识： 二进制位数与色彩的关系在计算机中，像素用二进制数来表示。不同的图片格式中像素与二进制位数之间的对应关系是不同的。一个像素对应的二进制位数越多，它可以表示的颜色种类就越多，成像效果也就越细腻，文件体积相应也会越大。一个二进制位表示两种颜色（0|1 对应黑|白），如果一种图片格式对应的二进制位数有 n 个，那么它就可以呈现 2^n 种颜色。1 JPEG/JPG关键字：有损压缩、体积小、加载快、不支持透明JPG 的优点JPG 最大的特点是有损压缩。这种高效的压缩算法使它成为了一种非常轻巧的

前言介绍从本文开始，我们正式进入vue3.0 源码解析流程。个人觉得从ceateApp入手并不是最佳的学习方案，所以我们先从composition-api响应式原理入手，共同学习vue3.0带来的哪些翻天覆地的变化。连载文章是大致是这样的，可能会根据变化随时更改：1 数据绑定原理（上)2 数据绑定原理（下)3 computed和watch原理4 事件系统5 ceateApp6 初始化mounted和patch流程。7 diff算法与2.0区别8 编译compiler系列…一 基于

webview H5 兼容性汇总(持续更新中)1 IOS问题：position:fixed固定定位抖动问题问题背景：在业务场景中,在ios终端环境下运行H5页面，需要用到fixed定位，并且fixed定位需要上下移动（y轴移动）网上解决方案：① 给顶级元素设置heightL100% ( 并没有奏效 ) 。② 增加transform: translate(0) 属性 （ 并没有奏效 ）③ 改变布局由fixed 定位,改成absolute定位，滚动条基于自身。（ 能够从根本上解决偶尔跳屏的问题，但