- 博客(50)
- 收藏
- 关注
RSS订阅原创 精简版节流防抖实现
2.window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次。console.log('需要节流的函数');// 添加需要节流的方法。console.log('需要防抖的函数');// 添加需要防抖的方法。2.监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。1.search搜索数据，用户在不断输入值时，用防抖来节约请求资源。1.鼠标不断点击触发，mousedown(单位时间内只触发一次)。
2024-03-27 15:30:40
272
原创 npm切换淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm -v
2024-01-22 09:55:27
357
原创 uniapp 使用命令行创建项目及使用命令行打包H5
把uniapp文件全选复制到my-project-cli 项目src下面,不需要做任何修改。3.把my-project-cli 项目src下面的文件全部删除。5.安装npm install [email protected]。2.通过cli新建一个项目。4.切换项目文件然后运行。1.安装vue脚手架。
2024-01-15 14:25:01
591
原创 vue使用keep-alive缓存组件或者页面
/把将要刷新的数据的操作放在这个里面 activated只有在被 包裹下的时候才会被触发 ，而且是一进页面就触发。activated() { // 需要重新请求的写在这里 console.log("刷新数据");1.在路由文件中配置需要缓存的页面下加入meta:{keepAlive:true}3.注意如果是在ANTD的时候 有国际化的操作进行包裹。2.在App.vue的文件中填入。
2024-01-15 14:17:16
340
原创 vue实现步骤条
el-input v-model="registerForm.bussScope" type="textarea" :rows="7" auto-complete="off" placeholder="请输入经营范围" clearable />
2023-10-17 16:58:58
400
原创 注册的实现
el-input v-model="registerForm.nickName" type="text" auto-complete="off" placeholder="真实姓名">{ pattern: /^1[3-9]\d{9}$/, message: "手机号格式不正确", trigger: "blur"}
2023-10-17 16:56:52
62
原创 大屏自适应
/ 用var()函数获取缩放比例。// 固定好16：9的宽高比，计算出最合适的缩放比。// 获取到缩放比例，设置它。// 自适应缩放组件。
2023-10-17 16:44:14
94
原创 vue实现倒计时
el-button v-if="eRcode" type="warning" @click="sendCode()" >发送验证码剩余{{ time }}秒
2023-09-14 10:11:46
85
原创 前端中什么是分包？
异步加载：将某些代码块拆分成独立的包，通过异步加载的方式动态加载这些包。通过异步加载不常用的代码块，可以减少初始加载时间，并在需要时再加载这些代码块，以提供更好的用户体验。在前端开发中，分包（code-splitting）是一种优化技术，用于将应用程序的代码拆分成多个较小的包（或块）。共享代码：通过分包，可以将公共的代码块或库拆分成独立的包，以便在应用程序的不同部分之间共享。为了提高用户体验，可以使用分包预下载功能，在小程序初始化时预先下载分包的资源文件，以便在需要时立即展示页面。方法来动态加载分包。
2023-07-13 08:40:44
939
原创 小程序学习笔记
首先用户点击登录按钮，然后绑定点击事件调用wx.getUserProfile获取用户身份信息，然后再使用wx.getPhoneNumber获取用户手机号，在wx.getPhoneNumber里面调用wx.login,如果登录成功会返回一个登录凭证的code码，然后调用wx.request将用户凭证发送后台，请求成功后台会返回PhoneNumber和appid。小程序提供了用于缓存数据的API，可以将数据以键值对的方式存储在本地缓存中。全局数据或状态管理：使用小程序提供的全局数据或状态管理机制，如。
2023-07-12 16:36:17
90
原创 浏览器兼容性有哪些？
使用autoprefix自动添加CSS前缀以适应不同浏览器的特定样式属性，页面初始化样式下载normalize.css插件，如果使用一些scss还需要下载sass-loader,node-sass等插件，某些浏览器可能不支持特定的图片格式或多媒体格式。开发人员应注意使用跨浏览器兼容的图片格式（如JPEG、PNG、GIF）和兼容的多媒体格式（如MP4、WebM）一些浏览器无法识别es6语法需要配置Babel进行语法转义，还有就是如jsx，vue后缀的语法浏览器不支持，也需要Babel进行语法转义。
2023-07-11 20:58:16
100
原创 vite和webpack区别？
有大量社区和官方插件可以选择，覆盖了前端开发的各个方面；而Vite的插件生态尽管在不断发展，但相比Webpack来说还显得较为。进行打包操作，虽然提供了热更新，但大型项目中依然可能会出现启动和编译缓慢的问题；webpack由于其丰富的功能和扩展性，适合于大型、，对于大型项目可能会有延迟；Vite的热更新则只会。，这会导致初次加载速度较慢；而vite凭借其轻量和速度，更适合于。，大幅度提升了开发环境的响应速度。，从而极大提高了打包效率。Webpack的热更新需要。Webpack在打包时，
2023-07-11 20:43:16
147
原创 前端常见的设计模式有哪些
观察者模式通俗理解就是观察者和被观察的对象，当被观察的对象发生了改变，观察者们就会更新，而被观察的对象有2种方式去实现观察者模式分别是推和拉，当被观察的对象主动向观察者推送消息时，观察者只需接收即可，第二种则是观察者订阅被观察的对象，被观察的对象发生改变会通知观察者然后主动拉取所需数据，并开始执行相应操作。随后的调用都会返回之前创建的实例。通俗理解就是创建几个父类，然后继承父类的方法，再互相通过父类创建的对象调用父类的方法实例化实现了对象的创建和使用的分离，同时可以方便地扩展和切换不同的具体产品。
2023-07-03 22:04:18
125
原创 前端创建对象有哪些方法
可以返回不同类型的对象：工厂函数可以根据传入的参数或其他条件，在运行时返回不同类型的对象。这使得根据不同的场景或条件创建不同类型的对象成为可能，提供了更大的灵活性和可扩展性。代码复用：工厂函数能够创建多个相似或相同结构的对象，提供了一种代码复用的机制。对象标识的缺失：工厂函数创建的对象没有明确的标识符，因为每次调用工厂函数都会返回一个新的对象。灵活性和可定制性：工厂函数可以根据需要动态地创建对象，并根据传入的参数来初始化对象的属性和方法。工厂函数：通过函数返回一个新的对象，实现对象的创建。
2023-07-03 21:24:25
183
原创 什么是强缓存和协商缓存
如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 Etag 属性。否则，服务器返回新的资源内容和状态码，浏览器更新缓存，并重新存储资源的新的 Etag 或 Last-Modified 值。
2023-07-03 11:53:42
41
原创 前端有哪些常见的存储方式？
IndexedDB支持事务(transaction)，这意味着一系列的操作步骤之中，只要有一步失败了，整个事务都会取消，数据库回滚的事务发生之前的状态，这和MySQL等数据库的事务类似。LocalStorage是一种本地化、永久化存储数据的方式，可以在浏览器的本地存储中存储数据，提供了在本地存储数据的有效手段，而不需要依赖服务器,存储限制为5MB,为cookie的拓展。设置过期时间，在数据中添加expire属性，比较时间戳，如果时间小于大于时间戳就localStorage.removeItem(key)
2023-07-03 10:17:21
45
原创 null和undefiend区别
首先为什么null == undefiend是true,而null === undefiend为false呢，这是因为==进行了数据类型的强制转换，进而比较的值是否相等，因为console.log(Boolean(undefined)===false)， console.log(Boolean(null)===false)，2个数据类型转布尔值相等才判断的值相等。而null与空字符串都是字面量，并且都是表示没有数据，在ascii码中，都是000000，所以转换成数据就是0本身。
2023-07-01 10:58:13
39
原创 js中如何精准判断数据类型？
除了null的一些基本数据类型我们可以通过typeof去判断 但是遇到null和Array这类的数据时，返回的都是object,如果我们需要具体判断数组时，我们可以根据他的原型上的判断，这时可以用instanceof,当是一个数组时返回true，也可以通过Array.isArray()判断是不是数组。
2023-07-01 10:15:53
39
原创 js对象利用object.assign实现递归深拷贝
var cloneobj = Object.assign({},data) //拷贝单层对象。if(typeof cloneobj[key]==='object'){ //判断对象。cloneobj[key] = deepClone(cloneobj[key]) //递归拷贝。for(var key in data){ //循环。
2023-06-29 19:52:07
175
1
原创 10个一行解决的js代码
if ((window.event.altKey) && (window.event.keyCode == 115)) { //屏蔽Alt+F4。if ((event.shiftKey) && (event.keyCode == 121)) { //屏蔽 shift+F10。if (event.ctrlKey && window.event.keyCode == 65) { //禁用ctrl + a 功能。if (window.event.keyCode == 116) { //禁用F5。
2023-06-27 22:11:27
33
原创 vue3中配置路由
component: () => import('@/views/Home/Home.vue') //路由懒加载按需导入。2.在router文件夹新建router.js文件配置路由。router.getRouters()，获取所有路由信息。params就是$route.params。query 就是$route.query。router-view 子路由出口。获取路由信息useRoute()路由传参 path+query。4.在main.js中挂载路由。5.vue3中的路由api。
2023-06-20 21:32:16
1101
原创 react路由react-router6的配置
const Inedx = lazy(()=>import('./Main/Inedx')) //路由懒加载。const {pathname} = useLocation() //获取location中pathname 路径。路由传参使用的了useParams()和useSearchParams()还有useLocation()const params = useParams() //params用/： 占位传。
2023-06-20 21:07:21
225
原创 react路由react-router5的配置
路由链接(携带参数)：详情注册路由(声明接收)：路由链接(携带参数)：详情pathname: '/home', //路径。name=cedric', //参数。
2023-06-20 18:50:18
293
原创 react的状态管理工具redux-toolkit（内置thunk插件）
export const rootReducer = combineReducers({ MyData:dataSlice}) //合并数据模块。const data= useSelector(dataSelector) //取dataSlice数据。dispatch(dataAdd(1))}> //使用dataSlice方法。extraReducers:(builder)=>{ //改变状态的异步方法。
2023-06-20 13:08:58
326
原创 基于axios的api接口请求二次封装
/ token 通过请求头带给 服务器。//登录时将token存本地。router.replace({ name: 'login' }) //响应失败自动跳转登录。Vue.prototype.$request = request // 挂载全局。post请求 this.$request .post('url',data)get请求 this.$request .get('url')// 请求的拦截器 request。//响应的拦截器 response。
2023-06-19 14:54:14
97
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人