Coding-everyday

# 1. Yarn的使用

Facebook公司开发的包管理工具

为什么使用Yarn？

  1. 速度快；
  2. 安装版本统一、更安全；
  3. 更简洁的输出；
  4. 更好的语义化

如何使用Yarn？

  • yarn init
  • yarn add
  • yarn remove
  • yarn install 安装所有依赖包

# 2. vendor 的意思

vendor中文翻译为厂商（第三方），webpack中通常用vendor来命名我们项目中使用的第三方库（俗称三方库）。

# 3. STOMP

STOMP(Simple Text-Orientated Messaging Protocol) 面向消息的简单文本协议；

与HTTP不同，WebSocket是处在TCP上非常薄的一层，会将字节流转化为文本/二进制消息。因此，对于实际应用来说，WebSocket的通信形式层级过低。因此，可以在 WebSocket 之上使用STOMP协议，来为浏览器 和 server间的 通信增加适当的消息语义。

# 3.1. STOMP与WebSocket的关系

HTTP协议解决了web浏览器发起请求以及web服务器响应请求的细节，假设HTTP协议不存在,只能使用TCP套接字来编写web应用，你可能认为这是一件疯狂的事情； 直接使用WebSocket(SockJS)就很类似于使用TCP套接字来编写web应用,因为没有高层协议，就需要我们定义应用间发送消息的语义，还需要确保连接的两端都能遵循这些语义； 同HTTP在TCP套接字上添加请求-响应模型层一样，STOMP在WebSocket之上提供了一个基于帧的线路格式层，用来定义消息语义。

# 4. 请求头keep-alive

HTTP的生命周期通过 Request 来界定，也就是一个 Request 一个 Response ，那么在 HTTP1.0 中，这次HTTP请求就结束了。

在HTTP1.1中进行了改进，使得有一个keep-alive，也就是说，在一个HTTP连接中，可以发送多个Request，接收多个Response。但是请记住 Request=Response ， 在HTTP中永远是这样，也就是说一个request只能有一个response。而且这个response也是被动的，不能主动发起。

# 4.1. 我们已经有了 HTTP 协议，为什么还需要另一个协议websocket？它能带来什么好处？

  1. 答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。
  2. 以前的解决办法是轮询

# 5. 什么是node-gyp？

GYP是一种构建自动化工具。 node-gyp：node下的gyp。

# 5.1. 为什么要有node-gyp？

npm为了方便干脆就直接源码分发，用户装的时候再现场编译。 因为node程序中需要调用一些其他语言编写的工具甚至是dll，需要先编译一下，否则就会有跨平台的问题，例如在windows上运行的软件copy到mac上就不能用了，但是如果源码支持，编译一下，在mac上还是可以用的。node-gyp在较新的Node版本中都是自带的（平台相关），用来编译原生C++模块。

# 6. antd的Icon组件源码

主体代码

const Icon = (props: IconProps) => {
  const { type, className = '', spin } = props;
  const classString = classNames({
    anticon: true,
    'anticon-spin': !!spin || type === 'loading',
    [`anticon-${type}`]: true,
  }, className);
  return <i {...omit(props, ['type', 'spin'])} className={classString} />;
};

主要是整理className和props

# 7. classNames和omit.js组件

classNames组件，主要是为组件提供动态css功能，方便向React之类的应用提供状态编程

classNames('foo', { bar: true }); // => 'foo bar'

omit.js，作用就是过滤掉对象中不需要的属性，避免把不必要的属性传递下去

var omit = require('omit.js');
omit({ name: 'Benjy', age: 18 }, [ 'name' ]); // => { age: 18 }

# 8. uuid插件增加唯一的id

# 9. 要使用scss，需要安装node-sass

所以公司项目总是提示node-sass安装不正确

# 10. node-sass的安装问题

总是报node-sass找不到，又安装不上，原因是国外网址，太慢，自动断开。 一开始用npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/，不管用，后来用cnpm i node-sass可以。

# 11. 安装electron和node-sass冲突

先安装electron，安装任何一个其他的包后，都需要重新安装node-sass，因为是cnpm，每次装了其他包，就把它冲掉了。

# 12. 安装Babel-loader时，需与babel-core(@babel/core)一起安装

.babelrc文件配置：

{
  "presets": [
    ["es2015", {"loose": true}], "react"]
}

需要安装：

  • babel-preset-es2015
  • babel-preset-es2015-loose
  • babel-preset-react

# 13. 【错误处理】Plugin/Preset files are not allowed to export objects,only functions.关于babel报错的解决办法

  1. 这里报错是因为babel的版本冲突。 官方文档注明： babel-loader 8.x | babel 7.x
npm install -D babel-loader @babel/core @babel/preset-env

babel-loader 7.x | babel 6.x

npm install -D babel-loader@7 babel-core babel-preset-env
  1. 处理方法 (1) 升级babel到babel7.0 将所有有关babel的包都升级为7.0版本
"@babel/core": "^7.2.2",
"@babel/preset-env": "^7.3.1",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.5",

(2) 并且修改.babelrc文件

{ "presets":["@babel/react","@babel/env",]}

# 14. cross-env插件

使用cross-env是因为NODE_ENV在mac可以用，在windows下不可以

# 15. dev-server的host设置

  • 设置dev-server的host为0.0.0.0时，可以使用localhost或者本地ip或者127.0.0.1。

  • 如果设置为127.0.0.1别人无法通过ip访问

# 16. Fiddler 工作原理

  1. Fiddler工作原理： 在客户端和服务器端建立代理服务器。
  2. 两种模式：流模式（更接近浏览器本身模式），缓冲模式（可控）

# react-docgen生成文档

对应ts：react-docgen-typescript-loader

# jsDoc生成注释

注释格式如下，开头两个*号，结束一个*号：

/** This is a description of the foo function. */
function foo() {
}

# typescript忽略传来的某属性

比如要忽略size属性： Omit<XXX, 'size'>

# 判断被点击的元素是否在容器内

A.contains(e.target)

这么简单，不用一层一层遍历

# 上传文件的方式

有两种方式：

  1. form表单
  2. ajax异步发送

后者一般借助Formdata

# Formdata

FormData的主要用途有两个：

  1. 将form表单元素的name与value进行组合，实现表单数据的序列化，从而减少表单元素的拼接，提高工作效率。
  2. 异步上传文件

####​POST请求进行文件上传​

<form>
    <input type="text" name="user" id="userID">
    <input type="file" name="file-name" id="fileID" multiple>
</form>
<button>上传文件</button>

//01 获取页面中的btn标签
var oBtn    = document.getElementsByTagName("button")[0];
var oUser   = document.getElementById("userID");
var oFileID = document.getElementById("fileID");
​
//02 给按钮标签添加点击事件
oBtn.onclick = function(){
​
//03 获取表单中的文件内容
var data = new FormData();
data.set("user",oUser.value);
Array.from(oFileID.files).forEach(function(file){
    data.append("fileName",file);
})
​
//04 使用Ajax发送GET请求
var xhr = new XMLHttpRequest();
xhr.open("POST","http://127.0.0.1:5000/api",true);
xhr.send(data);
xhr.onreadystatechange = function(){
  if(xhr.status >= 200 && xhr.status <=300 || xhr.status == 304)
  {
      console.log("请求成功"+xhr.responseText);
  }else{
      console.log("请求失败"+xhr.statusText);
  }
}
}

# rimraf插件

rm -rf

# npm whoami 检测是否登录npm

npm config ls，查看npm配置信息，包括是否用了淘宝源

# package.json中的private？

如果你在你的package.json中设置了“private”：true，那么npm将拒绝发布它。 这是防止私人存储库意外发布的一种方法。

# package.json中的ISC协议？

ISC协议和BSD协议差不多，都极大程度的开源，一般选择MIT协议

# peerDependencies 预先下载的依赖，比如React组件库需要预先下载React

但是开发组件库的过程中还需要，所以可以将它们如react、react-dom移动到devDependcies

# husky插件进行git commit前的lint检查和单元测试

# travis自动运行测试CI

# ts类型声明文件的作用

什么是声明文件？ 和 C/C++ 的 *.h 头文件（Header files）非常相似：当你在 C/C++ 程序中引用了一个第三方库（.lib/.dll/.so/.a/.la）时，C/C++ 编译器无法自动地识别库内导出名称和函数类型签名等，这就需要使用头文件进行接口声明了。

同理地，TypeScript 的声明文件是一个以 .d.ts 为后缀的 TypeScript 代码文件，但它的作用是描述一个 JavaScript 模块（广义上的）内所有导出接口的类型信息。

# 软实力

  1. 举一反三，触类旁通
  2. 自我学习的能力