自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

Vam的金豆之路

2019年年度博客之星;微信公众号:前端历劫之路;个人微信:maomin9761

  • 博客(243)
  • 论坛 (1)
  • 收藏
  • 关注

原创 Vscode个性化设置:让一个小萌妹陪你敲代码

前言大家平时都用什么代码编辑器啊!我个人比较喜欢用vscode,因为有以下几点:开源,免费;自定义配置集成git智能提示强大支持各种文件格式(html/jade/css/less/sass/xml)调试功能强大各种方便的快捷键强大的插件扩展对前端这么友好,没理由不用。偷偷告诉你下载网址:https://code.visualstudio.com/效果图先上图,注意下图是动态的。是不是很萌萌哒~配置这么萌的效果,怎么实现呢?配置如下,Windows环境和Mac环境

2020-12-03 14:16:57 20460 124

原创 手把手教你做一个华为鸿蒙系统Demo级项目(JS角度)

系统定位HarmonyOS是一款“面向未来”、面向全场景(移动办公、运动健康、社交通信、媒体娱乐等)的分布式操作系统。在传统的单设备系统能力的基础上,HarmonyOS提出了基于同一套系统能力、适配多种终端形态的分布式理念,能够支持多种终端设备。对消费者而言,HarmonyOS能够将生活场景中的各类终端进行能力整合,可以实现不同的终端设备之间的快速连接、能力互助、资源共享,匹配合适的设备、提供流畅的全场景体验。对应用开发者而言,HarmonyOS采用了多种分布式技术,使得应用程序的开发实现与不同终端

2020-11-21 23:51:31 1605 3

原创 React与Koa一起打造一个仿稀土掘金全栈个人博客(技术篇)
原力计划

前言我的个人博客样式是仿的稀土掘金 ,本篇将分为前台角度与后台角度来分析是怎么开发的。前台角度主要资源react.jsant Designfor-editoraxioscraco-lessimmutablereact-loadablereact-reduxreact-router-domreact-transition-groupreduxredux-immutableredux-thunkstyled-components模块页面首页登录注册文章.

2020-06-16 17:33:11 1358

原创 【免费开源】2020年独家全球疫情大数据接口(实时获取)

武汉加油,中国加油!!!为了做点贡献,特此免费开源接口,供大家在各平台使用。接口:https://www.maomin.club/fy/get/有了接口,还需要进一步处理。需要将获取到的res通过eval方法处理,接着将V.conf.component[0]就是我们要获取的数据,可以传给一个变量data。success: function (res) { eval(...

2020-02-08 20:41:41 20786 32

原创 基于Vue.js的Web视频播放器插件vue-vam-video@1.3.6 正式发布

前言今日正式发布一款基于Vue.js的Web视频播放器插件。可配置,操作灵活。跟我一起来体验吧!线上地址体验基于vue3.0和vue-vam-video,我开发了一款在线视频播放器。网址:https://www.maomin.club/site/videoplayer/源代码:https://github.com/maomincoding/videoplayer插件一览界面简约可配置流畅播放支持Vue2和Vue3支持m3u8格式支持多种事件NP

2021-01-24 23:02:56 58

原创 vue按需引入第三方ui插件优化

components.jsimport { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBox11, decoration1 } from '@jiaminghi/data-view'const components = { fullScreenContainer, borderBox12, scrollBoard, loading, borderBox10, borderBox11, d

2021-01-24 02:34:23 66

原创 前端学习方法

模块一前端知识架构:构建你的前端知识体系两种高效的前端学习方法建立前端体系架构明确前端工程师的发展方向JavaScript语言:掌握JavaScript的核心功能和设计思路学习JavaScript语言知识建立对JavaScript语言的文法、语义、运行时的整体认知掌握JavaScript的核心功能和设计思路JavaScript运行时JavaScript词法JavaScript语法JavaScript对象机制脚本与模块函数类语法与声明表达式标识符与直接量HTM

2021-01-21 23:26:44 32

原创 node环境下怎样优化引入多文件(实现自动化)

const mocks = [];function getJsonFiles(jsonPath) { function findJsonFile(path) { let files = fs.readdirSync(path); files.forEach(function(item) { let fPath = join(path, item); let stat = fs.statSync(fPath);

2021-01-21 11:25:41 16

原创 Sublime Text 3 如何清除上次打开文件记录

sublime顶部菜单栏进入 Preferences => Settings-User修改如下:{"hot_exit": false,"remember_open_files": false,}欢迎关注我的公众号前端历劫之路回复关键词电子书,即可获取12本前端热门电子书。回复关键词红宝书第4版,即可获取最新《JavaScript高级程序设计》(第四版)电子书。关注公众号后,点击下方菜单即可加我微信,我拉拢了很多IT大佬,创建了一个技术交流、文章分享群,期待你的加

2021-01-21 11:25:33 34

原创 vue封装手机验证码

// 获取验证码let endMsRes = new Date().getTime() + 45000;localStorage.setItem("myEndTime", JSON.stringify(endMsRes));this.codeCountDown(endMsRes);// 存储验证码时隔 codeCountDown(endMsRes) { this.BtnStatus = false; this.countDownTime = Math.ceil((e

2021-01-21 11:24:53 23

原创 日常js工具函数整理

数组对象中相同属性值的个数 group(arr) { var obj = {}; if (Array.isArray(arr)) { for (var i = 0; i < arr.length; ++i) { var isNew = arr[i].isNew; if (isNew in obj) obj[isNew].push(arr[i]); else obj[isNew] = [arr[i]]

2021-01-18 11:03:40 37

原创 从Vue源码中我学到了几点精妙方法

话不多说,赶快试试尤大大教给我们的这几个精妙方法吧!在工作中肯定会用得到。立即执行函数页面加载完成后只执行一次的设置函数。(function (a, b) { console.log(a, b); // 1,2})(1, 2);通常,全局变量被作为一个参数传递给立即执行参数,这样它在函数内部不使用window也可以被访问到。(function (global) { console.log(global); // Window对象})(this);多层嵌套三目运算符三目运算符嵌套

2021-01-01 17:18:09 113

原创 从0到1搭建一款Vue可配置视频播放器组件(Npm已发布)

前言话不多说,这篇文章主要讲述如何从0到1搭建一款适用于Vue.js的自定义配置视频播放器。我们平时在PC端网站上观看视频时,会看到有很多丰富样式的视频播放器,而我们自己写的video标签样式却是那么丑。其实像那些网站都是基于原生video标签进行开发的,只不过还得适当加工一下,才会有我们所看到的漂亮的视频播放器。开发在具体开发之前,我们需要明确我们需要做什么?封装一个可配置的视频播放器;适用于Vue.js;应用于PC端网站;视频播放器常用的功能必须要有;发布到Npm;好,明确了以上几

2020-12-29 01:38:03 196

原创 你是否有一个梦想?用JavaScript[vue.js、react.js......]开发一款自定义配置视频播放器

前言沉寂了一周了,打算把这几天的结果呈现给大家。这几天抽空就一直在搞一个自定义视频播放器,为什么会有如此想法?是因为之前看一些学习视频网站时,看到它们做的视频播放器非常Nice!于是,就打算抽空开发一款属于自己的视频播放器。话不多说,一起来实战吧!项目展示(这只是一张图片哦~)这张图就是我们的成品,还等什么?赶紧来实战吧!实战我会把完整源码放在github上,欢迎来star,地址在文末。首先,我们会使用最原生的JavaScript来实现,老大哥肯定要打头阵啊!一、JavaScripti

2020-12-21 01:18:35 134

原创 手写一个仿微信登录的nodejs程序

前言首先,我们看一下微信开放文档中的一张图:上面的一幅图中清楚地介绍了微信登录整个过程,下面对图上所示进行总结:一、二维码的获得用户打开登录网页后,登录网页后台根据微信OAuth2.0协议向微信开发平台请求授权登录,并传递事先在微信开发平台中审核通过的AppID和AppSecrect等参数;微信开发平台对AppID等参数进行验证,并向登录网页后台返回二维码;登录网页后台将二维码传送至前台进行显示;二、微信客户端授权登录用户使用微信客户端扫描二维码并授权登录;微信客户端将二维码特定的

2020-12-11 23:53:58 90

原创 这些JS工具函数够你用到2020年底了

前言活不多说,自己平时搜集的干货函数奉上。干货函数找出数字在数组中下一个相邻的元素let i = "";let rr = [];const name = (n, arr1)=>{ let num = Number(n); for (let i = 0; i < arr1.length; i++) { const element = arr1[i]; if (element != num) { rr.push(n

2020-12-08 00:09:45 310 2

原创 Vscode标题栏出现【不受支持】提示的完美解决方案

安装Fix VSCode Checksumscode --install-extension lehni.vscode-fix-checksums打开命令面板,快捷键 Ctrl + Shift + P 输入命令Fix Checksums:Apply重启Vscode,解决。

2020-12-02 16:59:01 272

原创 手把手教你实现一个Vue无限级联树形表格(增删改)

前言平时我们可能在做项目时,会遇到一个业务逻辑。实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加、编辑、删除这样几个功能。资源JavaScript框架:vue.jsUI框架:Element UI源码这里需要重点说明的是,主要使用了递归的算法以及给数据标识的重要性。详细说明可以在源码中查看注释,也可以通过删改代码融会贯通。<template> <div class="contain

2020-12-01 16:58:14 256 3

原创 React.js中JSX的原理与关键实现

在开始开发之前,我们需要创建一个空项目文件夹。安装初始化npm init -y2.安装webpack相关依赖npm install webpack webpack-cli -D安装babel-loader相关依赖npm install babel-loader @babel/core @babel/preset-env -D安装jsx支持依赖npm install @babel/plugin-transform-react-jsx -D配置在根目录下创建main

2020-11-30 00:29:07 135

原创 十分钟快速实战Three.js

前言本文不会对Three.js几何体、材质、相机、模型、光源等概念详细讲解,会首先分成几个模块给大家快速演示一盒小案例。大家可以根据这几个模块快速了解Three.js的无限魅力。学习我们会使用Three.js简单做一个立方体,为了大家更能宏观的了解Three.js。我将会分解成代码段(模块)来进行开发。模块如下:场景对象网格模型光源相机渲染器对象渲染操作1. 创建html文件首先,我们得创建一个html文件,这样才有地方开发。创建完成后,我们可以引入Three.js文件,今天,它

2020-11-23 01:02:06 133

原创 你所知道的JS变量作用域

变量的作用域,指的是变量在脚本代码中的可读、可写的有效范围,也就是脚本代码中可以使用这个变量的区域。在ES6之前,变量的作用域主要分为全局作用域、局部作用域(也称函数作用域)两种;在ES6及其之后,变量的作用域主要分为全局作用域、局部作用域、块级作用域这3种。相应作用域变量分别称为全局变量、局部变量、块级变量。全局变量声明在所有函数之外;局部变量是在函数体内声明的变量或者是函数的命名参数;块级变量是在块中声明的变量,只在块中有效。变量的作用域跟声明方式有密切的关系。使用var声明的变量的作用域有全局作用域

2020-11-19 00:22:26 83 2

原创 手把手教你用前端实现短视频App(滑动切换)

点此链接,查看公众号文章

2020-11-13 10:55:08 149

原创 JavaScript与Node.js一起打造一款聊天App

点此链接,访问公众号文章

2020-11-13 10:45:05 85

原创 Vue.js与Node.js一起打造一款属于自己的音乐App(收藏)

点击此链接,跳转公众号文章

2020-11-13 10:06:59 62

原创 JavaScript预解析处理过程原来是这回事

一般来说,Javascript代码的执行包括两个过程:预解析处理过程 和 逐行解读过程。在代码逐行解读前,Javasript引擎需要进行代码的预处理过程。预解析处理的工作主要是变量提升和给变量分配内存,具体过程是在每个作用域中查找var声明的变量、函数定义和命名函数(函数参数),找到它们后,在当前作用域中给他们分配内存,并给他们设置初始值。预解析设置的初始值分别是:对于var声明的变量,初始值是undefined,对函数定义,变量名为函数名,函数变量的初始值为函数定义本身;对命名参数,如果函数调用时没有指定

2020-11-11 22:15:00 172 2

原创 重学JavaScript第1集|变量提升

变量提升就好比JavaScript引擎用一个很小的代码起重机将所有var声明和function函数声明都举起到所属作用域(所谓作用域,指的是可访问变量和函数的区域)的最高处。这句话的意思是:如果在函数体外定义函数或使用var声明变量。则变量和函数的作用域会提升到整个代码的最高处,此时任何地方访问这个变量和调用这个函数都不会报错;而在函数体内定义函数或使用var声明变量,变量和函数的作用域则会提升到整个函数的最高处,此时在函数体内任何地方访问这个变量和调用所定义的函数都不会报错。示例如下:console.

2020-11-01 22:33:21 84

原创 Vue3.0系列——「vue3.0学习手册」第一期

vitevite是尤大大开发的一款意图取代webpack的工具。其实现原理是利用ES6的import会发送请求加载文件的特性。拦截这些请求,做一些编译,省去webpack冗长的打包时间。并将其与Rollup捆绑在一起用于生产。在开发过程中没有捆绑。源代码中的ES Import语法直接提供给浏览器,浏览器通过本机npm install -g create-vite-appcreate-vite-app projectNamecd projectNamenpm installnpm run dev

2020-10-23 23:53:58 577

原创 JS变量的内存分配你了解多少?

美国导演昆汀·塔伦蒂诺说:世界上80%的故事都已经拍过了。所以我们要用新方法去拍老故事。JavaScript的所有变量(包括函数)在整个处理过程中都是存放在内存中,所以要对一个变量进行处理。首先得为变量分配内存。JavaScript内存分配和其他语言一样,是根据变量的数据类型来分配内存的,而JavaScript变量的数据类型由所赋的值的类型所决定的。JavaScript支持的数据类型可分为两大类:基本数据类型和复杂数据类型。其中基本数据类型包含了数字(number)类型、字符串(string)类型、..

2020-10-21 00:26:17 157 2

原创 Webpack学习整理集锦【从最基础的demo入手,自己实现一个脚手架 】

前言本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。开源网址https://github.com/maomincoding/webpack_study你可以打开上面的网址,浏览学习webpack。从最基础的demo入手,自己实现一个脚手架 。

2020-10-17 21:54:27 213 1

原创 Vue3.0系列——「vue3.0性能是如何变快的?」

前言先学习vue2.x,很多2.x内容依然保留;先学习TypeScript,vue3.0是用TS重写的,想知其然知其所以然必须学习TS。为什么学习vue3.0?性能比vue2.x快1.2~2倍按需编译,体积比vue2.x更小组合API(类似React Hook)更好的TS支持暴露了自定义渲染API更先进的组件vue3.0是如何变快的?diff方法优化vue2中的虚拟dom是进行全量的对比。而vue3新增了静态标记。在与上次虚拟节点进行对比的时候,只对比带有patch fl.

2020-10-12 11:10:23 375

原创 手把手教你实现一个图片压缩工具(Vue与Node的完美配合)

前言图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。效果展示原图片大小:82KB压缩后的图片大小:17KB测试是不是特别good!!!看到上面的压缩后的图片,可能你还会质疑图片的清晰度,那么看下面(第一张图为压缩后的图片):教程这么好的工具,那我们来看看怎么用代码实现它。首先你可能需要一些Vue.js和Node.js的基础,另外你可能还需要一点对.

2020-10-01 11:03:29 766 2

原创 自己实现一个自定义React项目脚手架「ReactCli」

前言首先为什么想到自己实现一个React脚手架呢?是因为之前刚接触create-react-app时,觉得不太灵活。虽然文件目录很清晰,但是还是觉得不如VueCLI的可以自定义配置更加灵活。当然React官方提供了可以暴露配置的命令npm run eject,说再多不如自己实现一个。脚手架一览...

2020-09-13 15:47:48 669

原创 js深拷贝浅拷贝

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> </body><sc

2020-09-13 14:35:01 117

原创 js获取到时间戳(兼容性强)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body><script> functi

2020-09-13 14:32:36 112

原创 重学JavaScript(函数)闭包

序言学习JavaScript切勿好高骛远。正所谓贪多嚼不烂,前端标准和工具这几年的飞速发展,以及不时冒出的“新鲜玩意”让众多前端从业者惊呼:“学不动啦学不动啦!学习速度跟不上技术发展速度!我感到手忙脚乱、力不从心……"如果你有以上“症状”,请勿着急,这不过是你内心不安造成的。你为何追新?你又何苦追新?在根基不牢的情况下,就算盖楼盖到18层,再往上堆一块砖,都可能导致大楼坍塌!这结果绝非你预期。所以,此时你应该沉下心来苦练基础。而非死钻牛角尖。硬要及时掌握那些业界最新冒出来的“玩意儿”对你无益处。前言我

2020-08-22 15:03:18 1896 6

原创 你要的Js工具函数【第二期】

防抖<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="su

2020-08-04 22:18:25 170

原创 js如何将带有分割符的字符串转化成一个n维数组

var str = "A-2-12"; var str1 = str.split('-'); console.log(str1); var arr = str1.reverse().reduce((pre,cur,i) => { if(i==0) { pre.push(cur) return pre } return [cur,pre]},[])console.log(arr)

2020-08-04 22:01:58 116

原创 js找出数字在数组中下一个相邻的元素

let arr = ["2", "4", "6", "8", "10", "12", "14", "16", "18", "20", "22", "24", "27", "30", "33", "36", "42", "48", "54", "60"] var rr = []; function name(n) { let num = Number(n); for (let i = 0; i < arr.length; i++) { ...

2020-08-04 21:59:01 552

原创 如何在vscode 背景配置一个动态小女孩

D:\Microsoft VS Code\resources\app\out\vs\code\electron-browser\workbench<!-- Copyright (C) Microsoft Corporation. All rights reserved. --><!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="Cont

2020-08-04 21:55:51 1012 2

原创 js—reduce方法练习之无限引用对象的值

var obj = { a:{ b:{ c:"maomin" } } } const safeGet = (o, path) => { try { return path.split('.').reduce((o, k) => o[k], o) } catch (e) { return undefined } } console.log(safeGet(ob.

2020-08-04 21:53:37 155

空空如也

Vam的金豆之路的留言板

发表于 2020-01-02 最后回复 2020-02-18

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除