技术画板 - 一点技术,一点艺术

w3cmm

用Dva Model优化路由配置功能

最近业务中的中后台系统基本上都是采用Ant Design Pro开发,业务中路由配置模块功能过于复杂,如果组件通信只通过React props实在是痛苦不堪。Ant Design Pro中内置了dva,dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects,订阅数据源的 subscriptions 。 拆分组件 设计Model export default { namespace: ‘routeConfig’, state: { transfer: [], canvasData: [], isVisibleServiceList: false, serviceSearchParams: [] … 继续阅读

目录 Memo | |
w3cmm

Redux 在车货匹配项目中的实践

Redux已经发布3年左右,一直没有在生产环境中实践过,前段时间正好有新需求可以体验一下。本文摘取项目的部分代码进行简单的分析。 入口文件: #goodsNew/index.tsx import * as React from ‘react’; import {createStore, applyMiddleware, Middleware} from ‘redux’ import {Provider} from ‘react-redux’ import {createLogger} from ‘redux-logger’ import ‘./index.css’ import GoodsNew from ‘./goodsNew’ import reducer from … 继续阅读

目录 Memo | |
w3cmm

聊一聊我对redux的理解

react是单向数据流动的的框架,数据可以从顶层组件依次传递给层级最深的组件。 react组件通信 react组件树形结构犹如家族关系: 爷爷要和小红通信:爷爷告诉爸爸,爸爸告诉小红。爸爸要和叔叔通信:可以将两者交互的state提升至爷爷,通过爷爷state的改变来完成通信使命。 现实项目中需求远比上面的关系要复杂的多,状态便变得难于管理。如果能把需要通信的组件状态放到一个store的地方,这样只需要去store更新状态与之相关的视图自动更新,这样是不是简单了很多了呢? 于是就有了redux这样的框架,redux是JavaScript 状态容器,提供可预测化的状态管理。 redux redux 设计思想: 从例子入手 来看一个最简单的例子: //reducers/inde … 继续阅读

目录 Memo | |
w3cmm

Linux tail 命令

在类似Unix-like的操作系统上,tail命令读取文件,并输出文件的最后部分(“ tail”)。 tail命令还可以监视数据流和打开文件,并在写入时显示新信息。例如,这是一种实时监视系统log中最新事件的有用方法。 默认情况下,tail将每个文件的最后10行打印到标准输出。如果指定多个文件,则每组输出均以显示文件名的标题作为前缀。 tail语法: tail [OPTION]… [FILE]… tail –help tail –version tail示例: tail error.log 输出文件error.log的最后10行。 tail -n 3 error.log 查看error.log最后3行. tail -f error.log 输出error.lo … 继续阅读

目录 Linux | |
w3cmm

使用rel=noopener更安全

链接目标网页可以通过window.opener访问入口页面window信息,从而被利用将入口页面恶意跳转。 <!–入口页面–> <a href=”test.html” target=”_blank”>进入</a> <!–test.html–> <script>window.opener.location.href=”https://www.w3cmm.com”;</script> 为了防止window.opener被滥用,在使用targrt=_blank时需要加上rel=noopener <a href=”test.html” target=”_blank” rel=”noopener”& … 继续阅读

目录 Memo |
w3cmm

切换默认shell与fish

fish是功能齐全的命令行shell程序(如bash或zsh),既智能又友好。 fish支持强大的功能,例如语法突出显示,自动建议和仅需工作的制表符补全,无需学习或配置。 如果您想让命令行更高效,更实用,更有趣,而又不学习许多神秘的语法和配置选项,那么fish可能就是您想要的! 切换默认bash为fish? 如果希望将fish(或任何其他shell)用作默认shell,则需要在两个位置输入新shell的可执行文件/usr/local/bin/fish: 增加/usr/local/bin/fish到/etc/shells 使用chsh -s改变你的默认shell为/usr/local/bin/fish 您可以为此使用以下命令: 使用以下命令将fish shell /usr/ … 继续阅读

目录 Memo |
w3cmm

Linux which 命令

在Unix-like操作系统上,which命令用来查找与给定命令关联的可执行文件。which命令通过在PATH环境变量中的路径中搜索与参数名称匹配的可执行文件来执行此操作,返回将在当前环境中执行的文件(或链接)的路径名。 语法 which -a [filename] … 可选参数 -a打印每个匹配文件名的所有匹配路径名。 示例 which sh 找到如果执行sh命令将要运行的文件的路径名。 在大多数系统上,这将输出:/bin/sh

目录 Linux | |
w3cmm

RGB-macOS拾色App

RGB是一个macOS平台的拾色器,它可以拾取你屏幕上任何位置的颜色。 https://github.com/thunkli/RGB

目录 Contributed | |
w3cmm

macOS中以管理员身份运行APP

有时在macOS中APP没有权限读写某文件,此时可以在终端输入命令:sudo open -a AppName,然后按照提示输入密码就可以正常使用了。 参数说明: -a:指定APP名称

目录 Memo | |
w3cmm

开启/关闭macOS Catalina更新提醒

打开终端(Terminal app)运行下面的命令,回车键运行(可能需要你输入密码) 关闭macOS Catalina软件更新提醒 sudo softwareupdate –ignore “macOS Catalina” 开启macOS Catalina软件更新提醒 sudo softwareupdate –reset-ignored

目录 Memo | |
w3cmm

Enable HTTP/2 support in Apache

Enable and load SSL and HTTP/2 modules sudo a2enmod ssl sudo a2enmod http2 To activate these new modules sudo systemctl restart apache2 To enable HTTP/2 on your Apache web server add Protocols h2 http/1.1 to your global Apache configuration or inside of a particular virtual host. Here is the minimal virtual server configuration that can b … 继续阅读

目录 Memo |
w3cmm

TypeScript 中 interface 与 type 区别

Objects / Functions Interface interface Point { x: number; y: number; } interface SetPoint { (x: number, y: number): void; } Type alias type Point = { x: number; y: number; }; type SetPoint = (x: number, y: number) => void; Other Types // primitive type Name = string; // object type PartialPointX = { x: number; }; type PartialPointY = … 继续阅读

目录 Memo |
w3cmm

async await 原理

ES2017 标准引入了 async 函数,它就是 Generator 函数的语法糖。 async 函数的实现原理,就是将 Generator 函数和自动执行器,包装在一个函数里。 Generator 函数是 ES6 提供的一种异步编程解决方案,调用 Generator 函数,会返回一个内部指针(即遍历器)g。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针g的next方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的yield语句。 async function fn(args) { // … } // 等同于 function fn(args) { return spawn(function* … 继续阅读

目录 Memo |