一代明君的小屋 - JavaScript
type: channel
link: https://yidaimingjvn.xyz/index.php/tag/JavaScript
items: npm install时出现Maximum call stack size exceeded错误如何解决？
items: 关于solidjs对对象或者数组使用createSignal，数据不响应的处理思路
items: vue3中关于v-modal和:value两种模式的问题
items: npm运行出现 'NODE_OPTIONS' 不是内部或外部命令，也不是可运行的程序
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: 基于原生JavaScript的loading效果组件

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 上的属性一样被细粒度地响应。

vue3中关于v-modal和:value两种模式的问题
type: item
date: 2024-12-27T18:41:00+08:00
description: Vue3 子组件修改父组件传过来的值1、在父组件中，找到引用的子组件，在引用中加入v-model例如：子组件是demo,需要穿的值为num这个有个温馨提示，（v-model +冒号+需要穿的值）这个v-model可以写多个<demo v-model:num="num"></demo> //例如 可以写多个 需要修改多个传入的值 <demo v-model:num="num" v-model:arr="arr"></demo>2、在子组件中引用注意：在vue3中 defineProps 需要引用一下import { defineProps } from 'vue' const prop=defineProps({ num: { type: Number, default:0 } })3、定义一个emit来修改这个值defineEmits也需要引入一下，一定要加update,冒号后面就是传过来的值的那个字段const emit= defineEmits(['update:num'])4、使用方法直接在你需要的事件里，比如：click修改const click=()=>{ emit('update:num',123) //123 代表是将num值修改为123 }v-model及:value及v-bindv-modelv-model 是 v-model:value 的缩写，通常用于表单上的双向数据绑定（表单接受值 value，故v-model默认收集的就是 value ，所以缩写直接省略 value），可以实现子组件到父组件的双向数据动态绑定。数据不仅能从data流向页面，还可以从页面流向data。:value:model 是 v-bind:model 的缩写，可以实现将父组件的值传递给子组件，但是子组件不能传给父组件，无法双向绑定。v-bindv-bind:value 可以简写为 :value ，数据只能从data流向页面。

npm运行出现 'NODE_OPTIONS' 不是内部或外部命令，也不是可运行的程序
type: item
date: 2024-12-23T21:22:00+08:00
description: 状况：PS F:\programme\java\dataease-2.10.3\core\core-frontend> npm run dev > dataease@0.0.0 dev > NODE_OPTIONS=--max_old_space_size=4096 vite --mode dev --host 0.0.0.0 'NODE_OPTIONS' 不是内部或外部命令，也不是可运行的程序 或批处理文件。原因：windows环境下没有办法正确识别这个参数处理方法：使用cross-env，通过虚拟环境来运行。Npm install cross-env --save-dev修改package.json "scripts": { "dev": "cross-env NODE_OPTIONS=--max_old_space_size=4096 vite --mode dev --host 0.0.0.0" }

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> 消息框状态： 状态码：

基于原生JavaScript的loading效果组件
type: item
date: 2023-12-18T10:30:00+08:00
description: /** * Loading * 用于创建一个加载框 */ class Loading{ title = ""; dom = ""; body = document.body; constructor(title="加载中..."){ this.title = title; this.dom = this.createLoadDom() } createLoadDom(){ // 加载窗口容器 let box = document.createElement("div") box.style.position = "fixed" box.style.display = "flex" box.style.flexDirection = "column" box.style.justifyContent = "center" box.style.alignItems = "center" box.style.background = "rgba(0,0,0,1)" box.style.width = "100vw" box.style.height = "100vh" box.style.top = "0px" box.style.zIndex = "2000" box.style.display = "None" // 加载窗口提示字符 let text = document.createElement("div") text.innerText = this.title text.style.fontSize = "1.4em" text.style.color = "#fff" text.style.marginBottom = "0.4em" // 加载动画 document.styleSheets[0].insertRule( `@keyframes n_line_gd { 0% {left: -20%;} 20% {left: 0%;} 40% {left: 50%;} 50% {left: 100%;} 60% {left: 50%;} 80% {left: 0%;} 100% {left: -20%;} } `, 0 ); let l_line = document.createElement("div") l_line.style.width = "20%" l_line.style.height = "22px" l_line.style.border = "1px solid #fff" l_line.style.padding = "1px 1px 1px 1px" l_line.style.overflow = "hidden" let n_line = document.createElement("div") n_line.style.width = "20%" n_line.style.height = "22px" n_line.style.backgroundColor = "#fff" n_line.style.position = "relative" n_line.style.left = "-20px" n_line.style.animation = "n_line_gd 2s linear infinite" l_line.appendChild(n_line) box.appendChild(text) box.appendChild(l_line) this.body.appendChild(box) return box } play(callback=()=>{},...args){ this.dom.style.display = "flex" setTimeout(()=>{ callback(...args) },2) } end(){ this.dom.style.display = "None" } } let ld = new Loading() ld.play(funcation) // 启动加载效果 ld.end() // 关闭加载效果