踩坑记事websocket：后台Jetty服务器允许websocket请求地址不可以设为localhost,否则webs

前言

小白同学呕心沥血多年（其实也就一年多吧），历经多个项目的洗刷（踩~~坑），从0基础的小实习生，慢慢摸索大前端的道路。。。

html篇

1. html输入多个空格会折叠为一个空格显示；

"&nbsp;"：一个不断行的英文空格，半个中文空格;   
"&emsp;": 一个中文空格。 当 white-space:pre 时会保留文本中的空格与换行

1. 阻止google浏览器为表单自动赋值[账号密码]：

google主要是根据识别<Input type="password"/>知道这是一个带账号的密码表单，于是自动赋值。只要：
<Input type="text" autoComplete="off" onfocus={ e=>e.target.type="password"}/>

1. table:

<table border="1px" cellspacing[td内容与边框padding]="3px" borderColor="#ccc"  
        style={{borderCollapse:"collapse"//合并td框线}}>

1. 对于双核浏览器（QQ、360等），需添加以下头部，使网页用webkit内核渲染：

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> //保持使用最高级别模式显示内容
<meta name="renderer" content="webkit"> //360独家识别使用webkit内核

css篇

1. 匹配元素是特定类型的第一个元素

:first-type 要保证前面没有兄弟节点
:first-of-type 同上，前面可以有兄弟节点

1. less中的calc写法：

less: calc(~" 100% - 80px ")  <==>  css: calc( 100% - 80px )

js篇

1. js新窗口打开链接：

const w = window.open('about:blank');
w.location.href = window.location.origin + "/#/pdfView?" + url;
w.close();//关闭当前窗口
w.location.replace(window.location.href);//刷新当前页面
w.location.reload();//刷新当前页面
w.location.hash = "#/";//重定向
window.location.href = window.location.href;//强制刷新

1. 数组的十八般武艺：

直接操作原数组

> 删除：：arr.splice(index[开始位置], num[删除个数]);arr.pop();//删最后一个  
> 插入：arr.splice(index[插入位置], 0[插入], insertValue[插入值])  
> 替换：arr.splice(index[起始位置], num[删除的项数], insertValue[插入任意数量的项])

不修改原数组，返回新数组

> 截取子数组：
const newArr = arr.slice(start[开始位置，负为尾部开始], end[结束位置，负为尾部第几个结束])
eg: const arr = [1,2,3,4,5,6,7].slice(-3) //[5,6,7]  
    const arr = [1,2,3,4,5,6,7].slice(0,-3) //[1,2,3,4]  

> 截取子字符串：
const newStr = str.slice(start[开始位置，负为尾部开始], end[结束位置，负为尾部第几个结束])

类数组 / 可遍历对象转数组

> const newArr = Array.from(arrLike)

3.数组值复制的最简单方法： arr=[...arr1]

坑：子组件将引用传递 通过函数参数传给了父组件，导致子组件内部状态发生变化：
错误：this.props.search(this.state.json) ==> 正确：this.prosp.search({...this.state.json})

react篇

1. style={{backgroundImage: "url(" + ('http://www.baidu.com/img/logo.jpg') + ")"}};//引入网络图片

require中引入变量：require(''+ img +'')

1. websocket：后台Jetty服务器允许websocket请求地址不可以设为localhost,否则websocket连接不上。
1. Element type is invalid:maxed up default and named imports.//未区别默认导出与命名导出，引入默认导出时加了{}或者文件夹与文件重名，导致引入有问题。
1. package.json: set NODE_ENV=dev && webpack-dev-server --inline //设置node中的环境变量为dev,=左右不能有空格，否则一起赋给NODE_ENV
1. node运行： webpack exit status 4294967295:maybe syntax error: put module.export={} when it should have been module.exports={} 或者 script运行脚本写错了
1. npm 安装依赖：npm源访问的是国外网站，网络环境不稳定（报-4058）会导致依赖包安装不上，需多次安装。

webpack篇

1. webpack-dev-server报错：

TypeError:arguments[i].apply is not a function...
问题在webpack.config.js上：plugins数组配置问题。plugins:["import",{...}]

1. npm run build 打包时：

static defaultProps={...}//报错,原因：babel配置的是es6转码，但es6转码中不包定义静态属性，es7中才可以。  
解决：安装es7: >npm install babel-present-stage-0 --save-dev
            >npm install babel-plugin-transform-class-properties --save-dev //转换es6静态类属性
在.babelrc中：{"presets":["es2015","stage-0","transform-class-properties"]}
或者在webpack.config.js中：rules:[{test:/\.jsx?$/},loader:"babel-loader",
query:{"presets":["es2015","stage-0","transform-class-properties"]}]

http篇

1.preflighted requests(预检请求 + 配合重定向)，是CORS中一种透明服务器验证机制。

首先需要向另外一个域名的资源发送一个Http Options 请求头。
目的：判断实际发送的请求是否安全（有预检，服务器就应返回Location重定向url）。

301 Moved Permanently 
被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。
如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，
否则这个响应也是可缓存的。 
新的永久性的URI应当在响应的Location域中返回。除非这是一个HEAD请求，
否则响应的实体中应当包含指向新的URI的超链接及简短说明。 
如果这不是一个GET或者HEAD请求，因此浏览器禁止自动进行重定向，除非得到用户的确认，
因为请求的条件可能因此发生变化。 
注意：对于某些使用HTTP/1.0协议的浏览器，当它们发送的POST请求得到了一个301响应的话，
接下来的重定向请求将会变成GET方式。

302 Found 
请求的资源现在临时从不同的URI响应请求。由于这样的重定向是临时的，客户端应当继续向原有地址发送以后的请求。
只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的。 
新的临时性的URI应当在响应的Location域中返回。除非这是一个HEAD请求，
否则响应的实体中应当包含指向新的URI的超链接及简短说明。 
如果这不是一个GET或者HEAD请求，那么浏览器禁止自动进行重定向，除非得到用户的确认，因为请求的条件可能因此发生变化。 
注意：虽然RFC 1945和RFC 2068规范不允许客户端在重定向时改变请求的方法，但是很多现存的浏览器将302响应视作为303响应，
并且使用GET方式访问在Location中规定的URI，而无视原先请求的方法。状态码303和307被添加了进来，
用以明确服务器期待客户端进行何种反应。

antd篇

1. tab切换时不断提升z-index,显示隐藏控制的opcity.
  tab设计切换时使用缓存机制，若想每次切换都重新发起请求：

<TabPane tab="份额" key="1">
    {this.state.activeKey==="2" ? <Quotient/> : <div></div>}
</TabPane>

1. Form表单Dom报错：Found 2 elements with non-unique id(存在2个元素拥有同一id)
1. Form获取子组件ref:

const EnhanceForm = createForm()(Form)
<Enhance wrappedComponentRef = {ins=>this.form=ins}>

1. Form的getFieldDecorator()装饰器传入的 {rules:[required；true]} 要求接受的数据类型为String, 为Number则报输入值为空。
1. Date-picker: 未提供 << < > >> 按钮的点击回调，若点击想触发onPanelChange，则：

rc-calendarHeader.js (rc-calendar/es/calendar/calendarHeader.js):
function goMonth(direction){
+    this.props.onPancelChange(next,"date");
}

1. Table组件滚动问题：

scroll属性：可控制table组件表头固定，滚动表内容，但它的渲染方式会让表头与表内容宽度关联失效，
必须要手动控制每列width,才可让表格对齐。  
bodyStyle属性：控制表滚动会让表头与表内容一起滚动，因为未分开渲染，则不会影响表格自动列宽对齐，
不用手动设置width也不会错位。

mock篇

    "dataList|10":[{
        "id|+1":1,
        "age|1-100":12,
        "salary|0-10000.2":8000.56,
        "name":"@name|@cname",
        "color":"@color",
        "url":"@url('http')",
        "email"："@email",
        "date":"@date('yyyy-MM-dd')|@datetime",
        "address":"@province"+"@city"+"@county",
        "phone":"@string('number',11)" | /^1[385][1-9]\d{8}/,
        "title":"@title|@ctitle(8,10)",
        "descp":"@string(3,10)",
        "word":"@word|@cword(3,10)",
        "paragraph":"@paragraph|@cparagraph",
    }]