一些开发时的用法经验
目录
经验：
不懂：
经验：
哪些可以，哪些不行，磨刀不误砍柴工。
开发者手册MDN : https://developer.mozilla.org/zh-CN/
1. 查看对象的属性：Object.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组。
http://www.tao88.org/639/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
https://blog.csdn.net/u013919103/article/details/52303329
2.箭头函数：https://blog.csdn.net/qq_35313994/article/details/78408288
https://www.cnblogs.com/snandy/p/4403111.html
https://www.jianshu.com/p/73cbeb6782a0
如果没定义 fn=x=>x；就相当于匿名函数。箭头函数自带return功能。
3. 零点更新时间
setInterval(function(){
if((new Date().getHours()==24)||(new Date().getHours()==0)){
gainTimeParam();
}
},1000*60*10);
4.增加
.push()是向数组末尾添加新元素。
.append()方法在被选元素的结尾（仍然在内部）插入指定内容。
5.空格大小约6px? 安font-size判断。
6.hr 设置颜色 要将高度设置为1px，用背景颜色background-color渲染直线颜色，直线自带边框，将border设置为none；
height:1px;
border:none;
background-color:#1b6d85;7.切换按钮 当ul下的2个li长度不同，在父元素设置font-size=0，在子元素设置字体大小。
8.绝对定位不占原空间。absolute
9.css弹性盒子定位很好用，基于横轴纵轴，注意不能用的地方。
10.清除浮动，一是给父元素加高度，二是在父元素内容最下加上
例如在li都浮动，ul塌陷，在最后一个li后加上这个div。很多种方法，不行就换。10.1 多块上还有父元素，父元素右浮动，里面的各块左浮动，用定位就不对了。这样页面缩小就有重叠的问题。
如果高度超出，是没用盒子模式，用了就好了。
11.关于布局：最好用flex ；次之，尽量避免下浮动，用padding或者margin；
12.height：100%和inherit的异同。https://www.zhangxinxu.com/wordpress/2015/02/different-height-100-height-inherit/
13.overflow不生效的问题：https://blog.csdn.net/qq_15253407/article/details/50682808
14.取父标签： $("#xxx").parent(".xxxx")
15.取子标签：$("ul li:eq(5)") $("#xxx .xxx:eq(0)")
15.1 取前多少个子标签：$(".xxx > li:lt(4)") 取前4个 1,2,3,4 从1开始计数
常用： $(this).addClass("active").parent().siblings().children().removeClass("active");
16.标签写入内容：$("#xxx").html(变量 或 字符串等);
17.定时器 只执行一次
18.子元素选择器 > 只选当前父元素的第一级下级子元素。
19.日期时间
获取当前的日期时间 格式“yyyy-MM-dd HH:MM:SS”
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
20. ajax 同步 异步
async:false：表示同步加载数据
async:true:表示异步加载数据
同步的意思：
是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，
当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。
异步：
则这个AJAX代码运行中的时候其他代码一样可以运行。
21.ajax 里不要定义变量，变量定义在外面。变量要给初始值，不然严格模式会报错。
22.设置属性：$("#xxx").attr('style','display: inline-block');
$("#xxx")[0].style.display = "inline-block";
23.数组对比，不能直接比，要数组中每个值都对比下，可以写个循环。
24.遍历对象：
方案1： var obj = {'0':'a','1':'b','2':'c'};
Object.keys(obj).forEach(function(key){
console.log(key,obj[key]);
});
方案2：for (let key in obj) {
console.log(key,obj[key])
}
25.截取函数：slice()、substring()、substr() https://www.cnblogs.com/lmsblogs/p/5876384.html
26. 隐藏占位
display:none;不占位隐藏
visibility:hidden;占位隐藏
27.淡入显示隐藏
fadeIn() 方法使用淡入效果来显示被选元素，假如该元素是隐藏的。
fadeOut() 方法使用淡出效果来隐藏被选元素，假如该元素是显示的。（w3c写的有小bug）
28.长度过长，用。。。省略超出的部分 https://blog.csdn.net/u010688587/article/details/53672793
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space:nowrap;
29.字体加粗 font-weight:blod;
31.定义数值变量时，初始不要为空，可以为0。为空可能会被当做字符处理。
32.格式化数值 numObj.toFixed(digits)
var a=3.1415926； a = a.toFixed(2);//保留2位但结果为一个String类型
a = parseFloat(a);//将结果转换会float
进一步 a = parseFloat(a.toFixed(2));
33.大于号> : > 小于号<: <
34.更新项目中的阿里巴巴图标库，选择font class 下载到本地，将项目中对应用到的文件替换掉。
35.css3中的计算 width:calc(100%-50px); （注：减号两边要加空格，其他浏览器兼容性不好）
36.stopPropagation() 方法
37.下划线如果离字体太近，可以用border-buttom
38.用rem 转换的js文件每个页面都要引用。
39.需要鼠标点击的地方，要加小手。cursor:pointer; 点击要加点击效果：.class:active{ opacity:0.7; }
40.查是否包含某个字符串 CCC.indexOf("Text") > 0
41.当需要每个子元素改变某个class时，要一个一个改，不能一口吃个胖子。
42.一些跳出函数、停止功能的语句要放到最后，不然它后面的语句就不执行了。像倒计时或return
43.背景图片 (注：如果用rem做参数，可以这么写background-size:4.74rem 5.24rem;如果不写size，图片大小不会变的。)
background-size 一定要写2个100%，不然，它只适应一个维度，不会和画布一样。
.placeBackground{
background:url(../img/outInfo.png) no-repeat center !important;
background-size: 100% !important;
}
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
在界面上取图片，需要后台给根目录，在根目录下找图片 
在css文件取图片，用相对位置。background: url("../img/adj-banner.png");
44.背景透明，文字不透明
background-color: rgba(255,255,255,0)；
color:#000;
45.给标签自定义一个属性，将属性值取出
aaa
$(".a").attr("dateIndex");46.json数据格式，多值传输时，定义的是数组，数组中包含对象。
47.通常变量前加下划线表示“私有变量”，函数名前加下划线表示“私有函数”。加引号是因为“私有”这个词不是js的官方说法，js也根本没有“私有变量”这种东西，只是程序员之间模仿其他有私有变量的语言的一种约定俗成的说法。也就是“你懂的”。
48.循环找值，找到值后记得return false 跳出循环。
49.input标签获取焦点和失去焦点时，都要设置默认提示值。
$("ul li").focus(function () {
$("ul li").attr("placeholder","0.00");
$(this).attr("placeholder","");
});
$("ul li").blur(function () {
$(".oilCategory .priceVal").attr("placeholder","0.00");
});50.移动APP设置点击滚动到对应距离
var designWidth = 640, rem2px = 100;
var windowWidth=(window.innerWidth>designWidth)?designWidth:window.innerWidth;
var rem_fontSize =( windowWidth / designWidth) * rem2px;
var priceDetail=$(".priceDetail").offset().top;//这个是距离上端的偏移量（与文档的上端距离）;
$(".oilCategory .priceVal").on("click",function () {
$("html,body").animate({"scrollTop":priceDetail-0.8*rem_fontSize},300);
});
51.apply()与call()的区别 https://www.cnblogs.com/lengyuehuahun/p/5643625.html
apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。
call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。
52.URL加上随机数,防止缓存，最简单的方式就是在url?后面加上一个随机数，欺骗浏览器，达到防止缓存的效果
https://demo.com?v=' + parseInt(Math.random()*1000000000)
这样就可以了.也就相当于在页面上加上了一个版本号的效果.
53.点击用定义好的函数
function a(){ $("p").slideToggle(); }
jq: $("button").click(a);
js: var btn=document.getElementById("btn");
btn.οnclick=a;
54.点击ul 下的li (类似通用) 2种方式
$(".class li").on("click",function() {
$(".class li:eq("+$(this).index()+")").siblings().removeClass("active").end().addClass("active");
$(this).addClass("active").siblings("li").removeClass("active");
});
55.遇到这个报错，可能是程序问题。
ajax里面可能有造成死循环的操作 或者 计算量很大的操作
还是ajax时不时写成同步
ajax的参数传的有问题，未定义。
如果用了框架的ajax,试试用jquery的ajax测一下。
清程序缓存，重启电脑等等。
56.针对浏览器最小字体限制，可以通过设置transform，让字体更小
transform: scale(0.9);
57.head标签中title前可加图片icon，用link引入
58.网页常用命名 https://www.cnblogs.com/Alenliu/p/7742619.html
59.前台提交代码要前台压缩npm build或（gzip）， 后台提交代码要后台压缩。
60.字体设置： 一般用系统字体 不用自定义的，有特殊字体就切图。因为字体库过大。苹方字体只有苹果有，window没有。
微软雅黑 mac上没有。用系统默认字体，不特殊约束。所有需要约束字体的需求 都砍掉。
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
@font-face {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
font-weight: normal;
font-style: normal;
}
方正兰亭黑 字体好看
61.文件大就放到专门cdn(文件服务器)上，会做 缓存和 压缩。
62.for in 循环对象会把对象的属性值循环出来，最好不要这么做。https://blog.csdn.net/liuxuan12417/article/details/53327532
63.手机点击input，不弹出输入法的方法 https://blog.csdn.net/qq_36069339/article/details/78601356
64.用图片 png最大，尽量用icon ，如果需要很多的话。
65.正则表达式 替换 url 中的大于号 ，举例。
var a = "本信息发于
alert(a.replace(new RegExp("<","g"),"<").replace(new RegExp(">","g"),">"));
66. 高德地图报 Pixel(NaN, NaN) ，因为点标记时传的空坐标，标记点前做个判断，是空就不标记。
67.高德地图 动态改点坐标的位置时 更改完位置，有时setPosition不起作用，再setMap一次地图就好。
var marker = new AMap.Marker({
position: [$("#lng").val(), $("#lat").val()],
content:'
offset: new AMap.Pixel(-25,-45)
});
marker.setPosition([c.lng,c.lat]);
marker.setMap(map);
68.canvas 清空画布 https://blog.csdn.net/idomyway/article/details/78513075
69.在后台写前台代码，不要用ES6。
70.后台传过来的map格式的数据，前端处理hashmap。jQuery中用$.each()处理。
if(data[0]){
$.each(data[0].subMenu,function(i,value){
console.log(i);
console.log(value);
})
}
71.滑入滑出 https://blog.csdn.net/Amy_cloud/article/details/81634321
72.多个ajax加载完，loading状态消失。
设定 var ajaxSUM=3，每个ajaxcomplete里判断是否为0，不是就ajaxSUM--，当为0时，loading消失，ajaxSUM=3。
73.promise无论是then catch，都执行finally
if (!Promise.prototype.finally) {
Promise.prototype.finally = function (callback) {
let P = this.constructor;
return this.then(
value => P.resolve(callback()).then(() => value),
reason => P.resolve(callback()).then(() => {
throw reason
})
);
};
}
74.有兼容IE低版本的js文件，2个一起用。
75.雪碧图 小图标太多，把所有小图标放在一张图上，通过backgroud-position定位取到，可以减少html请求数量。 前端优化
76.移动端弹出层滚动时禁止body滚动 https://blog.csdn.net/qq_35741728/article/details/52958140
77.点击li里的li 阻止冒泡 event.stopPropagation();
78.获取url中传入的参数 
79.js判断网页的宽度高度 https://blog.csdn.net/halfsking/article/details/84820929
80.早期 windows下IE中可能出现的文档样式短暂失效的解决办法
在
区加上一个空的script元素可以用来避免windows下IE中可能出现的文档样式短暂失效问题。
81.input 提示点击隐藏
82.当写退出登陆时，如果是后台实现的session，前台清除不了session。前台如果要清除cookic，必须是非http-only的，http-only的需要后台提供接口去清除。
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie
前端清除cookie：
83.记住密码功能： md5加密 localStroage
84.写CSS文件在最上面写 @charset "utf-8";
85.写移动端遮罩层 要防止遮罩层下的东西上下滑动。
86.打开相对地址，获得当前ip和端口，如下，从0开始截取，到地址中#之前为止。
window.location.href.substring(0,window.location.href.indexOf('#'))
87.调试移动端 需要打印，可以试试vconsole
https://blog.csdn.net/aaa333qwe/article/details/78261442
https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
https://github.com/Tencent/vConsole/blob/dev/doc/plugin_getting_started_CN.md
88.如果在查看代码时，发现 函数的用法 与 引用的框架的函数 不一样，要find看看是不是自定义的。
想知道用的函数具体是怎么定义的，打印它，比如数组定义了一个first函数，console.log(arr.first)，arr是一个数组
89.初始定义变量
数据类型 ， 内存结构 区别
定义变量但是没有赋值给这个变量 他的类型就是undefined；
例如 var A； //undefined 只在栈里面有空间占用
定义变量是空 他的类型是个空对象object；
例如 var B = null ； //空object 他在堆栈都有空间；
由于操作符 typeof 在检测变量时，声明但未初始化 与 未经声明的变量都会返回undefined，会影响我们的正常使用。
所以我们在声明空变量时，需要对变量进行显式声明，即为其赋上空值 null 。
https://www.jianshu.com/p/8e75d001f9ad
90.定义函数前加！就是立即执行的意思。https://www.cnblogs.com/mq0036/p/4605255.html
91.去掉input 自动保存
autocomplete="off"
1.
2. autocomplete="new-password"
92.苹果APP兼容 打开界面时，不要用window.open（地址） ，用 window.location.href=地址
https://www.cnblogs.com/both-eyes/p/10078432.html
93.绝对路径：
${pageContext.request.contextPath}是JSP取得绝对路径的方法，等价于<%=request.getContextPath()%> 。
java查询页面数据的绝对路径，所有都可以在这个路径下获取。如果相对路径不准，就用绝对路径。
94.阻止页面所有滚动事件
document.addEventListener("touchmove",function(e){
if (e.cancelable) {
if (!e.defaultPrevented) {
e.preventDefault();
}
}
},{ passive: false });95.获取1到100之间的随机数
Math.floor(Math.random() * 100) + 196.替换字符串
var a = " 今天吃了苹果，明天还要吃苹果，后天也吃苹果，大后天也吃苹果。"
while (a.indexOf("苹果")!= -1){
a = a.replace("苹果","香蕉");
}
97.手机模拟控制台
98.body设置高度为100%，但界面高度还是0，原因需要先设置html的高度为100%
99.判断是否是非数字时，用isNaN()函数，如果是 isNaN("2005") 这样能转化成数字的，返回结果也是false 。
100.在开发移动端时，如果有一个input列表，每个input都绑定了点击事件，在input间有列间距。
在点击时，猜测，会根据手指点击的地方形成一个圈型区域，区域离哪个input最近，就触发哪个input上的点击事件。
假如1号和3号的input有点击事件，2号没有点击事件，因为2号在中间。
在点击2号时，如果手指往上一些，可能就会触发1号的点击事件。
101.IE8中开发 假如input 的背景默认是白色 input[selected]的属性是红色，当用js移除selected属性时，
页面并没有将红色去掉，也就是css没有监听渲染。为了解决这个问题，
在移除selected属性时，给input加上白色背景的class，再移除白色背景的class，
这样，就把这个问题解决了。
102. 在ajax中，alert error 不要直接弹出错误，因为可能弹出的是Object[object] ，要弹出对象的属性值，字符串。
103. 日期月日处理，保留2位数
var d = new Date();
var formatedMonth = ("0" + (d.getMonth() + 1)).slice(-2);或
var month = this.getMonth() + 1;
return month < 10 ? '0' + month : '' + month;104. css 前5个子项
li:nth-child(-n + 5)css 从第7个子项开始后
li:nth-child(n + 7)（注：n都要写前面）
105. 千分符格式化数字
function thousandMark(num){
var tm;
var _num = num.toString();
var re=/(?=(?!(\b))(\d{3})+$)/g;
if((num||num == 0) && !isNaN(num)){
var sign = _num.indexOf("-")== 0 ? '-' : ''; //取它的负号
var cents = _num.indexOf(".")> 0 ? _num.substr(_num.indexOf(".")) : ''; //取它的小数部分
_num = _num.indexOf(".")>0 ? _num.substring(0,(_num.indexOf("."))) : _num ; //获取数字的整数数部分
//负号，整数，小数的合并
tm = sign + _num.replace(re,",") + cents;
return tm;
}else{
return '';
}
}106.千分符格式化数据，四舍五入到整数位
function thousandMark(num){
var tm;
var _num = parseFloat(num);
var re=/(?=(?!(\b))(\d{3})+$)/g;
if((num||num == 0) && !isNaN(num)){
num = isNaN(_num)?'':_num.toFixed(0).toString();
tm = num.replace(re,",");
return tm;
}else{
return '';
}
}107.js 全屏切换 ie11以上 如果要用ie9以上，需要改变浏览器安全配置。
function fullScreen(){
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if(typeof rfs != "undefined" && rfs) {
rfs.call(el);
};
return;
}
function exitScreen(){
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
if(typeof cfs != "undefined" && cfs) {
cfs.call(el);
}
108.下载阿里巴巴图标库的某个图标库的所有图标
按F12打开控制台，在console中输入，这样将所有图标都加到购物车中
var iconList = document.querySelectorAll('.icon-gouwuche1'); for (var i = 0; i < iconList.length; i++) { iconList[i].click(); }
新建个图标项目，把购物车中的图标都放到项目里，再下载。
109 在判断写默认值时，布尔值时，不要写默认，如果真值是false，会去取默认值。
例 b={val:false} ; a = b.val || true ; 这样a会等于true
110.在当前页打开新网页
window.open是在新页打开，window.localhost.href 在苹果上有兼容问题，
最好的办法是页面中写一个隐藏的a标签，改变a的href ，并点击a
111. first-child 和 first-of-type 的使用
例 ：想让第一个h3有右margin 使用 .a h3:first-child{ margin-right:50px; } 没起作用，想了很久，h3不是div的第一个元素
想要选到第一个h3，就要选第一个类型的h3 使用 .a h3:first-of-type{ margin-right:50px; }
112.编码和解码
encodeURI("明");
decodeURI(encodeURI("明"));
113.苹果浏览器兼容，background-image加载不出来
在页面后添加的元素，在样式表中后加的元素有背景图片，可能显示不出，
这时可以先在界面上默认有这个元素，可以先隐藏后删除，
或内容是空之类的，先让这个元素存在，这样背景图片就有了。
114. 苹果手机时间函数 new Date() 参数必须是xxxx/xx/xx 是用/链接的，只写年月也不行，要年月日写全。
115.随input的值实时变化
$("input").bind('input propertychange', function() {}
开发异常：
1.在li个选择框，默认选中时。默认点中，赋予属性，可能不生效。
不懂：
1.$(window).resize( );
2.异步处理数据 Generator 函数的语法 → Generator 函数的异步应用 → async 函数 → Promise 对象
3.面向对象编程 函数 简化代码
4.闭包
5. 这样写是直接就执行了吗
6.怎样简化代码
7.ES6中一般用单引号还是双引号
8.网络协议 TCP/IP，UDP，HTTP，POP3，SMTP这几种协议
9.yield ? https://blog.csdn.net/qq_16234613/article/details/52495711
10. next ? https://blog.csdn.net/ixygj197875/article/details/79199181
11.Promises ? https://www.jianshu.com/p/b497eab58ed7
12.Generator 函数 ? https://www.jianshu.com/p/e0778b004596
13.Sass less学习
14.canvas不支持跨域图片
15.gzip 压缩
16.mock 随机假数据
17.jsp 页面内切换组件 例：加油站
18.小程序
19.react
20.java 的Map()方法返回的数据格式