五月前端细节总结

细节知识点

1、代码格式

数学操作符两侧留空格；props数据类型监测放在类前面；翻译；warning；函数名变量名是否最佳；减少不必要的props, state；减少不必要的请求；

使用一个代码（JS-css）尽量避免其他样式的改变（不需要的不要加，避免画蛇添足）；

屏幕录制的结束快捷键：control + command + esc

webpack 内存溢出解决方法：配置

"scripts": {
    "start": "node scripts/start.js",
    "build": "node scripts/build.js",
    "test": "node scripts/test.js --env=jsdom",
    "dev": "export NODE_ENV=development && node config/server.js --max-old-space-size=4096 --inline --progress"
  },

一些常用的东西，例如 SeafileAPI，可以绑定到全局变量。例如设施 window.seafileAPI = seafileAPI 这样其他地方很容易调用这个变量了。

编译成中文：将 po 文件转化成 mo 文件。

run.sh python-env /data/dev/seahub/manage.py compilemessages

docker 内部运行到seahub目录下运行，编译出来即可（需要几分钟）

run.sh python-env /data/dev/seahub/manage.py compilemessages

2、input

1、input submit 等受控组件，点击后需要 event.preventDefault 阻止默认事件（界面跳转）。这部分受控组件中的变量直接可以显示输入的内容。这里可以显示一部分用户输入（但是界面不会提醒用户输入的内容不规范）。

handleInputChange = (event) => {
  event.preventDefault();
  this.setState({
    value: event.target.value.toLowerCase.replace(/i/g, 'I');
  });
}

打开对话框后，内部的输入框 input 自动聚焦

传统的JS中，直接使用 focus 方法，即可使输入框对焦。

在 React-Strap 中，不能直接使用这个方法，在 Modal 设置 autofocus 貌似没用，所以获取DOM并对焦

<Input innerRef={input => {this.newInput = input;}}/>

constructor(props) {
  super(props);
  this.state = {};
  this.newInput = React.createRef();
}

componentDidMount() {
  this.newInput.focus();
  this.newInput.setSelectionRange(0, 0);
}

这样做就可以使得对话框打开后聚焦

回车键后提交内容，需要阻止默认事件

setSelectionRange 可以从一个被 focused 的 input (https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input) 元素中选中特定范围的内容。

input.setSelectionRange(2,5);

3、CSS3

设置一个界面动画的暂停和继续（JS点击按钮，动画暂停或者显示）

div {
  animation-play-state:paused;
  animation-play-state:running;
	-webkit-animation-play-state:paused; /* Safari 和 Chrome */
}

handleButtonClick = () => {
  this.refs.div.style.animationPlayState = 'running'
}

高度宽度单位 vh vw (view height width) 相对于视口的高度和宽度，取值是0~100。某个元素相对于浏览器视口的高度。主要用于浏览器兼容问题，谷歌浏览器实际宽度和视口宽度一致，一部分浏览器实际宽度和视口宽度不一致，所以需要设置这个宽度（当浏览器缩放时，图片尺寸会变化）；

background-size 表示背景图片的尺寸：可以使用px/%/container/cover

PX是绝对尺寸，% 是相对于div的尺寸。container 表示背景铺满div，但是不够的地方是黑色的，背景图片可以完全显示在div上面。cover 表示背景铺满div并且可能超出，一部分背景图片显示不全。通常使用cover属性。

JS 中一个组件，调用另一个组件的方法时

if (obj) obj.method();
// 首先判断这个外部对象是否存在，然后再执行这个对象的方法(如果外部组件没有传入，这个组件不会报错)

react 中不需要用状态变量传递信息（让一个状态刷新子组件的列表内容）如果有这种情况，一定是其他地方还有更好的写法，把刷新子组件列表内容放在父组件中

进行异步操作时，不确定服务器相应的时间，最好加一个loading图标。可以打开对话框，最好在对话框中显示加载状态。

react cookies 库

import cookie from 'react-cookies';

cookie.load('last_visiter') 
ookie.save('view_mode', value);