前端
文章平均质量分 81
前端
mengke.me
呼啦啦
展开
-
深入 Pinia:从代码出发探索 Vue 状态管理的奥秘
在之前的方法中,Pinia 实例上存在一个use()方法是对自定义插件的支持,在这里我们需要对安装的插件进行处理,调用左右的插件函数,并给函数传入四个参数。// apply 全部插件console.log("插件安装:", extender);// 如果使用开发工具// 调用插件,并传入参数extender({store,pinia,});} else {// 这里将插件返回的属性合并到 store 中assign(store,extender({store,pinia,原创 2023-04-24 15:25:32 · 1594 阅读 · 1 评论 -
VUE数据侦测原理
一、VUE2中的实现方法1. 前言我们知道:数据驱动视图的关键点则在于我们如何知道数据发生了变化,只要知道数据在什么时候变了,那么问题就变得迎刃而解,我们只需在数据变化的时候去通知视图更新即可。要想知道数据什么时候被读取了或数据什么时候被改写了,其实不难,JS为我们提供了Object.defineProperty方法,通过该方法我们就可以轻松的知道数据在什么时候发生变化。2. Object.definePropetyES5 提供了 Object.defineProperty 方法,该方法可以在一个原创 2021-10-22 17:43:23 · 486 阅读 · 1 评论 -
configuration has an unknown property ‘jsonpFunction‘
配置webpack时的报错。在 webpack 4 中,多个 webpack 运行时可能会在同一个 HTML 页面上发生冲突,因为它们使用同一个全局变量进行代码块加载。为了解决这个问题,需要为 output.jsonpFunction 配置提供一个自定义的名称。Webpack 5 确实会从 package.json name 中自动推断出一个唯一的构建名称,并将其作为 output.uniqueName 的默认值。这个值用于使所有潜在的冲突的全局变量成为唯一。迁移: 由于 package.json中原创 2021-09-01 11:21:41 · 4671 阅读 · 2 评论 -
npm 报错 errno: ‘ENOENT‘
ENOENT 这个错误实际上是 Error NO ENTry(或 Error NO ENTity)的缩写。一般常见于目录错误或者找不到目录,检测你命令中的路径,比如你路径中含有 /public/projects , 那么你的文件夹至少要有 public 这个文件夹。...原创 2020-12-28 11:15:49 · 4245 阅读 · 0 评论 -
ant-design-pro 多环境请求代理配置
在开发中我们可能需要区分多种情况,比如开发环境,测试环境,语法环境,在 Pro 中我们可以通过的环境变量来实现这个需求。const serveUrlMap = { dev: 'https://dev.8jsj.cn/', pre: 'https://pre.8jsj.cn/', test: 'https://test.8jsj.cn/', idc: 'https://idc.8jsj.cn/',};const { SERVE_ENV = 'idc' } = process.env;原创 2020-11-03 11:01:24 · 1815 阅读 · 0 评论 -
Nuxt 中使用 viser.js
如果我们直接在 Nuxt 中使用传统的 import 导入 viser 的话,运行时会发现 window is not defined or document is not defined 的报错。因为使用到了 Nuxt 的服务端渲染,而在服务端是没有 window 和 document 的,所以会报这个错。 window 和 document 只存在于浏览器中。查阅一下 Nuxt 的官网有对应的解决方法,官网地址。这种方式的话并不是很友好,我认为比较好的方法是我们可以在 nuxt.config.原创 2020-10-23 17:25:07 · 385 阅读 · 0 评论 -
尝鲜 Vue 3.0 组合式API
Vue 3.0 即将发布,我们已经可以尝试一些新版本中带来的新功能,比如 Composition-API 组合式API。如果你了解过 React 的 Hooks,那么当你看到组合式API时一定不会感到陌生。组合式API受到了 React Hooks 很大的启发。Vue 非常易于使用,并且有非常出色的 API,对于初学者来说配合官方文档很容易就可以理解 Vue 的语法。但在国内一些大型的项目可能不会首选 Vue 去开发,因为当组件越来越大的时候会变得很难维护,很难找到一个变量在哪被定义又是在哪被使用。Vue原创 2020-09-06 17:46:46 · 2185 阅读 · 0 评论 -
高级前端必会的300个知识点(1)
1. Vue 常用的修饰符.lazy:v-model 在每次 input 事件触发的时候都会去进行数据同步,添加 lazy 修饰符后就转变为 change 事件触发时再进行数据同步。.number:可以自动将用户输入的值转为数值类型.trim:可以自动过滤用户输入的守卫空白字符事件修饰符:.stop:阻止冒泡, event.stopPropagation() 或 cancelBubble.prevent:拦截默认事件,等同于 event.preventDefault().passive:原创 2020-08-13 14:11:21 · 1093 阅读 · 0 评论 -
ant-mobile TabBar 组件添加路由
感觉 ant-mobile 和 vant 相比要很不方便,很多功能需要我们自己去实现,团队的重心应该都在 ant-design 上,比如 TabBar 并没有设置路由功能,本文阐述了如何在一个使用了 react-router 的 react 项目中合理的使用 antd-mobile tabbar 功能。为了使组件结构更加清晰,首先要在 TabBar 组件外包一层父组件来读取路由信息,因为 TabBar 的内容在版本迭代中很少去改动,我们可以直接使用 switch 来设置当前页:switch (..原创 2020-08-12 23:24:53 · 1148 阅读 · 0 评论 -
react-router-dom 路由基础教程
一、安装yarn add react-router-dom根组件index.js使用 Router 组件包裹根节点来实现全局的路由访问。import{BrowserRouterasRouter}from'react-router-dom'<Router> <App/></Router>结构有 BrowserRouter 和 HashRouter 两种模式,分别对应 VUE-router 的 mode: history ...原创 2020-07-26 22:49:19 · 2760 阅读 · 0 评论 -
HTTP/2 push 比我想象的要难
HTTP/2 Push 比我想象的要难一些关于页面加载性能问题,我经常听到 “这个用 HTTP/2 Push 可以解决啊” 这样的话,但是我对于 “HTTP/2 Push” 并不了解,所以我决定深入研究一下并写下这篇文章。HTTP/2 Push 比我最初想象的要复杂而且要低级一些,但真正让我措手不及的是浏览器之间对于 HTTPS/2 Push 兼容的的不一致,即使我认为这已经完成了我的工作并且已经完全可以投入生产。这不是对 HTTP/2 Push 这样的的恶意诽谤,我认为 HTTP/2 Push 非常翻译 2020-07-26 14:40:14 · 574 阅读 · 0 评论 -
JavaScript 数组扁平化处理的方法总结
所谓“数组扁平化”就是指将一个多维数组变为一个一维数组,比如:[1, 2, [3, 4, [5, 6]] ==> [1, 2, 3, 4, 5, 6]我们通过几种常用方式来实现数组的扁平化。方法1:flat()法flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。语法:var newArray = arr.flat([depth])depth:可选,指定要提取嵌套数组的结构深度,默认值为 1。当depth值为 In原创 2020-06-28 15:32:21 · 556 阅读 · 0 评论 -
「ReadingKoa」Day 1 — Koa中间件的运行原理
Koa中的中间件与Express的不同,Koa使用洋葱模型。 Koa的中间件仅包含四个文件,今天我们只看主要文件-application.js。 它已经包含了中间件如何工作的核心逻辑。准备工作git clone git@github.com:koajs/koa.gitnpm install我们在项目的根目录添加index.js进行测试:// index.js// Include the entry file of koaconst Koa = require('./lib/applica.翻译 2020-06-27 21:30:19 · 202 阅读 · 0 评论 -
yarn 学习记录——常用命令
1、初始化环境yarn init -y2、换淘宝源yarn config set registry http://registry.npm.taobao.org3、安装依赖安装package.json本地 node_modules文件夹中列出的所有依赖项: yarn install安装一个依赖包:(yarn默认安装为本地依赖)yarn add [package]@[version]yarn add [package]@[tag]安装本地包:yarn add [package] --dev原创 2020-06-25 17:08:43 · 218 阅读 · 0 评论 -
事件监听的简单封装
var on = (function() { if (document.addEventListener) { return function(element, event, handler) { if (element && event && handler) { element.addEventListener(event, handler, false); } .原创 2020-06-23 22:26:47 · 350 阅读 · 0 评论 -
JavaScript数组去重方法总结
方法一、利用ES6 Set去重(ES6中最常用)function unique (arr) { return Array.from(new Set(arr))}var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];console.log(unique(arr))//[1, "true",原创 2020-06-12 09:21:53 · 213 阅读 · 0 评论 -
1分钟搞懂箭头函数this指向问题
在网上看到很多关于箭头函数this指向的博客和问题解答,但是基本写的都不准确,有的甚至是错误的,在其他博客网站得到的答案基本就是“箭头函数在定义时this指向谁那么之后就一直指向谁”,这句话虽然不错,但是这不还是没说清楚到底是指向了谁嘛。实在看不下去了,今天在这里详细写一写箭头函数的this到底指向谁?在这里首先看一看MDN对于箭头函数的介绍:箭头函数表达式的语法比函数表达式更简洁,并且没有...原创 2020-03-23 23:10:57 · 803 阅读 · 2 评论 -
KeyboardEvent.metaKey 苹果电脑command键按下、win键按下
KeyboardEvent.metaKey为只读属性,返回一个布尔值,在事件发生时,用于指示Meta键是按下状态(true),还是释放状态(false)。备注:在MAC键盘上,表示Command 键(⌘),在Windows键盘上,表示 Windows 键(⊞)。语法var metaKeyPressed = instanceOfKeyboardEvent.metaKe...原创 2020-03-23 20:32:46 · 1657 阅读 · 0 评论 -
原生JS实现 slice() 方法
定义和用法slice() 方法可从已有的数组中返回选定的元素。语法arrayObject.slice(start,end)实现Array.prototype.slice=function(start,end){ start=start===undefined?0:start; end=end===undefined?thi...原创 2020-03-21 20:35:16 · 970 阅读 · 0 评论 -
原生JS实现 some() 方法
定义和用法some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true, 剩余的元素不会再执行检测。 如果没有满足条件的元素,则返回false。注意:some() 不会对空数组进行检测。注意:some() 不会改变原始数组。语法array.some(function(...原创 2020-03-03 23:12:12 · 1523 阅读 · 3 评论 -
原生JS实现 every() 方法
定义和用法every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。every() 方法使用指定函数检测数组中的所有元素:如果数组中检测到有一个元素不满足,则整个表达式返回false,且剩余的元素不会再进行检测。 如果所有元素都满足条件,则返回 true。注意:every() 不会对空数组进行检测。注意:every() 不会改变原始数组。语法...原创 2020-03-03 23:09:23 · 1523 阅读 · 0 评论 -
原生JS实现 fliter() 方法
定义和用法filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。注意:filter() 不会对空数组进行检测。注意:filter() 不会改变原始数组。语法array.filter(function(currentValue,index,arr), thisValue)参数说明参数 描述 function(curr...原创 2020-03-03 23:05:06 · 684 阅读 · 0 评论 -
JS实现数字字母混合验证码(数字+大写字母+小写字母)
我之前写了一篇《JS实现随机验证码》,可以产生随机数字、随机颜色、随机位置,但只能产生数字验证码,今天在此基础上进行改进,使之可以随机大写字母、小写字母、数字三种类型。思路我们使用Math.random()获得0~34的随机数,将0和10~33规定为字母,然后我们随机将字母改为大写字母。实现验证码的随机我们声明一个txt来存放我们获得的0~34的随机数。然后声明一个flag来标识我们...原创 2020-03-03 22:59:25 · 4333 阅读 · 0 评论 -
JS生成随机验证码
在网站中我们很常见到形形色色的验证码,今天我们来用JS来生成一个随机的二维码。我们需要用到canvas来进行验证码的绘制什么是CanvasHTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。点击学习思路我们要做的二维码首先要有随机的数字,其...原创 2020-02-29 20:58:13 · 2276 阅读 · 0 评论 -
JS判断一个日期是这一年的第几天
使用JS判断一个日期是这一年的第几天。首先我们先整理一下思路:假如是12月11日,那么我们需要将1-11月的天数加起来,然后加上12月的11天。 假如是1月9日,那么我们只需要将1月的这九天就可以了。那么这样的话首先我们可以使用if else去判断,但是用if else的话效率是很低的,这里我们可以使用switch的case穿透效果来优化代码:/** year :年份* ...原创 2020-02-25 22:23:33 · 6304 阅读 · 2 评论 -
高度塌陷的产生原因及解决方法
什么是高度塌陷?当父元素未设置高度时,所有子元素浮动后,造成子元素脱离文档流进而无法把父元素撑开,父元素高度为0产生高度塌陷,称为高度塌陷问题。父元素高度塌陷后,父元素以下的元素都会向上移动,导致布局混乱,所以我们要解决高度塌陷的问题。如下代码:<div class="box"> <div class="div1">div1</div>...原创 2020-02-23 17:23:53 · 9155 阅读 · 1 评论 -
CSS实现单行文本居中,多行文本居左
要实现的效果如上图所示,在一个容器内多行文字为靠左对齐,单行文字为居中对齐。HTML结构如下:<div class="box"> <p>多行文字内容多行文字内容多行文asdasd字sdfsdf123124容多行文字内容多行文字内容多行文字内容</p> <p>单行文字内容单行文字内容</p></div&...原创 2020-02-12 17:57:11 · 2745 阅读 · 0 评论 -
mui APP中顶部导航栏不显示
mui制作的页面,问题:打包APP,安卓手机运行,顶部的导航菜单栏不显示。手机浏览器打开正常电脑浏览器打开正常问题出在了app.css中,此文件是创建模板时自动生成的。在app.css中第一条就是关于隐藏导航条的样式,修改为显示即可。修改后:.mui-plus header.mui-bar{ display: block;}怎么想不到在这能给埋个坑!!...原创 2018-05-26 11:51:57 · 3767 阅读 · 0 评论 -
mui导航栏与手机系统状态栏重合
mui顶部栏,与手机状态栏重合,在PC浏览器中是分开的,打包过后就重合了! 分析问题:应该是打开了沉浸式状态栏而没有做样式的适配。解决方法:关闭沉浸式状态栏。查看manifest.json,是不是Android平台开启了沉浸式状态栏样式,搜索“ImmersedStatusbar”修改为:"ImmersedStatusbar":false,/*Android平台开启沉浸式状态栏样式*/...原创 2018-05-26 12:01:00 · 1610 阅读 · 0 评论 -
js实现图片无缝滚动
CSS:<style type="text/css"> #demo { background: #FFF; overflow:hidden; border: 1px dashed #CCC; width: 1000px; height:368px; } #demo img { ...原创 2018-07-02 19:11:23 · 545 阅读 · 0 评论 -
一个页面中有多个audio标签,其中一个播放结束后自动播放下一个,audio连续播放
一个页面中有多个audio标签时,随机点击一个开始播放,当播放完成时自动播放下一个audio的音乐。var audios = document.getElementsByTagName("audio");for(var i=0;i<audios.length;i++){ //console.log("audios "+i+" SRC:" + audios[i].currentS...原创 2018-07-17 11:36:53 · 11902 阅读 · 5 评论 -
JS获取Param参数
//获取url中的参数function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象 var r = window.location.search.substr(1).match(reg); //匹配目标参...原创 2018-05-09 09:36:08 · 12746 阅读 · 0 评论 -
一个页面中有多个audio标签,播放其中一个时暂停其他,只允许一个audio播放
var audios = document.getElementsByTagName("audio");// 暂停函数function pauseAll() { var self = this; [].forEach.call(audios, function (i) { // 将audios中其他的audio全部暂停 i !== self && i.pause()...原创 2018-07-11 15:02:42 · 11789 阅读 · 3 评论 -
JS object对象转String字符串方法
function obj2string(o) { var r = []; if (typeof o == "string") { return "\"" + o.replace(/([\'\"\\])/g, "\\$1").replace(/(\n)/g, "\\n").replace(/(\r)/g, "\\r").replace(/(\t)/g, "\\t"原创 2018-07-31 08:57:24 · 3617 阅读 · 0 评论 -
layer弹出层的关闭问题——在执行完毕后关闭当前弹出层
今天再用layui写东西的时候遇到一个问题,就是在弹出层操作完之后不知道怎么在弹出层内操作关闭这个弹出层,查阅资料之后终于找到了解决的办法。下面两段出自官网文档。一、layer.close(index) - 关闭特定层关于它似乎没有太多介绍的必要,唯一让你疑惑的,可能就是这个index了吧。事实上它非常容易得到。//当你想关闭当前页的某个层时var index = layer.op...原创 2018-07-31 11:27:54 · 47761 阅读 · 5 评论 -
Layui富文本编辑器提交表单时无法获取输入内容
layui富文本编辑器这个东西,他的模式是在某个textarea的基础上建立了一个富文本编辑器,也就是说你填写在富文本编辑器的值其实是放在编辑器里面的,并没有放在之前的textarea中,你获取textarea的值的时候需要先把富文本编辑器的值同步到之前的textarea中,然后才能通过textarea获取对应的值。问题:我们提交表单,发现提交的表单中没能获取到编辑器的内容:分析:...原创 2018-08-01 17:20:32 · 10186 阅读 · 1 评论 -
18个超有趣的SVG绘制动画赏析
SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们收集了18个非常新奇有趣的SVG绘制动画,这些动画大部分都是使用SVG结合一定的CSS3特性实现而成,效果让人大为震撼,一起来看看吧。1、HTML5SVG实现会跳舞的花朵 4种跳舞心情这又是一款很有趣的HT...转载 2018-08-13 17:21:40 · 873 阅读 · 0 评论 -
模块化方式构建Node.js应用程序
如今,几乎所有的Web服务或集成都是在Node.js运行时上完成的。Node.js是一个具有很多社区支持的灵活平台。我们甚至可以直接从Node.js创建xlsx,docx或pdf文档。所有主流云平台都可以使用Node.js作为其1级语言。模块化Node.js通过设计,可以使用node_modules结构来实现模块化。所有必需的模块都存储在node_modules目录中,并且我们可以在代...转载 2018-08-17 14:57:59 · 167 阅读 · 0 评论 -
js原生递归获取一个节点的所有父级节点
<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body&转载 2018-11-27 22:56:29 · 6415 阅读 · 1 评论 -
30个免费的CSS3动画片段代码
对于网页设计师来说,前端代码CSS/HTML不是强项,但有时候也是需要写的。特别是现在流行CSS3动画,学习和了解一些相关知识是必须的。CSS3动画其实不算复杂,比JS简单得多,今天我们整理自CODEPEN上的一些好看的CSS3动画片段,从这些案例中设计师可以从中学习,并了解一些新的代码写法,又或者获取一些动画灵感也是不错的哦。以下为CSS3动画案例整理:青蛙与小船动画美丽的小河,有一只可爱的小蛙...转载 2018-02-15 18:36:40 · 7237 阅读 · 0 评论