- 博客(57)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 集成editorconfig配置，使用prettier工具，使用ESLint检测，git Husky和eslint，git commit规范，代码提交验证
4.1 .prettierrc 自定义格式规则{4.2 .prettierignore 忽略配置/ dist /*.local.output.js/public/*4.3 package.json中添加脚本 配置一次性修改的命令// ESlint 检查配置 module . exports = {
2022-09-30 12:45:57
382
1
原创 v3+ts慢慢学习路之二【v3源码下载】+【v3基础应用】
能够跨越时间告别，已经不是浅的缘分了一、v3源码下载打开github搜索 https://github.com/ vue-next1、下载github 桌面端clone地址，切换到最新的tags分支中clone下来之后，先通过 git tag 查看最新的标记分支在切换到标记分支名 git checkout v3.0.0 git会提示你当前处于“detached HEAD” 状态在tag基础代码上创建一个分支 git checkout -b v3.0.0此时就可以在新的分支测试了.
2022-01-11 14:01:21
569
原创 v3+ts慢慢学习路之一【了解vue生态现状】+【为什么要学TypeScript】
其实之前写过V3的入门，确实，那就是入门要掌握的API，随着v3的版本不断更新，周边组件不断完善，是时候展示真正的掌握核心技术了一、Vue3生态现状1、vue版本的更新情况 npm view vue versions从目前版本迭代来看已经到了3.2.26 算是更新非常快速了2、周边vuex 版本更新情况 npm view vuex versions3、周边vue-router版本更新情况 npm view vue-router versions4、周边element-plus UI库更.
2022-01-11 11:36:23
1367
原创 记录一个小程序 input输入框格式手机号方法
记录小程序input输入框 输入格式显示为手机格式 133 8888 6666<input class="input" type="number" maxlength="13" @input="handleInput" placeholder="请输入手机号" placeholder-class="holderClass" autocomplete="off" /> handleInput(event) { let value = event.target.value.rep.
2021-11-26 14:17:47
3592
原创 VSCode+Prettier+ESLint团队代码风格统一，保存自动根据ESLint格式化
VSCode+Prettier+Eslint团队代码风格统一，保存自动根据Eslint格式化团队协作代码风格保持一致-----Prettier代码格式校验保持一致----Eslint代码规范除了编辑器检查以外，还有一些譬如变量名、样式名的规范，可以参考腾讯的代码规范或者百度的代码规范腾讯代码规范百度代码规范1、先行安装如下四个插件插件2、VScode编辑器设置settings.json{ //主题和图标配置，根据自己情况配置 "workbench.iconTheme".
2021-07-12 23:00:41
1244
6
原创 AOP面向切片的一些记录
面向切片的主要作用是把一些跟核心业务逻辑无关的功能模块抽离出来应用场景日志统计安全控制异常处理…各种数据埋点// 在function的原型上绑定一个之前执行的方法Function.prototype.before = function before(beforeFn){ if(typeof beforeFn!=='function') throw new TypeError('beforeFn is not function') const that = this return .
2021-05-24 10:13:03
89
原创 vue3之入门，掌握这6个api就够了
vue3 正式版都发布这么久了，周边的生态也都支持了vue3。那还等什么呢，一起来了解一下这6个API吧<template> <div class="hello"> <h1 ref="h1Dom">果果帅吗？</h1> <button @click="handleChange('sup')">支持</button> <button @click="handleChan.
2021-05-18 21:08:40
219
原创 项目中的axios简单封装
简单的axios封装，用于平时的项目，虽然简单但基本够用，仅供自己参考// 此文件叫http.js，主要用于封装axios 里面用到的axios 和 qs 都需要自己npm安装import axios from 'axios'import qs from 'qs'// 默认配置// axios.defaults.xxx// 拦截器处理// axios.interceptors.request// axios.interceptors.response// 创建一个实例，可以用于多.
2021-05-14 12:43:46
227
原创 npm相关功能浅析
用于记录平时在工作中使用到NPM安装包的常见命令，仅供自己参考背景：目前工程化/自动化开发都是基于node环境，基于npm管理包，基于webpack实现模块之间依赖打包，部署上线等npm常规操作npm install xxx 把模块安装到当前目录（在哪个目录下执行命令，这个目录就是当前目录下）npm install xxx -g 把模块安装在全局目录下npm uninstall xxx / npm uninstall xxx -g 卸载模块npm install xxx@xxx 安装指定.
2021-04-29 23:59:33
146
原创 Vue3.0源码学习之一手撸reactive
文章仅用于记录自己在学习vue3.0过程中的理解，将分为多个版本来解读核心源码，有问题请多看vue3官方文档vue3.0-- 传送门如果想要测试下面代码，直接通过官方cli 搭建vue3把不要的东西删除之后的项目结构main.js // import {reactive,effect,computed,ref } from '@vue/reactivity' //官方包，可以用作自己手撸代码的标准 // 引入自己的包，手写reactive 分析其原理 import { reactive, .
2021-02-25 15:49:31
217
原创 uniApp H5微信网页授权，微信支付
用于记录 uniapp 编译成H5后，完成微信授权和微信支付，微信浏览器中主要看场景二业务场景介绍业务需要在H5中完成支付功能（微信支付）使用场景介绍1、H5运行在普通浏览器中；2、H5运行在微信浏览器中。分析过程场景一：H5运行在普通浏览器中H5普通浏览器支付过程并不复杂，大致流程如下：a、前端发起支付请求给后端，后端收到后，调用微信支付接口下单；b、微信支付接口会返回一个支付链接给到后端；c、后端把微信返回的支付链接通过支付请求(a)接口返回给前端；d、前端拿到链接之后，跳转.
2021-02-05 17:09:28
6473
4
原创 最简单的发布订阅
这可能是最简单的发布订阅/** * 发布订阅模式 * 特点是：发布和订阅是可以单独执行的 * on 发布 * emit 订阅 */let events ={ _arr:[], on(o){ this._arr.push(o) }, emit(data){ this._arr.forEach(o=>o(data)) }}events.on(function(data){ console.log(dat.
2020-09-18 12:04:56
140
原创 观察者模式，浅析
观察者模式，各种大型框架都会用到。里面结合发布订阅/** * 观察者模式 * 内部结合发布订阅 * */// 观察者class Observer { constructor(name) { this.name = name } // 观察者更新数据 updata(data) { console.log(this.name + ':' + data) }}// 被观察者class Subject { .
2020-09-18 11:38:11
112
原创 node-sass 安装总是报错解决方案
仅供自己参考解决方案一：安装时使用淘宝镜像安装npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/解决方案二：设置全局镜像源npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/解决方案三：设置环境变量// lmac 下SASS_BINARY_SITE=https://npm.taobao.org.
2020-08-07 22:58:15
1572
原创 浅谈模块发展，仿写node中的require方法
common.js规范发展历程模块存在的原因？解决的问题：变量污染问题尝试1：单例模式var obj ={a:1b:2c:function(){}}…存在的问题：如果多人开发也会存在变量重名尝试2：IFFE 自执行函数(高级单例模式) 解决尝试1的问题var obj =(function(){var a=1;var b=1;function c(){}return{c:c}})obj.c()…随着尝试2的发展，就有了许多库1、sea.js cmd2、amd
2020-07-27 00:17:03
126
原创 把多维数组变成1维数组reduce应用
仅供参考let arr =[1,2,3,[89,90,901],[3],[4],[5,6,7,8],6,[6,7,8]]let reduceFn = (list,newArr=[])=>{ return list.reduce(function (a,b) { if(Array.isArray(b)){ reduceFn(b,a) }else{ a.push(b) } ret.
2020-06-03 19:27:28
480
原创 uniapp小程序增加自定义字体
仅供自己参考，不做任何讨论在线转换工具 https://transfonter.org/1、在app.vue中引入复制好的字体文件css2、在公共样式文件中，加入一个样式名，以便文件中使用3、 在需要的文件中使用4、如下就是转换的详细步骤，仅供参考。...
2020-06-01 15:15:28
6176
原创 Proxy与Reflect的美好故事
个人学习记录，仅供参考，不做解答。说到数据劫持或者代理，我们可能都会想到Object.defineProperty。但是它有一个缺点，不能对对象类型新添加的数据进行劫持因此如今在不考虑兼容的情况下，终于有一个终极方案 Proxylet obj =[1,2,3]function update(){ console.log('数据更新')}let proxyObj = new Proxy(obj,{ set(target,key,value){ if(key==='length')ret.
2020-05-28 09:59:28
139
原创 记录对象深拷贝的两中方法
对象深拷贝，两种方法// 方法一：最简单的操作/** * 此种方法克隆 * obj不能为Function RegExp Date ... */export function deepCopy(obj) { return JSON.parse(JSON.stringify(obj))}// 方法二：交完整的操作（根据情况进行使用）/** * 深克隆对象，数组 * new WeakMap() 功能和new Map()一样，但key必须是对象，也是弱链接，内存可以释放 * h.
2020-05-26 10:54:12
140
原创 uni-icons中添加自定义图标
由于项目需要，uni-icons自带的需求图标无法满足业务需要，故需要增加自定义图标，借此记录以便后期快速添加所需工具http://fontstore.baidu.com/static/editor/index.html# 翻译ttf字体https://www.motobit.com/util/base64-decoder-encoder.asp 把ttf字体编译成base64格式https://www.iconfont.cn/ 阿里字体图标库https://uniapp.dcloud.i.
2020-05-11 10:12:47
2793
1
原创 工作常用的工具类JS+reset.css
var tools = (function() { var _urlIndex = '请求的域名' /** * POST 请求 */ function doPost(url, params, callback, errorCallback) { url = _urlIndex + url; $.ajax({ ...
2020-03-20 16:27:34
224
原创 仪表盘动画设计思路
此次为工作中遇到的一个仪表盘动画，特此把思路写下来，一遍后续好用效果图也就是根据分数不同走到不同的位置思路需要准备刻度图片，底色是白色，刻度位置为透明，绝对定位，设置z-index值在刻度图片下面准备一个颜色的盒子，盒子的宽，高和刻度的一致，绝对定位，设置z-index值并小于刻度的z-index值通过css3的旋转属性，旋转刻度下面的颜色盒子，以来达到颜色的变换计算旋转...
2020-02-22 15:36:37
558
原创 计数器动画-ES6语法
此次分享，主要是计数器动画（例如：0-100 会有一个变化的过程）第一步：在项目中创建一个JSclass CountUp { /** * 参数介绍 * 开始值 结束值 小数点 时长 ？ */ constructor(startVal, endVal, decimals, duration, options = {}) { Object.assign(this, { ...
2020-02-22 14:53:34
308
原创 浅谈构造函数执行都经历了什么
构造函数执行都经历了那些阶段，和普通函数有什么区别，下面听我娓娓道来// 如下是一段js代码示例，我们将研究这个构造函数的运行机制function Fn(name,age){ var n=10; this.name=name; this.age=age+n;}var f=new Fn('zhangsan',20);//普通函数执行步骤解析：//=>...
2019-11-06 09:29:36
231
原创 Promise A+ 封装练习
Promise A+ 规范封装练习,显示了then，catch，all和then链封装自己的Promise// ES6 CLASS 构造类class Promise { // 指向的就是函数本身私有 promise进来之后就传递了一个方法进来，所以excutorCallBack 进来就执行 constructor(excutorCallBack) { // primi...
2019-10-25 10:22:17
124
原创 getBoundingClientRect() 方法练习
getBoundingClientRect() 实现购物车飞入案例此案例结合了vue实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia...
2019-10-25 10:14:11
342
原创 ajax封装练习
ajax 封装练习 ~ function () { class ajaxClass { //=>SEND AJAX init() { //=>THIS:EXAMPLE let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {...
2019-10-24 17:55:49
131
原创 Object.defineProperty 练习
Object.defineProperty 练习1、html结构如下： <div> 你好，<span id='nickName'></span> <div id="introduce"></div> </div>2、JS如下var userInfo={};Object.defineProp...
2019-10-24 17:09:08
109
原创 闭包及作用域销毁练习
闭包及作用域销毁练习题var i = 1; function fn(i) { return function (n) { console.log(n + (++i)) } } var f = fn(2); f(3); fn(5)(6); fn(7)(8); f(4)//输出打印结果（把下面的html复制到本地打开就有此题详解）//...
2019-10-24 11:42:24
406004
3
原创 base64 转换成file并上传到服务器上
2，base64 转换成file并上传到服务器上为什么要把base64转换成file在上传呢？原因很简单，就是base64 太大的话，上传太慢了。// 把base64 转换成文件对象function dataURLtoFile(base64Str, fileName) { var arr = base64Str.split(','), mime = arr[0].mat...
2019-09-12 15:20:09
4633
原创 日常常用的CSS&JS技巧
工作中常用的css技巧，用于后期快速查询，不分先后。INPUT 输入框数字键盘（移动端）<input type="text" name="mobile" placeholder="请输入手机号码" autocomplete="off" pattern="[0-9]*" maxlength="11" data-required='true'...
2019-09-02 11:55:06
307
原创 记录一次html2canvas使用经历
1，html2canvas【DOM元素生成图片】官网地址：http://html2canvas.hertzen.com/目前使用1.0版本没啥bug业务需求，根据产品详情页面，生成分享海报。需要达到的目标<!--我的HTML结构如下--><div class="detailSharePage" id="detailSharePage"> ...
2019-08-15 18:01:54
208
原创 React 学习笔记【react 生命周期函数】
React 学习笔记【react 生命周期函数】react生命周期（钩子函数）defaultProps ={} 设置默认属性值constructor 创建一个组件componentWillMount 第一次渲染之前render 第一次渲染componentDidMount 第一次渲染完成实际项目中，我们在此钩子函数中，完成数据请求，状态修改，等操作should...
2019-08-13 09:19:31
99
原创 React 16.8.6 学习笔记【3】【ReactDom.render() 渲染原理】
React 学习笔记 【ReactDom.render() 渲染原理】JSX渲染机制1，通过bebel语法解析模块（babel-preset-react）把jsx语法编译为React.createElement（…）;React.createElement( "div", { id："box", style：{color:'red',fo...
2019-08-08 14:19:46
450
原创 React 16.8.6 学习笔记【2】【react & react-dom &jsx】
React 学习笔记 【react & react-dom & jsx】react【渐进式框架】一种最流行的框架设计思想，一般框架中都包含了很多内容，这样导致框架的体积过于臃肿，拖慢加载的速度。真实项目中，我们使用一个框架，不一定用到所有的功能，此时我们应该把框架的功能进行拆分，用户想用什么，让其自己自由组合即可。全家桶：渐进式框架N多部分的组合VUE全家桶：vue-...
2019-08-07 15:11:55
307
原创 React 16.8.6 学习笔记【1】【利用脚手架创建项目，脚手架剖析，lesswebpack配置】
React 学习笔记React 是一款框架:具备自己的开发的独立思想(MVC:Model View Controller)框架特点:->划分组件开发;->基于路由的SPA单页面开发(把所有组件拼接成一个页面);->基于ES6编写代码(上线的时候,需要把ES6编译成ES5=>基于babel编译);->可能用到less/sass,我们也需要使用对应的插件,把...
2019-08-06 18:01:15
431
原创 简版函数防抖+节流理解
函数节流+函数防抖,多数引用于需要频繁触发的某一些事件,比如 resize,scroll,mousemove …等等但是我们触发这些事件的时候,并不希望事件触发的过程中持续去执行对应的函数因此就产生了 防抖和节流的解决方案// 假定dom中有一个div.boxlet box = document.getElementsByClassName('box')[0];// 项目一:...
2019-08-02 17:19:05
104
空空如也
ios 12.1.1 打开公众号网页 输入完内容之后，其它按钮无法点击
2018-12-18
TA创建的收藏夹 TA关注的收藏夹
TA关注的人