有一种选择叫做格子里

问题：如何在生产环境禁止 console log ？？

开发和测试环境中会用到大量 console.log 方法来进行代码的调试，但生产上需要关闭这些输出。
因为 console.log 打印的对象是不会被垃圾回收器回收的，这样可能会影响页面的整体性能，尤其是在开发环境可能会引起一起不必要的 bug

有以下两种方法：

Hack 方法

• 这应该是最容易想到的方法，直接改写 console.log 的方法。
• 在生产环境禁止打印的方法 (Node 环境下，我本人的项目是 react)

1
2
3
4
5
6
7

// <!-- 在项目入口处加上如下代码 -->
// process是Node 提供一些常用的全局变量，所有模块都可以调用
console.log("Env:%o,:%o", process.env.NODE_ENV); // production：生产环境  development：开发环境
if (process.env.NODE_ENV === "production") {
  console = console || {};
  console.log = function () {};
}

webpack 构件工具中配置

• 使用UglifyjsWebpackPlugin插件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// yarn add uglifyjs-webpack-plugin
// 在你的webpack.config.js中添加如下代码
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        drop_console: true,
      },
    },
  }),
];

// webpack 更新啦4.x 后这样写。
plugins: [
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true,
      },
    },
  }),
];

Git 知识整理学习记录

git clone 仓库

• 从 GitHub 克隆项目到本地

1

git clone  https://github.com/Gzbox/react-router-v4-demo-newest.git

git 分支管理

查看分支

• 查看本地分支，使用 git branch 命令

1
2
3
4

// *标识的是你当前所在的分支。

git branch
* master

• 查看远程分支

1

git branch -r

• 查看所有分支

1

git branch -a

本地创建分支

1
2
3

git branch [branch name]

//  例子: git branch dz-dev

切换到新的分支

1
2
3
4
5
6

git checkout [branch name]

//  例子：
// git checkout master
// Switched to branch 'master'
// Your branch is up to date with 'origin/master'.

前端跨域问题详解

文章摘自微信公众号“前端大全”

跨域这两个字就像一块狗皮膏药一样黏在每一个前端开发者身上，无论你在工作上或者面试中无可避免会遇到这个问题。为了应付面试，我每次都随便背几个方案，也不知道为什么要这样干，反正面完就可以扔了，我想工作上也不会用到那么多乱七八糟的方案。到了真正工作，开发环境有 webpack-dev-server 搞定，上线了服务端的大佬们也会配好，配了什么我不管，反正不会跨域就是了。日子也就这么混过去了，终于有一天，我觉得不能再继续这样混下去了，我一定要彻底搞懂这个东西！于是就有了这篇文章。

要掌握跨域，首先要知道为什么会有跨域这个问题出现

确实，我们这种搬砖工人就是为了混口饭吃嘛，好好的调个接口告诉我跨域了，这种阻碍我们轻松搬砖的事情真恶心！为什么会跨域？是谁在搞事情？为了找到这个问题的始作俑者，请点击：浏览器的同源策略。

_这么官方的东西真难懂，没关系，至少你知道了，因为浏览器的同源策略导致了跨域，就是浏览器在搞事情_。

所以，浏览器为什么要搞事情？就是不想给好日子我们过？对于这样的质问，浏览器甩锅道：“同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。”

_这么官方的话术真难懂，没关系，至少你知道了，似乎这是个安全机制_。

所以，究竟为什么需要这样的安全机制？这样的安全机制解决了什么问题？别急，让我们继续研究下去。

没有同源策略限制的两大危险场景

据我了解，浏览器是从两个方面去做这个同源策略的:

1. 一是针对接口的请求，
2. 二是针对 Dom 的查询。

试想一下没有这样的限制上述两种动作有什么危险。

React 生命周期的理解

在组件的整个生命周期中，随着该组件的 props 或者 state 发生改变，其 DOM 表现也会有相应的变化。一个组件就是一个状态机，对于特定地输入，它总返回一致的输出。
一个 React 组件生命周期三个部分实例化、存在期和销毁时。

实例化

getDefaultProps

• 对于每个组件实例来讲，这个方法只会调用一次，该组件类的所有后续应用，getDefaultPops 将不会再被调用，其返回的对象可以用于设置默认的值。
• ES6 以后可以使用component.defultProps={xx:xx}来设置 props 默认值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

import React, { Component } from "react";

// ES6的写法
export default class Hello extends Component {
  render() {
    return (
      <div>
        Hello,{this.props.name},my username is {this.props.dwqs}
      </div>
    );
  }
}

Hello.defultProps = {
  name: "pomy",
  dwqs: "dwqs",
};

// ES5的写法
var Hello = React.creatClass({
  getDefaultProps: function () {
    return {
      name: "pomy",
      dwqs: "dwqs",
    };
  },

  render: function () {
    return (
      <div>
        Hello,{this.props.name},my username is {this.props.dwqs}
      </div>
    );
  },
});

react-router 4.x 简单教程说明

具体完整的代码

React Router4 是一个流行的纯 React 重写的包。现在的版本中已不需要路由配置，现在一切皆组件。

安装

React Router 被拆分成三个包：react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境（即浏览器与 react-native）所需的特定组件。
进行网站构建，我们应当安装react-router-dom,react-router-dom暴露出react-router中暴露的对象与方法，因此你只需要安装并引用react-router-dom即可。

1

yarn add react-router-dom

路由器(Router)

在你开始项目前，你需要确定你使用的路由的类型，对于网页项目，存在<BrowersRouter>和<HashRouter>两种组件
当存在服务取来管理动态请求时,需要使用<BrowserRouter>组件，而<HashRouter>被用于静态网站。
通常我们更倾向于<BrowserRouter>,但如果你的网站仅用来呈现静态文件，那么<HashRouter>将会是一个更好的选择