张坤的博客

介绍运算符包括赋值，比较，算数，位运算，逻辑，模板字符串，三元等。 空值合并从 chrome 80 开始支持，空值合并运算符（??）是一个逻辑运算符，当左侧的操作数为 null 或者 undefined 时，返回其右侧操作数，否则返回左侧操作数。 与布尔逻辑或运算符（||）不同，布尔逻辑或运算符会在左侧操作数为假值时返回右侧操作数。也就是说，如果使用 || 来为某些变量设置默认值，可能会遇到意料之外的行为，比如为假值 ‘’、0 或 NaN 时同样会返回右侧操作数。1234567null ?? 'default' // default'' ?? 'default' // ''1 ?? 'default' // 1NaN ?? 'default' // NaN'' || 'default' // defaultNaN || 'default' // default 与布尔逻辑或（||）、布尔逻辑与（&& ...

介绍随着浏览器的更新，有些功能，我们使用浏览器自带的 API，而不必依赖第三方库，或使用复杂的代码就可以实现。 复制内容到剪贴板document.execCommand 只能复制选中状态的文本（getSelection()），而 Clipboard API 提供了完整的响应剪贴板命令（剪切、复制和粘贴）与异步读写系统剪贴板的能力。但当前 document 需要处于焦点状态，例如在控制台使用会报错。 1const copyToClipboard = async text => await navigator.clipboard.writeText(text); 数字转中文将阿拉伯数字转成中文数字。 123const fmt = new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec'); // 大批量处理数字时可以重复使用const toCnNumber = number => fmt.format(number);toCnNumber(123); // 一二三 金额转中文将阿拉伯数字转成中文金额。 12const ...

介绍<canvas> 最早由 Apple 引入 WebKit，用于 Mac OS X 的 DashBoard，随后被各个浏览器实现。如今，所有主流的浏览器都支持它。Canvas API 提供了一个通过 JavaScript 和 HTML 的 <canvas> 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas 适合绘制大数据量图形元素的图表（如热力图、地理坐标系或平行坐标系上的大规模线图或散点图等），也适合实现某些视觉特效。它还能能够以 png、jpg 或 webp 格式保存图像。Canvas 提供了强大的 Web 绘图能力，所以我们要学会使用它。 创建一个画布默认情况下 <canvas> 元素没有边框和内容。默认大小为 300 × 150px（宽 × 高），可以使用 width 和 height 属性指定。 1<canvas id="canvas"></canvas> 获取画布和半径为了在 <canvas> 上绘制图形，我们需要使用一个 ...

介绍比如，自定义了一个按钮： 1<ui-button type="primary">按钮</ui-button> 如何在外部修改已定义的 Web Components 的 Shadow DOM 内部样式？下面是两种方法。 使用 CSS 变量在 Shadow DOM 内部使用 CSS 变量定义样式，然后在使用 Web Components 的地方改变 CSS 变量的值即可改变 Shadow DOM 内部样式。 12345678910111213141516171819class UiButton extends HTMLElement { constructor() { super(); const shadow = this.attachShadow({ mode: 'open' }); shadow.innerHTML = ` <style> button { padding: 9px 1em; ...

介绍将一个无序列表转化为一个带图标的可折叠/展开的菜单。下面是三种实现方法。 使用 Web Components 首先使用 customElements.define() 方法注册一个元素。 1customElements.define('expanding-list', ExpandingList, { extends: 'ul' }); 第三个参数是一个包含 extends 属性的配置对象，指定了所创建的元素继承自哪个内置元素，可以继承任何内置元素。 然后，定义这个元素的实现类 ExpandingList，并继承 HTMLUListElement。 123456789101112131415161718192021222324252627class ExpandingList extends HTMLUListElement { constructor() { self = super(); self.querySelectorAll('li').forEa ...

SubmitEvent.submitter表示发送 submit 事件的表单元素。通常是 type 属性是 submit 的 <input> 元素或者 type 属性是 submit 的 <button> 元素，也可能是启动提交过程的其他元素。 123456form.addEventListener('submit', (event) => { const { submitter } = event; console.log(submitter); // 阻止默认的表单提交行为 event.preventDefault();}); 如果提交不是由表单控件触发的（使用 HTMLFormElement.requestSubmit() 方法），则 submitter 的值是 null。 表单外 HTML 元素通过绑定事件调用 HTMLFormElement.submit() 方法——不会触发表单的 submit 事件（也不会触发表单验证），所以不能通过 SubmitEvent 来获取 submi ...

介绍软件许可证（或软件许可协议）是一种具有法律性质的合同或指导，由软件作者与软件用户签订，用以规定和限制软件用户使用、拷贝、修改和再发布软件（或其源代码）的权利，以及软件作者应尽的义务。 常见许可证及其差异根据许可证使用时间，软件许可证可分为终身许可证和年度许可证。 终身许可证，顾名思义，便是一旦与软件开发商达成协议，签订合同后可终身无限制的使用该软件。此类许可证多见于个人用户领域。 年度许可证，指的是客户与软件开发商商签订协议，按年付费来使用该软件。此类软件许可证多见于商业软件领域。相比终身许可证，年度许可证不太像是购买软件，而更像是租赁软件使用，不过却更为灵活。 分发（distribution）指将版权作品从一个人转移到另一个人或公司，如果你是自己使用，不提供给他人，就没有分发。云服务（SaaS）不构成分发，即你使用开源软件提供云服务，不必提供源码。但是，Affero GPL (AGPL) 许可证规定云服务也必须提供源码。 常见的许可证主要有 GPL、LGPL、AGPL、MPL、MIT、BSD 和 Apache，各个许可证还包含不同版本。根据使用条件不同，可以将这些许可证大 ...

介绍jQuery 是当今网络上使用最多的库，虽然 jQuery 相对较小且运行速度相当快，但它仍然代表应用程序中的一定量的开销。jQuery 提供的大部分功能现在都可以通过原生 DOM API 实现，并且在当今的 Web 应用程序中可能是不必要的。一些开发者认为，jQuery 可以保护我们不受浏览器兼容的影响，而事实上，在 IE8 之后，浏览器自己就很容易处理兼容问题了，而在 IE 时代之后，浏览器在兼容方面会做得更多。 fetch 替代 AJAX 方法$(selector).load12345$('#selector').load('/path/to/template.html');// 等价替换const response = await fetch('/path/to/template.html');const body = await response.text();document.querySelector('#selector').innerHTML = body; $.get1234567 ...

介绍JavaScript 是一股强大的力量，它在网络上提供了最大份额的交互性。它将行为从简单推向复杂，并使网络上的事情比以往任何时候都多。 然而，增加使用 JavaScript 来提供丰富的用户体验是有代价的。从下载、解析和编译 JavaScript 的那一刻起，到它执行的每一行代码，浏览器必须协调各种工作以使一切成为可能。对 JavaScript 做得太少意味着您可能无法实现用户体验和业务目标。另一方面，在 JavaScript 上做得过多意味着您将创建加载缓慢、响应迟缓以及让用户感到沮丧的用户体验。 今年，我们将再次关注 JavaScript 在 Web 中的作用，展示我们对 2022 年的发现，并为创造令人愉悦的用户体验提供建议。 我们加载了多少 JavaScript？首先，我们将评估 JavaScript Web 开发人员在 Web 上发布的数量。毕竟，在进行改进之前，必须对当前情况进行评估。 每页加载的 JavaScript 字节量的分布。 与去年一样，今年标志着向浏览器发送的 JavaScript 数量又一次增加。从 2021 年到 2022 年，移动设备增长了 8% ...

介绍CSS 是用于布局、格式化网页和其他媒体的语言。它和用于结构的 HTML 和用于行为的 JavaScript 是网络的三种主要语言。 在过去的几年中，出现了一系列新的 CSS 功能。其中许多是从开发人员已经使用 JavaScript 或预处理器所做的事情中获得灵感的，而另一些则提供了几年前不可能完成的事情的方法。提供新功能是一回事，但开发人员是否真的在他们的生产网页和应用程序中使用它们？ 类名 与 2020 年和 2021 年一样，网络上最受欢迎的类名是 active，Font Awesome 的 fa，fa-* 前缀仍然排在第二和第三。 wp-* 类名已经攀升至第四位，它们现在出现在 31% 的页面上，2021 年为 20%，这些在新的 WordPress 块编辑器中使用，还有诸如 has-large-font-size 的类名。 clearfix 已经从前 20 名中消失了，现在只出现在 10% 的页面上，这非常清楚地表明基于浮动的布局正在从网络上消失。 ID content 再次成为最流行的 ID 名称，其次是 footer 和 header。以 fb_ 开头的 ID 表 ...