Jarvan大熊-优快云博客

原创 Windows下安装及使用NVM

所谓nvm就是一个可以让你在同一台机器上安装和切换不同版本node的工具。这里是一篇安装及使用教程。第一步：下载nvm可以到这里下载链接：https://pan.baidu.com/s/1wW4fH8XnXRiachXHb1Pckw 密码：pn90或者到github上下载最新版本https://github.com/coreybutler/nvm-windows/releasesnvm-n...

2019-06-11 14:32:36 10968 2

原创 Webstorm常用快捷键

常用快捷键—Webstorm入门指南提高代码编写效率，离不开快捷键的使用，Webstorm拥有丰富的代码快速编辑功能，你可以自由配置功能快捷键。快捷键配置点击“File”-> “settings”Webstorm预置了其他编辑器的快捷键配置，可以点击默认配置-Eclipse的常用快捷键对照表查找/代替Webstorm快捷键 Eclipse快捷键...

2018-12-06 16:48:36 155

转载 git tag常用操作

前言最近使用git来管理一个项目，到达一定阶段后，需要将稳定的代码发布成一个版本，经过查找资料发现git的标签操作刚好满足我的要求，所以记录下来，方便以后是使用查找。用途标签可以针对某一时间点的版本做标记，常用于版本发布，这恰恰是我所需要的功能，将本地标签推送到Github上即发布了一个Release版本，下载和查看非常方便。标签分类git标签分为两种类型：轻量标签和附注标签。轻量标...

2018-12-03 16:14:16 8010

原创 Vue.js 快速搭建

Vue.js 现在在后端、前端、微信、移动端Web非常流行，今天简单模拟Vue.js快速安装；安装npm npm 是node.js 的包管理工具, 安装流程地址：https://docs.npmjs.com/cli/install 估计会非常慢，我们可以使用淘宝NPM镜像下载安装：https://npm.taobao.org/##安装npm##sudo npm instal

2017-01-16 10:58:23 962

原创响应式布局：CSS3弹性盒flex布局模型

页面布局一直都是web应用样式设计的重点我们传统的布局方式都是基于盒模型的利用display、position、float来布局有一定局限性比如说实现自适应垂直居中随着响应式布局的流行，CSS3引入了更加灵活的弹性布局模型flex弹性布局使用弹性布局可以有效的分配一个容器的空间即使我们的容器元素尺寸改变它内部的元素也可以调整它的尺寸来适应空间若想让一个元素变成...

2017-01-10 17:40:44 15084

转载正则表达式大全

Js代码 function SubmitCk() {var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if (!reg.test($("#txtEmail").val())) {alert(

2017-01-10 15:32:00 498

原创技术从业者，不仅仅要有扎实的专业知识和技能，还得学会如何传递知识，传播文化。...

????演讲书籍推荐：1.《高效演讲》作者：彼得迈尔斯2. 《TED TAlKs 演讲的力量》作者：克里斯安德森3. 《演讲之蝉》作者：加尔雷纳德4. 《金字塔原理》作者：芭芭拉明托5. 《如何做如何做一场精彩的演讲》作者：琼戴兹6. 《故事》作者：罗伯特麦基7. 《乔布斯的魔力演讲》作者：卡迈恩加洛8. 《思考，快与慢》丹尼尔卡尼曼9. 《...

2023-06-20 10:26:17 369

原创 vue 悬浮窗(带自动吸附功能)

之前写过悬浮窗的效果，这次做了个总结，网页端和移动端都可以用兼容，封装的组件代码，可以引到页面直接使用做了简单的注释大家自行了解 <template> <div ref="floatDrag" class="float-position" :style="{ left: left + 'px', top: top + 'px', zInde...

2023-06-07 10:30:43 1900 1

原创 Node的视频处理包--fluent-ffmpeg

简介&安装:https://www.npmjs.com/package/fluent-ffmpeg使用ffmpeg转换视频为gifffmpeg 是一个自由软件，可以运行音频和视频多种格式的录影、转换、流功能，包含了libavcodec——这是一个用于多个项目中音频和视频的解码器库，以及libavformat——一个音频与视频格式转换库。 “FFmpeg”这个单词中的“FF”指的...

2022-02-08 16:06:22 1111

原创 Node.js 通过ffmpeg处理视频

1. 几张图片合成gifffmpeg -r 1 -i ./video/shot-%d.jpg ./video/11.gif2. 视频第二秒开始截取三秒转换gifffmpeg -t 3 -ss 00:00:02 -i small.mp4 small-clip.gif3. 视频自动裁剪关键帧什么是关键帧:关键帧，是指动画中一个绘图，定义任何的起点和终点平滑过渡。一系列关键帧定义...

2022-02-08 16:01:47 1142

原创彻底搞清 JavaScript forEach & map

背景JavaScript中,数组的遍历我们肯定都不陌生，最常见的两个便是forEach 和 map。(当然还有别的譬如for, for in, for of, reduce, filter, every, some, ...)之所以几天要写这个，是因为前几天写代码的时候犯了一个低级且愚蠢的错误, 最后搞出了个小bug。最后找到原因，生气，甚至还有点想笑，今天就写一下这两个方...

2021-07-06 14:05:54 167

原创 JS-数组操作

* 对象数组去重1. *reduce()* // 测试数据// 比如我们处理 value 的去重 var arrList = [ {key: 1, value: "aaa"}, {key: 2, value: "bbb"}, {key: 3, value: "ccc"}, {key: 4, value: "aaa"}, {key: 5, val...

2021-07-01 09:39:34 102

原创 JS 总结之原型继承的几种方式

在之前的总结中，我们详细分析了原型《JS 总结之原型》，原型很大作用用于模拟继承，这一次，我们来聊原型继承的几种方式。function Person (age) { this.age = age || 18}Person.prototype.sleep = function () { console.log('sleeping')}???? 方式 1：原型链继承(不推荐)fun...

2021-06-14 22:46:26 335

原创 mac上搭建vscode+Flutter开发环境

系统版本：MacOS 10.15.6 1、安装AndroidStdio https://developer.android.goo... 当前版本为4.1.1 新建demo并能运⾏2、安装Xcode，直接在App Store安装，版本12.2 新建demo并能运⾏3、安装vscode 官网下载https://code.visualstudio.com 版本1.49.14、安...

2021-06-14 22:07:12 303

原创删除数组中的指定元素 | JavaScript

JavaScript的数组中默认不支持删除指定元素的操作，如let book_id = [1,2,3,4]book_id.delete(4) //错误，JS数组没有该方法因此，解决的办法有使用集合SetES6中新加入了集合类型Set()，因为集合本身支持add(),delete(),remove()，forEach()等操作，因此可以直接将Array()转化为Set()l...

2021-06-14 22:02:23 83

原创 Vue 中插槽slot的用法和应用场景

什么是插槽？我们知道在Vue中 Child 组件的标签的中间是不可以包着什么的。可是往往在很多时候我们在使用组件的时候总想在组件间外面自定义一些标签，vue新增了一种插槽机制，叫做作用域插槽。要求的版本是2.1.0+；插槽，其实就相当于占位符。它在组件中给你的HTML模板占了一个位置，让你来传入一些东西。插槽又分为匿名插槽、具名插槽、作用域插槽。在 2.6.0 中，我们为...

2021-06-06 18:15:23 172

原创前端路由的两种模式：hash模式和 history模式

为什么要使用路由现在的网络应用程序越来越多的使用AJAX异步请求完成页面的无缝刷新，导致浏览器的URL不会发生任何变化而完成了请求，从而破换了用户浏览体验。同时本次浏览的页面内容在用户下次使用URL访问时将无法重新呈现，使用路由可以很好地解决这个问题。单页面应用利用了JavaScript动态变换网页内容，避免了页面重载；路由则提供了浏览器地址变化，网页内容也跟随变化，两者结合起来则为我们...

2021-05-19 18:01:47 135

原创 React面试题（含答案）

前言本文篇幅较长，全是干货，建议亲们可以先收藏慢慢看哦写文不易，欢迎大家一起交流，喜欢文章记得关注我点个赞哟，感谢支持！Q1 ：什么是虚拟DOM？难度：:star:虚拟DOM(VDOM)它是真实DOM的内存表示,一种编程概念，一种模式。它会和真实的DOM同步，比如通过ReactDOM这种库，这个同步的过程叫做调和(reconcilation)。虚拟DOM更多是一种模式，不是...

2021-05-06 15:56:42 173

原创 Webpack打包优化

优化1：优化图片使用 url-loader 优化，将小图片转化成base64压缩,防止小图片太多请求次数太多。1：下载 url-loader npm install -D url-loader2: 配置在 webpack.prod.conf.js 文件夹中配置 module: { rules: [{ test: /\.(pn...

2021-05-06 15:14:09 118

原创 Vue问得最多的面试题

什么是 mvvm？MVVM 是 Model-View-ViewModel 的缩写。mvvm 是一种设计思想。Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。在 MVVM 架构下，View 和 Model 之间并没有直接的联系...

2021-05-05 22:58:53 60

原创 Vue常见面试题总结

今天跟大家分享下Vue常见面试题的知识1.什么是vue的生命周期？ Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM->渲染、更新->渲染、卸载等一系列过程，我们称这是Vue的生命周期。2.vue生命周期的作用是什么？它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。3.V...

2021-05-05 19:03:38 191

原创 webpack系列--浅析webpack的原理

一、前言现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。二、webpack的原理知其然知其所以然。1、核心概念(5个)**Entry...

2021-04-30 16:57:24 83

原创一、使用vue-cli创建模板项目

1、什么是vue-cli　　是vue官方提供的脚手架工具。脚手架工具简单讲就是自动将项目需要的环境、依赖等信息都配置好。2、全局安装vue-cli(1)检查npm 版本，建议安装到最新版本。【命令行查看版本号】node -vnpm -v【升级npm(可选操作)】 npm install -g npm【修改为淘宝镜像(可选操作)】 npm config set reg...

2021-04-28 22:42:13 83

原创 vue的注意规范之v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中所以，不推荐v-if和v-for同时使用使用推荐方式：<ul><liv-for="user in activeUsers":key="user.id">{{ user.name }}</li></ul...

2021-04-22 10:52:46 158

原创 new Date(date).getTime()在苹果手机不兼容

new Date(date).getTime()用这个方法来获取时间戳，在手机上就是NaN，在Google浏览器就是没有问题！在苹果手机上是不兼容的。解决办法：1.new Date(data.replace(/-/g,'/')).getTime()2.data是字符串，格式类似于：‘2018-09-09 23:23:23’...

2021-04-12 14:25:46 86

原创 css 文本超出2行就隐藏并且显示省略号

首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如果显示多行呢？----------------------------...

2021-03-30 11:54:04 82

原创 js数组方法整理

整理了以下数组方法join()push()和pop()shift() 和 unshift()sort()reverse()concat()slice()splice()indexOf()和 lastIndexOf() (ES5新增)forEach() (ES5新增)map() (ES5新增)filter() (ES5新增)every() (ES5新增)some() ...

2021-03-09 15:56:32 45

原创 JS基础改对象中的Key名，变数组中的值为新的字典型中的Key

ES6语法，用underscore.js库题目假定我有对象let obj = { 1: { vegetables: ['banana', 'peach'] }, 2: { vegetables: ['pear', 'grapefruit'] }};12345678想将其变成let obj = { 1:...

2020-12-03 17:00:19 131

原创 git只提交部分修改的文件（提交指定文件）

在我们的项目中，经常会在本地编译一些代码，还未写完，测试那边来告诉你要改改某个文件的bug，非常着急，此时改完了，提交的时候，自己还在编译的代码并不想提交，此时，你可以利用git这些指令帮助你！1/ git status -s 查看仓库状态2/ git add src/components/文件名添加需要提交的文件名(加路径--参考git status 打印出来的文件路径)3/ gi...

2020-11-18 10:40:26 156

原创 15条JS高效技巧

1、延迟函数delayconst delay = ms => new Promise((resolve, reject) => setTimeout(resolve, ms)) const getData = status => new Promise((resolve, reject) => { status ? resolve('done') : r...

2020-08-12 11:15:37 47

原创 css纵向无缝滚动

image<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>marquee</title> <style> @-webkit-keyframes scrollText1 { ...

2020-07-06 06:06:50 754

原创 CSS绘制三角形—border法

1. 实现一个简单的三角形使用CSS盒模型中的border（边框）即可实现如下所示的三角形：CSS实现简单三角形实现原理：首先来看在为元素添加border时，border的样子；假设有如下代码：<div></div>div { width: 50px; height: 50px; border: 2px solid oran...

2020-07-06 06:05:48 291

原创使用JS获取当前页面的URL(网址信息)

var url; url = window.location.href; /* 获取完整URL */alert(url); /* http://127.0.0.1:8020/Test/index.html#test?name=test */ url = window.location.pathname; /* 获取文件路径（文件地址） */alert(url); /* /Test/in...

2020-06-10 06:38:40 2755

原创 JS常见算法题目

最近收集了几个经典JS题目，比较有代表性，分享一下：1.j-dra-gon 变为驼峰jDraGonfunction getCamelCase(str) { var arr = str.split( '-' ); return arr.map( function( item, index ) { console.log(item) ...

2020-02-21 02:27:00 594

原创【转】Git 远程仓库clone时密码输错了如何修改

当输错时，就没有再次提供给我输入密码的机会，直接报错，如图：查了下原因，原来是Windows的凭据管理器里面保存了你刚才输错的账号信息去这里修改你刚才的账号密码，再次clone，OK!!!应该还有其他的方法，欢迎留言...

2020-01-19 07:12:45 1242

原创 js-获取小数点后的所有数-onscroll/onwhell-返回顶部

请问js如何获取小数点后的所有数？var num = 123.1234567;//var num1 = 123;var str = num.toString().split('.');//console.log(str[1] != undefined ? str[1] : '');//console.log(1 + Number(str[1]));js中点击返回顶部win...

2020-01-16 15:49:08 123

原创【React】遍历的两种方式

1、foreach（推荐） list.forEach((item)=>{ });eg： dataSource.forEach((item) => { const est = item.estimateAmount === null ? 0 : parseFloat(item.estimateAmount); const gmv = item....

2020-01-16 07:52:56 1070

原创 [转]React -- 父子组件通信props 和 onRef

image.png一个普通的输入框和一个按钮我想通过点击按钮清空input里面的内容如果没有组件之间的通信的话肯定这么写image.png很简单直接按钮绑定事件清空input但是如果有组件之间的通信呢??子组件调用父组件通过props子组件image.png父组件image.png父组件调用子组件的方法 - onRef...

2020-01-16 07:51:18 500

原创兼容ie8低版本浏览器不支持addEventListener

if (window.attachEvent) { window.attachEvent("onload", show); } else if (window.addEventListener) { window.addEventListener("load", show, false); } 复制代码现代主流浏览器addEventListen...

2020-01-16 07:49:32 3430

原创记录js小知识

请问js如何获取小数点后的所有数？var num = 123.1234567;//var num1 = 123;var str = num.toString().split('.');//console.log(str[1] != undefined ? str[1] : '');//console.log(1 + Number(str[1]));复制代码js中点击返回顶部windo...

2020-01-16 07:49:08 105

空空如也

H5、JS/JQ如何调用手机震动功能