js
会点php的前端小渣渣
技术栈:mvc框架+react+vue+小程序+微信公众号开发
展开
-
canvas的globalCompositeOperation使用(机密)
canvas的globalCompositeOperation使用(机密)原创 2023-11-30 09:45:02 · 592 阅读 · 0 评论 -
js 简易封装字符串加密解密函数
【代码】js 简易封装字符串加密解密函数。原创 2023-11-13 14:35:28 · 188 阅读 · 0 评论 -
iframe父子窗口通信(免跨域)(最下面附带封装好的)
子窗口对父窗口发出消息。父窗口向子窗口发送消息。原创 2023-08-29 17:09:42 · 195 阅读 · 0 评论 -
js删除 url 中指定参数,并返回 url
【代码】js删除 url 中指定参数,并返回 url。原创 2023-04-25 10:22:21 · 262 阅读 · 0 评论 -
js在线scss转css的方法
【代码】js在线scss转css的方法。原创 2023-04-23 10:07:40 · 1515 阅读 · 0 评论 -
使用jquery方式渲染vue的组件方法
【代码】使用jquery方式渲染vue的组件方法。原创 2023-01-28 14:12:46 · 368 阅读 · 0 评论 -
axios下载zip文件 踩坑
重点是必须指定你下载的文件类型 type: 'application/zip'不然下出来要么是乱码,要么是空文件。原创 2022-12-24 16:27:46 · 740 阅读 · 0 评论 -
在低代码中平台记录sortablejs拖拽使用经验
只需要关注sortablejs的api方面使用,业务方面可以忽略。原创 2022-09-21 10:23:25 · 336 阅读 · 0 评论 -
html5拖拽事件(非鼠标事件)踩坑记录
圈起来要考,这里的target指的是你鼠标拖到目的地的target,不是你正在拖的物体。原创 2022-09-13 16:36:29 · 757 阅读 · 0 评论 -
js 复制图片到剪切板
【代码】js 复制图片到剪切板。原创 2022-08-24 11:04:01 · 1113 阅读 · 0 评论 -
css互相转换scss、css
sass to css:SassMeister | The Sass Playground!css to sass:css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code原创 2022-06-16 14:40:40 · 930 阅读 · 0 评论 -
vue3-sfc-loader (浏览器直接运行vue3、vue2)
vue3-sfc-loader原创 2022-06-10 10:16:14 · 2999 阅读 · 1 评论 -
codemirror-editor-vue3编辑器行号错位bug
直接当组件使用<template> <div class="codemirror"> <codemirror ref="codemirror" v-model:value="code" :options="cmOption" @cursorActivity="onCmCursorActivity" @ready="onCmReady" @focus="onCmFocus" @.原创 2022-05-13 14:17:41 · 1611 阅读 · 2 评论 -
getComputedStyle获取元素样式踩坑
正确用法: //点击时获取直线距离 getCoordinate(el) { Promise.resolve().then(() => { const firstChild = this.getControlPanelRoot().firstChild; let x, y, r, b; let WrapWidth = parseInt(getComputedStyle(firstChild).width); let WrapH...原创 2022-03-22 17:56:37 · 785 阅读 · 0 评论 -
原生js实现指定范围内鼠标元素拖拽
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <tit.原创 2022-03-17 15:35:02 · 801 阅读 · 0 评论 -
forEach里面如何终止执行下一步(vuex举例)
使用的时候 主要包 try catch try { this.$store.commit('addNewProject',{projectName: this.addProjcetFrom.projectName,projectType: this.addProjcetFrom.projectType}) this.$store.commit('setCurrentProjcetIndex',{index:thi.原创 2022-03-01 10:08:59 · 826 阅读 · 0 评论 -
前端低代码用到的第三方库和思路
html2object该库用于将 html 解析为 javascript 对象,或将 javascript 对象转换为 html。这个库也适用于 SFC 文件(*.vue)。htmlparser2 、htmlparser前者可以说是后者的升级版吧,作用跟上面一样,互相转换html或obj对象都是传入字符串,将字符串转换为3层对象:template、script、style...原创 2022-02-23 14:37:22 · 850 阅读 · 0 评论 -
Vue 是如何更新 DOM 的?虚拟DOM和diff算法总结
虚拟DOM简而言之就是,用JS去按照DOM结构来实现的树形结构对象,你也可以叫做DOM对象最简单的创建虚拟dom的类// element.js// 虚拟DOM元素的类,构建实例对象,用来描述DOMclass Element { constructor(type, props, children) { this.type = type; this.props = props; this.children = children; .原创 2022-01-06 16:47:44 · 1333 阅读 · 0 评论 -
ES Module 和 Commonjs | require和import的区别
1. 语法1.1 ES Module导出:export / export default导入: import * from 'module'1.2 Commonjs导出:module.exports导入:const module = require('module')2. 特性2.1 ES Module静态引入、编译时引入(支持Tree shaking 按需加载)2.2 Commonjs动态引入、执行时引入...原创 2022-01-05 11:01:38 · 1277 阅读 · 0 评论 -
JS继承 原型链继承、构造函数继承、组合继承
原型链继承将父类的实例作为子类的原型function Parent() { this.isShow = true this.info = { name: "yhd", age: 18, };}Parent.prototype.getInfo = function() { console.log(this.info); console.log(this.isShow); // true}function Child() {};原创 2022-01-04 15:29:51 · 140 阅读 · 0 评论 -
vue、react脚手架项目中环境变量 .env 文件原理
VUE_APP_NAME=bobVUE_APP_QQ=2410024100VUE_APP_URL=2410024100@qq.com单从这个文件来看,我们可以知道有如下功能需要实现:读取 .env 文件解析 .env 文件拆成键值对的对象形式赋值到 process.env 上最后返回解析后得到的对象简单实现const fs = require('fs');const path = require('path');const parse = function parse(s.原创 2022-01-04 10:15:00 · 1012 阅读 · 0 评论 -
前端使用performance实现性能监控
<script> (function() {handleAddListener('load', getTiming)function handleAddListener(type, fn) { if(window.addEventListener) { window.addEventListener(type, fn) } else { window.attachEvent('on' + type, fn) }}function getTiming() { t.原创 2021-12-06 15:02:26 · 309 阅读 · 0 评论 -
this.$refs 获取不到值 undefined 问题
最近刚好又碰到ref为空问题,记录下当我们在 vue 项目中,想要通过$refs 来获取元素时,会出现获取不到的BUG,原因是,dom 节点 异步加载机制,解决方案:this.$nextTick 来解决但是有时候 即使加上了 也是依旧报错 原因是: v-for 循环 得到的不止一个 解决方案 this.$refs[refName][0] 还有一个原因是 v-if v-show 进行的设置 具体问题 需要具体解决例如像我这样:我这个比较特殊是从子组件发出来的。。。而且又...原创 2021-10-21 11:15:08 · 3090 阅读 · 0 评论 -
使用dayjs 补全接口返回的日期
适用接口会返回2021-10-08、2021-10-10 、2021-10-11 没有连续性的...首先说下原理:使用开头的日期例如:2021-10-08,然后遍历 dayjs(dateKeys[0]).add(i, 'day').format('YYYY-MM-DD')自然而然就会自动补上日期了。效果图:首先准备一段模拟返回接口的数据 const res={"result":1,"errorCode":1,"errorMsg":"处理成功","obj":{"2...原创 2021-10-09 11:32:55 · 491 阅读 · 0 评论 -
原生ajax + Promise 封装
有老项目前后不分离那种。。。。所以。。。哎此处是用form data格式的传参async function getAjax(type,url,params,errTip=null) { return new Promise((resolved,rejected)=>{ //创建ajax对象 let ajax; //注意,不要根据浏览器的navigator.userAgent来检测浏览器是否支持...原创 2021-08-12 16:17:45 · 186 阅读 · 0 评论 -
js的变量提升、函数提升以及es6的let、const的块级作用域
1.什么叫提升?提升:就是js代码执行之前引擎会进行预编译,预编译期间就会将变量声明和函数声明提升到其对应作用域的最顶端。提升一般是对用var关键字申明的变量或函数。let、const关键字申明的没有提升。来个小例子说明一下:console.log(a) // undefinedfn() // this is fnvar a = 1function fn () { console.log('this is fn')}这段代码的执行顺序:function fn() { c原创 2021-07-16 15:26:58 · 206 阅读 · 0 评论 -
js对象数组分割成:数组对象
var arr = [ {"id":"1001","name":"值1","value":"111"}, {"id":"1001","name":"值1","value":"11111"}, {"id":"1002","name":"值2","value":"25462"}, {"id":"1002","name":"值2","value":"23131"}, {"id":"1002","name":"值2","value":"2315432"}, {...原创 2021-07-15 14:41:44 · 1582 阅读 · 0 评论 -
通过api接口把图片上传给后端(踩坑)
1.加multipart/form-data//用户端图片上传 加multipart/form-dataexport const uploadImage = (params) => { return $.post('/app/pat/pushpull/imgUpload', params, { headers: { "Content-Type": "multipart/form-data" } })}2.还有最主要用new FormData 来传。。。。 async g...原创 2021-07-06 17:37:32 · 1434 阅读 · 0 评论 -
Lodash中数组常用方法
数组方法#1.数组对象去重 differenceBy(array, [values], [iteratee=_.identity])#let newArr =_.differenceBy( [{ name:'cai',age:12 }, { name:'ccc',age:18}, { name:'ddd',age:18}], [{ name:'cai',age:14 }, { name:'bbb',age:18}], 'name');console.log(newArr)从第一个原创 2021-06-17 15:47:41 · 1211 阅读 · 0 评论 -
vue移动端h5,点击微信授权登录
封装微信登录接口:const wxLogin = (appid, url) => { let redirect_uri = encodeURIComponent(url) window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsa.原创 2021-06-08 10:12:04 · 2047 阅读 · 0 评论 -
(day.js)moment.js时间库 获取各种开始、结束日期
//获取本日 const startDate = moment().format('YYYY-MM-DD'); const startDate = moment().format('YYYY-MM-DD');//获取本周 const startDate = moment().week(moment().week()).startOf('week').format('YYYY-MM-DD'); //这样是年月日的格式 const endDate = moment().week(momen.原创 2021-05-28 11:30:07 · 3859 阅读 · 0 评论 -
使用splice删除内容后,useState 更新失败问题
起因:点击删除某行数据const [table, setTable] = useState<Array<crConsultGroupPageListData>>([])// 列表table.splice(index, 1) setTable([...table]) //这是正确的 要全量更新setTable(table) //这是错误的 并没有全量...原创 2021-05-19 13:55:39 · 704 阅读 · 0 评论 -
react Hook之useMemo、useCallback及memo
useMome、useCallback用法都差不多,都会在第一次渲染的时候执行,之后会在其依赖的变量发生改变时再次执行,并且这两个hooks都返回缓存的值,useMemo返回缓存的变量,useCallback返回缓存的函数。const value = useMemo(fnM, [a]);const fnA = useCallback(fnB, [a]);1、memo的应用React.memo 为高阶组件。它与React.PureComponent非常相似,但它适用于函数组件,但不适用于原创 2021-05-19 11:27:47 · 682 阅读 · 0 评论 -
基于vscode 自动格式化css + js代码 (装插件)
css格式化要在vscode装:Beautify css/sass/scss/lessjs格式化要装ESLint.vscode 里面设置{ "editor.formatOnSave": true, "editor.tabSize": 2, "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.options": { "extensions": [ ...原创 2021-05-13 18:05:23 · 2130 阅读 · 0 评论 -
js的原型、原型链、new、Object.create 的理解
理解原型编程范式类是先抽象后具体,也就是必须先有类,之后才是实例,然后在关注具体层面的东西。比如 JAVA 中,类是它面向对象系统的根本。原型是先具体后抽象,将相似实例关联到一个原型对象,从而囊括较为通用的行为和属性。基于此原型,通过 “复制” 来创建新对象。JS 中,原型是面向对象系 统的根本。JS 中怎么实现复制的呢?JS 是通过使新对象保持对原型对象的引用来做到了 “复制”(就是新对象上面有 proto)。JS 不是有 Class 么?注意,JS 的 class 只是原型的原创 2021-01-21 14:36:56 · 239 阅读 · 0 评论 -
JS 装饰器 记录(为了后续用在vue2、vue3作知识储备)
2021年1月20号下午2点半记录Babel 7.1.0 最终支持了新的装饰器提案:你可以使用@babel/plugin-proposal-decorators插件来提前尝试此功能 ????。相关历史三年多以前,Yehuda Katz首先提出了装饰器的概念。TypeScript 在 1.5 版本(2015)中发布了对装饰器的支持以及许多 ES6 的相关特性。 一些主流框架,如 Angular 和 MobX 等开始使用它们来增加开发者体验:这使得装饰器非常受欢迎,并给社区带来了一种已经稳定的错觉。原创 2021-01-20 14:35:38 · 478 阅读 · 0 评论 -
generator函数+yield+Promise搭配使用(顺带回顾react框架的dva)
写react代码、或者写 dva.js框架的时候,经常会用到generator函数(经过封装 call、put) 主要很久没写generator函数和react了,特此回顾下。/* 1.先定义一个generator函数 + 搭配 Promise语法。 2.再使用yield 返回出Promise 3.由于使用fn(5).next().value接收的是个Promise,所以就可以使用then了 4.react 里面的yelid 看不到.next().value 这种,说明被封装过了*/...原创 2020-12-17 10:00:48 · 1349 阅读 · 2 评论 -
微信公众号支付完成‘闪退‘处理之‘点金计划‘(自定义商家小票)
您好,微信支付服务商平台6月底就发了公告,服务商jsapi支付后回到商家页面的能力,会陆续回收,由点金计划来承载。如果没有开通点金计划的服务商,支付后就会直接关闭商家页面。详情可查看公告说明:https://pay.weixin.qq.com/index.php/public/cms/content_detail?platformType=1&lang=zh&id=121505另外,点金计划相关接口可参考这个文档https://pay.weixin.qq.com/wiki/d原创 2020-12-10 11:12:21 · 1777 阅读 · 0 评论 -
vue.js 横向(时间轴、步骤图、流程图)模版
效果:<template> <div class="container"> <div style="display:flex;"> <div class="item-wrap"> <div class="item"></div> <div class="dot"></div> .原创 2020-12-04 18:24:19 · 3812 阅读 · 0 评论 -
动态更新CSS自定义变量属性值,感觉非常棒的小技巧
<!DOCTYPE html><html><head><meta charset="utf-8"><title>动态更新CSS属性值</title><style>:root { --qq: red;}#ex1 { color: var(--qq);}</style><...原创 2020-02-20 14:39:10 · 2743 阅读 · 0 评论