- 博客(78)
- 收藏
- 关注
RSS订阅
原创 前端模块化简单梳理（AMD,CMD,CommonJS,ES6）
最近面试总是被问到前端模块化，即AMD,CMD,CommonJs，还有ES6 Module这些东西之间的差异，对此我也是一知半解，所以我花了一天时间查阅了不少资料，对各种模块化的方式也有了个大概的了解，在这梳理记录一下免得以后又忘记~~
2023-07-07 13:36:33
754
原创 当后端直接返回了一千条数据给我
有个需求是这样的，在订单支付页，有个订单明细的按钮，鼠标放上去显示出所有的订单明细，订单明细由后端接口返回数组，然后前端直接渲染进去，很简单的功能，但是做完却被提bug了理由是鼠标移上去总是要等2~3秒才会显示出明细，我一看，好家伙，测试直接传了1000条订单，导致接口返回的明细有1000条，然后一次性渲染1000条数据导致页面卡顿了。
2023-06-12 19:50:01
681
原创 关于react与vue的一些对比
我最早接触的是vue，后来到新环境接手了个react的项目（16.4之前的版本），就慢慢学起来了。今年刚好有两个新项目由我一人全权负责。我就分别使用了vue3和进行开发。因为都是首次尝试，途中也碰到不少问题，还好接触互联网的帮助都解决了，最后也顺利上线了。现在回过头来总结一下vue和react在开发使用上的差异框架本身没有优劣之分，只有适合与否，根据自己的业务场景，团队技术栈来选择。就业务来说，可能我这两项目不够大，还无法体现出优劣度团队的话，哈哈这两项目都是我自己一人开发但是从开发体验上来讲，...
2022-08-05 16:48:42
504
1
原创 antd Table点击整行选中
antd官网例子上默认是点击checkbox或者radio才会选中，这对体验上来说有点不太方便，所以需求是要做成点击Table的整行直接触发选中。其实官方也有给了个例子https//codesandbox.io/s/000vqw38rl，这是使用class写的checkbox框。但是我项目是使用hooks的，而且是个radio框，所以就自己写了个。...
2022-07-15 16:05:45
4830
2
原创 react(Hooks)实现国际化
转到国际项目组之后，做的项目都是多语言的，上次的项目是用搭建的，所以使用的是这个插件，具体可以看这：vue3实现国际化这次的项目是用搭建的，也顺手整理一下技术栈：Hooks + vite + antd + recoil多语言插件使用的是需要同时安装两个包在src下新建locals文件夹,包含,,(只做中英文切换)最后在引入就好了(这里比vue简单些)至此插件就算配置好了对比vue，在react中使用比较简单，只需要用到方法即可，有两种方式可以使用直接从中引入关于还有很多用法，具体还是去
2022-06-29 16:13:47
646
原创 使用moment将utc时间转本地时间
前言因为项目是国际化的，所以里面后端接口返回的所有时间都是采用世界标准时间UTC表示，而前端则需要根据当前所在的时区转成当前的时间，比如返回的时间是中午12点，则你在中国打开则应该显示20点(（UTC+8个时区）)，在纽约打开则显示早上8点（UTC-4个时区）。 看起来其实也不难，就是获取所在的时区然后再去加减。为了方便，我就直接用moment.js这个插件来运算了。 这个插件功能太强大，文档内容太多，找这些api还花了不少功夫~，所以记录一下安装npm install moment --save
2022-05-20 15:27:13
3171
原创 vue3实现国际化
前言开发了一个国际化的项目，技术栈是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: {
2022-05-07 17:00:28
7795
1
原创 vite+react17+antd4+router6体验
前言早就听说vite很香，刚好最近有个新项目启动，这次可以体验下技术上选择vite+react17+antd+react-router v6+Recoil对于我来说，这些东西都是新第一次接触的~~，我以前的react项目都hook之前的版本，项目架子也是别人已经搭好的了，只是在上面迭代。所以，这次的项目让我感到很激（ya）动（li）兴（shan）奋（da）。还好项目不急，有充足的时间给我踩坑，这里也记录一下我遇到的个别问题，大多数是因为第一次接触不熟悉导致的，记录一下免得以后再踩上项目搭建这一步
2022-03-04 13:56:06
687
原创 适配阿拉伯文镜像页面
我们国际业务的项目，支持多种语言切换的，是采用词条方式来做，即每个文案都是一个单独的词条变量，根据当前的所选的语言环境，渲染对应的语言文字，语言是在我们的后台管理系统中添加的但是，最近我们需要新增阿拉伯语，扩展语种倒没啥，在后台新增一个就好了，主要的问题是排版，阿拉伯人的网站都是镜像的，即是从右向左排版的，文字阅读也是从右向左。当时以为要重新为这个语言版本单独写一套结构和样式，吓得我头发都掉了几根。。。后面看了一些文档和参考了其他人的网站，发现其实有个属性可以统一翻转实现html dir 属性
2022-02-07 17:08:33
3174
4
原创 网页分享至Facebook，Twitter，LinkedIn，WhatsApp，邮箱总结
最近我们做了个国际业务的项目，里面有个需求是要将网页分享到各大社交平台，Facebook,twitter,linkedin,whatsapp ,还有邮件分享，这些其实没什么难度，只是有点繁琐，要去翻他们每个平台的开发者文档，特此整理一下，以防以后还要用到<ul> <li class="facebook">Facebook</li> <li class="twitter">Twitter</li> <li class=
2021-12-17 15:28:18
4293
3
原创 uniapp路由拦截
前言我们小程序是采用uni-app开发的，uni-app是vue风格的所以开发起来效率很高，但是有个缺陷就是没有路由钩子，就这一点还蛮不方便的。一般来讲，路由钩子的一个最常见的应用场景就是权限校验，恰好我们项目中就有很多需要校验权限的页面，所以在开发中也遇到了这个难题。原方案先简单说一下权限校验的方案，其实都很简单，某些页面是需要用户登录了之后才能进入的，即有token才能进入，否则就得先登录才能进入。所以在这之前，我们的做法就是在每次跳转需要权限的页面的时候先去判断一下有无token，有的话就进入
2021-11-23 17:44:49
4612
原创 小程序中给localStorage加上有效期
前言这次的问题来源于一个简单的需求，要给某个勾选框加上一个月的缓存有效期，即只要选中了这个勾选框，在接下来的一个月内再次进来都会默认勾选上。什么？这么简单，用缓存记录一下是否勾选的字段，在用缓存存一下当前的时间或者过期的时间，进来的时候判断有没有到时间不就好了吗？对的，没错，就是这么简单。但是今天做的事就是把这个做成通用一点，你想，假如我们有很多的缓存都想加个有效期，那不可能每一个缓存都去单独给他去另外存一个时间吧，这个有点麻烦，而且有占空间。所以，我们能不能直接在设置缓存的时候就给他加个有效期的参数
2021-08-04 18:25:40
2044
原创 给antd的Table组件添加总计和平均值
前言遇到一个需求，应该挺常见但是我却没怎么遇到，也费了不少功夫也解决，记录一下。需求很简单，是个后台管理系统项目，要做个表格，（什么，这么简单，直接组件库里面复制一下Tabel不就完事了) 哈哈，起初我也是这么想的，项目用的是react + antd。所以是有现成的Table的。但是遇到的还稍微复杂一点，最下面两行是不同于其他的数据，看下图所以难点就是：最后两行是自定义的，显示总计和评价值实现思路翻了一圈antd的文档，发现并没有自定义底部的配置，只有自定义表头，就在我准备放弃，跟产品说实现不
2021-07-19 19:20:35
2672
6
原创 uni-app支付宝分包预加载配置不生效问题
前言这是很早之前碰到的问题，刚开始使用uniapp开发打包到支付宝平台的时候遇到的，最近在整理优化代码的时候想起来，为了避免以后忘记，特此记录一下，同时希望也可以帮到遇到同样问题的小伙伴发现问题为了提高小程序启动速度，我们在项目中使用了大量的分包，主包只放置了一小部分页面。但是分包也会有一些弊端，这里就不再过描述了，感兴趣的自行去官网查验，大概就是分包是在访问页面时才会去下载内容，所以会有一些卡顿，分包预加载就是为了解决这个问题而出现的。我们在某些即将要打开分包的页面中配置的分包预加载，但是在支付宝
2021-06-27 15:28:57
826
原创 极简实现系列——观察者模式
极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件好久没有写过极简系列了，最近经常被问到观察者模式和发布订阅模式的区别，之前有写过 发布订阅模式的极简实现,其实两种模式是非常类似的，今天刚好有空来整理一下自己对这两个模式的理解，然后再简单实现一下。区别关于这两个的区别，其实网上有很多大牛有文章去详细总结，所以我也不多说那些细的，就说一个最核心的：观察者模式是由具体目标调度的，发布订阅是有第三方调度中心怎么理解呢，这里举一个例子假设你在网上买
2021-05-30 23:41:45
85
原创 小程序中如何正确使用换行符‘\n‘
大家都知道，在html中，如果你内容里面有包含\n的话，是会换行的，但是在小程序里面，如果你写在view标签中的话，是不会自动换行的，那要怎么办呢，很简单，小程序只有两个标签既然view不行，那就用text咯，试了一下果然可以<view>第一行\n第二行</view>// 第一行\n第二行<text>第一行\n第二行</text>//第一行//第二行但是，你以为就这么简单吗，这可是小程序，肯定会有坑在里面（狗头没错，我就刚好遇到了，最近在做个
2021-05-09 21:48:19
10737
3
原创 读书笔记：http与https
以下为最近在读《图解http》关于https章节的个人笔记，可能并不适用所有人阅读前言最近在读《图解http》，而且面试中经常有问到我https和http的区别，所以自己根据书中的内容大概总结一下http的不足通信使用明文，内容可能会被窃听不验证通信方的身份，因此有可能遭遇伪装无法证明报文的完整性，所以有可能已遭串改1.通信使用明文可能会被窃听由于http本身不具备加密的功能，所以也无法做到对通信整体（使用http协议通信的请求和响应的内容)进行加密。即http报文使用明文方
2021-04-29 12:31:18
99
原创 uniapp踩坑日记——life-follow组件的踩坑指南
最近测试反馈说在后台收到了大量的异常日志，让我处理一下，我根据错误的信息和最近改动的地方，很快就定位到疑似出现问题的地方，但是却怎么都无法复现不慌不慌，用uni-app这么久，已经见过很多类似的小坑了，然后我就开始了漫长的爬坑之旅~ 特此记录一下~应用场景先说我的需求，非常之简单，就是用到支付宝的一个关注生活号的组件<life-follow />，在组件的回调事件onCheckFollow中拿到返回的event参数，根据event解构出是否关注的字段再做对应的逻辑处理，大概代码如下//
2021-04-01 18:12:41
588
原创 prototype、__proto__和constructor个人理解
这是个老生常谈的问题了，作为一个前端怎么都绕不开的话题，最近在面试中也被频繁问到，自己也看过很多这方面的文章和书籍讲解，刚开始也是被各种关系给绕晕，所以看完一定要自己去总结一下，这样才能真正的理解。先上一个刚画的图看不懂没关系，我们一点一点来理解首先要明确几点：在JS里面，万物皆对象，函数是对象，函数的原型也是对象。对象都有个__proto__属性，该属性的值表示构造该对象的构造函数的原型（是不是感觉有点不好理解，不理解请看上图第一向下的箭头）上面说到函数是对象，所以他也有__proto__属
2021-03-21 15:39:19
150
原创 学习笔记：Vue源码学习（一）——响应式
声明：以下内容为个人学习vue源码中记录的笔记，仅适合我本人，其他人请谨慎阅读，读了你可能也看不懂（狗头目标熟悉vue源码架构了解vue初始化过程了解vue响应式原理准备git clone https://github.com/vuejs/vue.gitnpm inpm i rollup -gpackage.json => scripts => dev 加上 sourcemap- "dev": "rollup -w -c scripts/co
2021-03-03 16:20:29
161
1
原创 极简实现系列——三行代码搞定LRU
极简实现系列——是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件LRU的概念可能有部分同学会感到陌生，这里我也不过多说明，简单的解释一下：LRU是Least Recently Used的缩写，即最近最少使用，是一种常用的算法，选择最久未使用的予以淘汰。如果 不明白，就请打开你手机上的饿了么或美团外卖，然后在搜索框中输入麻辣烫并确定，输入框下面就会产生一条历史记录，然后再输入砂锅粥、麻辣香锅重复以上步骤。 此时历史记录的排序应该是[麻辣香锅，砂锅粥，麻辣烫.
2021-02-01 09:18:24
151
原创 compose的实现
先说作用compose的作用就是组合函数，将函数串联起来执行，前一个函数的输出值是后一个函数的输入值看个简单例子比较容易理解有三个函数，分别将输入的x进行一些简单的运算，可以看到最后想得到结果要进行多层函数的嵌套，看起来不美观，可读性比较差function fn1(x){ return x + 1}function fn2(x){ return x * 10}function fn3(x){ return x - 1}let x = 10let res
2021-01-18 13:34:42
1347
原创 uniCloud云开发（imgSecCheck踩坑）
前言小程序云开发还算挺火的，我也去尝试了一下，确实是非常省事，比如以前获取openid，获取小程序码之类的接口都需要通过后端，用小程序云开发的话直接调用api就可以拿到了。 这意味着咱前端也可以独立开发一个完整的小程序了，迈向全栈的一个近道~~uniCloud你可以理解为跟uni-app配套的云开发。 同样可以发布到多端。 只是坑比较多，我就此来记录一下我的踩坑历程吧创建项目本次使用 阿里云 做为云开发服务器（ps：坑点之一）这个直接看官网吧创建云函数这个我要做的一个功能点是用户上传图片
2020-12-18 16:43:10
1988
2
原创 递归与尾递归
递归递归的概念大家应该都知道吧，平时开发中也经常用到，比如在做后台管理系统时路由菜单，就需要递归遍历嵌套的路由菜单。最经典的还是阶乘或累加函数，如：function add(n){ if(n <= 0) return 0 return add(n-1) + n}add(4) // 10总结一下有两个特点：函数自己调用自己要有临界出门条件，不能无限制的调用尾调用直接举一些例子看注释吧// 不是尾调用，函数的最后一步虽然是一个函数调用，但是并没有returnfu
2020-11-13 15:35:11
810
原创 记录：uni-app多端小程序使用canvas绘制图片
对于canvas我一直都是只是了解状态，只是知道大概要怎么画，没有具体的项目实战经验，最近有个需求就是要用canvas画个分享的海报。看起来也不难，实际画起来还是花了不少实际，也踩了一些小坑，所以记录一下整理一下使用的apifillText 写文字fillStyle 用来设置字体颜色setFontSize 字号font 字符串，设置字体所有格式，字号和字体家族必填fillRect 画个长方形setFillStyle 填充颜色setStrokeStyle 设置画笔颜色moveTo 画笔起.
2020-10-28 17:33:37
4437
原创 Taro框架Image使用本地图片
第一次使用体验了taro框架，遇到了不少问题，大多数都是没有仔细通读文档导致的o(▽)┛~ 其实taro跟小程序,react都有一点小小的区别，这次我遇的一个非常简单的问题就是。在小程序中<image></image>是可以使用本地图片的，但是在taro中确不可以直接使用// 小程序中可以展示<image src='banner.png' />// taro中不显示<Image src='banner.png' />去官方查询后才发现不能这样
2020-10-16 10:27:52
5482
原创 react初探-e.target为null
在使用antd的input组件和mobx做一个很简单的功能，获取input中的输入内容，然后传给后端做查询，可偏偏就遇到奇奇怪怪的坑~删减后的代码大概长这样 import store from './store' class SearchForm extends Component { handleSearchInput = e => { console.log(e.target.value) } render() { return(
2020-09-14 21:50:05
1489
原创 react初探-context
最近公司上开始用react了，以前我的技术栈都是vue相关的，所以得赶紧学起来了，记录一下学习react中碰到的问题。在项目上使用到了Context进行组件的数据传递，感觉有点意思，特此记录一下使用方法概念及应用context设计目的是为了共享那些对于一个组件树而言是“全局”的数据。比如你在父组件创建一个数据，则在其后代所有的组件中都可以访问的到。用法知道基本的概念后就好理解了contex.jsimport React from "react";export const MyCont.
2020-09-06 22:59:45
109
原创 vue3尝鲜--使用Composition API做个todoList
vue3 RC版本已经出了，正式发布还会远吗（狗头）。 各位还学得动吗，哈哈~关于vue3跟vue2的区别这里就不再多说，直接看代码最直接吧，今天使用vue3做一个简单的todoList来感受一下vue3<template> <div class="hello"> <input type="text" v-model="value" @keydown.enter="handleEnter"> <span>你按了{{count}}次回车，
2020-08-23 12:47:35
314
原创 使用Map优化代码
最近在看同事代码时看到一段很长很长的代码，了解了一下大概功能就是在一个长列表里面有几十种类型的订单，一种或多种订单点击跳转对应的详情页，也就是说可能类型1跳转详情a，类型2和类型3跳转详情b,类型4,5,6跳转详情c… 反正就是多对一的关系。其实写起来也简单，直接if-else就完事，当时同事是这样写的handleClick(type) { if(type === 1) { // do sth } else if(type ===2 || type === 3) {
2020-08-15 20:37:20
387
原创 整理与回顾：vue组件通信
vue组件的通信一直是个老生常谈的话题了。不管工作中面试中总是能碰见，今天就来整理回顾一下1、prop最最常见的一种，写组件是肯定要用到的父向子// parent<children name="tony" />// childprops: { name: { type: String }}子向父// childthis.$emit('say', 'hello')// parent<children @say="e =&
2020-08-09 15:30:32
87
原创 h5跳转小程序和APP
h5网页跳转到小程序，前不久微信刚开放这个功能，可以说解决了很多产品的问题。在这之前呢，想要从h5跳转到小程序，只有通过小程序码的方式。现在很方便, 有两个开发标签标签<wx-open-launch-weapp> 打开小程序`<wx-open-launch-app> 打开app要求微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。已经认证需要在h5中引入微信的sdk，然后绑定安全域名等。然后配置wx
2020-07-23 21:19:55
681
3
原创 vue一次注册多个全局组件
项目中肯定会常用的一些基础组件，比如弹窗，toast之类的，要是在每个页面去引入的话那也太麻烦了，还好vue提供了一个全局注册组件的apiVue.compomentVue.component('my-component-name', { // ... 选项 ...})然后在入口文件main.js里import需要的组件，使用Vue.compoment注册即可// src/main.jsimport model from '@/components/BaseModel'import toa
2020-07-17 14:47:56
2710
原创 极简实现系列——手写节流throttle函数
极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件极简实现系列——手写防抖throttle函数极简实现系列——手写bind极简实现系列——超低配版Promise极简实现系列——手写call和apply极简实现系列——手写eventBus极简实现系列——手写new节流函数在日常中还是经常用到的，比如在页面滚动的时候调用函数，要是不做节流的话，就会一直调用，造成性能浪费。实现的原理也非常简单，一般有两种方式，我们先来说下第一种：一
2020-07-09 11:03:07
1485
5
原创 极简实现系列——手写防抖debounce函数
极简实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件防抖函数在日常中还是经常用到的。实现的原理也非常简单，就是利用setTimeout给需要防抖的方法一个延时执行，每次调用的时候重置setTimeout知道原理后很要很容易的写出一个极简版 let timer = null function debounce(fn, delay) { // fn: 需要防抖的函数，delay：延迟的时间 clearTimeout(t.
2020-06-28 10:37:00
751
原创 极简实现系列——手写bind
自己简易实现系列——是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件之前写过call和apply的原理实现，bind的实现原理也类似。先来看看MDN上关于bind的介绍：bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被指定为bind()的第一个参数，而其余参数将作为新函数的参数，供调用时使用。看个简单的例子：let obj = { value: 1}function fn(a,b){ ...
2020-06-15 15:18:27
367
原创 极简实现系列——超低配版Promise
自己简易实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件先看下Promise的简单用法： const p = new Promise((resolve, reject) => { setTimeout(() => { resolve() }, 1000) }) p.then(res => { console.log('过了1秒')
2020-06-04 16:14:49
228
原创 极简实现系列——手写call和apply
自己简易实现系列 是用最简单的代码实现一些常见的方法，目的是为了帮助理解原理，所以并没有考虑太多限制条件先来看看call方法，引用MDN上的介绍：call()方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。什么意思呢，看个简单的例子：let obj = { value: 1}function fn(){ console.log(this.value)}fn.call(obj) // 1call方法把this指向obj第一版...
2020-05-27 17:09:42
290
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人