你看到的“⼀”不是真正的“一”1'⼀'==='一'// false转Unicode之后：⼀：\u2f00一：\u4e00发现两个一的Unicode是不一样的，这两个字符分别为部首「U+2F00 ⼀」和汉字「U+4E00 一」，也就是说前者是符号，后者是汉字，具体可参阅为什么在字库里存在一些「长得一样」的文字? - 知乎。如何解决可以使用String对象下的normalize函数，normalize参数有四种NFC：正则分解，然后进行正则构成NFD：仅正则分解NFKC：兼容性分解，然后进行规范性组成NFKD：兼容性分解返回值：含有给定字符串的 Unicode 规范化形式的字符串。具体可参阅String.prototype.normalize() - JavaScript | MDN可使用如下方法将符号转义为正常的汉字1'⼀'.normalize('NFKC') ==='一'// true ...继续阅读 (54)

大家好，我卡颂。你是否好奇 ——codesandbox是如何在线运行代码的？要回答这个问题，我们先看看前端项目是如何在本地跑起来的。简单来说分为3步：执行npm install安装依赖使用打包工具（比如webpack）打包、编译代码（如果使用Vite会省去打包的步骤，但会执行预构建）将步骤2的产物通过script标签注入页面codesandbox能在线运行代码，显然他也实现了上述步骤，具体来说，codesandbox内置了2个在线服务：npm解析服务 —— 用于实现上述步骤1在线打包服务 —— 用于实现上述步骤2、3本文我们来聊聊如何实现并部署自己的npm解析服务。欢迎围观朋友圈、加入人类高质量前端交流群，带飞codesandbox简要工作原理下面是一个常见的codesandbox界面，包含两部分：左边的文件系统、代码编辑器右边的效果预览区域其中效果预览区域是一个iframe，对于上图中的例子，iframe的地址是https://pjdp86.csb.app/。如果你打开这个地址，会发现他就是代码的预览效果：但这并不意味着codesandbox帮我们部署了项目。实际上，这个地址中前端代码是在页面打开后再编译、打包的。打开codesandbox项目时经常看到的下述界面，就是前端编译代码的画面：具体来说，当我们打开一个codesandbox项目，iframe对应地址初始化时，会执行如下 ...继续阅读 (59)

前言欢迎关注同名公众号《熊的猫》，文章会同步更新，也可快速加入前端交流群！最近在协助小伙伴解决问题时，在项目中都会遇到一些 “砍树型” 的写法，这些写法容易让后续简单的需求变得复杂，都说 "前人栽树后人乘凉"，但项目中有些写法是真的让后人乘不了凉的，甚至还得被迫加入 “砍树队伍”。本篇文章就列举一些，在vue项目中的 “砍树型” 的写法，以及分析一下如何写才更合适 “栽树”，如果你有更好的方案，欢迎在评论区分享！！！砍树 & 栽树由于项目源码不便于直接展示，下面会使用同等的代码实例来替代。其项目技术栈为：vue2 + vue-class-component + vue-property-decorator + typescript。滥用 watch砍树型写法@Watch('person', { deep: true }) doSomething(){} @Watch('person.name', { deep: true }) doSomething(){} @Watch('person.age', { deep: true }) doSomething(){} @Watch('person.hobbies', { deep: true }) doSomething(){}第一次看到这个写法我有点迷茫，但想了想好像也不难理解：首先person.x 的部分监听是为了处理针对不同 ...继续阅读 (57)

最近，在 Steam 玩一款老游戏（生化危机 4 重置版），其中，每当游戏转场的过程中，都有这么一个有趣的 Loading 动画：整个效果有点类似于日食效果，中间一圈黑色，向外散发着太阳般的光芒。本文，我们将尝试使用 CSS，还原这个效果。整个效果做出来，类似于如下两个动画效果这样：实现主体效果其实，整个效果，去掉中间黑色的遮罩，是这个样子的：所以，我们的目标就变成了，如何使用 CSS，实现上述这个图形效果。角向渐变到这里，思考一圈 CSS 中的各种属性，和这个图形能挂上钩的，几乎就只有角向渐变conic-gradient了。我们可以利用多重角向渐变，试着画一个类似的图形 --从单个颜色到透明，再多次循环铺满 360° 的整个图形：body { background: #000; } div { width: 200vw; height: 200vh; background: repeating-conic-gradient( rgba(0, 136, 204, 0.77), rgba(150, 157, 100, 0.72) 2%, rgba(230, 247, 200, 0.82) 3%, transparent 4%, ...继续阅读 (75)

dom-to-image库可以帮你把dom节点转换为图片，它的核心原理很简单，就是利用svg的foreignObject标签能嵌入html的特性，然后通过img标签加载svg，最后再通过canvas绘制img实现导出，好了，本文到此结束。另一个知名的html2canvas库其实也支持这种方式。虽然原理很简单，但是dom-to-image毕竟也有1000多行代码，所以我很好奇它具体都做了哪些事情，本文就来详细剖析一下，需要说明的是dom-to-image库已经六七年前没有更新了，可能有点过时，所以我们要看的是基于它修改的dom-to-image-more库，这个库修复了一些bug，以及增加了一些特性，接下来我们就来详细了解一下。将节点转换成图片我们用的最多的api应该就是toPng(node)，所以以这个方法为入口：function toPng(node, options) { return draw(node, options).then(function (canvas) { return canvas.toDataURL(); }); }toPng方法会调用draw方法，然后返回一个canvas，最后通过canvas的toDataURL方法获取到图片的base64格式的data:URL，我们就可以直接下载为图片。看一下draw方法：functio ...继续阅读 (64)

Reference:http://blog.csdn.net/jmyue/article/details/11060003 大项目往往是有很多人一起完成的，然而每个人都有自己的style，导致整个项目的代码不仅存在不符合语言规范的情况，而且读起来非常困难。因此，这样的项目中都会引入Checks... ...继续阅读 (64)

Reproduce:Ctrl + H, Select "File Search", will encounter eclipse kinds of bug/error alert:problems encountered during text searchReason:It's because C... ...继续阅读 (65)

分享一下，整体理清的思路，关于Eclipse中代码的 自动完成，可配置自定义Library文件地址其实这个思路的通用的，不管任何Eclipse支持的编辑语言，都可以适用。下面已Javascript来举例：整体的行为设置路径：Eclipse 》Preference（主界面） 》Javascript 》... ...继续阅读 (61)

function NLDate_parseString(sDate, bDoAlert) { var m=0; var d=0; var y=0; var val = sDate; var fmterr = ""; var year=""; var year_char_index, month_char_index, day_char_index; var rtnDate = nu... ...继续阅读 (66)

var div = document.createElement("DIV"); div.innerHTML= "……"; document.getElementById(id).appendChild(div); 这个innerHTML 在Netsuite中可以变成一个 由suitelet生成的html 通过页面的即时Ajax交互 。实现一个很好的用户体验。 另外给出 页面的小例子： <..;. ...继续阅读 (63)

win.document.onmousemove = new Function("event", "parent.childPanesMouseMove(getMouseX(event)); scExistingOnMouseMove(event)"); 做个标记 ...继续阅读 (54)

var i=0 function drawTable(tableId) { var table=eval(tableId); var newCell=table.rows[0].insertCell(); newCell.innerHTML='' alert("又加了一列！") } //-->..;. ...继续阅读 (62)

序 方法名称 使用说明 1 concat(数组1,数组2,...,数组N) 将多个数组结合成一个新的数组 2 join(分隔字符) 将数组结合成一个字符串，用特定字符来分开 3 pop() 将数组内最后一个组件删除，并返回该组件内容 4 push(组件1,组件2,...,组件N) 将一个或多个组件补在数组最后面，并返回最后一个组件内容 5 reverse() 将数组内所有组件的索引次序反... ...继续阅读 (72)

Ajax除了自己要写js代码外，同样也免不了要使用其它第三方js库。当你在为提高了用户体验，做出了很绚丽的效果而欣喜的时候，是否想过优化一下JS的效率,比如微软的live，其中的js做了压缩处理。JS的速度分为两种，下载速度和执行速度。今天就先来说说下载速度。要想js的下载速度快，就需要尽量减小js文件的大小。这里我们可以使用一个工具ESC(ECMAScript cruncher)来帮我们完成这个... ...继续阅读 (57)

来源：http://www.zhuanhuan.net/qita/unixtime.html js 取得 Unix时间戳 Unix时间戳(Unix timestamp)，或称Unix时间(Unix time)、POSIX时间(POSIX time)，是一种时间表示方式，定义为从格林威治时间1970年01月01日00时00分00秒起至现在的总秒数。Unix时间戳不仅被使用在Unix 系统、类Unix... ...继续阅读 (61)

document.getElementById('items_div').clientHeight 示列代码： div.style.top = document.getElementById('div__header').clientHeight+document.getElementById('div__body').clientHeight+document.getElementById('i... ...继续阅读 (67)

var n=1.143212 (n.toString().split(".")[1].length 这个是把n 变为string 在用length 判断就可以了。 ...继续阅读 (54)

While working with Java Script, all of us must have surely run into the case where we need to loop through an array and break the running loop if a ce ...继续阅读 (68)

function Logon() { if (navigator.userAgent.indexOf("MSIE") != -1) { parent.frames[1].location.replace("https://totemsuite.webex.com.cn/mw0306l/mywebex/login/login.do?siteurl=icdsecurity&Rnd;="+Ma... ...继续阅读 (50)

NetSuite’s javascript engine is Rhino(I.e. Rhino 1.7), we can not run node-based code on NetSuite, however,write your code as, ...继续阅读 (59)

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight ...继续阅读 (40)

免费体验 Gpt4 plus 与 AI作图神器，我们出的钱 体验地址：体验JavaScript 中的 Promises 是什么？如果你偶然发现了这篇文章，你可能已经对 promises 很熟悉了。但对于那些新接触 JavaScript 的人来说，我们来详细解释一下。从本质上讲，Promise 对象表示异步操作的最终完成或失败。有趣的是，当promise被创建时，其值可能不会立即可用。const promise = new Promise((resolve, reject) => { // 一些异步操作 if (/* 操作成功 */) { resolve(result); } else { reject(error); } });它们有3种状态：Pending（待定）：这是初始状态，既没有实现也没有被拒绝。Fulfilled（已实现）：当 promise 成功完成并产生值时的状态。Rejected（已拒绝）：当发生错误并且 promise 中的操作不成功时的状态。一旦 promise 被解决，你可以使用.then()来处理结果，使用.catch()来管理其执行过程中出现的任何错误。promise .then(result => { console.log('成功：', result); } ...继续阅读 (59)

九格宫抽奖相信大家都玩过，今天就用 JavaScript 写个九宫格抽奖玩玩。让中奖不再是梦！1.预览效果效果图为屏幕录制软件生成，以至于出现滚动不连贯。实际运行中不会出现不连贯的滚动效果2.完整代码代码可直接复制运行查看效果（图片记得更换）DOCTYPE htmlJavaScript 实现九宫格抽奖body{ background-color: #2c9afc; } #container { width: 330px; height: 340px; margin: 10% auto; border: 7px solid #99d4ff; border-radius: 10px; padding: 2%; } #list { width: 330px; height: 340px; list-style: none; margin: 0; padding: 0; } #list li, #list span { width: 100px; height: 100px; float: left ...继续阅读 (79)

Signals 在目前前端框架的选型中遥遥领先！国庆节前最后一周在 Code Review 新同学的 React 代码，发现他想通过 memo 和 useCallback 只渲染被修改的子组件部分。事实上该功能在 React 中是难以做到的。因为 React 状态变化后，会重新执行 render 函数。也就是在组件中调用 setState 之后，整个函数将会重新执行一次。React 本身做不到。但是基于 Signals 的框架却不会这样，它通过自动状态绑定和依赖跟踪使得当前状态变化后仅仅只会重新执行用到该状态代码块。个人当时没有过多的解释这个问题，只是匆匆解释了一下 React 的渲染机制。在这里做一个 Signals 的梳理。优势对比 React，基于 Signals 的框架状态响应粒度非常细。这里以 Solid 为例：import { createSignal, onCleanup } from "solid-js"; const CountingComponent = () => { // 创建一个 signal const [count, setCount] = createSignal(0); // 创建一个 signal const [count2] = createSignal(666); // 每一秒递增 1 const interva ...继续阅读 (63)

滚动是我们网站的用户最常用的操作之一，添加滚动效果是增强用户体验的好方法。例如，对于内容很长的页面增加进度提示，在用户滑动页面的时候增加动画效果等等，这些很小的改进都可以帮助用户更好的使用网站的功能。这篇文章收集了8个实现网站滚动效果的 CSS & JavaScript 代码分享给大家，希望能够帮助到你。Section by Sectionby NaoyaAll Indications Say You’re Scrollingby MadeByMikeYou Can Scroll If You Want Toby Ryan MulliganThe Incredible Shrinking Headerby Blake BowenSlide to the Rightby EttricsFlying Colorsby JP NothardTurning Vertical into Horizontalby SitePointAnimate on Scrollby Snik ...继续阅读 (82)

1. IntroductionWhen you access a website, it needs to load many elements or components and this will take a few times (based on the network and server workload), for giving users a better experience, we can use a pre-loading to show the page is in loading status.2. How it’s workingI have written an article for creating a loading in Angular withngx-loading, the loading for waiting for data return from API, but this time, I will show you a different way and create a global loading withcss.The pre-loading will show before every page is loaded to avoid the case that the page is blank before ...继续阅读 (82)

Electron： The Electron framework lets you write cross-platform desktop applications using JavaScript, HTML and CSS. It is based on Node.js and Chromiu ...继续阅读 (50)

希望对大家重新认识 Javascript 有所帮助。 代码: /** * 定义一个全局对象, 属性 Version 在发布的时候会替换为当前版本号 */ var Prototype = { Version: '@@VERSION@@' } /** * 创建一种类型，注意其属性 create 是一个方法，返回一个构造函数。 * 一般使用如下 * var X = Class... ...继续阅读 (46)

一篇非常好的javascript Function应用文章。 原文地址： http://www.xfocus.net/articles/200712/963.html ----------------------------------------------------------------------------------------------- 一、概述 javascri... ...继续阅读 (44)

如何优化JavaScript脚本的性能 作者：ShiningRay @ Nirvana Studio 随着网络的发展，网速和机器速度的提高，越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解释型语言，所以能无法达到和C/Java之类的水平，限制了它能在客户端所做的事情，为了能改进他的性能，我想基于我以前给JavaScript做过的很多测试来谈谈... ...继续阅读 (49)