一代明君的小屋 - js
type: channel
link: https://yidaimingjvn.xyz/index.php/tag/js
items: npm install时出现Maximum call stack size exceeded错误如何解决？
items: 关于solidjs对对象或者数组使用createSignal，数据不响应的处理思路
items: 手工搭建一个solidjs环境-记npm及vite的使用
items: NPM vs. NPX
items: Object.defineProperty()使用示例
items: js报错 Cannot both specify accessors and a value or writable attribute
items: 【javascript】Object.defineProperty()方法以及get和set的使用
items: javascript-js汉字转拼音首字母
items: 一个基于html和js的sql编辑器
items: html5中contenteditable 光标_如何设置光标位置

npm install时出现Maximum call stack size exceeded错误如何解决？
type: item
date: 2025-06-10T01:43:00+08:00
description: 在执行npm install时遇到“Maximum call stack size exceeded”错误，通常是由于依赖版本冲突、循环依赖或node-sass等原生模块问题导致。首先尝试清除npm缓存（npm cache clean --force），然后删除node_modules和package-lock.json文件后重新安装依赖。如果问题依旧存在，考虑更新npm至最新版本（npm install -g npm@latest），或者使用npx npm-check-updates -u升级所有包到兼容版本。对于特定项目，指定合适的Node.js版本（如使用nvm切换版本）也能有效解决该问题。最后，检查package.json中是否存在不合理的依赖声明，避免循环依赖或过时版本引入的冲突。通过以上方法，大多数情况下可以成功解决此类错误。

关于solidjs对对象或者数组使用createSignal，数据不响应的处理思路
type: item
date: 2025-05-25T19:27:00+08:00
description: 问题来源对某个小玩意儿做开发的时候，发现如果使用数组来构建createSignal，会引发修改数据不响应的情况。示例：let [alterEvent,setAlterEvent] = createSignal( [ { "data":"数据1", "level":"1", }, { "data":"数据2", "level":"1", }, { "data":"数据3", "level":"1", }, { "data":"数据4", "level":"1", } ] )解决思路思路有两个：1.使用option配置来处理。2.使用Store来构建思路一：Solid 中的几个 API 将 "options" 对象作为可选的最后一个参数。createSignal 的选项对象允许您提供 equals 选项。默认情况下，当调用 signal 的 setter 时，根据 JavaScript 的 === 运算符，仅当新值实际上不同于旧值时，signal 才会更新（并导致依赖项重新运行）。const [getValue, setValue] = createSignal(initialValue, { equals: false });思路二：当访问嵌套对象时，store 将生成嵌套 store 对象，这适用于整个树。但是，这只适用于数组和普通对象。类没有被包装，所以像 Date、HTMLElement、RegExp、Map、Set 这样的对象不会像 store 上的属性一样被细粒度地响应。

手工搭建一个solidjs环境-记npm及vite的使用
type: item
date: 2025-05-17T17:52:00+08:00
description: 用于记录手工搭建一个solidjs环境的流程，后面忘记了懒得再去翻资料。默认已有node环境。安装vitenpm install vite配置package文件安装的vite功能，基本可以通过node_modules/.bin/下的vite脚本直接运行。也可以使用npx vite运行但是为了项目环境还是配置一下package文件。主要是配置scripts部分。这一部分本质也是直接运行两大系统的shell或者cmd脚本{ "scripts":{ "dev":"vite", "build":"vite build", "preview":"vite preview" } }配置index.htmlindex.html按照官方文档的意思是vite工具下的程序入口，直接创建在node项目根路径下。也可以通过配置vite.config.js的方式调整入口。参考：1.index.html 与项目根目录2.多页面应用模式注意导入solidjs的代码入口 test app 配置vite.config.js参考官方文档，在项目根目录下创建一个vite.config.js文件。简单构造一个配置。参考：vite官方配置文档import { defineConfig } from "vite" // vite.config.js export default defineConfig( { server: { port: 3000, open: true, proxy: {} }, base: '/', build: { outDir: 'dist', assetsDir: 'assets', assetsInlineLimit: 4096, rollupOptions: { output: { chunkFileNames: 'assets/js/[name]-[hash].js', entryFileNames: 'assets/js/[name]-[hash].js', assetFileNames: 'assets/[name]-[hash].[ext]' } } } } )安装vite插件vite-plugin-solid命令：npm install vite-plugin-solid调整vite.config.js,导入并追加插件配置import solidPlugin from vite-plugin-solid { plugins:[solidPlugin()], }安装solid并导入solid构造项目安装npm install solid-js babel-preset-solid在src目录下创建index.jsx和App.jsx文件编写基本程序1.index.jsximport { render } from 'solid-js/web' import App from './App' render(() => <App />, document.getElementById('app'))2.App.jsxfunction App(){ return ( test ) } export default App;构造好以后直接启动，不出意外的话可以使用了

NPM vs. NPX
type: item
date: 2025-05-17T15:54:51+08:00
description: 文章来源NPM vs. NPX，傻傻分不清楚 ——程序员晚天npm 和 npx 在前端开发中都会时常被用到，npm 大家相对熟悉，npx 是什么则有一定的迷惑性，时常在安装依赖的命令中会看到，但是又不一定知道 npx 到底是什么，和 npm 有什么关系和区别。NPM vs. NPX简单来说，npm 是一个 node 包管理器，npx 是一个 Node 包执行器。NPM 是 Node 包管理器。NPM 内置在 Node.js 中，通过命令行工具 CLI 来和线上 NPM 数据库进行交互，这个数据库被称为 NPM Register，NPX 是一个 Node 包执行器，该 Node 包可以是本地也可以是远程的。允许开发者在无需安装的情况下执行任意 Node 包。NPX 安装方法：npm install -g npx执行本地 Node 包时，NPX 会到node_modules/.bin路径和环境变量 $PATH 里面，检查命令是否存在。执行远程 Node 包时，NPX 会将 Node 包下载到一个临时目录中，使用以后再删除。举个栗子下面我们通过 NPM 和 NPX 执行 Node 包的例子来更具象的了解 NPM 和 NPX 的不同。使用 NPM 执行将 Node 包安装到本地：npm install package_name通过本地路径执行 Node 包：./node_modules/.bin/package_name也可以通过 package.json 中的 scripts 命令来执行 Node 包：package.json:{ "name": "Project-Name", "version": "x.y.z", "scripts": { "package-name": "package-name" } }执行 scripts：npm run package-name使用 NPX 执行通过 NPX 则简单很多，无需安装 Node 包就可以通过一个命令执行 Node 包。执行执行如下命令：npx your-package-name总结NPM 是一个 Node 包管理器，NPX 是一个 Node 包执行器。Node 的执行也可以 NPM 来完成，但是必须进行本地安装，通过定位本地路径或者配置 scripts 来能执行。NPX 则通过一个简单命令大大简化了包运行的成本，既可以运行本地包，也可以远程包，无需安装包也可以执行该包，这就有效避免了本地磁盘污染的问题，节省了本地磁盘空间。参考资料Difference between NPM and NPXnpm vs npx — What’s the Difference?npxnpx 使用教程 - 阮一峰的网络日志

Object.defineProperty()使用示例
type: item
date: 2024-08-11T11:07:00+08:00
description: let upload_var = { "_upload_sw":0, }; // 1 为开启可以上传文件 0为关闭不能上传文件 Object.defineProperty(upload_var,'upload_sw', { configurable:true, set:function(newVal){ this._upload_sw = newVal; if(newVal == 1){ let submit_button = getIDD("submit_button") submit_button.className="upload_button" console.log('set:'+this._type) }else if(newVal == 0){ let submit_button = getIDD("submit_button") submit_button.className="not_submit_button" } }, get:function(){ return this._upload_sw } })

js报错 Cannot both specify accessors and a value or writable attribute
type: item
date: 2024-08-11T10:48:37+08:00
description: 问题来源let upload_var = { "upload_sw":0 }; // 1 为开启可以上传文件 0为关闭不能上传文件 Object.defineProperty(upload_var,'upload_sw', { configurable:true, value:0, set:function(newVal){ if(newVal == 1){ let submit_button = getIDD("submit_button") submit_button.className="upload_button" console.log('set:'+this._type) }else if(newVal == 0){ let submit_button = getIDD("submit_button") submit_button.className="not_submit_button" } }, get:function(){ console.log('get:'+this._upload_sw) return this.value } })解决方法在使用Object.defineProperty() 定义对象属性的时候，如果设置了 set 或 get, 就不能设置 writable 和 value 中的任何一个

【javascript】Object.defineProperty()方法以及get和set的使用
type: item
date: 2024-08-11T10:46:26+08:00
description: Object.definProperty()方法用来给一个对象添加新属性,或者修改已有属性举个例子：const obj = { a: 3, }; Object.defineProperty(obj, "a", { value: 4, writable: true, // 是否可以修改属性的值 configurable: true, // 配置项是否可以修改,就是说writable和enumerable是否能够修改 enumerable: true, // 是否可以枚举,就是说在遍历的时候能不能遍历出来 }); console.log(obj.a); // 4通过这个例子可以看到Object.defineProperty（）这个方法接收3个参数，第一个参数是要修改的对象， 第二个参数是要修改的对象中的某个属性， 第三个参数是一个函数。第一个和第二个参数没啥说的，主要说下第三个参数，第三个参数是一个函数，里边有四个配置项（属性描述符）value，它的值就是你将要修改的属性的值writable， 是否只读，看下边代码，容易理解：/** *创建一个obj对象，并给a赋值3 *通过Object.defineProperty方法将a的值修改为4 *将writable的值改为false，让这个a的属性不能被修改 *之后试着将obj的a修改为5 *但是还是打印出4 */ const obj = { a: 3, }; Object.defineProperty(obj, "a", { value: 4, writable: false, configurable: true, enumerable: true, }); obj.a = 5; console.log(obj.a); // 4configurable，这个属性决定了writable，configurable，enumerable这三个属性的值能否被配置，简单点理解就是如果configurable的值为true，那么它们三个的值就不能被修改，configurable的值默认是trueenumerable， 对象中的这个值能否被枚举，看下代码：const obj = { a: 3, }; // 给obj新增了一个b属性,并给他赋值为4,然后将enumerable的值改为false Object.defineProperty(obj, "b", { value: 4, writable: true, configurable: true, enumerable: false, }); // 这时候打印obj,发现并不能看到b:5 console.log(obj); //{ a: 5 } //但可以通过obj.b访问到 console.log(obj.b); // 4 /** * enumerable为true的情况下打印： * console.log(obj); //{ a: 5, b: 4 } */get和set刚开始在网上搜索相关资料的时候，有时候会搜到getter和setter，当时还是有点迷的，其实getter和setter就是把值拿出来或者存进去，是一个概念，而get和set是方法，是执行这个概念的方法。拿下边这个代码举例：// getter和setter const obj = { a: 0, b: 1 } //getter就是把a的值从obj里拿出来 console.log(obj.a); //setter就是给obj的b赋值 obj.b = 3再来具体看看get和set方法如何使用的const obj = { a: 0, b: 1, }; Object.defineProperty(obj, "c", { get() { this.b++; return this.a; }, set(a) { this.c = a; }, }); // 给obj的a赋值就会触发a的set方法，这时候a的值就变为33 obj.a = 33 // 这时候访问了obj的c,会调用c的get方法,让b自增,并返回a的值,这时候c的值就是33 console.log(obj.c) // 但需要注意的是,这时候并没有给c赋值，所以并没有触发c的set方法 // obj.c = 22 // 那么就会触发c的set方法,这时候给c赋值了，所以会访问c的set方法get方法默认会在这个对象身上查找该属性,如果能找到,就会使用它,否则就会去这个对象的原型链(prototype)上去查找.如果还找不到,就会返回undefined文章来源：版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。原文链接：【javascript】Object.definePrope…

javascript-js汉字转拼音首字母
type: item
date: 2024-03-26T15:55:00+08:00
description: 引用js汉字转拼音首字母代码 汉字转拼音首字母

一个基于html和js的sql编辑器
type: item
date: 2024-03-15T14:19:00+08:00
description: 前言上一个编辑器因为光标定位等问题，开发失败。于是转变了思路。将展示和输入两个部分分开了。改造为了上面盖有一层透明的文本框，下面则是一层用于显示的div元素。更新2024-04-17修改了编辑器输入框的逻辑。追加数据表格。源代码 sql运行器 △执行sql ○缓存sql <text-area id="sql-input-edit" class="sql_input_edit" Spellcheck="false"></text-area> 消息框状态： 状态码：

html5中contenteditable 光标_如何设置光标位置
type: item
date: 2024-03-14T16:20:21+08:00
description: 本文来源html5中contenteditable 光标_如何设置光标位置正文在js中，光标是一个对象，当你选中某个元素的时候才会出现光标对象。比如：我们点击一个输入框，实际会产生一个选中对象-selection，这个对象我们可以通过indow.getSelection()来获取；selection只存在1个，所以当你切换到其他输入框额时候，selection同样会跟着变化的。在选中的情况下有一个光标叫做range，和selection一样。在contenteditable 属性中，当点击该区域的时候，光标默认显示在区域内容最后一位。如： 这是内容哦！ 需要点击才出现光标，而且它的位置在内容区域的最后面，如果我们需要打开页面默认就出现，而且出现在第一个位置上，该如何实现呢？下面将给出js的实现方法：方法一:var p = document.getElementById('box'), s = window.getSelection(), r = document.createRange(); r.setStart(p, 0); r.setEnd(p, 0); s.removeAllRanges(); s.addRange(r);如果你需要把元素清空，或者对应内容为空的时候，你可以这样做：var p = document.getElementById('box'), s = window.getSelection(), r = document.createRange(); p.innerHTML = '\u00a0'; r.selectNodeContents(p); s.removeAllRanges(); s.addRange(r); document.execCommand('delete', false, null);方法二：var box= document.getElementById('box'); setTimeout(function() { box.focus(); }, 0);给box设置获取焦点。然后放置setTimeout中，延迟执行。