1、遇到省市区二级/三级地址选择器，记得加隐藏域（type="hidden"）分别保存省、市、区的值，否则当把省市区字符串串联起来，传给接口的时候，无法区分省、市、区，另外，必须给input加data-id，且值设置为该省/市/区自身的id；遇到地址选择器接口，先调用接口将数据存储起来，不要每次查询地址一次，即调用地址选择器接口一次，这样查询速度会非常慢。
2、input type=number时，设置其属性maxlength值不生效；input type=tel时，设置其属性maxlength值生效。
3、项目上线后，如果修改样式（css文件）或者脚本（js文件），要在html引入文件名后加入版本号（时间戳），否则有缓存。
4、调用每个接口以后，接口回调均需要加接口是否调用成功的判断。
5、写样式（css）时，对于一些css3的属性（比如transform），一定要加上各浏览器的兼容写法，加上-webkit-、-ms-、-moz-、-o-等，否则一些老式手机（如iphone5等）会不支持该属性。
6、如果遇到需要使用input，且不需要手机键盘弹出的情况，可以给input加属性值：readonly="readonly"，并且在input的click或者focus事件内的第一行，添加如下代码：$(this).blur();或document.activeElement.blur();
7、访问一个 https 的 URL 时，页面中有 http 的链接，浏览器就会提示 只显示安全内容，如何避免这个情况？
打开f12工具，看页面请求（Network），如果你的访问请求（页面url）已经走了https，那么页面中所有的请求理应都走https。方法：访问同一个网站的元素直接走绝对路径或相对路径。如: src="index.html"， src="/images/welcome.jpg"。跨网站请求可以用"//"，表明使用同一策略，如src="//www.baidu.com/"。
8、MDN：window.onpopstate是popstate事件在window对象上的事件处理程序.每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发. 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.调用history.pushState()或者history.replaceState()不会触发popstate事件. popstate事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.
大白话：只要做出浏览器动作时（即当活动历时条目更改时）（如：用户点击浏览器的前进后退按钮/在js代码中调用history.back()/history.forword()/history.go()时），就会触发popstate事件。
经过实际测试，当页面加载时（假设设置了足够的历史记录条目），如果调用history.back()或者history.go(-1)(这里参数小于0)方法，可触发popstate事件；但是调用history.forword()或者history.go(1)（这里参数大于0）方法，则无法触发popstate事件。案例见MDN官方案例：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate
9、history.pushState(state,title,URL) 方法向浏览器历史添加了一个状态。
state参数：是一个对象，是一个由 pushState()方法创建的、与历史纪录相关的JS对象。事件popstate事件被触发后，该事件的state属性包含了该条历史记录的state对象；
title参数：给该参数传递一个空字符串或者null是一个安全的做法；
URL参数：提供了新历史记录的地址。
例如: history.pushState({page: 1}, "", "?page=1");
10、属性是与对象相关的值。方法是能够在对象上执行的动作。举例：汽车就是现实生活中的对象。汽车的属性包括名称、型号、重量、颜色等，汽车的方法可以是启动、驾驶、刹车等。
11、document.body返回当前文档中的<body>元素或者<frameset>元素。
12、scroll事件：当文档视图或一个元素被滚动时触发滚动事件。window.addEventListener('scroll', function(e) {} 注意，被监听的元素，必须有样式：overflow:auto或者overflow:scroll。
13、Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。
element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoViewOptions); // Object型参数alignToTop一个Boolean值：
- 如果为
true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。 - 如果为
false，元素的底端将和其所在滚动区的可视区域的底端对齐。
scrollIntoViewOptions一个boolean或一个带有选项的object：
{
behavior: "auto" | "instant" | "smooth",
block: "start" | "end",
}如果是一个boolean, true 相当于{block: "start"}，false 相当于{block: "end"}，behavior这个选项决定页面是如何滚动的。
14、<element contenteditable="true|false"> contenteditable 属性指定元素内容是否可编辑。如果元素内容过长，会自动换行。可适用于聊天窗口的div元素模拟的input输入框，这样，当输入文字较长时，会自动换行，弥补了input框无法换行的缺憾。
参考demo：http://www.zhangxinxu.com/study/201012/div-textarea-height-auto.html
15、子元素相对于父元素居中：如果是子元素是display:block元素，则只要在子元素上添加样式：margin:0 auto; 如果子元素是display:inline-block元素，则只要在父元素上添加样式：text-align:center;即可。
16、因为不同的环境域名/工程名不同，所以当代码中有涉及到域名的地方，让接口返回这些域名。否则，如果每次上线不同的环境，都需要手动修改域名，容易少改漏改，且可迁移性比较差。
17、使用fixed固定一个div，当这个div大于视窗高度后，超出的内容无法滑动，看不到了。解决办法：在此div上添加样式：max-height:100%;overflow-y:auto;