前端开发进阶
文章平均质量分 56
用于记录前端开发遇到的问题跟笔记
AwesomeDevin
这个作者很懒,什么都没留下…
展开
-
【状态管理】zustand 中文文档,它来了!!!
是不是觉得 Redux 很难用?想用 Context 代替,但是你知道吗,Context 也有个很大的缺点:context value发生变化时,所有用到这个context的组件都会被重新渲染,即使 component 需要的 state 可能根本沒有变动。基于 context 维护的模块越多,影响范围越大, 某些情况下会导致页面明显卡顿。另外,它依赖 Context Provider 包裹你的应用程序。那么试试 zustand 吧,当然你可以选择 mobx,zustand 与 mobx 最大的差别在于原创 2023-03-06 16:42:24 · 4724 阅读 · 0 评论 -
【前端状态管理】React 状态管理工具如何选 context/redux/mobx/zustand/jotai/recoil/valtio
状态”是描述应用程序当前行为的任何数据。这可能包括诸如“从服务器获取的对象列表”、“当前选择的项目”、“当前登录用户的名称”和“此模式是否打开?”等值。众所周知,我们在研发一个复杂应用的过程中,一套好的状态管理方案是必不可少的,既能提升研发效率,又能降低研发维护成本,那么状态管理方案那么多,它们有什么不同,我们又该如何选择适合当前应用的方案呢?本期将主要就react的常用状态管理方案进行对比分析,希望对各位看客有帮助。原创 2023-02-06 14:53:26 · 2677 阅读 · 0 评论 -
推荐一款个人开源的图片色值处理工具 image-color-utils
image-color-utilsDESC提供取色、色值相似度对比、色彩边界值计算等能力。democodesandboxInstallnpm install image-color-utils --saveUsageesimport { ImageColorUtils } from 'image-color-utils'commonjsconst { ImageColorUtils } = require('image-color-utils')APIImageColorU原创 2021-11-05 18:25:54 · 418 阅读 · 0 评论 -
【简单好用,支持图片懒加载】 vue-waterfall2 基于Vue.js 瀑布流 懒加载 组件
vue-waterfall21.宽度自适应,数据绑定2.自定义程度高3.使用极为简便,适用于PC/移动端4.提供resize(强制刷新布局)/mix(扰乱布局) API,一般情况下不需要用到5.后期将持续更新,提供animation(过渡动画)Demohttp://47.105.188.15:3000/Installationnpm install --save vue-wa...原创 2018-11-16 14:26:55 · 6386 阅读 · 4 评论 -
Vue vue-devin简单易用 轮播图随tab切换自动轮播,以及cookie管理等功能
devin-ui https://github.com/Rise-Devin/vue-devinvue-devinInstallationnpm install vue-devinOverView 【一个使用方便的基于vue的组件库】transition-box 视图+tab切换:1.视图随tab切换,并且可以固定部分宽度不随tab切换进行轮播(b...原创 2018-05-02 17:17:27 · 1079 阅读 · 0 评论 -
安利一个webpack 打包移除 开发日志 console.log的插件,欢迎提bug!!!
drop-console-webpack-plugin 打包移除日志console.log 支持webpack4安装npm install drop-console-webpack-plugin --savegithub:https://github.com/Rise-Devin/drop-console-webpack-plugin使用const DropCon...原创 2018-08-14 18:30:19 · 2471 阅读 · 0 评论 -
【koa2】koa-static-router 中间件搭建静态资源服务器,实现多个&&多层路由加载静态资源
koa中间件koa-static-router实现多个&&多层路由加载静态资源源码及使用说明 Git仓库安装$ npm install koa-static-routerUsage单个路由 app.use(static({ dir, //静态资源目录对于相对入口文件index.js的路径 route //路由命名原创 2018-08-03 22:34:19 · 2993 阅读 · 0 评论 -
【通俗易懂】手把手进行ES6异步编程: Generator + Promise = JavaScript强大的异步回调方式
概念 Generator 函数是 ES6 提供的一种异步编程解决方案,执行 Generator 函数会返回一个遍历器对象,也就是说,Generator 函数除了状态机,还是一个遍历器对象生成函数。返回的遍历器对象,可以依次遍历 Generator 函数内部的每一个状态。yield表达式 形式上,Generator 函数是一个普通函数,但是有两个特征。一是,function...原创 2018-07-24 19:17:29 · 838 阅读 · 0 评论 -
解决由于参数编码问题导致服务端报500 【如:微信小程序 session_key 加密数据解密算法 报错】
我的报错场景 在【微信小程序】开发中 加密数据解密算法 报错,后来经过排查发现是由于session_key(‘06uB1744eFm+jcmxMOKxMw==’)中存在特殊符号‘+’,后端接收到的参数为‘06uB1744eFm jcmxMOKxMw==’,前后不一致,导致解密报错 解决办法 前端使用encodeURIComponent(key)对key进行编码,后端de...原创 2018-08-01 17:23:17 · 2840 阅读 · 0 评论 -
【微信小程序】 隐藏小程序 导航栏/TabBar
1、页面不存在于app.json中的 tabBar.list2、使用wx.navigateTo 跳转到新页面3、 微信基础库1.9.0开始支持api wx.hideTabBar/wx.showTabBarwx.hideTabBar({ animation:true //是否需要过渡动画})wx.showTabBar({ animation:true //是否需要...原创 2018-07-26 11:56:09 · 12013 阅读 · 1 评论 -
【webpack 从0到1构建】webpack4持久化缓存优化方案,小白也能看懂的构建过程
之前一直对webpack只是了解到一些皮毛,最近抽空学习了一些持久化缓存的必要性以及方案,并自己进行了一次从0到1的项目配置,在此分享一下,方便大家一起交流学习,有写错或理解错的地方还请大佬多多指点。开题1. 缓存的作用每次代码需要更新时,服务器必须重新部署,客户端也必须重新下载资源。因为从网络中获取资源会很慢,这显然非常低效。这就是为什么浏览器会缓存静态资源的原因。但是这样做有一...原创 2018-07-19 19:48:28 · 1557 阅读 · 0 评论 -
用css修改scroll样式
我实现的是一种黑灰的滚动条 有兴趣的可以直接粘贴代码运行看效果1.给需要设置滚动条的容器加上class="topnav_box" 2.接下来是css.,.topnav_box::-webkit-scrollbar //滚动条整体部分{ width: 5px; height:10px; background...原创 2017-03-23 18:57:04 · 6274 阅读 · 0 评论 -
jquery 获取元素实际宽度高度
以前写代码中,每当需要获取元素的实际“宽度”(这里的宽度是指元素宽度加上其边距)时,都需要用元素宽度加上margin值才行,今天发现一个叫outerWidth(options)的方法 ,很好用。完成了原来需要用一段来操作做的工作。 这个方法不适用于 window 和 document 对象,可以使用 .width() 代替。 下面是其简单介绍 outerWidth(option原创 2017-02-28 16:50:05 · 3112 阅读 · 0 评论 -
用于操作cookie的js模块,使用简单(ES5/ES6 两种版本都有)
使用es6封装的一个用于cookie增删改查的js模块原创 2017-10-15 13:09:04 · 2089 阅读 · 0 评论 -
【微信小程序】清空input内容
在vue中,我们清空input值往往是clear(){ this.inputValue = '';}然而在微信小程序中,直接使用setData()赋值是无法清空input的值的,我们需要绑定一个form,这样做:<form bindreset="formReset"> <input type="text" placeholder="请输入订单号" ...原创 2018-07-16 16:08:51 · 4036 阅读 · 0 评论 -
【微信小程序 】 数据更新,视图无法更新时,使用setData()更新视图,并解决setData()赋值对象属性及数组问题
在Vue中,当我们对数据进行修改时,视图也会发生变化,微信小程序也提供的一样的功能,但是需要使用官方提供的setData()方法,如下:Page({ data: { isShow: false }, changeStatus(){ this.setData({isShow : true}); console.log(this.data.isShow); ...原创 2018-07-16 10:59:48 · 14607 阅读 · 0 评论 -
解决Vue/小程序中 针对数组(列表) 实现倒计时 倒数效果越来越快的问题
你可能会使用watch监听list由于watch监听数据变化,对数据进行遍历时,当只有一个item符合条件时倒计时正常,一旦多个item符合条件,if语句内执行了一次以上,由于多个item发生改变会多次触发watch,导致倒计时越来越快,错误效果 watch={ List(val){ //var timer = setInterval(...原创 2018-05-02 18:39:47 · 2740 阅读 · 0 评论 -
【微信小程序】微信小程序保存二维码海报到相册,以及解决二维码不够清晰的问题
小程序保存二维码海报添加 canvas 元素 &amp;amp;amp;lt;canvas class=&amp;amp;quot;poster&amp;amp;quot; canvas-id=&amp;amp;quot;poster&amp;amp;quot; style=&amp;amp;quot;width:300rpx;height:300rpx;&amp;amp;quot;原创 2018-06-20 10:58:21 · 7659 阅读 · 1 评论 -
通俗易懂地讲解 Vue-router
<head> <meta charset="UTF-8"> <title>vuejs 教程</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable原创 2018-04-30 15:01:08 · 523 阅读 · 0 评论 -
深入讲解离线缓存及其用法
why:应用程序缓存为应用带来的优势:离线浏览:用户可在应用离线时使用它们速度:已缓存资源加载速度块减少服务器负载:浏览器只从服务器下载更新过的资源usages:在html标签添加manifest属性<!DOCTYPE HTML> <html manifest="../js/demo.manifest"> ...原创 2018-04-30 14:48:20 · 4169 阅读 · 0 评论 -
js事件的绑定以及主动触发
JQ事件委托(提高事件的处理速度,减少内存的占用,监听动态内容):1.$( "#foo" ).on( "click", function( e ) {} ); 2.$('#foo').bind('click', function(){ console.log("I'm fucked.");});3.$('#root').delegate('a', 'click', fu...原创 2018-04-30 14:52:07 · 3234 阅读 · 0 评论 -
解决Vue computed计算属性中使用$refs进行dom操作时出现undefined问题
解决办法Vue.component('my-component', { data(){ return { isMounted: false } }, computed:{ property(){ if(!this.isMounted) retu...原创 2018-04-30 14:56:24 · 19764 阅读 · 2 评论 -
Vue用户进行页面切换(路由跳转)时,动态改变路由的动画(transition效果)
当我们在使用Vue-Router时,为了用户有更好的视觉效果及体验,我们通常需要实现基于路由的动态过渡效果在Vue中,&amp;amp;amp;amp;amp;amp;amp;lt;router-view&amp;amp;amp;amp;amp;amp;amp;gt; 是基本的动态组件,所以我们可以用 &amp;amp;amp;amp;amp;amp;amp;lt;transition&amp;amp;amp;amp;amp;amp;a原创 2018-03-19 11:25:05 · 13860 阅读 · 2 评论 -
javascript angularjs 使用promise 异步获取数据
javscript promise异步请求数据原创 2017-05-06 14:04:52 · 2494 阅读 · 2 评论 -
原生JS的DOM操作汇总
JavaScript的DOM操作也是面试中的常见问题,尤其是当你需要回答jQuery的性能问题时,便需要再次回到JavaScript DOM API。本文便总结一下常见的JavaScript DOM操作方法原创 2017-09-01 19:31:36 · 1299 阅读 · 0 评论 -
动态插入DOM元素并执行脚本
在 HTML 中脚本以 <script> 来标记,通过设置其内容或src属性执行内联脚本或外部脚本。本文讨论动态地插入脚本标签时浏览器对它的解析、下载和执行行为。动态插入脚本的场景可能包括使用 AJAX 获取脚本并动态执行(多用于性能优化),以及运行时决定执行页面模板中的某段脚本(多用于单页异步)。 动态执行脚本还有其他方式,比如eval和new Function,这些不在本文的讨论范围。原创 2017-09-01 19:40:00 · 3249 阅读 · 0 评论 -
【vue 组件 mint-ui】 看了一下源码,给轮播图Swiper封装自定义跳转的函数
mint-ui 自身提供了前一页,后一页的function,这里由于项目需求,点击任意tab都可跳转到相应的图片,所以自己封装了一个function:switchCar。查看项目请到(https://github.com/Rise-Devin/FullStack-Product-Transport-User)Usage import Mint from ‘mint-ui’; ...原创 2017-09-21 19:11:51 · 5215 阅读 · 11 评论 -
使用javascript(JS)实现MD5加密
在项目中遇到了需要判断上传文件是否重复的需求,因为存在文件名相同,但是内容不同的情况,采用文件名是否重复进行判断的话,不够精准,因此使用了MD5加密技术进行判断,我使用的是js-md5库原创 2017-09-27 15:31:23 · 3523 阅读 · 0 评论 -
解决JS(Vue)input[type='file'] change事件无法上传相同文件的问题
解决input file 上传相同文件的问题原创 2017-10-09 10:30:01 · 10039 阅读 · 0 评论 -
JS实现继承的几种方式
前言JS作为面向对象的弱类型语言,继承也是其非常强大的特性之一。那么如何在JS中实现继承呢?让我们拭目以待。原创 2017-03-29 10:21:44 · 462 阅读 · 0 评论 -
javascript创建对象的几种方式
javascript创建对象的几种方式原创 2017-03-29 10:27:13 · 377 阅读 · 0 评论 -
Vue 实现 拖拽文件到网页进行文件上传【JS/JQ 原理也是一样的】
Vue通过操作Dom元素 实现 拖拽文件到网页进行文件上传【JS/JQ 原理也是一样的】原创 2017-09-22 18:17:48 · 8325 阅读 · 0 评论 -
对jq插件进行封装
介绍jq插件的封装及其关系原创 2017-07-28 16:30:02 · 1483 阅读 · 0 评论