AwesomeDevin-CSDN博客

原创【Javascript】深入理解this作用域问题以及new/let/var/const对this作用域的影响

理解this作用域《javascript高级程序设计》中有说到:this对象是在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象调用时，this等于那个对象。不过，匿名函数具有全局性，因此this对象同常指向window针对于匿名函数this具有全局性的观点仍是有争议的，可参考 https://www.zhihu.com/question/2...

2019-05-06 11:12:06 517 1

原创【Javascript】彻底捋清楚javascript中 new 运算符的实现

new 运算符在js中,new()常被用来创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例new 关键字会进行如下的操作：1.创建一个空的简单JavaScript对象（即{}）；2.链接该对象（即设置该对象的构造函数）到另一个对象；3.将步骤1新创建的对象作为this的上下文；4.如果该函数没有返回对象，则返回this。重点解析1.我们先来写一个funct...

2019-04-28 16:20:03 285

原创拆分代码 + 动态加载 + 预加载，减少首屏资源，提升首屏性能及应用体验

该方案基于及, 分别对应构建时与运行时构建时通过dynamicAPI 及对模块进行拆包的同时，还会将preloadKey(开发者自定义的预加载标识)import-module-url(import 模块路径)chunk(output产物)三者之间的关系以json形式进行保存，并允许应用端访问。生成的JSON文件：JSON：开发者基于 JSON,可以判断出可被预加载的chunk及已配置预加载的chunk具体有哪些，同时也能知道插件中配置的预加载标识preloadKey与chunk间的映射关系。运行时。

2023-11-10 11:02:40 527

原创【用户体验分析报告】按需加载组件，导致组件渲染卡顿，影响交互体验？组件拆包&预加载方案来了！

预加载的目的让被懒加载的组件资源提前进行对应的资源请求，而不是渲染时请求, 本文为大家介绍的是基于实现的一套加载时机高度自定义的资源预加载方案。该方案基于及, 分别对应构建时与运行时构建时通过dynamicAPI 及对模块进行拆包的同时，还会将preloadKey(开发者自定义的预加载标识)import-module-url(import 模块路径)module(output产物)三者之间的关系以json形式进行保存，并允许应用端访问。

2023-07-27 22:49:39 695

原创基于zustand维护的一套跨框架(react/vue)跨应用的状态管理及共享方案

只要从事前端开发，不论是小程序还是web，都绕不开状态管理。众所周知， zustand 是一套轻量、便捷、可拓展的状态管理方案，不论国内 or 国外，都备受喜爱，数已接近 3W。而则基于zustand为等业务场景，提供的及能力。

2023-06-15 15:57:54 1412

原创拆分代码 + 预加载，减少首屏资源，提升首屏性能及应用体验

route-resource-preload 的目标是，在不影响用户交互体验的同时，尽可能的提升应用性能`。🚀 🚀 🚀希望 route-resource-preload 能对你的项目有所帮助，后续还将持续探索 vite 中的使用以及对 vue 的支持，如果你有好的想法，请发表在此。在线体验react demo 源码。

2023-06-15 15:56:42 421

原创 zustand 带着 zustand-vue / zustand-pub，它们来了！！！

为什么是 zustand / zustnad-vue / zustand-pub ? 前端状态管理框架对比。

2023-03-14 16:47:09 431

原创【状态管理】zustand 中文文档，它来了！！！

是不是觉得 Redux 很难用？想用 Context 代替，但是你知道吗，Context 也有个很大的缺点：context value发生变化时，所有用到这个context的组件都会被重新渲染，即使 component 需要的 state 可能根本沒有变动。基于 context 维护的模块越多，影响范围越大, 某些情况下会导致页面明显卡顿。另外，它依赖 Context Provider 包裹你的应用程序。那么试试 zustand 吧，当然你可以选择 mobx，zustand 与 mobx 最大的差别在于

2023-03-06 16:42:24 4088

原创【前端状态管理】React 状态管理工具如何选 context/redux/mobx/zustand/jotai/recoil/valtio

状态”是描述应用程序当前行为的任何数据。这可能包括诸如“从服务器获取的对象列表”、“当前选择的项目”、“当前登录用户的名称”和“此模式是否打开？”等值。众所周知，我们在研发一个复杂应用的过程中，一套好的状态管理方案是必不可少的，既能提升研发效率，又能降低研发维护成本，那么状态管理方案那么多，它们有什么不同，我们又该如何选择适合当前应用的方案呢？本期将主要就react的常用状态管理方案进行对比分析，希望对各位看客有帮助。

2023-02-06 14:53:26 2380

原创推荐一款个人开源的图片色值处理工具 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 323

原创基于Taro开发的小程序多端UI组件库 taro-custom-ui

taro-custom-uiCustomUI 是一套基于Taro开发的小程序多端UI组件库,目的在于给开发者提供更灵活的布局组件及样式,以满足更多个性化的场景Featured Components<CustomPage /> <CustomTransition /> Commmon Components<CustomList /><Cus...

2019-05-10 11:26:16 2407

原创【Javascript】分享一个异步请求问题导致的bug以及解决方法(Array.map Array.foreach 中 async/await 写法无效)

https://codeburst.io/javascript-async-await-with-foreach-b6ba62bbf404Array.foreach、 Array.map 中的async/await写法会失效 ,可使用Promise+Array.map 或者Promise + for循环代替if(res.code === 10000){ res.data = ...

2019-01-18 18:13:58 660

原创【简单好用，支持图片懒加载】 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 6096 4

原创使用django2.0搭建静态资源服务器并访问

1.settings中添加 MEDIA_URLimport osMEDIA_URL = '/media/' #资源保存目录 mediaMEDIA_ROOT = os.path.join(BASE_DIR, 'media')2.设置资源访问urlsfrom django.conf import settingsfrom django.conf.urls.static impo...

2018-09-29 17:31:43 1317

原创安利一个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 2414

原创【koa2】koa-static-router 中间件搭建静态资源服务器，实现多个&&多层路由加载静态资源

koa中间件koa-static-router实现多个&amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;多层路由加载静态资源源码及使用说明 Git仓库安装$ npm install koa-static-routerUsage单个路由 app.use(static({ dir, //静态资源目录对于相对入口文件index.js的路径 route //路由命名

2018-08-03 22:34:19 2896

原创解决由于参数编码问题导致服务端报500 【如：微信小程序 session_key 加密数据解密算法报错】

我的报错场景在【微信小程序】开发中加密数据解密算法报错,后来经过排查发现是由于session_key(‘06uB1744eFm+jcmxMOKxMw==’)中存在特殊符号‘+’,后端接收到的参数为‘06uB1744eFm jcmxMOKxMw==’,前后不一致，导致解密报错解决办法前端使用encodeURIComponent(key)对key进行编码,后端de...

2018-08-01 17:23:17 2778

原创搭建nginx静态服务器

1.安装nginxyum install nginx -y2.启动nginxnginx3.配置静态服务器访问路径打开 Nginx 的默认配置文件 /etc/nginx/nginx.conf ，修改 Nginx 配置，将默认的 root /usr/share/nginx/html; 修改为: root /data/www;重启nginxng...

2018-07-28 11:04:41 219

原创搭建gitlab

准备环境更新yumyum update -y安装sshdyum install -y curl policycoreutils-python openssh-server激活并启动sshdsystemctl enable sshdsystemctl start sshd 配置防火墙打开 /etc/sysctl.conf 文件，在文...

2018-07-28 11:03:41 375

原创配置ssl证书

配置ssl证书将从腾讯云上下载的压缩包解压，里面包含 Apache， IIS, Nginx, Tomcat 文件夹，分别对应不同的部署方式。我们这里选择 Nginx 的部署方式将 Nginx 文件夹下的两个文件直接拖动到此编辑器左侧的文件浏览器的 /etc/nginx 目录下，浏览器会自动将这两个文件上传到此服务器编辑nginx配置文件编辑 /etc/nginx/con...

2018-07-28 11:01:56 910

原创 docker环境搭建

安装curl -sSL https://get.docker.com/ | sh查看docker版本docker -v更换镜像源sudo su -cat >> /etc/docker/daemon.json <<- EOF{ "registry-mirrors": ["https://registry.docker-cn.com"...

2018-07-28 11:01:07 207

原创【微信小程序】隐藏小程序导航栏/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 11871 1

原创【通俗易懂】手把手进行ES6异步编程： Generator + Promise = JavaScript强大的异步回调方式

概念 Generator 函数是 ES6 提供的一种异步编程解决方案，执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。yield表达式形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function...

2018-07-24 19:17:29 799

原创【webpack 从0到1构建】webpack4持久化缓存优化方案,小白也能看懂的构建过程

之前一直对webpack只是了解到一些皮毛，最近抽空学习了一些持久化缓存的必要性以及方案，并自己进行了一次从0到1的项目配置，在此分享一下，方便大家一起交流学习，有写错或理解错的地方还请大佬多多指点。开题1. 缓存的作用每次代码需要更新时，服务器必须重新部署，客户端也必须重新下载资源。因为从网络中获取资源会很慢，这显然非常低效。这就是为什么浏览器会缓存静态资源的原因。但是这样做有一...

2018-07-19 19:48:28 1495

原创【微信小程序】清空input内容

在vue中,我们清空input值往往是clear(){ this.inputValue = '';}然而在微信小程序中，直接使用setData()赋值是无法清空input的值的，我们需要绑定一个form，这样做:<form bindreset="formReset"> <input type="text" placeholder="请输入订单号" ...

2018-07-16 16:08:51 3957

原创【微信小程序】数据更新，视图无法更新时，使用setData()更新视图，并解决setData()赋值对象属性及数组问题

在Vue中，当我们对数据进行修改时，视图也会发生变化，微信小程序也提供的一样的功能，但是需要使用官方提供的setData()方法,如下:Page({ data: { isShow: false }, changeStatus(){ this.setData({isShow : true}); console.log(this.data.isShow); ...

2018-07-16 10:59:48 14384

原创【微信小程序】微信小程序保存二维码海报到相册，以及解决二维码不够清晰的问题

小程序保存二维码海报添加 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 7591 1

原创解决Vue/小程序中针对数组（列表）实现倒计时倒数效果越来越快的问题

你可能会使用watch监听list由于watch监听数据变化，对数据进行遍历时，当只有一个item符合条件时倒计时正常，一旦多个item符合条件,if语句内执行了一次以上，由于多个item发生改变会多次触发watch,导致倒计时越来越快,错误效果 watch={ List(val){ //var timer = setInterval(...

2018-05-02 18:39:47 2650

原创 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 1060

原创通俗易懂地讲解 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 502

原创解决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 19487 2

原创 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 3185

原创深入讲解离线缓存及其用法

why:应用程序缓存为应用带来的优势：离线浏览：用户可在应用离线时使用它们速度：已缓存资源加载速度块减少服务器负载：浏览器只从服务器下载更新过的资源usages:在html标签添加manifest属性<!DOCTYPE HTML> <html manifest="../js/demo.manifest"> ...

2018-04-30 14:48:20 4038

原创 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 13753 2

原创运用canvas技术画一个由内向外渐变的实心圆(javascript)

html<canvas id="canvas"></canvas>js var canvas = document.getElementById('canvas') var ctx = canvas.getContext('2d') var width = document.documentElement.cli...

2018-03-02 09:57:13 1185

原创使用openpyxl进行excel操作

openpyxl模块用来读写Excel文件。openpyxl工作时，在内存中创建Excel工作簿和工作表，然后在工作表中的单元格中进行各种数据编辑和样式编辑操作，或在工作表中绘制图形，最后再保存文件写入到Excel中。官方文档： http://openpyxl.readthedocs.io/en/default/1. 基本操作1.1. 引入openpyxl库import...

2018-02-11 15:03:21 13713 1