在项目开发的过程中，为了减少提高性能，减少请求，开发者往往需要将一些不易改变的数据放入本地缓存中。如把用户使用的模板数据放入 localStorage 或者 IndexedDB。代码往往如下书写。// 这里将数据放入内存中 let templatesCache = null; // 用户id，用于多账号系统 const userId: string = '1'; const getTemplates = ({ refresh = false } = { refresh: false }) => { // 不需要立即刷新，走存储 if (!refresh) { // 内存中有数据，直接使用内存中数据 if (templatesCache) { return Promise.resolve(templatesCache) } const key = `templates.${userId}` // 从 localStorage 中获取数据 const templateJSONStr = localStroage.getItem(key) if (templateJSONStr) { try { templatesCache = JSON.parse(templ ...继续阅读 (34)

Nodejs与JavaScript和JSON有一些人在学习JavaScript时，会分不清Nodejs和JavaScript之间的区别，如果没有node，那么我们的JavaScript代码则由浏览器中的JavaScript解析器进行解析，几乎所有的浏览器都配备了JavaScript的解析功能（最出名的就是google的v8）， 这也是为什么我们能在f12中直接执行JavaScript的原因。而Nodejs则是由这个解析器单独从浏览器中拿出来，并进行了一系列的处理，最后成为了一个可以在服务端运行JavaScript的环境。这里看到一个很好的例子，学过java的师傅应该就明白了。那么JSON又是什么呢？简单概括一下就是JavaScript的对象表示方法，它表示的是声明对象的一种格式；由于我们从前端接收到的数据基本都是字符串，因此在服务端如果要将这些字符串处理为其他格式；比如对象，就需要用到JSON了。、原型对象（prototype）与原型连接点（__proto__）与原型链在c++或java这些面向对象的语言中，我们如果想要一个对象首先需要使用关键字class声明一个类，再使用关键字new一个对象出来；但是在JavaScript中没有class 以及类这种概念（为了简化编写JavaScript代码，ECMAScript 6后增加了class语法，但class其实只是一个语法糖） 在Ja ...继续阅读 (53)

照片库（相册）是很多网站的必备功能，因为独特地呈现图像的能力可以帮助网站脱颖而出。网页开发者设计师正在利用这一优势，他们使用最新的 CSS 和 JavaScript 技术来创建抽象布局和引人注目的特效。从简单的网格画廊到超凡脱俗的用户界面，各个特效都有。这边文章收集了8个独特的照片库特效可以帮助激发您的下一个项目。CSS Animated Mini Photo GallerySliding Image Track with CSS & JavaScriptAccordion CSS Image GalleryHexagon Gallery in CSSResponsive CSS Photo Gallery Grid with LightboxLayered Horizontal Scroll Gallery with CSSFlex Image Gallery with Hover EffectPuzzle Grid Gallery ...继续阅读 (6)

SegmentFault 思否写作挑战赛是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启；挑战赛中包含多个可供作者选择的热门技术方向，根据挑战难度分为多个等级，快来参与挑战，向更好的自己前进！挑战赛规则时间：参赛时间在2月8日-3月5日，3月7日18:00前公布获奖名单可选方向：#javascript，#css，#vue.js挑战项：关卡详情Level 1活动期间发布至少 4 篇文章，且归属可选方向内至少一个标签Level 2活动期间发布至少 1 篇经过深度思考和研究，且归属可选方向内至少一个标签的文章。其中除代码外，需要包含至少 2000 字Level 3活动期间内发布至少 1 篇高活跃度文章，且文章归属可选方向内至少一个标签。活跃度统计规则=阅读量 x 0.5+点赞 x 0.2+评论 x 0.2+收藏 x 0.1，高活跃度即累加值不少于 550 分特殊关卡完成任意一项关卡的作者，同时邀请至少 1 位「新创作者」参与挑战赛，且新创作者也至少完成一项关卡获奖规则完成任一关卡，即可获得挑战赛专属徽章一枚完成至少两项关卡，前 20 名可获得技术书籍一本完成全部关卡（不含特殊关卡），前 10 名可获得首页推荐一次完成特殊关卡，两位作者都将获得 ONES 赞助专属礼包一份，限量 20 份什么是新创作者？活动期间注册的新用户非活动期间注册的用户，近 1 年内未发布过 ...继续阅读 (30)

前言实时获取服务端的数据，大家第一时间想到的是轮询和 WebSocket 两种方案，其实还有一种新方案 Server-sent events下文简称（SSE）。SSE 中的数据只能由服务端推向客户端SSE 是基于 http 协议的服务器推送技术，数据只能从服务端到客户端。服务端把序列化后的数据发送给客户端，整个过程持续不断直至连接关闭WebSocket vs 轮询 vs SSE下面是 WebSocket、轮询和 SSE 的功能对比SSE 和轮询使用 HTTP 协议，现有的服务器软件都支持。WebSocket 是一个独立协议SSE 属于轻量级的 WebSocket，使用简单；WebSocket 使用相对复杂，轮询使用简单SSE 默认支持断线重连，WebSocket 需要自己实现断线重连SSE 一般只用来传送文本，二进制数据需要编码后传送，WebSocket 默认支持传送二进制数据SSE 支持自定义发送的消息类型WebSocket 支持双向推送消息，SSE 是单向的轮询性能开销大、轮询时间久导致客户端及时更新数据使用场景基于服务端单向的向客户端推送信息的特性，SSE 使用场景主要有Sass 平台的消息通知信息流网站实时更新数据使用方式下面讲解如何在客户端使用 SSE创建一个EventSource实例，向服务器发起连接const evtSource = new EventSource() ...继续阅读 (30)

本文首发CNode社区、SegmentFault、稀土掘金和Node全栈公众号，本文版权归作者所有，未经作者同意，禁止转载。我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点，算是系统性的梳理了一下我自己对前端一整年的总结。年后，在知乎上看到《前端的就业行情怎么样？》，下面都是各种唱衰前端的论调，什么裁员，外包化，没前途，薪资不过20k之类的，我非常不认同他们的观点，于是我也回复了这个提问，基于前端情况、趋势和我个人的理解，给出了一些就业行情分享，大家还是比较认可的，收藏的比点赞的还多。既然都喜欢看，那我就把这些人写的稍微详细一下，希望有理有据的分析能够对更多前端的朋友们在寒冷的冬天，感受到更多温暖，更加坚定。本文主要讲了前端2022的主流趋势，年度大戏低码和2023就业行情分析，对未来的2个可能放大的点AI和Cropto和前端相关的部分也有一点点覆盖。2022年是黑天鹅满天飞的一年，整个互联网局势都很差，从人才济济到“人才挤挤”，2023年前端就业形势会怎样呢？下面一起来尝试分析一下。先看一下2022年前端主流趋势2022年的前端还是非常热闹的，比如Vite和Turbo的性能之争，恶劣的Faker.js事件，尊重但不一定认同的SubStack退网事件，已知多位大佬加入区块链公司，Doodlewind在AFFiNE做编辑器，Justjavac在Deno & Rust之外又 ...继续阅读 (23)

可能大家谈到低代码想到更多的是低代码搭建页面的平台，内部不少也是此种，其实对于偏逻辑编排、服务 BaaS 能力的偏可视化方式其实也算低代码，旨在「通过少写代码，用更便捷的方式来实现原本需写代码的工作」。说到低代码，喜欢的人特别喜欢，不喜欢的人很不喜欢，此外也有“假装”去喜欢的，也有喜欢得不明不白的，我现在对于低代码是有点儿喜欢的那种，不过只限于「在特定领域，实现需求的速度比熟练工程师写代码要快的场景」，这种场景下用起来真心会比较爽，可能也用得不爽的时候，但是这种不爽远小于他带来的效益减去原本敲代码的投入，也很值得将这类产品做到好用爱用。其实低代码产品是比较难做成的，特别是大而全的那种，由于考虑因素过多，导致步调很慢，也很难做到很易用，导致一边投入很大，一边又急切上线落地使用，从而出现平台方觉得投入很苦，使用方觉得不太好用还需吃狗粮的矛盾，往往需经过忍耐很长时间才可「守得云开见月明」，不过很多都在没有见月明的时候就奄奄一息了。反而专门领域的比如说表单、表格、图表低代码搭建活的很不错。还有一些 BaaS 类单领域的活得也还可以，我个人更偏向「易用的可很轻快解决对应领域问题低代码产品方案」。此外还有一个误区，有人会认为低代码是给所有工程师都可以使用的，其实我认为不太对，低代码最开始出现的初衷是为了解决「让不是程序员的人使用视图、组件、模板和表单等方式快速在不写代码情况下构建应用」，这里我 ...继续阅读 (6)

There is a song called "Reflection" in Disney's version of Mulan. Mulan looks at her reflection in the water, contemplating her future choices. The lyrics and visuals of the song contain both meani... ...继续阅读 (52)

迪士尼版花木兰有一首歌叫 Reflection，木兰看着水面的自己，沉思自己未来的选择，歌词和画面就同时包含了 Reflection 这个词的这两层含义，即： 编程中的 Reflect 翻译为“反射”确实会让人迷糊，其实这里应该往“自省”的方向靠。Reflect 是 JavaScript 元编程的重要方法之一，元编程可以从更高维度实现你想要的功能，例如用程序调整程序本来的表现、调用一... ...继续阅读 (54)

本章的前提就是大家都知道动画的基本属性，例如animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count和animation-direction属性。了解更多animation相关的内容。现在制作一个左右抖动的动画效果，效果如下:在 uniapp 中，可以通过如下两种方式来完成。1. 直接使用 CSS 动画1.1 定义动画@keyframes shakeX { from, to { transform: translate3d(0, 0, 0); } 10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); } } .shakeX { animation-name: shakeX; animation-duration: 1s; }1.2 使用.box { width: 100rpx; height: 100rpx; background-co ...继续阅读 (31)

人生无常，大肠包小肠~在接近年底的时候，有一个 Vue 项目，需要从中抽取 2 个模块出来。然后想着新建项目，Vue CLI 也是学，Vite 也是学，于是哼次哼次用上了 Vite，结果开始了一路的 bug 挨打之旅……警告：本文有 1.9w+ 字，35 张图片，10 个以上报错及其解决方式，1 个 Demo 和 1 个项目实例一 前言Hello 小伙伴们早上、中午、下午、晚上、深夜好，我是jsliang。本次「迁移 Vue v2.x 项目到 Vite」将分为 2 个部分：以一个简单 Demo，进行 Vite 快速入手（同时也是补充完善实例项目未解决的问题）对实例项目迁移，对比 Vue CLI 和 Vite，以及 Vite 构建中碰到的问题。本文更倾向于随手可查工具文，就好比之前写过的 Webpack 4 文章一样，它很快会石沉大海，但是我们将碰到的问题都反馈出来后，会让后面的人少跑弯路，这是很棒的事情。小伙伴们如果碰到文章同样问题，想咨询当时细节，可 WX: Liang123Gogo。感谢你的点赞和关注支持~二 简单 Demo：通过 Vite 打包 lib 仓库下面开始保姆级教学，从 0 到 1 构建 Vite 项目，并处理打包问题。前面及步骤略简单，小伙伴可选择跳读。本小节的代码仓库：all-for-one/039-迁移 Vue v2.x 项目到 Vite/2.1 步骤一：创建 ...继续阅读 (27)

前言在涉及到网络层面的相关内容时，不免会联系到HTTP、TCP、WebSocket等，但相信大部分人都并不是很清楚其中的一些关系和概念，特别是需要你去做语言表述时，网上有不少优秀的资料和文章，但知识仍需要自己去消化和总结，于是有了本文！！！本文的核心内容就是WebSocket，主要从以下几个方面来进行介绍和实践：是什么WebSocket（what）为什么需要WebSocket（why）WebSocket和HTTP的关系WebSocket的使用场景 （when / where）WebSocket实现简易聊天室（how）吾乃 WebSocket为了更好的解释 WebSocket 是什么，就需要一个熟悉且常用的东西来作为对比参考，它就是 HTTP。HTTP在大多数项目都会使用 HTTP 协议来实现前后端交互，而 HTTP 协议又是基于 TCP 协议来建立连接的，它们的关系是大致如下：全双工 & 半双工所谓全双工指的是发送端和接收端是可以随时（包含同一时刻）向对方发送消息进行通信，而半双工指的是发送端和接收端是也可以向对方发送消息进行通信，但是同一时刻只能有一方进行发送动作。我们常用HTTP1.1协议就属于半双工，即服务端不具备主动推送数据资源给客户端的能力，当服务端需要推送数据给客户端时，必须要客户端先发起一个请求，这也被称为请求-响应模型。长轮询 & 服务端推送由于HTTP1.1协议并 ...继续阅读 (25)

JavaScript函数柯里化一、定义：柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数，并且返回接受余下的参数且返回结果的新函数的技术。通过一个简单的例子解释一下：function add(a, b) { return a + b } add(1, 2); // 3将函数add转化为柯里化函数_add：function _add(a){ return function(b){ return a + b } } _add(1)(2); // 3函数add和函数_add是等价的。_add能够处理add的所有剩余参数，因此柯里化也被称为部分求值。实际上就是把add函数的a，b两个参数变成了先用一个函数接收a然后返回一个函数去处理b参数。现在思路应该就比较清晰了：只传递给函数一部分参数来调用，让它返回一个函数去处理剩下的参数。二、柯里化函数的作用1、参数复用案例：拼接地址按照普通思路去拼接一个地址// 拼接地址 function getUrl(protocol, hostname, pathname) { return `${protocol}${hostname}${pathname}`; } const url1 = getUrl('https://', 'www.baidu. ...继续阅读 (30)

大部分同学都知道，在 CSS 世界中，有 vw、vh、vmax、vmin 这几个与视口 Viewport 相关的单位。正常而言：1vw 等于1/100的视口宽度 （Viewport Width）1vh 等于1/100的视口高度 （Viewport Height）vmin — vmin 的值是当前 vw 和 vh 中较小的值vmax — vw 和 vh 中较大的值vh 在移动端存在重大问题！但是，在移动端，情况就不太一样了。100vh 不总是等于一屏幕的高度。有的时候，100vh 高度会出现滚动条。可以使用移动端 Chrome 浏览器扫描下面的二维码查看实际 100vh 在移动端的表现：根因在于：很多浏览器，在计算 100vh 的高度的时候，会把地址栏等相关控件的高度计算在内2同时，很多时候，由于会弹出软键盘等操作，在弹出的过程中，100vh的计算值并不会实时发生变化！这也就变相导致了许多基于100vh想实现的效果无形中会产生很多问题。图片来源于：The large, small, and dynamic viewport units新视口相关单位之 lvh、svh、dvh为了解决上述的问题，规范新推出了三类单位，分别是：The large viewport units（大视口单位）：lvw,lvh,lvi,lvb,lvmin, andlvmaxThe small viewport ...继续阅读 (31)

前言上一文讲到了图片, 这里我们就讲一个常用的图片场景: 瀑布流, 他的实现和优化什么瀑布流瀑布流，又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。最早采用此布局的网站是 Pinterest，逐渐在国内流行开来。国内大多数清新站基本为这类风格。更直观的展示如下图所示:优缺点优点：外表美观，更有艺术性。用户浏览时的观赏和思维不容易被打断，留存更容易。缺点：用户无法了解内容总长度，对内容没有宏观掌控。用户无法了解现在所处的具体位置，不知道离终点还有多远。回溯时不容易定位到之前看到的内容。容易造成页面加载的负荷。容易造成用户浏览的疲劳，没有短暂的休息时间。实现方案纯 CSS 实现这里要介绍 CSS 属性:column现在常用的column属性有这些column-count将一个元素的内容分成指定数量的列。涉疫设置为具体数字, 或者autocolumn-fill控制元素的内容在分成多列时如何平衡。有auto、balance两个值, 分别表示自动填充和水平分配column-gap两列间的距离, 可设置: px, 百分比, remcolumn-rule列布局中, 分割线的设置, 可以设置风格、宽度、颜色(和 border 相同的参数)column-span列布局中横向的占用元素, 具体作用可查看此 ...继续阅读 (32)

在React Hooks中使用第三方库的事件时，很多人会写成这样（指的就是我）：const [count, setCount] = useState(0); useEffect(() => { const library = new Library(); library.on("click", () => { console.log(count); // 拿不到最新的 count }); }, []);这样写会有问题：它只会在这个组件加载时，绑定事件，如果这个事件中用到了其他的state，那么这个状态发生变化时事件中是拿不到最新的state你会想到，我把state放到依赖项中：const [count, setCount] = useState(0); useEffect(() => { const library = new Library(); // click 事件会重复绑定 library.on("click", () => { console.log(count); }); }, [count]);这样做又会有新问题：click事件会重复绑定这时候你说那我先卸载click事件，在绑定事件：const [count, setCount] = useState(0); useEffect(() => { const librar ...继续阅读 (30)

packtpub.com 是一家电子书网站，目前在上面它们每天都会赠送一本电子书，今天送的是这本Learning JavaScript Data Structures and Algorithms - Second Edition。注册账户后就可以免费获取了，没有付费订阅的用户只能在线阅读，同时也提供了书中的源码。获取地址：https://www.packtpub.com/packt/offers/free-learning截止时间：2023 年 1 月 21 日 8 时 来自反斗限免The post免费获取电子书 Learning JavaScript Data Structures and Algorithms - Second Edition[$37.99→0]first appeared on反斗限免. ...继续阅读 (16)

前言一个简单的情景模拟（千万别被带入）：A：假设现在有 10 万条数据，你作为前端该怎么优化这种大数据的列表？B：针对大数据列表一般不会依次性加载，会采用上拉加载、分页加载等方式实现优化.A：那假如加载到最后一条数据的时候，页面上只是列表部分的数据就至少对应 10 万个 dom 节点，你觉得一个页面渲染至少 10 万个 dom 节点的性能如何？A：如果这样的列表有 n 个呢？还有没有别的优化方式？B：要不我把自己优化一下 ......其实解决上述问题就可以使用虚拟滚动来实现优化，相信大家对这个词都不陌生，但由于这个名词比较短（又是虚拟，又是滚动）导致很多人觉得这是非常高大上、难以理解的内容，但其实恰恰相反。本文的目的就是帮助你以最简单的方式理解虚拟滚动，甚至实现虚拟滚动.虚拟滚动（Virtual Scrolling）核心优化的方式：限定文档中渲染列表数量，即固定渲染的DOM数，通过动态切换数据内容实现视图的更新，并保证文档中真实DOM的数量不随着数据量增大而增大.理解虚拟滚动其实要理解虚拟滚动这个词很简单，按照虚拟和滚动两部分来理解就很简单了，下面就一一拆解。虚拟通常在页面列表中，要渲染的列表数量和真实在文档中存在的DOM 节点数是1 : 1的。每个列表项都拥有相同的高度（假设是30px），这个列表容器中需要完全渲染的列表数（假设是100 条）和在页面中的高度是一致的，即此时的高度 ...继续阅读 (19)

busuanzi-modified基于不蒜子 2.3 官网数据自定义站点访问量 (site_pv, site_uv, page_pv)。Customize your site view count based on busuanzi.https://github.com/Pil0tXia/busuanzi-modified修改你可以自定义busuanzi.pure.js中的第 75, 80, 85 行，分别对应了站点访问量、独立访客和文章阅读量。取一个你喜欢的数字，然后自行压缩并托管。部署将你的网站从busuanzi.ibruce.info引用的busuanzi.pure.mini.js替换为新的 js 地址，如本仓库的https://raw.githubusercontent.com/Pil0tXia/busuanzi-modified/main/busuanzi.pure.mini.js你也可以使用 CDN 加速访问：jsDelivr: https://cdn.jsdelivr.net/gh/Pil0tXia/busuanzi-modified/busuanzi.pure.mini.js渺软公益 CDN：https://jsd.onmicrosoft.cn/gh/Pil0tXia/busuanzi-modified/busuanzi.pure.mini.js我自用的 CDN（不 ...继续阅读 (46)

手机使用上的“贫富差距”还在持续扩大， Lite-Web 可实现低端手机网页加载速度更快，处理更简单。作者 | 黄楠编辑 | 陈彩娴过去十年中，手机的日益普及促进了互联网接入的显著增加。在全球超35亿移动网络用户中，74% 的人生活在低收入和中等收入国家中，手机成为他们连接到互联网的主要方式。近日，有研究人员通过对56个国家和地区的实地调研，衡量网络浏览体验的全球差异，研究发现，当前移动数据成本和页面加载时间方面存在着显著不平等问题。不仅如此，今天的大多数流行网页在设计时，往往只考虑到高处理能力，越来越适合高端手机，这也导致了一定程度上不平等现象的加剧扩大。举个例子，2019年，法国电信公司 Orange 推出了一款售价20美元的 Sanza 手机，随即在非洲引起一阵购买狂潮。可能大多数人很难相信，在可折叠显示屏和 5G 手机风靡的今天，一款既不是功能手机、也非智能手机的产品，短短时间之内就迅速在非洲手机市场上占有一席之地。为此，研究人员提出了一个叫做 Lite-Web（轻量化网页）的解决方案，可使网页在低端手机上加载速度更快，处理起来更容易。实验结果表明， Lite-Web 可帮助经济欠发达地区（如巴基斯坦）的低端手机用户的浏览体验转变为经济发达地区（如迪拜）高端手机用户的浏览体验，缩小手机使用上的“贫富差距”。同时，手机性能的提升不会影响页面的外观和功能。研究认为，大规模部署 ...继续阅读 (13)

在 CSS 中，倒影是一种比较常见的效果。今天，我们就将尝试，使用 CSS 完成各类不同的倒影效果，话不多说，直接进入主题。实现倒影的两种方式首先，快速过一下在 CSS 中，实现倒影的 2 种方式。使用 -webkit-box-reflect正常而言，-webkit-box-reflect是一种非常便捷及快速的实现倒影的方式。-webkit-box-reflect的语法非常简单，最基本的用法像是这样：div { -webkit-box-reflect: below; }其中，below 可以是 below | above | left | right 代表下上左右，也就是有 4 个方向可以选。看这么一个例子：div { background-image: url('image.png'); -webkit-box-reflect: below 2px linear-gradient(transparent, rgba(0, 0, 0, .5)); }看看效果，有了虚实变化之后，这样就更像是一个倒影。简单而言，使用-webkit-box-reflec可以做到：不同方向的投影投影的距离投影的虚实，可叠加一层蒙版控制透明度上面 3 点即是-webkit-box-reflec的特点，同时，也表明了它存在一定的局限性，同时，在今天，从-webkit-box-refle ...继续阅读 (28)

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。它可以用在 react、angular、vue 等项目中, 但与 react 配合使用更加方便一些。Redux 原理图如下，可以看到store仓库是Redux的核心，通过维护一个store仓库管理 state。state 是只读的，唯一改变 state 的方法就是组件触发 Action。通过编写Reducers 函数，它会接收先前的 state 和 action，并返回新的 state。Redux的核心理念就是如何根据这些 action 对象来更新 state，强制使用 action 来描述所有变化带来的好处是你可以清晰地知道应用中到底发生了什么。如果一些东西改变了，你可以知道为什么变化，action 就是描述发生了什么的指示器。来看一下Redux在大屏展示中具体的使用场景：下面的截图是一个产品开发中非常常见的大屏展示界面示例。核心的数据源为一组销售数据，上方三个仪表板以及下方的表格组件共享同一个数据源，实现了数据明细显示以及各维度的数据统计。从图上来看，似乎已经具备了大屏展示的数据显示和统计功能，但是展示的数据是没有办法被编辑和修改的。此时，你可能会收到来自客户的灵魂拷问：“展示功能已经不错了，但是表格数据可以实时编辑更新吗？”图中的销售明细数据是用html表格直接显示的，如果要实现编辑，通常的做法是，我们挑 ...继续阅读 (26)

集算表 （Table Sheet）是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格，通过全新构建的关系型数据管理器结合结构化公式，在高性能表格的基础上提供排序、筛选、样式、行列冻结、自动更新、单元格更新等功能。什么是集算表（Table Sheet）?集算表是一个具有网络状行为和电子表格用户界面的快速数据绑定表的视图。众所周知Excel的工作表（Work Sheet）是一个自由式布局，基于单元格（Cell Base）的表格，适用于一些松散式的数据布局展示，布局上来说非常灵活，但对于固定格式的大批量数据展示，不具备优势。集算表不同于Excel的工作表，它是一个基于列（Column Base）的网状表格（Grid），适用于展示规则数据。同时它还具备了Excel工作表（Work Sheet）的用户界面和部分常见操作。并且支持Excel的部分计算功能。同时结合数据绑定的功能，对于大量固定格式的数据（例如数据库的表格）可以快速在前端进行展示。集算表的特点正如它的名字的三个字：集，算，表：集（Data Manager）：集的意思就是数据集记和管理。集算表在前端构建了一个叫做Data Manager的数据管理模块。该模块可以简单理解为一个前端的数据库，Data Manager负责与远端的数据中心进行通信，拉取远端的数据。在前端处理数据，例如数据表的定义，表间关系等。同时Data Mana ...继续阅读 (26)

123456789101112131415161718192021222324252627282930前端template： columns: [ { title: '序号', width: '60px', required: true, dataIndex: 'no', scopedSlots: { customRender: 'no' }, align: 'center', ellipsis: true, }]{{ (pagination.page - 1) * pagination.pageSize + index + 1 }}data:pagination: { pageSize: 10, ...pagination},后端请求：this.pagination = Object.assign({}, this.pagination, { page: data?.page, pageSize: data?.size, total: data?.total, current: data?.page});声明:本文采用BY-NC-SA协议进行授权 |WEB开发分享转载请注明转自 ...继续阅读 (60)

本期技术周刊一起了解 Javascript，欢迎大家阅读 ～文章推荐浅谈 Javascript 闭包// magnesium闭包的概念是有很多版本，不同的地方对闭包的说法不一维基百科：在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是在支持头等函数的编程语言中实现词法绑定的一种技术。MDN:闭包（closure）是一个函数以及其捆绑的周边环境状态（lexical environment，词法环境）的引用的组合。个人理解：闭包是一个函数（返回一个函数）返回的函数保存了对外变量引用JS 如何返回异步调用的结果？// 现实的理想技术在 JS 中处理异步调用的结果，最佳实践就是“异步转同步”：使用 Promise + async/await 语法关键字。在这里 async 总是与 await 成对出现，一个 async 函数总是返回一个 Promise，一个 await 关键字总是在尝试“解开”一个 Promise，结局要么等到有价值的数据，要么异步出现异步，什么也没有等到。为了避免出现异常，影响主线程的正常运行，一般要用 catch 规避异常。从 await-to-js 到 try-run-js// jump__jump之前在做 code review 时候发现有同事使用 try catch 包 ...继续阅读 (49)

最近群里有这样一个有意思的问题，大家在讨论，使用 CSS 3D 能否实现如下所示的效果：这里的核心难点在于，如何利用 CSS 实现一个立体的数字？CSS 能做到吗？不是特别好实现，但是，如果仅仅只是在一定角度内，利用视觉障眼法，我们还是可以比较完美的还原上述效果的。利用距离、角度及光影构建不一样的 3D 效果这是一种很有意思的技巧，在奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？我们曾经介绍过，当然，制作的过程需要比较多的调试。合理的利用距离、角度及光影构建出不一样的 3D 效果。看看下面这个例子，只是简单是设置了三层字符，让它们在 Z 轴上相距一定的距离。简单的伪代码如下：CSS3D$bright : #AFA695; $gold : #867862; $dark : #746853; $duration : 10s; div { perspective: 2000px; transform-style: preserve-3d; animation: fade $duration infinite; } span { transform-style: preserve-3d; transform: rotateY(25deg); animation: rotate $duration infinite e ...继续阅读 (35)

2023年1月，我和侯策老师共同打磨的书籍《现代JavaScript库开发：原理、技术与实战》终于正式出版了！在书籍定稿之际，我把底稿寄给了狼叔，感谢狼叔在百忙之中抽时间阅读了底稿，并为我写了推荐序，一下是推荐序的内容。狼叔推荐序我和海镜、侯策认识很久了，他们之前写的那本《React状态管理与同构实战》是新手入门React的好书，我非常喜欢。海镜不仅是大厂工程师、技术博主，还是开源爱好者。他开源了很多JavaScript库，如zepto.fullpage、template.js等。他搞的jsmini可圈可点，尤其难能可贵的是，他还编写了jslib-base——一个可以帮助开发者编写JavaScript库的工具库，这个库的特性涵盖了库开发的各个方面，非常实用。我对海镜很熟悉，对他做的事也比较熟悉，所以当我得知他正在写这本书的时候，我是非常开心且放心的。开心是因为，目前前端领域和Node.js领域都缺少这样的专精内容，我在《狼书》里是写过如何开发JavaScript库的，但限于篇幅未能深入介绍，这本书弥补了我的遗憾。放心是因为，他一直是一线的、热爱开源的前端专家，无论是能力、眼界、判断力还是协作能力，都非常不错，鉴于他之前所写的那本《React状态管理与同构实战》的情况，我相信他能够将JavaScript库开发技术讲清楚。事实上，本书的初稿也确实和我想的一样，章节分布清楚，内容详略得当 ...继续阅读 (64)

2023年1月，我和侯策老师共同打磨的书籍《现代JavaScript库开发：原理、技术与实战》终于正式出版了！在书籍定稿之际，有太多话想和大家说一下，思绪万千，不知从何说起。最终决定写一篇自序，记录一下这本书的由来，以及我在写作过程中的一些感悟。十年磨一剑十年，弹指一挥间。回首过去十年，我一直致力于开源库的开发和维护，一路走来，我也从这个领域的“小白”慢慢成长为“专家”。这十年，支撑我坚持在库开发领域耕耘的原因是热爱分享，我特别希望能把自己做的东西分享给别人，分享的内容既可以是课程、博客文章，也可以是代码。在我看来，一份分享出去的代码片段，就是一个开源库。十年来，前端技术推陈出新，新的开源库如雨后春笋般涌现，相信大部分读者都曾从这些开源库中受益。平日里，我们更多关注的是库的使用，很少关注库开发技术。其实，JavaScript库开发技术在这十年中也经历了快速发展，其中基于新的技术标准开发而成的库，我将其称为“现代JavaScript库”。由于前端技术发展迅速，如今开发一个现代JavaScript库并不容易，其中涉及非常多的知识、工具和经验。比如，库如何兼容日益复杂的前端环境，库如何使用打包工具，库的单元测试如何做，等等。正因为这种复杂性，目前npm上的开源库并不都是现代JavaScript库，很多开源库还在使用十几年前的相对比较原始的技术。除了依赖开发技术，将一个库开源还需要很多准备 ...继续阅读 (58)

2023年1月，我和侯策老师共同打磨的书籍《现代JavaScript库开发：原理、技术与实战》终于正式出版了！在书籍定稿之际，我把底稿寄给了克军老师，感谢克军老师在百忙之中抽时间阅读了底稿，并为我写了推荐序，一下是推荐序的内容。克军老师推荐序我们普遍觉得，在团队里负责开发和维护基础库的工程师都是“高手”。毕竟，能位于团队上游的人总会有种莫名的“优越感”。编写一个JavaScript库很难吗？不就是先把一段通用的代码抽离出来，再按照某种范式封装一下嘛！其实，要想真正回答这个问题，你可能需要先想想以下问题：为什么有些人写的库大受欢迎，而有些人写的库却没人使用？你为什么愿意使用某个库，你到底看重它什么？流行的库有什么共同点？所谓写“好”一个库，到底要符合什么条件？你有过“踩坑”经历吗，当时是什么心情？别人为什么愿意为你的项目贡献代码？怎么让自己写的库日后不成为“债”？如果你只是在自己的项目中抽离一些可复用的代码并将其封装成一个库，这个库可能只适用于比较单一的应用场景。但如果你希望更多的人也能用到这个库，那就要好好设计一番了。你要考虑稳定性、可维护性、安全性，编写一些攻击性测试用例，还要注重代码的可读性、易理解性。如果想扩大影响力，希望更多人参与项目维护，你必须重视库的架构设计、接囗设计、文档撰写、注释情况、代码风格等。不仅如此，你所用的工具也必须是当前最主流、最酷的。你要为库的使用者提供 ...继续阅读 (64)

年终总结 链接到标题 2016 计划读 5 本，实际读 13 本。 2017 计划 32 本，实际读完 23 本。 2018 计划 30 本，实际25本。 2019 计划 30 本，实际 43 本。 2020 计划 30 本，实际 40 本。 2021 计划 50 本，实际 47 本。 2022 计划 50本，实际 45 本。 已读 链接到标题 《候场》 《你不知道的JavaScript（上卷）》 《工作、消费主义和新穷人》 《开端》 《海边的房间》 《投资中最简单的事》 《认知觉醒》 《大话设计模式》 《啤酒事典》 《卧底经济学1》 《Python工匠》 《全职高手》 《一日三秋》 《Kubernetes网络权威指南：基础、原理与实践》 《心理罪》 《远程工作革命》 《假面的告白》 《历史深处的忧虑》 《诡秘之主》 《JavaScript权威指南（原书第7版）》 《幽默感》 《NUTANIX超融合基础架构权威指南》 《置身事内》 《分析与思考》 《决胜B端》 《搞定》 《潜规则（修订版）》 《从零开始的女性主义》 《如何阅读一本书》 《职场妈妈不下班》 《将夜（全十册）》 《应得的权利》 《大道朝天》 《暴雨下在病房里》 《Terraform：多云、混合云环境下实现基础设施即代码（第2版）》 《毫无意义的工作》 《士兵突击》 《可能性的艺术》 《九州·缥缈录》 《关于那个人的备忘 ...继续阅读 (53)