涵一-CSDN博客

原创 JS注意事项

1、如果数组中的某一项的值是null 或者undefined，那么该值在join()、toLocaleString()、toString()方法返回的结果中以空字符串表示。

2019-05-15 14:44:08 544

原创前端mp3文件转wav文件的实现

运行test.js文件，报错“An error occurred: Error: Cannot find ffmpeg”，如下图所示。

2023-12-04 16:52:23 1084

插槽使用不仅仅存在于父子组件间，当涉及跨级使用时如何处理呢？这里我们以示例的方式进行说明。有一爷爷辈（Level1）组件嵌套了爸爸辈（Level2）组件，爸爸辈组件中又嵌入了儿子辈（Level3）组件，现需要在爷爷辈组件中设置孙子组件中插槽的内容，实现方式如下：儿子（level3）组件：<template> <div> <h1>谁的{{goods}}？</h1>  <s

2021-12-02 15:20:21 6521

原创 js中静态方法、原型方法、实例方法

js静态方法和原型方法的主要区别是其被访问的对象不同：构造函数的静态方法只能被构造函数访问，不能被其实例访问；构造函数的原型方法只能被其实例访问，不能被构造函数访问；请看下面的示例，将说明二者被访问的对象不同。示例：// 构造函数function People() {}// 静态方法People.say = function() { console.log("People say: Hi!")}// 原型方法People.prototype.eat = functi

2021-11-19 14:50:59 2639 1

原创 npm安装本地包

1、npm安装本地包1）安装本地包的方式：npm install 待安装包的相对路径2）安装示例现有一项目，其根目录下有一个私有npm包（“my-test-npm”），需将该私有包添加为项目依赖包。现有项目根目录结构，如下图所示添加依赖执行命令（npm install ./my-test-npm），如下图所示：package.json文件依赖包添加成功后，package.json中可见该依赖包信息2、npm卸载本地包npm uninstall 待卸载包的相对路径...

2021-11-11 15:31:11 19011 2

原创 package.json bin的作用

package.json中bin可用于创建命令，其创建命令的步骤如下：1）新建bin目录，创建timestamp文件#!/usr/bin/env nodevar progarm = require('commander');var changeFileName = require('./changeFile');//命令版本号progarm.version('0.0.1');//help命令progarm .command('help') .description('显示使用

2021-08-19 18:09:44 830

原创 npm link用法

npm link可以将本地npm模块和本地项目建立链接，方便在本地进行npm模块调试。1、npm模块和项目建立链接1）相同目录下链接项目和npm模块在同一个目录下，可以直接使用相对路径链接# test-module为本地npm模块npm link ../test-module2）不同目录下链接项目和npm模块在不同目录下，先将npm模块链接到全局，再进入项目链接npm模块。将npm模块链接到全局# 进入npm模块目录cd xxx/xxx/test-module# 将该模块链接到全局

2021-08-19 15:27:23 1656

原创如何查看Vue CLI 3 项目的 webpack 配置信息

查看vue cli3项目的webpack配置信息npx vue-cli-service inspect --mode [production|development]导出vue cli3项目的webpack配置信息到文件npx vue-cli-service inspect --mode [production|development] >> fileName

2021-07-06 14:08:52 556

原创使用lib库模式打包vue组件及组件引用

1、lib库模式打包vue组件语法：vue-cli-service build --target lib --name libName [entry]示例：vue.config.js配置：module.exports = { configureWebpack: { output: { libraryExport: 'default' } }}打包vue组件：npm run lib执行打包命令后，可看到项目根目录下生成了含有vue组件文件的lib目

2021-06-18 11:36:08 8398 2

原创 js算法题

1、如何获取数组的最深层次/*** 获取数组最深层次* @param - arrData : 数组*/function getArrayMaxlevel(arrData) { let maxLevel = 0 function arrayLoop(data, level) { data.forEach(item => { item.level = level if (level > maxLevel) { maxLevel =

2021-05-11 17:09:50 241

原创 js性能优化

1、数据存储的位置会对代码性能产生影响，为避免性能问题，应注意以下几点：1）变量在作用域中的位置越深，访问时长越长，如若多次调用深层次的变量，可以将该变量赋值给局部变量；2）嵌套的对象成员会影响性能，尽量少用。...

2021-04-29 17:13:17 241

原创 js中对象参数的传递

js中对象参数传递都是按值传递，当参数为对象时，传递的是对象指针，函数中改变对象参数的值时，会影响函数外的该对象。但为对象参数重新赋值时，相当于改变了其指针指向，将其指向了其它内存地址，故自然不会影响函数外的同名对象。示例1：函数内改变对象参数的值，会影响到函数外该对象var person = { name: "Lucy"}function fn(obj){ obj.name = "Lilei"}fn(person);console.log(person.name); // 输

2021-03-28 19:56:31 5036

原创同一网站下sessionStorage共享问题

最初的时候误认为只要是同一网站下所有页面共享sessionStorage，后来发现事情不是这样的。页面是否共享sesstionStorage与打开方式有关系：通过点击链接或window.open打开的新标签页与当前页面是同一个session；其它方式单独新开页面，会初始化一个新的session，即使同一网站下，他们也不属于同一个session。譬如同一网站下有A、B两个页面，AB页面中均添加key为detail的sesstionStorage（A页面：sesstionStorage.setItem(“de

2021-03-28 18:39:36 2516

原创 history模式的单页面应用刷新后页面404的解决办法

一、问题描述采用history模式的vue的单页面应用，刷新时404。问题分析：vue-router设置的路径不是真实存在的路径，故页面刷新后访问的资源在服务端找不到二、解决办法1、本地调试时，解决404的办法webpack配置文件修改：module.exports = { //... devServer: { historyApiFallback: true, // 自动将404响应跳转到首页入口文件 index.html }};在devServer里面有个hist

2021-02-01 14:36:12 4216

原创 v-for中key属性的作用

v-for中key属性的值应唯一，起到身份认证的作用，避免v-for“就地更新”的策略。官方说法是：当 Vue 正在更新使用 v-for渲染的元素列表时，（没有key属性）它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。<!-- 示例代码: 没有key属性的v-for

2021-01-21 15:59:37 4944

原创 css实现内容两端对齐

问题描述：因行边缘出现符号或其它情况导致行边缘出现多余的空白，如何解决内容区域边缘不期望的空白呢？解决办法：用css实现两端对齐，解决行边缘出现的空白问题。text-align: justify;...

2020-12-24 10:29:39 2447

原创 css 缩小图片后，图片变模糊的解决办法

问题描述：样式设置图片宽高后，图片缩小变的模糊了。如何解决图片模糊问题？解决办法：样式表中加入以下样式即可解决img { image-rendering:-moz-crisp-edges; image-rendering:-o-crisp-edges; image-rendering:-webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode:nearest-neighbor;}...

2020-12-08 11:18:25 10002 3

原创如何限制element-ui的message只弹出一个

页面同时出现多个提示框不是很美观，那么如何限制同一时刻仅出现一个弹窗呢？解决方案：每次弹窗都会出现类名为el-message的元素，通过判断该元素是否存在来限制是否弹新窗。1）创建message.js文件，代码如下：// message.jsimport { Message } from 'element-ui'const showMessage = Symbol('showMessage')class gtMessage { success(options, single=true)

2020-11-17 21:31:08 1803

原创 css实现垂直居中

1、父元素高度确定的情况下通过transform实现垂直居中<style> .box-wrap { background-color: red; width: 300px; height: 300px; padding: 20px; } img { width: 100%; position: relative; top: 50%; transform: translateY(-5

2020-11-17 17:56:06 98

原创 vue-router如何在新窗口打开页面

vue-router在新窗口打开页面的方法：let routeUrl = this.$router.resolve({ name: "detail", query: { id: item.id },});window.open(routeUrl.href, '_blank');

2020-11-17 10:40:05 299

原创 vue热更新慢的解决办法

1）安装插件：‘babel-plugin-dynamic-import-node’npm install babel-plugin-dynamic-import-node -D2）修改配置文件：babel.config.jsmodule.exports = { env: { development: { plugins: ['dynamic-import-node'] } }}

2020-10-26 13:36:52 1813

原创 vue多页面应用如何针对其中的某个页面进行单独打包

一、应用场景：多个项目需要用到共同的组件，这时用多页面vue应用再适合不过了。但是这多个项目需要分别部署在不同服务器上，所以需要我们针对每个项目（即每个页面）进行单独打包。二、单独打包某个页面：这里我们以单独打包vue多页面应用中的其中一个页面（detail.html）为示例进行说明。1）创建新的打包模式：新建文件".env.detail"# set ENVNODE_ENV = 'production'# 需要打包的页面PAGE_NAME = 'detail'2）配置打包指令：修改pac

2020-10-26 11:30:10 6981

原创 vue项目依赖文件拆分

需求背景：在构建vue单页面项目时，会将所有依赖打包成一个文件，如果依赖文件过大，会影响页面渲染。为了好的用户体验我们需要对依赖文件进行拆分，那么如何拆分呢？解决方案：修改webpack的配置文件externals，从输出的依赖文件中排除某些依赖包，将被排除的依赖包单独引入到html页面中。示例：1）webpack配置文件修改externals: { 'vue': 'Vue', 'element-ui': 'ElementUI',}2）去除main.js中element-ui的引

2020-10-22 10:45:52 978

原创 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location

报错：Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location解决办法：在路由文件中加入如下代码，即可解决import VueRouter from "vue-router";//pushconst VueRouterPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (to

2020-10-16 11:02:58 3703

原创前端实现内容拷贝功能

点击元素实现内容拷贝功能，代码如下：<div id="copyEl" onclick="handleCopy('18288880000')">18288880000</div><script> function handleCopy(data) { var oInput = document.createElement("input"); oInput.style.border = "0 none"; oInput.style.color

2020-10-15 14:37:29 616

原创 IE9浏览器ajax请求error的解决办法

问题描述：网站在chrome、ie10+等浏览器均访问正常，但在ie9中所有跨域的ajax请求都失败，请求直接进入error。解决办法：设置IE9浏览器安全属性，启用【通过域访问数据源】选项；设置完成后需要重启浏览器才能生效。设置步骤如下图：...

2020-10-09 17:11:43 761

原创 window10下navicat11版本过期后如何继续使用

问题：window10下navicat11版本过期后如何继续使用？解决方案：步骤1）：首先win+R，输入regedit步骤2）：找到目录：HKEY_CURRENT_USER\Software\Classes\CLSID，将该目录下面有info的文件夹删除。如步骤2操作后不起作用，再执行以下操作：找到目录：HKEY_CURRENT_USER\Software\PremiumSoft,删除该目录下的data文件夹。...

2020-10-05 15:43:17 1945 3

原创如何让网站快速变灰

利用css滤镜，可使网站快速变灰，实现代码如下：html {　　filter: grayscale(100%);　　-webkit-filter: grayscale(100%);　　-moz-filter: grayscale(100%);　　-ms-filter: grayscale(100%);　　-o-filter: grayscale(100%);　　filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.

2020-09-03 11:12:26 315

原创 css3前缀自动补全

1、安装自动补全css3前缀的插件：autoprefixernpm install -D autoprefixer2、修改package.json文件// package.json文件部分代码"browserslist": [ "> 1%", "last 2 versions", "ie > 8"]3、添加.postcssrc.js文件//.postcssrc.jsmodule.exports = { plugins: { autoprefixer:

2020-09-01 09:48:16 806

原创 CSS修改浏览器默认滚动条

css修改默认滚动条代码：/*滚动条宽度*/.box-wrap::-webkit-scrollbar { width: 4px;}/*滚动条里面小方块*/.box-wrap::-webkit-scrollbar-thumb { border-radius: 5px; -webkit-box-shadow: inset005pxrgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.2);}/*滚动条里面轨道*/.box-wrap::-w

2020-08-28 17:00:40 1078

原创浏览器页面渲染过程

1、浏览器页面渲染过程图2、浏览器渲染过程分析2.1 CSS加载阻塞DOM渲染，但不阻塞DOM解析有文件test.html，其部分代码如下截图所示：CSS加载阻塞DOM渲染访问test.html页面，通过控制台可查看第一个CSS文件的加载阻塞了其后面DOM的渲染，因此起初只看到了页面内容：“Hi,”，其它内容并未渲染出来。CSS加载不阻塞DOM的解析通过控制台可查看，DOM渲染被第一个CSS文件阻塞了，但是该文件后面的其它文件还能正常加载，说明CSS不阻塞DOM解析...

2020-08-27 15:51:47 224

原创 el-menu实现多级菜单效果

如何用element-ui的el-menu组件动态实现多级菜单？1）创建menuTree.vue组件<template> <div class="gtd-menu-tree"> <template v-for="(item, index) in data"> <el-submenu :key="index" v-if="item.children && item.chil

2020-08-25 13:07:28 4593

原创 sentry-前端应用监控工具

一、sentry介绍：Sentry 是一个开源的实时错误追踪系统，可以帮助开发者发现问题、追踪问题；支持 web 前后端、移动应用等。了解更多信息，请移步sentry官网二、sentry配置1、注册sentry账号使用sentry监控平台，必须先申请账号2、登录sentry网站，重设语言和时区1）点击账号旁的箭头，打开弹出2）点击账号弹窗中的"User settings"选项，进入账号设置页面，可设置语言、时区3、配置项目1）点击‘项目’菜单，进入项目页面，创建自己的项目，这里我们以

2020-08-21 16:18:11 4473

原创 mockjs拦截请求，生成假数据

在前后端分离的时代，前端开发不再过渡依赖于后端。在接口未开发的情况下，前端可以依据约定好的接口进行开发，借助mockjs拦截请求，制造假数据进行响应。1、mockjs安装npm install mockjs2、mockjs配置mockjs语法规范详见：https://github.com/nuysoft/Mock/wiki/Syntax-Specification1）mock文件配置（mock/index.js）const Mock = require('mockjs')// 接口配置co

2020-08-21 13:32:29 2116

原创 npm 查看包的版本

用npm安装包时，想知道该包的版本有哪些，以便于从中选择某个版本安装。那么如何查看包的版本呢？一、查看远程仓库版本1、查看包所有版本语法：npm view [软件包名] versions# 查看docker的所有版本号npm view docker versinos2、查看包的最新版本语法：npm view [软件包名] version# 查看docker的最新版本号npm view docker version3、查看包的更多版本信息语法：npm info [软件包名]# 查看

2020-08-18 12:27:39 10823

原创 vsCode中编辑Markdown文档

vsCode原生支持markdown语法，新建一个README.md文件，vsCode会根据后缀.md自动识别并启动markdown编辑。vsCode实时预览点击vsCode面板顶部的预览图标（以下截图中红框圈起的图标），可打开预览面板。实时编辑查看预览效果，如下截图所示：Typora生成文件利用Typora可编辑文档，也可将md文件导出成pdf、html等文件。...

2020-08-18 11:15:44 1964

转载 YAHOO 35条前端优化建议

转载自：http://www.360doc.com/content/14/0325/14/15727046_363598248.shtmlYahoo!的 Exceptional Performance团队为改善 Web性能带来最佳实践。他们为此进行了一系列的实验、开发了各种工具、写了大量的文章和博客并在各种会议上参与探讨。最佳实践的核心就是旨在提高网站性能。原版猛戳：Best Practices for Speeding Up Your Web Site，Excetional Performance.

2020-08-17 11:39:55 356

空空如也

空空如也