redux

前言 原文地址： github/Nealyang 没有想到之前写的一篇 一张页面引起的前端架构思考 还收到不少同学关注。的确，正如之前在群里所说，一个系统能有一个非常好的架构设计。但是仅仅对于前端项目页面，其实很难把 架构 一词搬出来聊个天花乱坠。 但是！好的代码结构的组织的确能够避免一些不必要的采坑。当然，这其中也不乏对前端工程师的工程师素养约束。 一言以蔽之，对于前端项目的架构（代码组织）而言， 好 ，好不到哪里去。但是 坏 ，却可以令人头皮发麻。 当然。。。我还是在尽可能的希望好~这也是这篇文章的目的所在。 此处权且抛个砖，如果你有更好的见解和想法，欢迎随时交流~ 拍卖详情页 详情页 图上的点我会在下文中挨个介绍 架构设计图 特点 稳定性要求极高 （这一点区分手淘和天猫，毕竟 拍卖 ...你品） 需要详细的日志打点 模块之间的通信非常多（拍品状态、倒计时、出价等） 对于手淘和天猫的商品，一般都是多个人对多个物品。即使出了问题，也不影响购买，大不了问题修复再购买（最坏的情况）。 但是对于拍卖的拍品。对多对一、价高者得的属性。并且具有一定的法律效应。所以稳定性的要求极其之高。同时拍卖又具有非常高时效性要求，所以 apush、轮询啥的都要求实时更新拍品的状态。 综合以上因素的考虑。最终我们没有选择大黄蜂搭建页面的形式构建起详情页。就先走了源码链路的开发。 至于后续是否会推进落地

https://react-redux.js.org/ 安装 yarn add react-redux 配合ramda实现的计数器 import React from "react"; import { createStore } from "redux"; import { Provider, useSelector } from "react-redux"; import km from "keymirror"; import * as R from "ramda"; const ACTION_TYPES = km({ INC: null, DEC: null, RESET: null, INC_DOUBLE: null, }); const initState = { count: 0, }; const reducer = (state = initState, action, pyload) => { switch (action.type) { case ACTION_TYPES.INC: return R.evolve({ count: R.inc }, state); case ACTION_TYPES.DEC: return R.evolve({ count: R.dec }, state); case ACTION_TYPES.INC_DOUBLE:

作者 : 李熠 链接 : https://juejin.im/post/5cfbe8c7e51d4556da53d07f 前言 去年的某个时候就想写一篇关于接口的吐槽，当时后端提出了接口方案对于我来说调用起来非常难受，但又说不上为什么，没有论点论据所以也就作罢。最近因为写全栈的缘故，团队内部也遇到了一些关于接口设计的问题，于是开始思考实现接口的最佳实践是什么。在参考了许多资料之后，逐渐对这个问题有了自己的理解。同时回想起过去的经验，终于恍然大悟自己当时的痛点在哪里。 既然是吐槽，那么请原谅我接下来态度的不友善。本文中列举的所有例子都是我个人的亲身经历。 谁应该主导接口的设计 或者更直白一些，应该是接口的消费方还是提供方来决定接口的设计？ 当然是接口的消费方 「接口」最吊诡的地方在于提供方大费周章把它实现了，但它自己却（几乎）重来都不使用。于是这极易陷入一种自嗨的境地，因为他更本不知道接口的好坏。就好比一个从来不尝自己做的菜的厨子，你指望他的菜能好到哪里去，他的厨艺能好到哪里去。上面隐含的前提是（我认为）接口是有绝对好坏之分的，坏的接口消费者调用难受，提供者维护难受，还导致产品行为别扭体验变差。 然而接口的好坏与谁来主导设计有什么关系？因为坏接口产生的原因之一是提供方只站在开发者的角度解决问题： 例子一 (Chatty API) 某次需要实现允许用户创建仪表盘页面的功能

前言 最近两篇面试以及离职相关的文章不容错过哦。 离开蘑菇街后，我最近的一些想法 拼多多和酷家乐面试总结 今年面试还是比较顺的，面了五家公司(酷家乐、拼多多、字节、滴滴、蚂蚁)，都过了。 在文章里我不仅会列出面试题，还会给到一些答题建议，个人能力有限，也不能保证我回答都正确， 如果有错误，希望能纠正我。 字节 一面 说一下浏览器缓存 浏览器缓存分为 强缓存 和 协商缓存 ，强缓存会直接从浏览器里面拿数据，协商缓存会先访问服务器看缓存是否过期，再决定是否从浏览器里面拿数据。 控制强缓存的字段有：Expires和Cache-Control，Expires 和 Cache-Control。 控制协商缓存的字段是：Last-Modified / If-Modified-Since 和 Etag / If-None-Match，其中 Etag / If-None-Match的优先级比Last-Modified / If-Modified-Since高。 cookie 与 session 的区别 Session 是在服务端保存的一个数据结构，用来跟踪用户的状态，这个数据可以保存在集群、数据库、文件中； Cookie 是客户端保存用户信息的一种机制，用来记录用户的一些信息，也是实现 Session 的一种方式。 详见： COOKIE和SESSION有什么区别？ 浏览器如何做到 session

前言 每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。 一、Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西： 必须使用它的模块机制 必须使用它的依赖注入 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免） 所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。 二、React 它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。你当然可以只用React的视图层，但几乎没有人这么用，为什么呢，因为你用了它，就会觉得其他东西都很别扭，于是你要引入Flux，Redux，Mobx之中的一个，于是你除了Redux，还要看saga，于是你要纠结业务开发过程中每个东西有没有副作用，纯不纯，甚至你连这个都可能不能忍： const getData = () => { // 如果不存在，就在缓存中创建一个并返回 // 如果存在，就从缓存中拿 } 因为你要纠结它有外部依赖，同样是不加参数调用，连续两次的结果是不一样的，于是不纯。为什么我一直不认同在中后台项目中使用React

在项目数据全局状态管理上，在react框架使用的是Redux; Redux是为了解决应用程序状态（State）管理而提出的一种解决方案。从单项数据流方面说，redux中将整个状态都集中在一个JavaScript对象树中。然后通过数据变更也就是通知，而将组件变更动作储存在store 仓库中。等到使用 时候 使用this.store.dispacth分发 通过下面在项目使用ngrx： 首先创建 store文件夹中，再创建actions reducers selectors 三个文件 1, 在reducer 初始化state 状态，和值 export enum ModalType { Register = "register", LoginByPhone = "loginByPhone", Share = 'share', Like = 'like', Default = 'default' } //初始化State类型 export interface MemberState { modalVisible: boolean; modalType: ModalType } //初始化State的值 export const initialState: MemberState = { modalVisible: false, modalType: ModalType.Default } /

手撸的乞丐版如下，仅实现了最基础的功能，订阅，派遣，获取三个功能，不过已经可以简单使用了，做个计数器是没啥问题，而且可以更简单粗暴的看到redux的核心功能 注意：该篇篇幅较长，建议收藏后慢慢看，也可以直接去github上拉下来自己试一试~ 《github传送门》 --------------------------------------------------------------正文开始------------------------------------------------------------- 简易版redux，真正的redux源码在文章最后面，源码较长，将近300行，刨去注释和兼容开发版不到100行，处理的场景比较多。我自己写的这个redux仅实现了它的核心功能，没有去管太多的兼容问题，但是代码少一点，大家对它的接受程度也会高一点，希望大家能够看懂。 const REDUX_INIT_TYPE = "@@REDUX_INIT_TYPE" export function createStore ( reducer , preloadedState , enhancer ) { /** * 为什么要交换一下？ * 看名字，可以大概知道第二个参数preloadedState代表了预设的State，如果不传就是空的， * 也就是state的默认值