随笔分类 -  JavaScript

摘要：从零剖析一个俄罗斯方块项目：Canvas 游戏引擎 + Electron 桌面封装 一个"网页即产品、封装即交付"的完整案例：无框架、无构建步骤、零图片资源的游戏核心，加上一层薄薄的 Electron 外壳，就变成了一款可安装的 Windows 桌面应用。 一、项目定位：一鱼两吃的架构 这个项目最值 阅读全文

摘要：如果领导说“不用做断点续传，只要显示进度条”，那绝对是个好消息！因为实现单纯的下载进度条，完全不需要后端做任何额外的支持。 至于能不能支持多个文件同时显示进度条，答案是完全可以，而且实现起来非常灵活。 下面为你详细拆解一下原理和实现思路： 🛠️ 为什么不需要后端额外支持？ 只要你的下载请求是通过前 阅读全文

摘要：demo： https://github.com/foxcharon/Vue2-Resumable-Upload-Demo-IndexedDB 一、背景与痛点 前端下载大文件时，我们通常的做法是一行 fetch 拿到 response，转成 Blob，再丢给一个隐藏的 <a> 标签触发下载。这套逻辑 阅读全文

摘要：简单直接的回答是：是的，pipe 函数本质上就是对 reduce 的一种“函数式组合”封装。 你提到的“reduce 已经实现了第一个函数的返回值是第二个函数的参数”，这正是 pipe 想要达到的核心效果，但 pipe 通过封装，让这种逻辑变得更符合人类直觉（从左到右的阅读顺序），并且隐藏了 red 阅读全文

摘要：const pipe = (...fns) => input => fns.reduce((val, fn) => fn(val), input) ，这个函数是啥意思？ 这个 pipe 函数是 JavaScript 中实现函数流水线（Function Pipeline）的经典模式，它的作用是将多个函 阅读全文

摘要：要使用Lodash实现对象数组按integrals字段的特殊排序逻辑（A > B > A,B），可按以下步骤操作： 解决方案代码 const _ = require('lodash'); function sortIntegrals(arr) { return _.sortBy(arr, (item 阅读全文

摘要：这是一个很刁钻的需求。 用两个日期选择器拼接的方式做类似需求，做动态设定范围很容易； 日期范围选择器静态设定范围也很容易； 但是又要日期范围选择器，又要动态设定范围就很麻烦。 还好我找到（抄到）了一个分享。 但我不喜欢直接复制粘贴，所以我们分析一下这个代码——我实验过了，是可以用的。 data() 阅读全文

摘要：单选： $(".fjsx").on("click", ".gzqy-nr-list", function () { $(".fjsx .gzqy-nr-list").removeClass("current"); $(this).addClass("current"); }) 多选： $(".fxd 阅读全文

摘要：我司有个React项目用到了leaflet，然后我需要在电脑上跑这个项目。 装好依赖，结果启动时编译失败了。 和这个帖子（https://github.com/PaulLeCam/react-leaflet/issues/900）的错误一样。 ./node_modules/@react-leafle 阅读全文

摘要：二维数组转一维数组： //二维数组转一维数组 function flatten(arr) { return [].concat(...arr.map(x => Array.isArray(x) ? flatten(x) : x)) } 对象数组互斥去重： //对象数组互斥去重 function ge 阅读全文

摘要：去重： //数组去重 function unique(arr) { for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { if (arr[i] == arr[j]) {//第一个等同于第二个 阅读全文

摘要：代码： // 生成随机字符图片 function draw(show_num) { var canvas_width = document.getElementById("canvas").clientWidth; var canvas_height = document.getElementByI 阅读全文

摘要：代码： (function(baseFontSize, designWidth) { document.documentElement.style.fontSize = (document.documentElement.clientWidth * baseFontSize) / designWid 阅读全文

摘要：经过初步排查，发现几个现象： 1 只在页面总长度超过屏幕长度时发生。 2 只在开启键盘时发生。 3 只在固定定位的页面顶部输入框获取焦点（focus）时发生。 4 只在屏幕有滚动时发生。 缺陷有两个现象： 1 顶部DOM掉下来了，在大约屏幕中间的位置。 2 此时如果继续滚动屏幕，顶部DOM不会再维持 阅读全文

摘要：1 Cannot find module '@/components/Footer' from 'src/pages/user/Login/index.jsx' jest.config.js加上moduleNameMapper可解决。 参考：https://stackoverflow.com/que 阅读全文

摘要：单元测试做什么 编写用来做单元测试的js文件，并执行。 适合对谁做： 存放静态方法的js文件，如utils/utils.js 页面组件，即React Component 不适合对谁做： 模板自带的js文件（不需要做改动，而且这种一般跑单测会有问题） 单元测试文件的特点： 一般有特定名称，如*.tes 阅读全文

摘要：众所周知，与原生js不同，jquery方法 $() 会得到一个jquery对象，而不是js对象。 这个方法获取的对象可以用来执行其他jquery方法处理业务逻辑； 也可以通过下标获取js DOM。 当这个方法没有匹配到DOM的时候，则对象里面没有DOM元素。 $("div span").click( 阅读全文

摘要：var obj = { 1: [2, 3], 2: [1, 4, 5], 3: [1, 7, 8], 4: [2, 7], 7: [4, 8], } var 起点 = 1 var 终点 = 8 var f = 起点 => 终点 => 数据 => 路径 => { if (起点 == 终点) retur 阅读全文

摘要：如题。 (function () { let tree = { "id": 0, "label": "all", "children": [ { "children": [ { "children": [ { "id": 210, "label": "dashboard_panel" }, { "c 阅读全文

摘要：为了把 SVG标注 代码抽成一个库，我要学习一下 ztree 是怎么写的。 开始正文。 这只是一个很简单的版本，以后可能会详细分析... 整个 ztree 是个自执行函数。 因为 ztree 是基于 jQuery 的，所以挂在 jQuery 对象下。自己写库的时候，不需要 jQuery 的话一般挂在 阅读全文