JS学习
关注
分享
扫一扫
文章平均质量分 55
godferyZhu
这个作者很懒，什么都没留下…
展开
-
集成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 · 458 阅读 · 1 评论 -
v3+ts慢慢学习路之五【webpack基本使用，安装和普通打包】
webpack基本使用，安装和打包原创 2022-06-13 16:39:38 · 539 阅读 · 0 评论 -
v3+ts慢慢学习之路四【v-for和它当中的key】
v-for中的key使用原创 2022-06-09 13:10:20 · 2280 阅读 · 1 评论 -
v3+ts慢慢学习路之三【methods方法中的this】
搞懂vue-methods方法中的this原创 2022-06-08 16:00:49 · 457 阅读 · 0 评论 -
VSCode+Prettier+ESLint团队代码风格统一，保存自动根据ESLint格式化
VSCode+Prettier+Eslint团队代码风格统一，保存自动根据Eslint格式化团队协作代码风格保持一致-----Prettier代码格式校验保持一致----Eslint代码规范除了编辑器检查以外，还有一些譬如变量名、样式名的规范，可以参考腾讯的代码规范或者百度的代码规范腾讯代码规范百度代码规范1、先行安装如下四个插件插件2、VScode编辑器设置settings.json{ //主题和图标配置，根据自己情况配置 "workbench.iconTheme".原创 2021-07-12 23:00:41 · 1503 阅读 · 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 · 129 阅读 · 0 评论 -
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 · 254 阅读 · 0 评论 -
项目中的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 · 256 阅读 · 0 评论 -
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 · 302 阅读 · 0 评论 -
uniApp H5微信网页授权，微信支付
用于记录 uniapp 编译成H5后，完成微信授权和微信支付，微信浏览器中主要看场景二业务场景介绍业务需要在H5中完成支付功能（微信支付）使用场景介绍1、H5运行在普通浏览器中；2、H5运行在微信浏览器中。分析过程场景一：H5运行在普通浏览器中H5普通浏览器支付过程并不复杂，大致流程如下：a、前端发起支付请求给后端，后端收到后，调用微信支付接口下单；b、微信支付接口会返回一个支付链接给到后端；c、后端把微信返回的支付链接通过支付请求(a)接口返回给前端；d、前端拿到链接之后，跳转.原创 2021-02-05 17:09:28 · 7175 阅读 · 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 · 222 阅读 · 0 评论 -
观察者模式，浅析
观察者模式，各种大型框架都会用到。里面结合发布订阅/** * 观察者模式 * 内部结合发布订阅 * */// 观察者class Observer { constructor(name) { this.name = name } // 观察者更新数据 updata(data) { console.log(this.name + ':' + data) }}// 被观察者class Subject { .原创 2020-09-18 11:38:11 · 155 阅读 · 0 评论 -
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 · 1947 阅读 · 0 评论 -
git远程分支切换
最近要对旧项目进行重构,于是领导就建了一个2.0的分支,让我们都在2.0分支进行开发.如下就简单介绍一下关于本地分支如何切换到2.0并与远程2.0分支链接。先从远程克隆代码，注意：git clone https://地址 只会克隆master分支命令 : git clone https://gitlab.xxxxx.git进入克隆下来的文件夹 查看当前分支。 git bra...原创 2018-12-12 23:53:46 · 1365 阅读 · 0 评论 -
浅谈模块发展，仿写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 · 183 阅读 · 0 评论 -
把多维数组变成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 · 528 阅读 · 0 评论 -
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 · 183 阅读 · 0 评论 -
记录对象深拷贝的两中方法
对象深拷贝，两种方法// 方法一：最简单的操作/** * 此种方法克隆 * 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 · 163 阅读 · 0 评论 -
数组去重集合
使用对象的方式实现数组去重var ary = [12, 2, 1, 2, 232, 12, 3321] // 在原型中去添加去重的方法 Array.prototype.Unique = function Unique() { // 使用对象的key唯一性,来去重 var obj = {} ...原创 2018-10-12 17:08:29 · 206 阅读 · 0 评论 -
浅谈构造函数执行都经历了什么
构造函数执行都经历了那些阶段，和普通函数有什么区别，下面听我娓娓道来// 如下是一段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 · 279 阅读 · 0 评论 -
Promise A+ 封装练习
Promise A+ 规范封装练习,显示了then，catch，all和then链封装自己的Promise// ES6 CLASS 构造类class Promise { // 指向的就是函数本身私有 promise进来之后就传递了一个方法进来，所以excutorCallBack 进来就执行 constructor(excutorCallBack) { // primi...原创 2019-10-25 10:22:17 · 146 阅读 · 0 评论 -
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 · 417 阅读 · 0 评论 -
ajax封装练习
ajax 封装练习 ~ function () { class ajaxClass { //=>SEND AJAX init() { //=>THIS:EXAMPLE let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => {...原创 2019-10-24 17:55:49 · 176 阅读 · 0 评论 -
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 · 132 阅读 · 0 评论 -
闭包及作用域销毁练习
闭包及作用域销毁练习题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 · 426338 阅读 · 3 评论