laishaojiang的博客

我最早接触的是vue，后来到新环境接手了个react的项目（16.4之前的版本），就慢慢学起来了。今年刚好有两个新项目由我一人全权负责。我就分别使用了vue3和进行开发。因为都是首次尝试，途中也碰到不少问题，还好接触互联网的帮助都解决了，最后也顺利上线了。现在回过头来总结一下vue和react在开发使用上的差异框架本身没有优劣之分，只有适合与否，根据自己的业务场景，团队技术栈来选择。就业务来说，可能我这两项目不够大，还无法体现出优劣度团队的话，哈哈这两项目都是我自己一人开发但是从开发体验上来讲，...

antd官网例子上默认是点击checkbox或者radio才会选中，这对体验上来说有点不太方便，所以需求是要做成点击Table的整行直接触发选中。其实官方也有给了个例子https//codesandbox.io/s/000vqw38rl，这是使用class写的checkbox框。但是我项目是使用hooks的，而且是个radio框，所以就自己写了个。...

转到国际项目组之后，做的项目都是多语言的，上次的项目是用搭建的，所以使用的是这个插件，具体可以看这：vue3实现国际化这次的项目是用搭建的，也顺手整理一下技术栈：Hooks + vite + antd + recoil多语言插件使用的是需要同时安装两个包在src下新建locals文件夹,包含,,(只做中英文切换)最后在引入就好了(这里比vue简单些)至此插件就算配置好了对比vue，在react中使用比较简单，只需要用到方法即可，有两种方式可以使用直接从中引入关于还有很多用法，具体还是去

前言开发了一个国际化的项目，技术栈是vue3 + TS + vite + vant + pinia, 需要设置多语言，采用的是vue-i18n这一个国际化插件，貌似只看到英文文档，而且网上找的其他教程大部分是针对vue2的，对应vue3的比较少，所以自己整理了一下安装引入npm install vue-i18n在src下新建locals文件夹,包含index.js,en.js,zh.js(只做中英文切换)// zh.jsexport default { login: {

最近我们做了个国际业务的项目，里面有个需求是要将网页分享到各大社交平台，Facebook,twitter,linkedin,whatsapp ,还有邮件分享，这些其实没什么难度，只是有点繁琐，要去翻他们每个平台的开发者文档，特此整理一下，以防以后还要用到<ul> <li class="facebook">Facebook</li> <li class="twitter">Twitter</li> <li class=

前言我们小程序是采用uni-app开发的，uni-app是vue风格的所以开发起来效率很高，但是有个缺陷就是没有路由钩子，就这一点还蛮不方便的。一般来讲，路由钩子的一个最常见的应用场景就是权限校验，恰好我们项目中就有很多需要校验权限的页面，所以在开发中也遇到了这个难题。原方案先简单说一下权限校验的方案，其实都很简单，某些页面是需要用户登录了之后才能进入的，即有token才能进入，否则就得先登录才能进入。所以在这之前，我们的做法就是在每次跳转需要权限的页面的时候先去判断一下有无token，有的话就进入

前言这次的问题来源于一个简单的需求，要给某个勾选框加上一个月的缓存有效期，即只要选中了这个勾选框，在接下来的一个月内再次进来都会默认勾选上。什么？这么简单，用缓存记录一下是否勾选的字段，在用缓存存一下当前的时间或者过期的时间，进来的时候判断有没有到时间不就好了吗？对的，没错，就是这么简单。但是今天做的事就是把这个做成通用一点，你想，假如我们有很多的缓存都想加个有效期，那不可能每一个缓存都去单独给他去另外存一个时间吧，这个有点麻烦，而且有占空间。所以，我们能不能直接在设置缓存的时候就给他加个有效期的参数

前言遇到一个需求，应该挺常见但是我却没怎么遇到，也费了不少功夫也解决，记录一下。需求很简单，是个后台管理系统项目，要做个表格，（什么，这么简单，直接组件库里面复制一下Tabel不就完事了) 哈哈，起初我也是这么想的，项目用的是react + antd。所以是有现成的Table的。但是遇到的还稍微复杂一点，最下面两行是不同于其他的数据，看下图所以难点就是：最后两行是自定义的，显示总计和评价值实现思路翻了一圈antd的文档，发现并没有自定义底部的配置，只有自定义表头，就在我准备放弃，跟产品说实现不

前言这是很早之前碰到的问题，刚开始使用uniapp开发打包到支付宝平台的时候遇到的，最近在整理优化代码的时候想起来，为了避免以后忘记，特此记录一下，同时希望也可以帮到遇到同样问题的小伙伴发现问题为了提高小程序启动速度，我们在项目中使用了大量的分包，主包只放置了一小部分页面。但是分包也会有一些弊端，这里就不再过描述了，感兴趣的自行去官网查验，大概就是分包是在访问页面时才会去下载内容，所以会有一些卡顿，分包预加载就是为了解决这个问题而出现的。我们在某些即将要打开分包的页面中配置的分包预加载，但是在支付宝

极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件好久没有写过极简系列了，最近经常被问到观察者模式和发布订阅模式的区别，之前有写过 发布订阅模式的极简实现,其实两种模式是非常类似的，今天刚好有空来整理一下自己对这两个模式的理解，然后再简单实现一下。区别关于这两个的区别，其实网上有很多大牛有文章去详细总结，所以我也不多说那些细的，就说一个最核心的：观察者模式是由具体目标调度的，发布订阅是有第三方调度中心怎么理解呢，这里举一个例子假设你在网上买

大家都知道，在html中，如果你内容里面有包含\n的话，是会换行的，但是在小程序里面，如果你写在view标签中的话，是不会自动换行的，那要怎么办呢，很简单，小程序只有两个标签既然view不行，那就用text咯，试了一下果然可以<view>第一行\n第二行</view>// 第一行\n第二行<text>第一行\n第二行</text>//第一行//第二行但是，你以为就这么简单吗，这可是小程序，肯定会有坑在里面（狗头没错，我就刚好遇到了，最近在做个

最近测试反馈说在后台收到了大量的异常日志，让我处理一下，我根据错误的信息和最近改动的地方，很快就定位到疑似出现问题的地方，但是却怎么都无法复现不慌不慌，用uni-app这么久，已经见过很多类似的小坑了，然后我就开始了漫长的爬坑之旅~ 特此记录一下~应用场景先说我的需求，非常之简单，就是用到支付宝的一个关注生活号的组件<life-follow />，在组件的回调事件onCheckFollow中拿到返回的event参数，根据event解构出是否关注的字段再做对应的逻辑处理，大概代码如下//

这是个老生常谈的问题了，作为一个前端怎么都绕不开的话题，最近在面试中也被频繁问到，自己也看过很多这方面的文章和书籍讲解，刚开始也是被各种关系给绕晕，所以看完一定要自己去总结一下，这样才能真正的理解。先上一个刚画的图看不懂没关系，我们一点一点来理解首先要明确几点：在JS里面，万物皆对象，函数是对象，函数的原型也是对象。对象都有个__proto__属性，该属性的值表示构造该对象的构造函数的原型（是不是感觉有点不好理解，不理解请看上图第一向下的箭头）上面说到函数是对象，所以他也有__proto__属

极简实现系列——是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件LRU的概念可能有部分同学会感到陌生，这里我也不过多说明，简单的解释一下：LRU是Least Recently Used的缩写，即最近最少使用，是一种常用的算法，选择最久未使用的予以淘汰。如果 不明白，就请打开你手机上的饿了么或美团外卖，然后在搜索框中输入麻辣烫并确定，输入框下面就会产生一条历史记录，然后再输入砂锅粥、麻辣香锅重复以上步骤。 此时历史记录的排序应该是[麻辣香锅，砂锅粥，麻辣烫.

先说作用compose的作用就是组合函数，将函数串联起来执行，前一个函数的输出值是后一个函数的输入值看个简单例子比较容易理解有三个函数，分别将输入的x进行一些简单的运算，可以看到最后想得到结果要进行多层函数的嵌套，看起来不美观，可读性比较差function fn1(x){ return x + 1}function fn2(x){ return x * 10}function fn3(x){ return x - 1}let x = 10let res

递归递归的概念大家应该都知道吧，平时开发中也经常用到，比如在做后台管理系统时路由菜单，就需要递归遍历嵌套的路由菜单。最经典的还是阶乘或累加函数，如：function add(n){ if(n <= 0) return 0 return add(n-1) + n}add(4) // 10总结一下有两个特点：函数自己调用自己要有临界出门条件，不能无限制的调用尾调用直接举一些例子看注释吧// 不是尾调用，函数的最后一步虽然是一个函数调用，但是并没有returnfu

第一次使用体验了taro框架，遇到了不少问题，大多数都是没有仔细通读文档导致的o(▽)┛~ 其实taro跟小程序,react都有一点小小的区别，这次我遇的一个非常简单的问题就是。在小程序中<image></image>是可以使用本地图片的，但是在taro中确不可以直接使用// 小程序中可以展示<image src='banner.png' />// taro中不显示<Image src='banner.png' />去官方查询后才发现不能这样

最近公司上开始用react了，以前我的技术栈都是vue相关的，所以得赶紧学起来了，记录一下学习react中碰到的问题。在项目上使用到了Context进行组件的数据传递，感觉有点意思，特此记录一下使用方法概念及应用context设计目的是为了共享那些对于一个组件树而言是“全局”的数据。比如你在父组件创建一个数据，则在其后代所有的组件中都可以访问的到。用法知道基本的概念后就好理解了contex.jsimport React from "react";export const MyCont.

vue3 RC版本已经出了，正式发布还会远吗（狗头）。 各位还学得动吗，哈哈~关于vue3跟vue2的区别这里就不再多说，直接看代码最直接吧，今天使用vue3做一个简单的todoList来感受一下vue3<template> <div class="hello"> <input type="text" v-model="value" @keydown.enter="handleEnter"> <span>你按了{{count}}次回车，

最近在看同事代码时看到一段很长很长的代码，了解了一下大概功能就是在一个长列表里面有几十种类型的订单，一种或多种订单点击跳转对应的详情页，也就是说可能类型1跳转详情a，类型2和类型3跳转详情b,类型4,5,6跳转详情c… 反正就是多对一的关系。其实写起来也简单，直接if-else就完事，当时同事是这样写的handleClick(type) { if(type === 1) { // do sth } else if(type ===2 || type === 3) {

vue组件的通信一直是个老生常谈的话题了。不管工作中面试中总是能碰见，今天就来整理回顾一下1、prop最最常见的一种，写组件是肯定要用到的父向子// parent<children name="tony" />// childprops: { name: { type: String }}子向父// childthis.$emit('say', 'hello')// parent<children @say="e =&

h5网页跳转到小程序，前不久微信刚开放这个功能，可以说解决了很多产品的问题。在这之前呢，想要从h5跳转到小程序，只有通过小程序码的方式。现在很方便, 有两个开发标签标签<wx-open-launch-weapp> 打开小程序`<wx-open-launch-app> 打开app要求微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。已经认证需要在h5中引入微信的sdk，然后绑定安全域名等。然后配置wx

项目中肯定会常用的一些基础组件，比如弹窗，toast之类的，要是在每个页面去引入的话那也太麻烦了，还好vue提供了一个全局注册组件的apiVue.compomentVue.component('my-component-name', { // ... 选项 ...})然后在入口文件main.js里import需要的组件，使用Vue.compoment注册即可// src/main.jsimport model from '@/components/BaseModel'import toa

极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件极简实现系列——手写防抖throttle函数极简实现系列——手写bind极简实现系列——超低配版Promise极简实现系列——手写call和apply极简实现系列——手写eventBus极简实现系列——手写new节流函数在日常中还是经常用到的，比如在页面滚动的时候调用函数，要是不做节流的话，就会一直调用，造成性能浪费。实现的原理也非常简单，一般有两种方式，我们先来说下第一种：一

极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件防抖函数在日常中还是经常用到的。实现的原理也非常简单，就是利用setTimeout给需要防抖的方法一个延时执行，每次调用的时候重置setTimeout知道原理后很要很容易的写出一个极简版 let timer = null function debounce(fn, delay) { // fn: 需要防抖的函数，delay：延迟的时间 clearTimeout(t.

自己简易实现系列——是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件之前写过call和apply的原理实现，bind的实现原理也类似。先来看看MDN上关于bind的介绍：bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。看个简单的例子：let obj = { value: 1}function fn(a,b){ ...

自己简易实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件先看下Promise的简单用法： const p = new Promise((resolve, reject) => { setTimeout(() => { resolve() }, 1000) }) p.then(res => { console.log('过了1秒')

自己简易实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件先来看看call方法，引用MDN上的介绍：call()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。什么意思呢，看个简单的例子：let obj = { value: 1}function fn(){ console.log(this.value)}fn.call(obj) // 1call方法把this指向obj第一版...

我只是根据原理简单实现，没做太多异常情况的判断~首先先新建一个Event类,class EventBus { constructor() { this.eventObj = {} }}接下来要实现3个方法：on, emit, off。一个个来简单实现on第一个参数是事件名，第二个是回调函数class EventBus { constructor() { this.eventObj = {} } on(e

??

这个在面试中经常会碰到，其实很简单，只要理解new运算符做了什么就可以了。去MDN上查找关于new运算符的解释：四个步骤，我们一步一步来实现，先做个准备工作，想下我们想实现什么样的效果，是不是这样：// new 运算符let man = new Person()// 自己即将实现的myNew运算符let women = myNew(Person)好的，接下就按照...

作者：kimshare链接：https://www.jianshu.com/p/227cee9c8d15来源：简书讲真，现在或许还会有部分人和我一样，对于前端缓存这一块还不是很了解，弄不清楚平时是怎么使用的，不过别急，今天的这篇文章或许会给你指点迷津。前端缓存也是面试过程中常会问到的一个知识点，所以作为前端开发的胖友们可要注意了！首先请允许小编我插入一段前段时间的一个前端面试经历吧！我...

在开发中经常会基于业务封装各类组件，即使element-ui已经有很多好用的组件了，但还是会不满足日常开发。今天我在开发的时候遇到一个弹窗的功能，这个弹窗在很多地方都需要用到，那当然是要做成一个公共组件啦，弹窗的话就需要用到el-dialog组件做起来也比较简单，会出问题的地方就是在于在组件里面把弹窗关闭了，也要同步通知到父组件。这里用.sync修饰符可以很方便的做到。具体看代码了// ...

看了一下原理，自己动手试了一下。 <input value=""> <div></div><script type="text/javascript"> let input = document.querySelector('input') let div = document.querySelector('div...

今天使用到了element-ui中的table组件的多选功能，将选中项的id传给后台，对了下文档很容易就写好了。但是在回显的时候遇到了点麻烦~， 要根据后台返回的id集合，将列表选中。一开始没注意看文档，绕了好久都没想到，后面网上搜索了点资料然后再根据文档，终于弄出来了，原来这么简单。特此记录一下最主要是table组件的toggleRowSelection方法...

以前做上传图片功能跟后端对接都是先把图片上传到oss ，然后把返回的url传给后端，这次后端说要传给他文件流的格式，要用'multipart/form-data'方式。 以前从来没做过，网上查资料，然后自己折腾了好久，踩了不少坑，终于做出来了， 特此记录一下。<!-- 使用elements-ui的上传组件 --><template> <el-uploa...

分转化为元 -正则解决精度export const regFenToYuan = (fen) =>{ var num = fen; num=fen*0.01; num+=''; var reg = num.indexOf('.') >-1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3}...

普通的数组去重，有很多方法，比如快捷的方法比如es6是Set,Map等，但是对于数组对象，这些方法都不适用，传统的forEach,filter等又有点繁琐。 这里介绍一个新方法——reduce()先看一次下语法介绍array.reduce(function(previousValue , currentValue, index, array ), initialValue)...

最近在项目中碰到一个需求，如下图，点击复制的时候，把当前整行复制一看觉得很简单，当前数组直接push选择复制的那一项item就好了。后来发现当我更下面那个时间的时候，上面也会跟着改变，后来想起来这跟可能只是浅拷贝，要互不影响的话应该深拷贝。浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝深拷贝是将对象及值复制过来...