- 博客(382)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 前端新的构建范式
前端的交付基于浏览器，资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，是前端发展中一直探索的难题。模块化 这个词大家一定有所熟知。模块的产生就是为了解决前端日趋复杂，从而加载越来越多资源而产生的问题。最终目的是为了提高生产力！前端模块发展历程：前端模块化系统模块化发展到今天，其基本的范式为：利用 bundle 工具（如 webpack）将源码打包成浏览器可识别的 bundle。范式从本质上讲是一种理论体系、理论
2021-09-26 18:35:26
896
1
原创 你不知道的 forEach（javascript）
forEach 为何会跳过不存在的元素？callback 中变更元素又有哪些问题？如何终止执行？异步执行顺序如何保障？结合ecma262规范一一解答。
2021-09-22 18:21:30
892
3
原创 果断放弃npm切换到pnpm--节约磁盘空间（256G硬盘救星）
团队成立初期我们采用 npm3 来管理项目依赖，后续我们研发了自己组件库、图表库、工具库，采用了 monorepo 管理，依赖管理也由 npm3 切换成了 yarn（yarn workspace）。不管是 npm3 还是 yarn 都采用扁平化的 node_modules 文件夹方式，以此避免引入层级过深、相同依赖版本重复等问题。随着公司业务不断壮大，团队支撑的项目越来越多。由于依赖是跟随项目的，导致磁盘空间占用严重。由于上述原因，开始尝试使用 pnpm 来进行管理。节约磁盘空间pnpm 依赖项将存
2021-09-09 14:14:11
2097
4
原创 10分钟搞定硬链、软链
对于软链、硬链的内容整理，是为后续 pnpm 的内容做准备。示例：cd /Users/ligang/Documents/github/practice/links/sources# 在测试目录下创建相应的测试文件touch test.js && echo "console.log('links')" > test.jsinode查看文件信息（inode）ls -li test.js8643193659 -rw-r--r-- 1 ligang staff 21
2021-09-05 22:59:54
957
6
原创 取消（中止）异步请求
问题描述：动态获取图片宽、高。由于图片大小不一，导致异步请求返回时间有差异，频繁操作导致渲染结果出现问题。举例说明：【图片2】尺寸较大，返回需要【2s】；【图片1】尺寸最小，返回需要【1s】。先点击【图片2】然后迅速点击【图片1】，最后渲染和获取的结果为【图片2】==> 最后操作的是【图片1】，按预期应该展示【图片1】。该问题，在两个以上异步请求控制同一展示内容时都会出现： 第一个异步请求（耗时长）发出没有返回，又操作触发了第二个请求（耗时短）。第二个请求先返回，内容呈现；此时第一个异步请求
2021-08-31 19:40:15
1114
原创 纯CSS实现拖拽--resize、scale、包裹性
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想或解决方案。今天看了一篇关于 CSS 的文章，文章用到的几个点，想和大家聊聊。 附「原文地址」大家可自己查阅。原文题目：CSS 奇思妙想 | 使用 resize 实现强大的图片拖拽切换预览功能原文地址：https://www.cnblogs.com/coco1s/p/15151338.html示例源码：https://codepen.io/Chokcoco/pen/bGqWJZL<div class='picA'>.
2021-08-29 20:13:09
3855
2
原创 Thinking--异步请求函数return应不应该加await？
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想或解决方案。在 codereview 代码中，发现了这样的两种写法。写法一：async function fn () { return await someAsyncReq()}写法二：function fn () { return someAsyncReq()}有哪些区别呢？从写法上，直观可以看到的是写法一：返回的是执行结果（异步执行过程在 fn 函数内部）写法二：返回的是 Promise（异步执行过.
2021-08-23 18:46:42
1557
6
原创 Thinking--JavaScript延迟加载属性数据（性能提升）
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。Vue 遍历对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。getter/setter 对用户来说是不可见的，但是在内部 Vue 能够追踪依赖，在 property 被访问和修改时通知变更，依此做到了数据的响应式。vue 通过 Object.defineProperty 的实现思路，值得我们思考。下面提到的属性延迟加载就是其中一个引发.
2021-08-16 19:51:20
753
4
原创 Form 表单数据编码、解码--encodeURIComponent、URLSearchParams、FormData
本文主要讲解，通过 web api 来处理各种参数问题，防止产生安全问题，以及更便利的操作。先看一个示例：const response = await fetch(url, { method: 'POST', body: `text=${text}`, headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})const json = await response.json()上述代码会出现一些“安
2021-08-09 19:34:15
2705
原创 JavaScript 函数回调风险
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。引用某第三方模块某函数：// 将一些数字转换为可读的字符串import { toReadableNumber } from 'some-library'const readableNumbers = someNumbers.map(toReadableNumber)toReadableNumber 的实现：export function toReadableNumber(num) { // 例如 10000000 转.
2021-08-04 21:06:54
863
4
原创 到底什么是IaaS、PaaS、SaaS？
缩写全称中文IaaSInfrastructure as a service基础设施即服务PaaSPlatform as a service平台即服务SaaSSoftware as a Service软件即服务服务： 指履行职务，为他人做事，并使他人从中受益的一种有偿或无偿的活动，不以实物形式而以提供劳动的形式满足他人某种特殊需要。上面提及的”基础设置“、”平台“、”软件“，和传递意义上当成工业产品售卖（属于第二产业）不同，这里更多的是指”服务页范畴“（属...
2021-08-02 19:18:05
2065
4
原创 前端打包工具Esbuild--模块化、ESM、esbuild-loader、
模块化编程在前端领域已非常普遍，应用程序中将各种功能细分成独立的模块（单独文件）进行开发。module bundler 将所有文件串联起来变成了必须。JavaScript 社区中有很多程序的打包工具，如 Webpack、Rollup、Parcle 等，它们都是使用 JavaScript 构建的，性能方面有很多不足。下面要介绍的 Esbuild，采用 Go 语言开发，运行速度得到了显著提高。Esbuild 也被称为下一代构建工具（使用 Go 语言编写，基于 ESM）。esbuild：An extrem
2021-07-17 20:56:51
19143
10
原创 性能调优--gzip、缓存、content-download、逐针渲染、Queueing、动态延迟加载、最小化主线程工作
本文主要讲述，关于 Chrome Content Download 时间过长问题调查经过，及相关优化方案chunk-136cc8c0.js 是上图地图 geojson，587 kB 用了 1.01s，作为系统首页，会导致中间地图（视觉中心）出现长时间的空白，对于用户体验来说，极其不友好。怀疑一：是不是网络环境不好导致？在开发环境下运行（本地）也会出现类似情况，且更重要的是 chunk-7182b1fa.js 933kB 才用了 35ms。因此可以排除网络坏境导致。怀疑二：缓存导致？某些 chun
2021-06-22 18:55:16
2579
1
原创 你问的Svelte来了--静态编译、直出DOM、独立分发Web Components、位掩码变化追踪
SvelteSvelte 是一种全新的构建用户界面的方法。传统框架如 React 和 Vue 在浏览器中需要做大量的工作，而 Svelte 将这些工作放到构建应用程序的编译阶段来处理。与使用虚拟（virtual）DOM 差异对比不同。Svelte 编写的代码在应用程序的状态更改时就能像做外科手术一样更新 DOM。上述是官方的介绍，提取关键词：用户界面的方法：定位是UI框架。编译阶段处理： Svelte 直接将模板编译成了原生 DOM，而 vue 等框架会将模板编译成虚拟DOM；浏览器支持原生
2021-06-15 18:52:56
1445
4
原创 JavaScript是解释型语言--V8、JIT
编程语言可以通过”语言“来控制计算机，让计算机为我们做事情。（类似于中文、英文）编程语言是用来控制计算机的一系列指令（Instruction），它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守，否则就会出错，达不到我们的目的。编程语言的发展大概经历了以下几个阶段： 汇编语言 ==> 面向过程编程 ==> 面向对象编程汇编语言是编程语言的拓荒年代，它非常底层，直接和计算机硬件打交道，开发效率低，学习成本高；C语言是面向过程的编程语言，已经脱离了计算机硬件，可以设计中等规
2021-05-25 20:25:43
3468
27
原创 source map 你知道多少？-- 调试、原理、渗透、还原源码
压缩 css 和 javascript 代码，是一种简单且见效明显的的提高 web 性能的方式。但是，当需要调试这些压缩文件中的代码时变成了“噩梦”。source map 是解决该问题的方式之一，其提供了一种将压缩文件中的代码映射回源文件中的原始位置的方法。Chrome 和 Firefox 开发人员工具都附带了对 source map 的内置支持，这意味着，即使在压缩后，也可以轻松地调试应用程序。注意：Firefox：开发人员工具默认启用对源地图的支持；Chrome：手动启用支持。启动Chrome
2021-05-22 23:08:06
3857
14
原创 高效能人士的七个习惯
“七个习惯”让你回归真实的自我和原则，而不取决于外界。也不再相信只有和别人比较时，人才有价值和身份；因为每个人都有无穷的价值和潜力，根本无需比较。与从屋顶陨落的岩石不同，我们能够选择是跳还是不跳。我们是有意识的人，所以不会受外力拖来拽去，坐以待毙。作为人类，我们被赋予意识、想象、自觉和独立意志等，这些都是动物所不具备的天赋。我们能够分辨好坏，站在客观的角度判断自己的行为。我们可以想象，在未来想创造什么生活，而不是深陷过去的回忆中。我们越常使用这些与生俱来的能力，便会有更多选择的自由，我们可以选择是将原则为
2021-04-11 22:23:38
263
原创 vue知识图谱--不问API，只问为什么
一张图带你了解整个vue全家桶相关。包括vue、vue-router、vuex、webpack、浏览器相关等所有vue全家桶相关知识点。xmind原件下载地址：https://download.csdn.net/download/ligang2585116/16263314
2021-03-31 15:03:47
395
原创 别让猴子跳回背上
你所鼓励的行为，都会受到强化。安肯自由量表：（5）独立行动，例行性报告（最高层级）。（4）行动，但需立即请示（意味着报告频率超过例行程度）。（3）提出建议，按照裁断的结果行动。（2）请示要做什么。（1）等待指示（最低层级）。自由度越高下属得到越多授权，同时也占用主管更少的时间。在一家公司的销售会议上，营销部门经理说：“最近销售做得不好，我们有一定的责任，但是最主要的责任不在我们，而是竞争对手纷纷推出新产品，比我们的产品好，所以我们很不好做。”研发部门经理说：“我们最近推出的新产品是少.
2021-03-30 09:37:54
921
4
原创 网页中如何使用SVG
将SVG作为图像1. 将图像包含在 HTML 标记的 <img> 元素内当图像是页面的基本组成部分时，推荐这种方式。<img src="radar.svg" title="雷达图" alt="雷达图"><div class="txt">将SVG作为图像</div>对于栅格图像，其固有尺寸就是它的像素尺寸。对于 SVG，则：① 如果文件中的根元素 <svg> 带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸.
2021-02-16 21:51:26
1186
原创 一网打尽位图与矢量图
计算机中描述图形信息的两大系统是栅格图形「又称位图」（raster graphics）和矢量图形（vector graphics）。下述，对栅格图形和矢量图形进行对比。概念栅格图形，是由像素的单个点组成的，每个像素用其 RGB 颜色值表示。栅格图形通常以某种压缩格式存储；显示栅格图形仅需要一个阅读器将其解压并传输到屏幕上。栅格图形常见压缩方式：从位图图片中选择最有代表性的若干种颜色（通常不超过256种）编制成颜色表，然后将图片中原有颜色用颜色表的索引来表示。这样原图片可以被大幅度有损压缩。适合于压缩
2021-02-16 09:21:28
523
3
原创 最佳实践：vue2 父组件监听子组件生命周期钩子
HookEvent源码地址：https://github.com/vuejs/vue/blob/master/src/core/instance/lifecycle.js#L314export function callHook (vm: Component, hook: string) { const handlers = vm.$options[hook] if (handlers) { for (let i = 0, j = handlers.length; i < j; i
2020-12-26 13:08:04
752
原创 2020年度个人总结--一个前端技术LD的年终盘点
2019年底，自己立下了两个 Flag，一年即将过去，盘点一下：格局、做事方式有待再提高！多阅读，开拓自己眼界！格局、做事方式2020年是自己在管理岗上，第4个年头。管理的人数由不到10人扩展到了20多人。过程中有阵痛、有迷茫，但挺过来后是满满的收获。管理思维的转变管理创意是一门艺术，而不是科学。当然没有对错，摸索一套适合自己的更为重要！明确的自我主张每次需要决策的事宜上必须有自己明确的主张，但不强加于人，许多问题悬而未决，会抵消影响力。不盲目的下结论，剔除臆测因素在看得
2020-12-22 18:17:38
2250
8
原创 vue3 -- 通过简单示例，聊一聊Composition API
在 vue3 版本之前，我们复用组件（或者提取和重用多个组件之间的逻辑），通常有以下几种方式：Mixin：命名空间冲突 & 渲染上下文中暴露的 property 来源不清晰。例如在阅读一个运用了多个 mixin 的模板时，很难看出某个 property 是从哪一个 mixin 中注入的。Renderless Component：无渲染组件需要额外的有状态的组件实例，从而使得性能有所损耗Vuex：就会变得更加复杂，需要去定义 Mutations 也需要去定义 Actions上述提到的几种方
2020-11-20 18:56:39
673
1
原创 vue3 -- 通过几行示例代码，聊一聊响应式
Vue3 中关于响应式的 API （@vue/reactivity）有以下几个，下面通过使用不同的 Api 实现下述示例，来做一个对比和总结 :refreactivecomputedreadonlywatchEffectwatchApp.vue初始值：<input v-model.number="initial"/><count :initial="initial"></count>Count.vue<div>当前值： {{cou
2020-11-18 20:02:18
482
原创 团队内部分享--工作杂谈（读书推荐）
选择这个主题，更多的是自己这段时间的思考或者说反思，希望有一些观点可以共鸣&共勉，仅此而已~~~下述内容个人感悟（牢骚）颇多，总有些能让大家含沙射影到公司，这不是本意，或者说需要我们和公司一起成长~~~最近自己在工作上的遭遇和感受，这两本书恰到好处的涵盖了，所以，我们从书说起：凤凰项目讲述了一位IT经理临危受命，在未来董事的帮助和自己“三步工作法”理念的支撑下，最终挽救了一家具有悠久历史的汽车配件制造商的故事。小说揭示了管理现代IT组织与管理传统工厂的共通之处，让读者不仅能对如何管.
2020-10-24 18:07:25
2378
2
原创 掌握 AST，轻松落地关键业务
如果你查看目前任何主流的项目中的 devDependencies，我们不会在生产环境用到，但是它们在开发过程中充当着重要的角色。归纳一下有：javascript转译、代码压缩、css预处理器、elint、pretiier，postcss等。所有的上述工具，不管怎样，都建立在了AST这个巨人的肩膀上，都是 AST 的运用：编辑器的错误提示、代码格式化、代码高亮、代码自动补全；elint、pretiier 对代码错误或风格的检查；webpack 通过 babel 转译 javascript 语法；.
2020-09-24 13:18:53
905
原创 WebAssembly 小 Demo
意义WebAssembly 是一种新的编码方式，可以在现代的网络浏览器中运行 — 它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C/C++ 等语言提供一个编译目标，以便它们可以在Web上运行。WebAssembly 被设计为可以和 JavaScript 一起协同工作 — 通过使用 WebAssembly 的 JavaScript API，你可以把 WebAssembly 模块加载到一个 JavaScript 应用中并且在两者之间共享功能。这允许你在同一个应用中利用 W
2020-09-15 13:25:00
1237
2
原创 干法：经营者应该怎样工作
18年去承德，在图书馆闲逛时，看到了稻盛和夫的『活法』，购买了一本，读完后意犹未尽；然后又在网上搜稻盛和夫的其他书籍，于是就购买了这一本『干法』。买了很久，一直断断续续的读。恰逢近日媳妇生产，在产房外（女儿 ·· 成功于2020年8月19日22点41分顺产）重拾了这本书，痛快读完，颇有收获和感慨。这是一本关于描述工作的书籍，作者的工作观：人生·工作的结果=思维方式×热情×能力。作者对于工作目标是大爱–为社会，为世人。现阶段自己可能很难达到这种境界，只是希望最终可以成为其中一盏灯（一灯照隅，万灯照国），然后
2020-08-29 00:01:50
3865
原创 Thinking--函数式编程pipe&compose
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。业务场景描述：A函数执行完毕后，将结果传递给B函数，然后执行B函数。如：(x+1)∗10(x+1)*10(x+1)∗10// 加1function addOne (x) { return x + 1}// 乘2function multiTwo (x) { return x * 2}链式调用链式调用侧重于 oop 风格：先有对象，再调用对象方法。class Calculate { construct.
2020-08-14 15:38:24
352
原创 内网畅外网墙--再聊Nginx访问权限管理
接上回，Nginx访问权限管理low address bits of 192.168.101.0/16 are meaningless in /usr/local/nginx/conf/nginx.conf:122location / { allow 192.168.101.0/24; deny all; ...}网关网关在网络层以上实现网络互连，是复杂的网络互连设备。网关既可以用于广域网互连，也可以用于局域网互连。A：IP地址范围 192.168.1.1~192. 168.
2020-07-21 15:45:47
2692
原创 Thinking--函数同时支持 callback & promise
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。function fn (cb?: Function, ctx?: Object) { // 函数内部逻辑 console.log('...') // promise if (!cb && typeof Promise !== 'undefined') { return new Promise(resolve => { resolve(ctx) }) } //.
2020-07-16 18:48:46
434
原创 10 分钟了解 webpack 核心内容
10 分钟了解 webpack 核心内容直接上手稿了Tapable 是 webpack 核心工具之一，提供了插件接口。webpack 中许多对象扩展自 Tapable 类（如，负责编译的 Compiler 和负责创建 bundles 的 Compilation）。这个类暴露 tap, tapAsync 和 tapPromise 方法，可以使用这些方法，注入自定义的构建步骤，这些步骤将在整个编译过程中不同时机触发。Compiler.js#L104 每一个事件钩子决定了它该如何应用插件的注册cla.
2020-07-11 18:37:23
440
原创 利用 target=_blank 进行前端钓鱼
为什么大部分国外网站内链接不用 target="_blank"新窗口打开？Google 都是当前窗口打开；Baidu/Bing 都是新窗口打开。用户将无法控制它在本页打开还是新窗口打开。新窗口打开使任务栏更加地拥挤。新窗口打开增加浏览器资源的消耗。新窗口打开是后退按钮变得不可用。用户更加期望新页面在当页载入以上，并不是我们讨论的重点！作为安全公司，我们关注重点在于安全、安全、安全！涉及内容：<a href="https://ligang.blog.csdn.net" ta.
2020-06-16 19:53:13
915
2
原创 从npm、npx说起，到shell
背景：目前整个我们前端工程栈有多处 CLI（包括工具、模板等等），CLI 带来了巨大的便利性，但其在 Windows 下执行往往和 Mac/Unix 系统下表现不同。今天想从 npm run <command> 命令开始，尽可能的阐述一下整条链~~~npmscript项目的相关脚本，可以集中在一个地方（这里指入口）以利用 npm 提供的很多辅助功能，以及不同项目的脚本命令，只要功能相同，就可以有同样的对外接口（如 npm run test，不管是 mocha 还会 jasmine.
2020-06-12 15:37:02
1125
原创 最佳实践：vue弹窗及滑块响应式
下述为项目中弹窗/滑块统一处理方式汇总（下述已 el-dialog 为例）演示环境：https://eugvd.csb.app/Demo 地址：https://codesandbox.io/s/thirsty-sun-eugvd?file=/src/components/User.vue:2122-2497DOM 结构方式1. (推荐1：直接注入数据「详情」) el-dialog 壳子在外，内容单独组件，后续组件可以替换为其他壳子<template> <el-dialog
2020-06-03 23:26:27
773
2
原创 vue组件对象字面量传值的注意啦！
前面汇总过 「vue组件引用传值的最佳实践」，对于 vue2 版本存在一个严重的性能问题，需要格外注意：对象字面量的传递vue-props-传入一个对象<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue --><!-- 这是一个 JavaScript 表达式而不是一个字符串。--><blog-post v-bind:author="{ name: 'Veronica', company: 'Veridian Dynamics
2020-05-19 23:33:05
1006
原创 最佳实践：vue组件引用传值
下述组件传值指引用类型（数组或对象）传值。准备：单向数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。这个 prop 用来传递一个初始值；这个子组件接下
2020-05-18 23:17:41
1538
原创 npm并行&串行执行多个scripts命令
通过npm run <commander> 可以运行 package.json 中脚本，Npm 命令不能提供立即运行多个脚本的方式，同时运行需要打开多个终端窗口npm scriptsnode_modules/.bin 目录下的命令，可以直接在 scripts 中调用利用一些脚本生命周期时间"scripts": { "preinstall": "./configure...
2020-05-03 22:17:33
11024
4
原创 Thinking--return退出多重循环
Thinking系列，旨在利用10分钟的时间传达一种可落地的编程思想。假设在函数体内有一个两重循环语句，需要在内层循环中判断，当到达某个临界条件时退出外层循环。方式一：引入控制标记变量function test1 () { let isBreak = false for (let i = 0; i < 10; i++) { for (let j = 0; j <...
2020-04-23 22:46:33
530
aes加密&解密算法前端实现
2023-02-23
程序员面试宝典-前端-2023最新
2023-02-23
毕业论文-办公自动化系统的设计和实现
2023-02-20
jquery插件
2014-11-15
yuicompressor-2.4.jar
2014-11-10
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人