js
文章平均质量分 52
风吹@头皮凉
just do it。
QQ: 1391020642
展开
-
vue keep-alive 使用
前言keep-alive 是 Vue 的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。例如:在开发中经常有从列表跳到详情页,然后返回详情页的时候需要缓存列表页的状态(比如滚动位置信息),这个时候就需要保存状态,要缓存状态。在组件切换过程中将状态保留在内存中,防止重复渲染DOM,减少加载时间及性能消耗,提高用户体验性。使用方式为<keep-alive> <component /></keep-alive>这里的component会被..转载 2022-04-18 17:03:40 · 3091 阅读 · 1 评论 -
vue-router跳转与传参
1、vue-router不带参数<router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name 带参数// params传参数<router-link :to="{name:'home', params: {id:1}}"> // 路由配置 path: "/home/:id" 或者 path: "/home:id" //转载 2022-04-18 16:39:50 · 807 阅读 · 0 评论 -
微信小程序PDF下载方案
1. 可以给用户一个链接,提示在浏览器打开并下载;2.如果希望保存在本地,这个几乎不可能,但是可以让后端将pdf转换成png长图,保存到相册;3.wx.openDocment({ filePath: 'filePath', fileType: 'pdf', showMenu: true, // 添加该属性, 点击右上角菜单, 将文件分享给好友 success(){ }})...原创 2022-01-18 09:58:25 · 5412 阅读 · 0 评论 -
Vue — 详解mixins混入使用
前言当我们的项目越来越大,我们会发现组件之间可能存在很多相似的功能,你在一遍又一遍的复制粘贴相同的代码段(data,method,watch、mounted等),如果我们在每个组件中去重复定义这些属性和方法会使得项目出现代码冗余并提高了维护难度,针对这种情况官方提供了Mixins特性一、什么是Mixins?mixins(混入),官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式,mixins是一个js对象,它可以包含我们组件中script项中的任意功能选项,如data、compone转载 2022-01-17 10:04:01 · 340 阅读 · 0 评论 -
微信小程序版本更新提示
提交代码时选择版本升级代码 onLaunch() { this.updateVersions() } // 版本更新提示 updateVersions() { const updateManager = uni.getUpdateManager() updateManager.onCheckForUpdate((res) => { if (res.hasUpdate) { // 新的版本下载中.原创 2021-11-02 16:21:47 · 963 阅读 · 0 评论 -
微信小程序scroll-view实现左右联动
需求:项目中做了一个选择城市的需求,要求全国所有的省市区都按照中文首字母分类并排序,左侧的城市列表和右侧的字母列表实现双向联动。第一步:根据腾讯提供的javascript SDK提供的接口,获取所有的省市区,并将省市区按照首字母进行分类排序。 let _this = this; _this.mapCtx = wx.createMapContext("myMap"); // 实例化API核心类 qqmapsdk = new QQMapWX({...转载 2021-11-02 11:05:01 · 1011 阅读 · 0 评论 -
前端js正则表达式2
第四章 正则表达式的拆分5.1. 结构和操作符编程语言一般都有操作符。只要有操作符,就会出现一个问题。当一大堆操作在一起时,先操作谁,又后操 作谁呢?为了不产生歧义,就需要语言本身定义好操作顺序,即所谓的优先级。上面操作符的优先级从上至下,由高到低。5.2. 注意要点关于结构和操作符,还是有几点需要强调:5.2.1 匹配字符串整体问题因为是要匹配整个字符串,我们经常会在正则前后中加上锚 ^ 和 $。比如要匹配目标字符串 “abc” 或者 “bcd” 时,如果一不小心,就会写成 /^ab转载 2021-09-28 10:39:42 · 375 阅读 · 0 评论 -
前端js正则表达式
正则表达式第一章 正则表达式字符匹配攻略1.1. 两种模糊匹配1.1.1. 横向模糊匹配一个正则可匹配的字符串的长度不是固定的,可以是多种情况的。譬如 {m,n},表示连续出现最少 m 次,最多 n 次。其实现的方式是使用量词。例如let reg = /ab{2,5}c/;var regex = /ab{2,5}c/g;var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";console.log( string.match(regex) )转载 2021-09-28 10:36:42 · 572 阅读 · 0 评论 -
前端打印及后端生成PDF
vue中前端打印CSS按正常样式书写, flex, 嵌套,主流样式,都可以用;JS涉及到图片, 必须是https地址, 且要等图片加载完成后, 再去打印;//判断打印中的审核签名图片是否加载完成 judgeVerifySign() { let that = this; if (that.orderDetial.verifySign) { let el = document.getElementById('verifySign');原创 2021-09-23 09:33:12 · 1335 阅读 · 0 评论 -
原始js实现循环轮播图
html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>轮播图最.原创 2021-09-10 14:35:59 · 212 阅读 · 0 评论 -
原生js实现淘宝放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原生js放大镜<.转载 2021-09-09 16:42:07 · 111 阅读 · 0 评论 -
前端Js常用宽高及位置
一个页面显示在浏览器内,浏览器又放置在屏幕窗口内,所以由里向外便是 页面 , 浏览器 , 屏幕 三者.1.屏幕尺寸screen.availHeight(window.screen.availHeight): 屏幕可用高度screen.availWidth: 屏幕可用宽度screen.height: 屏幕分辨率高度screen.width: 屏幕分辨率宽度2.浏览器尺寸window.outerHeight: 浏览器高度 , 此高度包含了水平滚动条..原创 2021-09-09 11:03:13 · 555 阅读 · 0 评论 -
移动端适配 postcss-px-to-viewport
我们先把它安装到项目的开发环境中: npm i postcss-px-to-viewport -D在项目根目录下添加.postcssrc.js文件 添加如下配置:module.exports = { plugins: { autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀,如-webkit-,-moz-等等 "postcss-px-to-viewport": { unitToConvert: "px", // 要转化的单位转载 2021-09-07 17:12:42 · 406 阅读 · 0 评论 -
前端CSS移动端适配
导读移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题:1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ...上面这些问题可能我们在开发中已经知道如何解决,但是问题产生的原理,以及解决方案的原理可能会模糊不清。在解决这些问题的过程中,我们往往会遇到非常多的概念:像素、分辨率、PPI、DPI、DP、DIP、DPR、视口等等,你真的能分清这些概念的意义吗?本文将从移动端适配的基础概念出发,探究移动端适配各种问题的解决方案和实现原理。转载 2021-09-07 15:09:50 · 1311 阅读 · 0 评论 -
前端防抖与节流
防抖言简意赅:函数的执行者冷静下来后(不一直抖动后),才真正执行。深入理解:触发事件时,只在事件触发 n 秒后才执行,如果你在一个事件触发的 n 秒内又触发了这个事件,那我就以新事件触发的时间为准,n 秒后才执行。比如频繁触发的某一函数,防抖可以只在最后一次触发后执行。总之,就是要等你触发完事件的 n 秒内不再触发事件,才执行。// func是用户传入需要防抖的函数// wait是等待时间const debounce = (func, wait = 50) => { // 缓存一转载 2021-09-06 15:09:15 · 112 阅读 · 0 评论 -
前端常用的八种数据结构
数据结构就是关系,没错,就是数据元素相互之间存在的一种或多种特定关系的集合。传统上,我们把数据结构分为逻辑结构和物理结构。 逻辑结构:是指数据对象中数据元素之间的相互关系,也是我们今后最需要关注和讨论的问题。 物理结构:是指数据的逻辑结构在计算机中的存储形式。1.数组(Array)数组是最简单、也是使用最广泛的数据结构。数组是可以在内存中连续存储多个元素的结构,在内存中的分配也是连续的,数组中的元素通过数组下标进行访问,数组下标从0开始。数组:查询快,增删慢 查询快:数组的地址是连续的,转载 2021-08-25 10:10:21 · 3419 阅读 · 0 评论 -
前端需要了解的设计模式
什么是设计模式?设计模式是对软件设计开发过程中反复出现的某类问题的通用解决方案。设计模式更多的是指导思想和方法论,而不是现成的代码,当然每种设计模式都有每种语言中的具体实现方式。学习设计模式更多的是理解各种模式的内在思想和解决的问题,毕竟这是前人无数经验总结成的最佳实践,而代码实现则是对加深理解的辅助。设计模式的类型设计模式可以分为三大类:结构型模式(Structural Patterns):通过识别系统中组件间的简单关系来简化系统的设计。 创建型模式(Creational Patter.转载 2021-08-23 11:44:46 · 210 阅读 · 0 评论 -
mac下生成安卓签名证书
检查自己的MAC ,有没有安装Java的 JDK打开Mac下的终端(Terminal.app)在终端输入以下命令/usr/libexec/java_home -V如果有安装过JDK,就会出现以下结果,如果还没有安装过Java JDK环境的小伙伴,先去自行安装JDK环境,再继续下面的步骤.红框里面就是jdk在Mac的路径,我们需要进入这个路径下,完成后续的步骤cd /Library/Java/JavaVirtualMachines/jdk1.8.0_231.jdk/Contents/Home转载 2021-07-07 17:39:02 · 676 阅读 · 0 评论 -
react入门笔记之数据共享
数据共享父子组件父组件// 渲染子组件 传递 数据 id ; 方法 getId<MenuList id={'111'} getId={(id)=> {this.getId(id)}}></MenuList>getId(id) { console.log('子组件传过来的id', id);// '666'} 子组件 componentDidMount(){ // 输出父组件参数id console.log('this.props.id原创 2021-06-30 10:36:52 · 329 阅读 · 0 评论 -
react入门笔记之路由
路由基本使用import React, { lazy, Suspense } from 'react';// 引入全局cssimport './assets/css/index.css';import { BrowserRouter, Switch, Redirect} from 'react-router-dom';import PrivateRoute from './utils/privateRoute.js'; //私有路由// 加载路由页面组件const Home = lazy((原创 2021-06-30 10:31:03 · 180 阅读 · 0 评论 -
react入门笔记之组件生命周期
生命周期各阶段调用顺序// 1. 初始化阶段: 由ReactDOM.render()触发---初次渲染// 1. constructor()// 2. getDerivedStateFromProps // 3. render()// 4. componentDidMount() =====> 常用// 一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息// 2. 更新阶原创 2021-06-30 10:22:35 · 163 阅读 · 0 评论 -
react入门笔记
路由基本使用import React, { lazy, Suspense } from 'react';// 引入全局cssimport './assets/css/index.css';import { BrowserRouter, Switch, Redirect} from 'react-router-dom';import PrivateRoute from './utils/privateRoute.js'; //私有路由const Home = lazy(() => imp原创 2021-06-28 14:55:21 · 180 阅读 · 0 评论 -
react各生命周期函数使用场景:
1. Constructor(props)使用场景:初始化局部State或把方法的句柄绑定到实例注意:第一个语句必须是super(props)2.GetDerivedStateFromProps(props,state)使用场景:内部state变化依赖于props时,注意:不要过度使用该函数。 如果你的操作依赖于props的更改并有副作用,最好放到ComponentDidUpdate中; 如果需要根据props的改变更新某些数据,最好使用memoization...原创 2021-06-23 11:02:40 · 285 阅读 · 0 评论 -
安装指定版本的nodejs
node有一个模块n,是专门用来管理node.js的版本的。npm install-g n2、升级node.js到最新稳定版 n stable3、安装指定版本:n v16.11.5原创 2021-04-26 16:48:03 · 399 阅读 · 0 评论 -
nest架手架启动新项目
npx @nestjs/cli new project-name原创 2021-03-25 09:52:29 · 112 阅读 · 0 评论 -
mac 安转typescript 后 tsc命令无效解决
安装 sudo npm install -g typescript复制安装路径/Users/mac/.npm-global/lib/node_modules/typescript/bin/终端输入open .bash_profile 打开配置文件export PATH=$PATH:$M2_HOME/bin: + 上述安装路径 保存终端输入source .bash_profile 使配置生效tsc -v 验证...原创 2021-02-23 18:20:27 · 1717 阅读 · 0 评论 -
js正则表达式看着一篇就够了
正则表达式是匹配模式,要么匹配字符,要么匹配位置1. 匹配字符1.1 横向模糊匹配横向模糊指的是,一个正则可匹配的字符串的长度不是固定的,可以是多种情况的。其实现的方式是使用量词。譬如 {m,n},表示连续出现最少 m 次,最多 n 次。var regex = /ab{2,5}c/g;var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";console.log( string.match(regex) );// => ["abbc"原创 2020-10-16 14:59:16 · 185 阅读 · 0 评论 -
vue与小程序易混淆知识点
1. 动态绑定style与class(1)vue:动态class对象语法:<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }" ></div>数组语法:①<div v-bind:class="[activeClass, errorClass]"></div> data: { activeCla...原创 2020-08-13 15:16:12 · 242 阅读 · 0 评论 -
canvas transform 使用 详解
图形的矩阵变换,其实就是图形中每个点的变换Canvas的transform(a,b,c,d,e,f)方法和Matrix(矩阵)的对应关系_ _|ace ||bdf ||_001_|Matrix和点(x,y)的对应关系x对应第一行,y对应第二行点(x,y)经过矩阵变换后的结果x' =ax + cy + e;y' = bx + dy + ...转载 2020-08-07 17:53:56 · 2100 阅读 · 3 评论 -
canvas 放射线渐变/圆形渐变详解
定义和用法createLinearGradient() 方法创建放射状/圆形渐变对象。渐变可用于填充矩形、圆形、线条、文本等等。提示:请使用该对象作为strokeStyle或fillStyle属性的值。提示:请使用addColorStop()方法规定不同的颜色,以及在 gradient 对象中的何处定位颜色。原理示意图JavaScript 语法:context.createRadialGradient(x0,y0,r0,x1,y1,r1);参数值参数 ...转载 2020-07-31 11:25:24 · 1096 阅读 · 0 评论 -
vue项目目录中的static和src下的assets的区别
vue项目目录中的static和src下的assets的区别内容待编辑原创 2020-12-10 14:25:58 · 578 阅读 · 0 评论 -
本地运行VUE打包后的文件
VUE项目打包完成后 我们通常需要在本地进行测试 然后再放到服务器上第一步:打包项目npm run build第二步:根目录新建 app.js文件第三步:复制以下代码到app.jsvar express = require('express');var fs = require('fs');var http = require('http');var app = express();app.use(express.static('./dist'));app.use(function (r转载 2020-07-14 16:13:03 · 1586 阅读 · 2 评论 -
vue中配置webpack不同环境下的域名及参数
vue中配置webpack不同环境下的域名及参数假设一个项目 需要有开发环境(dev), 测试环境(test), 正式环境(prod), 并且三种环境都要build打包的需要;前提是已通过vue-cli初始化了项目;1.先在page.json中配置脚本命令// 开发环境启动"serve:dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",//测试环境启动"serve:test"原创 2020-07-14 14:56:11 · 1351 阅读 · 0 评论 -
vue中使用的import是谁提供的??
es6语法提供了import和exportwebpack提供了按需加载在项目使用中 import究竟属于谁??使用了babel转码,使用import和export的时候,在浏览器运行代码的时候,提示Uncaught ReferenceError: require is not definedbabel只是个翻译,假设a.js 里 import 了 b.js对a.js进行转码,只是翻译了a.js,并不会把b.js的内容给读取合并进来如果想在最终的某一个js里,包含 a.js,b.js 的代码,原创 2020-07-14 09:27:37 · 234 阅读 · 0 评论 -
vue-cli中默认webpack配置详解
主要目录1.package.jsonpackage.json文件会描述这个NPM包的所有相关信息,包括作者、简介、包依赖、构建等信息,格式是严格的JSON格式。package.json来制定名单,需要哪些npm包来参与到项目中来,npm install命令根据这个配置文件增减来管理本地的安装包。{//从name到private都是package的配置信息,也就是我们在脚手架搭建中输入的项目描述 "name": "shop",//项目名称:不能以.(点)或者_(下划线)开头,不能包含大转载 2020-06-29 15:36:53 · 5360 阅读 · 1 评论 -
webpack入门优化篇
文中罗列出了十多种优化方式,大家可以结合自己的项目,选择适当的方式进行优化。这些Webpack插件的源码我大多也没有看过,主要是结合Webpack官方文档以及项目实践,在验证后输出了本文,如果文中有错误的地方,欢迎在评论区指正。鉴于前端技术变更迅速,祭出本篇文章基于Webpack的版本号:├── webpack@4.41.5 └── webpack-cli@3.3.10 本文对应的项目地址(编写本文时使用)供参考:https://github.com/YvetteLau/......原创 2020-07-14 09:02:27 · 525 阅读 · 0 评论 -
webpack入门进阶篇
1. 静态资源拷贝有些时候,我们需要使用已有的JS文件、CSS文件(本地文件),但是不需要webpack编译。例如,我们在public/index.html中引入了public目录下的js或css文件。这个时候,如果直接打包,那么在构建出来之后,肯定是找不到对应的js/css了。public目录结构├── public│ ├── config.js│ ├── index.html│ ├── js│ │ ├── base.js│ │...原创 2020-07-14 09:43:16 · 294 阅读 · 0 评论 -
webpack入门基础篇
1.webpack 是什么?webpack是一个现代JavaScript应用程序的静态模块打包器,当webpack处理应用程序时,会递归构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将这些模块打包成一个或多个bundle。2.webpack 的核心概念entry: 入口 output: 输出 loader: 模块转换器,用于把模块原内容按照需求转换成新内容 插件(plugins): 扩展插件,在webpack构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要做的...原创 2020-07-14 09:01:35 · 446 阅读 · 0 评论 -
react-router4.x 路由控制
1.第一种封装一个私有路由这是我的路由配置,Route大家都知道。不用多讲。PrivateRoute 这个是我自己封装的代码如下:PrivateRoute.jsximport React from 'react';import {Route,Redirect,withRouter} from 'react-router-dom';import PropTypes from 'prop-types';import storage from 'utils/storage.js';//私.原创 2020-06-19 11:17:12 · 296 阅读 · 0 评论 -
JS面向对象编程之封装
我们所熟知的面向对象语言如 C++、Java 都有类的的概念,类是实例的类型模板,比如Student表示学生这种类型,而不表示任何具体的某个学生,而实例就是根据这个类型创建的一个具体的对象,比如zhangsan、lisi,由类生成对象体现了抽象模板到具体化的过程,这叫做基于类的面向对象方式,而 JavaScript 没有类的概念,是基于原型的面向对象方式(虽然 Es6 增加了class,实质是对原型方式的封装)。总结起来就是以下两点:在基于类的面向对象方式中,对象(object)依靠类(class)来.原创 2020-06-18 17:31:38 · 531 阅读 · 0 评论