7.8k 7 分钟

一. 背景介绍

1. 我们为什么要做项目重构

项目重构是每一家稳定发展的互联企业的必经之路, 就像一个产品的诞生, 会经历产品试错产品迭代 一样, 随着业务或新技术的不断发展, 已有架构已无法满足更多业务扩展的需求, 所以只有通过重构来让产品“进化”, 才能跟上飞速发展的时代浪潮.

图片

3.4k 3 分钟

# 前置知识

img

什么是跨域?

浏览器发送的请求地址(URL)与所在页面的地址 不同(端口 / 协议 / 域名 其一不同)。简言之,浏览器发出的请求 url,与其所在页面的 url 不一样。此时,同源策略会让浏览器拒收 服务器响应回来的数据,报错信息如下:

img

同源策略

同源机制是浏览器处于安全考虑,只允许相同源的接口进行相互通信。不同源的接口在没有得到对方授权的情况下不能够读写对方的资源。这个很好理解,如果没有同源机制,浏览器中的 cookie 就可以被随意读取,一旦用户进入恶意网站,恶意网站就可以读取用户的 cookie,伪造用户进行登陆转款等操作。

4.7k 4 分钟

# 前言

众所周知,Vue 项目采用了数据双向绑定和虚拟 DOM 基础,在数据驱动代替 DOM 频繁渲染已经算是非常高效了,对开发者而言已经非常优化了,那为什么还会有 Vue 性能优化这一说呢?

因为目前 Vue 2.x 使用了 webpack 等第三方打包构建工具,并且支持其他第三方的插件,我们在项目中使用这些工具时可能不同的操作在运行或打包效率上会有不同的效果,下面就来详细说明优化的方向。

8k 7 分钟

# Dialog 地狱

为啥是地狱?

因为凡是有 Dialog 出现的页面,其代码绝对优雅不起来!因为一旦你在也个组件中引入 Dialog ,就最少需要额外维护一个 visible 变量。如果只是额外维护一个变量这也不是不能接受,可是当同样的 Dialog 组件,即需要在父组件控制它的展示与隐藏,又需要在子组件中控制。

11k 10 分钟

# 什么是状态管理? # 状态 状态是表示组件当前状况的 JS 对象。在 React 中,可以使用 useState 或者 this.state 维护组件内部状态,通过 props 传递给子组件使用。 为了避免状态传递过程中出现混乱,React 引入了 “单向数据流” 的理念。主要思想是组件不会改变接收的数据,只会监听数据的变化,当数据发生变化时他们会使用接收到的新值,而不是修改已有的值。当组件的更新机制触发后,他们只是使用新值进行重新渲染。 父子组件通信可以直接使用 props 和回调方式;深层次、远距离组件则要通过 “状态提升” 和 props 层层传递。 # 常见模式 React...
8.6k 8 分钟

由于谷歌在 Monorepo 上的实践,Monorepo 受到了越来越多的关注。Monorepo 意味着把所有项目的所有代码统一维护在一个单一的代码版本库中,和多代码库方案相比,两者各有优劣,需要根据公司文化和产品特性进行取舍。原文:What is monorepo? (and should you use it?)[1]

Monorepos(单一代码库)有助于加快开发工作流程,在本文中,我们将帮助你认识这一代码组织模型是否适合你的团队和公司。

12k 11 分钟

# Q1:安装超时 (install timeout)

方案有这么些:

cnpm : 国内对npm的镜像版本
/*
cnpm website: https://npm.taobao.org/
*/
npm install -g cnpm --registry=https://registry.npm.taobao.org
//cnpm 的大多命令跟 npm 的是一致的,比如安装,卸载这些
yarn 和 npm 改源大法
// 使用 nrm 模块 : www.npmjs.com/package/nrm
npm config : npm config set registry https://registry.npm.taobao.org
yarn config : yarn config set registry https://registry.npm.taobao.org