weixin_46504400的博客

原创 如何修改node_modules里的代码

多半是没有找对文件，例如 我们修改的是 lodash里面的某个API，一般我们先找个 lodash里的 package.json 文件，然后看 main（入口文件） 的指向，如果没有 package.json 文件，那应该就是默认的 index。这种很好懂，就是直接进 node_modules 中，找到那个包的代码，并修改对应的地方的代码，然后重启项目，就能达到我想要的效果。如果在，就说明补丁生效了。其实这个时候你本地已经使用到了你修改后的代码了，但问题是怎么让你的同事也同步到你的修改后的代码。

原创 LoadMoreSelect触底加载与远程搜索

【代码】LoadMoreSelect触底加载与远程搜索。

原创 前端引入新的依赖文件中含有mjs文件时

随着Node.js的流行，JavaScript的使用范围也不断扩大，而随之而来的就是对不同文件后缀的需求。在这篇文章中，我们将探讨.js、.mjs和.cjs这三种常见的JavaScript文件后缀之间的区别。当你在Node.js环境中使用.mjs文件时，需要在package.json文件中显式地指定"type": “module”，以告诉Node.js解析器该项目使用的是ES模块。.js是JavaScript的默认文件后缀，也是最常用的文件类型。使用.mjs文件时，需要在HTML文件中通过。

原创 el-date-picker组件自定义可选择的时间范围

在这个示例中，我们将type属性设置为daterange，以便选择一个日期范围。在使用el-date-picker组件时，如果您想要限制用户只能选择今天和前72小时作为时间范围，可以通过设置disabledDate属性来实现。这个属性接受一个函数，该函数接收一个日期对象，并返回一个布尔值，指示该日期是否应该被禁用。disabledDate方法是一个自定义函数，它接收一个日期对象，并返回一个布尔值。这个函数检查传入的日期是否早于3天前或晚于今天，如果是，则返回true，表示该日期应该被禁用。

原创 对象的扩展

如果对象的方法使用了取值函数（getter）和存值函数（setter）则name 属性不实在该方法上面，而是在该方法属性的描述对象的get和set属性上面，返回值是方法名加上get和get。Object.assign复制的属性是有限制的，只复制源对象的自身属性（不复制继承属性）。ES5引入了Object.keys方法，返回一个数组，成员是参数对象自身的（不包含继承的）所有可遍历属性的键名。也就是说，如果源对象某个属性的值是对象，那么目标对象复制得到的是这个对象的引用。Object.assign方法实行的。

原创 HTTP教程

HTTP (，HyperText Transfer Protocol）是一种用于，超媒体信息系统的应用层协议。HTTP 是万维网（WWW）的数据通信的基础，设计目的是确保客户端与服务器之间的通信，是互联网上最常用的协议之一。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法，通过 HTTP 或者 HTTPS 协议请求的资源由统一资源标识符（Uniform Resource Identifiers，URI）来标识。

原创 element table 点击某一行中按钮加载

在Element UI中，实现表格（element-table）中的这种功能通常涉及到数据处理和状态管理。1.表格组件：使用el-table组件，并且为每一行的按钮添加事件监听器，如@click。

原创 echarts 数据重新加载,原数据依然存在图表上

监听数据是否真正变化了。

原创 前端实现分页

totalItems计算属性返回数据列表的总长度，totalPages计算属性根据totalItems和pageSize计算出总页数。在这个示例中，我们定义了一个名为items的数据属性，它包含了要分页的数据列表。同时，可以使用计算属性来处理分页逻辑，例如计算总页数、当前页码等。handlePageChange方法会在分页组件触发page-change事件时被调用，并更新currentPage数据属性。请注意，这只是一个基本的示例，您可能需要根据您的具体需求进行调整，例如添加加载状态、错误处理等。

原创 vue2错误

无法在“data（）”中使用计算属性，因为它在初始化之前。

原创 数组的扩展

他的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true 的成员，然后返回该成员。ES6提供了3个新方法-----entries(),keys()和values() -----用于遍历数组。ES2016引入了该方法。数组实例的findIndex方法的用法于find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。JavaScript的函数只能返回一个值，如果需要返回多个值，只能返回数组或对象，扩展运算符提供了解决这个问题的一种变通方法。

原创 echarts图表英文状态下图标的横向坐标轴显示中文

【代码】echarts图表英文状态下图标的横向坐标轴显示中文。

原创 函数的拓展

尾调用（Tail Call）是函数式编程的一个重要概念，本身非常简单，一句话就能说清楚，就是指某个函数的最后一步是调用另一个函数。上面的代码中，函数f的最后一步是调用函数g，这就叫做尾调用。以下情况都不属于尾调用。//情况一return y;//情况二//情况三g(x);上面的代码中，情况一是调用函数g之后还有赋值操作，所以不属于未调用，即使语义完全一样，情况二也属于调用后还有操作，即使写在一行内，情况三等同于下面的代码。g(x);

原创 vue2 缓存组件＜keep-alive＞

此外，这些生命周期钩子函数不会在组件首次挂载时触发，因为它们只对被缓存的组件有效。是一个内置组件，它允许您缓存不活动的组件实例，以便在需要时可以更快地重新渲染它们。当一个组件被包裹在标签中时，它的状态会被保留，而不是在每次切换时都重新创建。这意味着，如果您的组件有子组件，这些子组件也会随着父组件一起被缓存。组件提供了一些生命周期钩子函数，这些钩子函数可以在组件被缓存或激活时触发。这通常发生在组件被移除出DOM树时，或者当组件被手动销毁时。这通常发生在组件不再需要显示时，例如当它被另一个组件替换时。

原创 git status

要取消本地的提交（commit），你可以使用 git reset 命令。这将取消最后一次提交并删除与该提交相关的本地更改。请小心使用这个命令，因为它会永久删除本地的更改。这会取消最后一次提交，但将更改保留在工作目录中，以便你可以进行进一步的编辑和重新提交。这会将HEAD指针移到前一次提交，并且你的更改将保留在工作目录中。输入git stats 查看信息。输入git status后 显示。

原创 this.$refs 调用子组件的方法注意需要在子组件被创建之后

在这个例子中，this.$refs[‘tableShow’]会在created钩子函数被调用时返回undefined，因为此时子组件还没有被创建。在这个例子中，this.$refs[‘tableShow’]会在所有子组件都被创建之后返回子组件的实例。如果您满足了这些条件，但是仍然无法访问到子组件，那么可能是因为您正在尝试在一个生命周期函数中访问。如果您正在尝试在created钩子函数中访问子组件，那么可能是因为此时子组件还没有被创建。，而这个函数在子组件被创建之前就已经被调用了。

原创 变量的结构赋值

解构赋值可以方便地将一组参数与变量名对应起来。

原创 let和const命令

以上代码报错也是因为暂时性死区。然后在代码块之外调用这两个变量，结果let声明的变量报错，var声明的变量返回了正确得值，这表明，let声明的变量只在其所在的代码块内有效，以上代码的愿意是，if代码块的外部使用外层的tmp变量，内部使用内层的tmp变量，但是，函数f执行后，输出结果为undefined，原因在于变量提升导致内层的tmp变量覆盖率外层的tmp变量。总之，暂时性死区的本质就是，只要进入当前作用域，所要使用的变量就已经存在，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

原创 vue2中mixins的用法和需要注意的地方

当我们创建 app 实例时，会先执行 myMixin 中的 created 钩子函数，然后再执行 app 组件自身的 created 钩子函数。此外，如果多个组件使用了同一个混入，那么这个混入将会在所有使用它的组件中共享。当我们创建app实例时，会先执行全局混入中的created钩子函数，然后再执行局部混入中的created钩子函数，最后执行app组件自身的created钩子函数。在Vue 2中，Mixins 是一种非常有用的特性，它允许您定义可复用的代码，这些代码可以在多个组件之间共享。

原创 在Vue中，可以通过使用＜slot＞元素和name属性来创建具名插槽。这样您就可以为一个组件的不同部分定义不同的内容。 以下是一个简单的示例：

在这个示例中，我们定义了一个名为的组件，它有两个具名插槽：header和footer。然后，当我们在其他地方使用组件时，我们可以通过元素的v-slot指令来为这些具名插槽提供内容。在这个示例中，我们为header和footer具名插槽提供了不同的内容。当组件渲染时，它会将提供的内容插入到相应的插槽位置。在Vue中，可以通过使用元素和name属性来创建具名插槽。这样您就可以为一个组件的不同部分定义不同的内容。

原创 npx 有什么作用跟意义？为什么要有 npx？什么场景使用？

npm 只能管理包的依赖，npx 则可以快捷的运用包中的命令行工具和其他可执行文件，让项目内部安装的模块用起来更方便。当执行 $ npx 相关命令的时候，npx 会先本地找（可以是项目中的也可以是本机的）寻找这个 command。这样就不会污染本机、永远使用最新版本的 dependency。没找到：直接下载最新版本（这里是在缓存里），完成命令要求。使用完之后就会完全清除，不会在本机或项目留下任何东西。找到了：就用本地的版本。

原创 Git撤回指定commit不保留更改

在执行完git revert命令后，Git会创建一个新的commit来撤销指定commit的更改，但这个新的commit不会自动包含更改。这里的<commit_hash>是你想要撤销的commit的哈希值。替换<commit_hash>为你想要撤销的commit的哈希值。如果你不想立即提交，可以省略git commit命令，这样你可以先检查更改，然后再进行提交。

原创 el-input上按回车 界面自动刷新/跳转 问题原因分析及解决办法

当用户点击其中一个子元素时，不仅该子元素的事件处理器会被调用，而且其所有祖先元素（包括div元素）的事件处理器也会被调用，因为事件会“冒泡”到它们那里。在事件冒泡过程中，当一个事件在一个元素上触发时，该事件会首先在这个元素上触发。如果这个元素的父元素也注册了事件处理器来处理相同的事件，那么这个事件也会在这个父元素上触发。然而，有时您可能希望阻止事件冒泡，以便只在特定的元素上处理事件。事件冒泡是一个非常有用的概念，因为它允许您在一个较高的层次上处理事件，而不是在每个可能的元素上都设置事件处理器。

原创 前端复制内容到剪贴板上

在这个函数中，我们首先将传进来的数组转换为字符串。对于数组中的每个对象，我们将其materialName和activationCode属性用制表符分隔，然后将所有的字符串用换行符连接起来。最后，我们调用navigator.clipboard.writeText方法，将字符串写入到剪贴板。如果写入成功，我们会打印出"复制成功"的消息，否则，我们会打印出错误信息。这个API可以用来读取和写入剪贴板的内容。注意，这个API需要在HTTPS环境下才能工作，因为在HTTP环境下，浏览器会阻止访问剪贴板。

原创 vue2搜索组件点击搜索把搜索条件传进兄弟组件进行调用接口

然后我们在SearchComponent中添加了一个输入框和一个按钮，当用户点击这个按钮时，会触发一个search事件，并传入当前的输入值。最后，我们在父组件的methods中定义了一个handleSearch方法，它会调用ResultComponent的fetchResults方法，并传入搜索查询。然后我们在模板中添加了一个列表，用于显示搜索结果。在Vue.js中，您可以使用$emit方法来触发一个事件，然后在父组件中监听这个事件，并根据需要调用兄弟组件的接口。

原创 实现一个方法把中间的数据变成*****

您可以通过遍历字符串并替换中间的字符为"*"来实现这个功能。

原创 vue2 的动态组件

在这个例子中，我们首先导入了两个组件ComponentA和ComponentB。然后我们在data中定义了一个变量currentComponent，其初始值为’ComponentA’。当点击按钮时，我们会调用changeComponent方法来改变currentComponent的值。由于元素的is属性是响应式的，所以它会根据currentComponent的值来决定渲染哪个组件。在Vue.js中，您可以使用元素和动态组件来根据数据的变化渲染不同的组件。

原创 v-bind=“$attrs“和v-on=“$listeners“的用法

v-bind=“$attrs”：这个指令的作用是将父组件传递给子组件的所有属性绑定到子组件的根元素上。这样做的好处是，即使子组件没有显式声明这些属性，它们仍然可以访问到这些属性。v-on=“$listeners”：这个指令的作用是将父组件传递给子组件的事件监听器绑定到子组件的根元素上。通常，我们在编写组件时，会希望组件的API能够更加灵活，以便适应不同的使用场景。通过这种方式，我们可以让子组件接收到父组件传递的任何属性和事件，从而增强了组件的通用性和灵活性。子组件直接this.

原创 echarts图表y轴两边都设置了但是只与左侧的数据对应

接着，我们定义了两个y轴，分别命名为Y Axis 1和Y Axis 2，并设置了一些基本的属性，如最小值、最大值和分割数目。注意，我们还为右侧的y轴设置了position: ‘right’，以将其放置在图表的右侧。这样，左右两侧的y轴就会分别与不同的数据对应，从而实现双y轴的效果。在这个例子中，我们首先创建了一个Echarts实例，并将其挂载到一个id为"main"的div元素上。如果您想要在y轴的两边都显示数据，您可能需要创建两个y轴，并分别为它们设置数据。

原创 vue2中props属性设置一个对象或数组的默认值

在Vue.js中，如果您想要为一个props属性设置一个对象或数组的默认值，您应该使用一个函数来返回这个默认值。这是因为对象和数组是引用类型，直接将它们作为默认值可能会导致预设的默认值被所有实例共享，这不是我们想要的结果。在这个示例中，我们定义了一个名为myObjectProp的props属性，其类型为Object。然后，我们提供了一个默认值函数，它返回一个新的对象。这样，每个实例都会有自己的默认值对象，而不是共享同一个对象。

原创 如何防范XSS？

输入验证：对所有用户输入进行验证，确保其内容符合预期的格式和类型。使用Content Security Policy (CSP)：这是一种额外的安全层，用于检测和缓解某些类型的攻击，包括XSS和数据注入攻击。使用成熟的框架和库：使用像React、Vue、Angular这样的现代前端框架和库，它们内置了一些防范XSS的特性。内容安全策略（CSP）：这是一个额外的安全层，用于检测和缓解某些类型的攻击，包括XSS和数据注入攻击。定期更新和修补您的系统：保持您的系统和依赖项都及时更新，以避免已知的安全漏洞。

原创 js中0/0是NAN ，[ ]和null 都是假

在这个例子中，只有当variable既不是[]也不是null时，条件语句才会为真，并打印出"Variable is not an empty array or null"。在JavaScript中，[]和null都是假值。这意味着，如果您使用||运算符来连接它们，那么只要左侧的值是假值，那么整个表达式的结果就会是右侧的值。如果您想检查一个值是否为NaN，您可以使用全局的isNaN()函数，它会返回true如果值是NaN，否则返回false。在这个例子中，[]是一个假值，所以整个表达式的结果是null。

原创 js中检查一个对象是否为{}

在这个例子中，isEmptyObject函数接收一个对象作为参数，并使用Object.keys(obj)来获取该对象的所有键。然后，它检查这些键的数量是否为0。如果是，则返回true，表示对象是空的。否则，返回false。在JavaScript中，您可以使用Object.keys()方法来检查一个对象是否为空。如果Object.keys(obj)返回的数组长度为0，则该对象是空的。

原创 一个对象里的属性有值就传给接口为‘’就不传给接口怎么实现

在这个例子中，我们创建了一个名为findNonEmptyProperties的函数，它接受一个对象作为参数。然后我们使用for…in循环遍历这个对象的属性。在循环内部，我们使用if语句来检查属性的值是否既不为null也不为undefined也不为空字符串。如果满足这个条件，我们就打印出属性的名字和它的值。当我们用testObj测试这个函数时，它将打印出name和age的属性，因为它们的值既不为null也不为undefined也不为空字符串。in循环遍历对象的属性。然后使用if语句检查属性的值是否不为空。

原创 前端接口返回400

当您遇到400 Bad Request错误时，您可以通过检查请求的详细信息来确定具体的原因。：如果API需要认证，而客户端没有提供有效的凭证，服务器可能会返回400 Bad Request错误。：如果客户端尝试访问的资源在服务器上不存在，服务器可能会返回400 Bad Request错误。：如果客户端发送的请求在服务器处理时超时，服务器可能会返回400 Bad Request错误。：如果客户端发送的请求体太大，服务器可能会返回400 Bad Request错误。

原创 实现一个Tooltip 文字提示

在HTML和JavaScript中，您可以使用CSS和JavaScript来实现一个简单的Tooltip（文字提示）。

原创 angular 公共数据怎么写

在这个例子中，我们创建了一个名为DataService的服务，它有一个sharedData属性，以及两个方法：setData和getData。在ComponentA中，我们注入了这个服务，并使用setData方法来设置共享数据。在ComponentB中，我们也注入了同一个服务，并使用getData方法来获取共享数据。在Angular中，您可以通过服务（Service）来共享数据。template: 在这里插入代码片…

原创 npm ERR! code EINTEGRITY

3、最后再去执行npm install进行安装，发现就可以正常安装了，这时候，会发现有新生成的package.lock.json文件。1、删除项目package-lock.json文件。以上是运行npm install 安装依赖报的错。2、执行清理缓存指令。

原创 three.js基础

原创 three.js入门笔记

https://www.cpengx.cn/ three官网地址这个是他的官网，布置了three官网。阻尼系数就让它有了惯性 可以通过拖拽鼠标 滚动滚轮 控制相机。最后的效果，今天刚刚起步学习的老陈打码的视频。添加坐标轴 x,y,z轴方便观察。