记录平时开发的一些问题（二）

1.为了提高用户体验，使得点击单选框圈圈旁边的文字也能把点选框选中

    第一种方式：
    <label for="radiobutton">
          <input type="radio" name="radiobutton" id="radiobutton" value="radiobutton" />测试？
    </label>
    第二种方式：
    <div>
            <input type="radio" id="modeltype5" name="" v-model="" value="" />
            <label for="modeltype5" class="cursor-pointer">测试？</label>
    </div>

2.MySQL的FIND_IN_SET()函数,推荐这篇博客,讲的不错 https://www.cnblogs.com/xiaox...

3.onload="this.height=this.contentWindow.document.body.scrollHeight" 自动获取屏幕高度，以防高度计算不一致

4.Joiner.on(",").join(list); 适用于list转string

5.基于JS实现回到页面顶部的五种写法(从实现到增强)：https://blog.csdn.net/u011666...

6.echart横坐标太长导致坐标显示不完全（两种方法）：https://blog.csdn.net/qq_3789...

7.top.document.location.href="";（iframe刷新父页面）

8.//将时间戳转换为时间
function timestampToTime(timestamp) {

var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
var Y = date.getFullYear() + '-';
 var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
 var D = date.getDate() < 10 ?  '0'+date.getDate()+ ' ' : date.getDate()+ ' ';
 var h = date.getHours() < 10 ? '0'+date.getHours()+ ':' : date.getHours()+ ':';
 var m = date.getMinutes() < 10 ? '0'+date.getMinutes()+ ':' : date.getMinutes()+ ':';
 var s = date.getSeconds()< 10 ? '0'+date.getSeconds() : date.getSeconds();
 return Y+M+D+h+m+s;

}
9.你的系统如何支撑高并发？https://juejin.im/post/5c45aa...

10.这个问题是在做公司产品的公众号时让用户每次刷到手机最低端再继续加载数据，所以要计算什么时候刷到最低端
//文档高度
function getDocumentTop() {

var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
if (document.body) {
    bodyScrollTop = document.body.scrollTop;
}
if (document.documentElement) {
    documentScrollTop = document.documentElement.scrollTop;
}
scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;    return scrollTop;

}
//可视窗口高度
function getWindowHeight() {

var windowHeight = 0;    if (document.compatMode == "CSS1Compat") {
    windowHeight = document.documentElement.clientHeight;
} else {
    windowHeight = document.body.clientHeight;
}
return windowHeight;

}
//滚动条滚动高度
function getScrollHeight() {

var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
if (document.body) {
    bodyScrollHeight = document.body.scrollHeight;
}
if (document.documentElement) {
    documentScrollHeight = document.documentElement.scrollHeight;
}
scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? 
bodyScrollHeight : documentScrollHeight;    
return scrollHeight;

}
window.onscroll = function () {

//监听事件内容
if(getScrollHeight() == getWindowHeight() + getDocumentTop()){在这里写逻辑}

11.手机app可以使用以下这个方法让父页面获取子页面传来的值，也就是从A页面里点击按钮弹出B页面，在B页面点击某条数据，可以将这条数据传回父页面显示。但是在微信公众号并不支持。最终只能使用别的方法。

怎么用window.open()在当前窗口打开新的页面？
用window.open("","_self")或者window.location.replace("newurl")

然后用window.open方式 向父窗口返回值。例如：

页面A.htm 用 window.open方式弹出页面 B.htm 。
在页面B.htm上选择一个值，确定关闭窗口后将选择的这个值返回到父窗口A.htm。
A.htm得到返回的值后，给本页面上的文本框赋值。

1.在A.htm里建一个函数:

function sele(NO){ //NO为返回值

alert(NO);//可以直接赋值给表单
 var re= new Array();//如果需返回多个变量，则采用数组把各个变量分开
 re=NO.split(",");
 form1.feild1.value=re[0];
 form1.feild2.value=re[1];//form1为本面表单名,feild1、2为表单元素

}

调用window.open部分

var height = 300;
var width = 500;
var url = "UploadPicTest.aspx";

var winOption = "height=" + height + ",width=" + width + ",top=50,left=50,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=yes,resizable=yes,fullscreen=0";
window.open(url, window, winOption);

<form name="form1" action="....">
<input name="feild1">
<input name="feild1">
</form>

2.在B,htm 加以下代码

function re(NOre){

 window.opener.sele(NOre);
 window.close();"

}

<form name="form1" action="....">
<input type="button" value="返回值" οnclick="re("把需返回的变量")">
</form>

12.最近做一个web开发，在做表单提交的时候，出现了类似于F5刷新页面效果的问题，极大的坑，每次点提交按钮会自动刷新，弄得没有值传到后台。(因为前台开发没有分离，所以一个js文件最少也有五六千行，出了bug很难找到问题，所以真心建议前台开发要分离开来)

问题：点击提交按钮，出现了F5刷新页面的效果

问题原因：将提交按钮button放到了form表单内

解决办法：将button按钮放到form表单外即可

解释：button按钮有两种类型，submit和button

submit类型的按钮可以在表单之内，因为这是表单提交默认的按钮,做提交事件的时候，直接就是对本表单的提交
<form>
...
<input type = "submit" />
</form>

button类型的按钮如果要做为提交按钮的话，就必须放在表单之外，表单一般设置一个id，做提交的时候，需要用表单的id做提交事件
<form>
...
<form>
<input type = "button" />

13.HTTP Referer是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器该网页是从哪个页面链接过来的，服务器因此可以获得一些信息用于处理。

14.https://blog.csdn.net/ljheee/...：Redis持久化----RDB和AOF 的区别

15.https://www.cnblogs.com/xiaol...：Windows10上使用Linux子系统(WSL)

16.XSS(非法字符),CSRF(引诱用户进入某个非法网址),SYN 攻击是一种典型的 DoS/DDoS 攻击:在三次握手过程中，服务器发送 SYN-ACK 之后，收到客户端的 ACK 之前的 TCP 连接称为半连接(half-open connect)。此时服务器处于 SYN_RCVD 状态。当收到 ACK 后，服务器才能转入 ESTABLISHED 状态.

SYN 攻击指的是，攻击客户端在短时间内伪造大量不存在的IP地址，向服务器不断地发送SYN包，服务器回复确认包，并等待客户的确认。由于源地址是不存在的，服务器需要不断的重发直至超时，这些伪造的SYN包将长时间占用未连接队列，正常的SYN请求被丢弃，导致目标系统运行缓慢，严重者会引起网络堵塞甚至系统瘫痪。

17.如果要匹配的ID或选择器不符合 CSS 语法（比如不恰当地使用了冒号或者空格），你必须用反斜杠将这些字符转义。由于 JavaScript 中，反斜杠是转义字符，所以当你输入一个文本串时，你必须将它转义两次（一次是为 JavaScript 字符串转义，另一次是为 querySelector 转义）：

<div id="foobar"></div>
<div id="foo:bar"></div>

<script>
console.log('#foobar') // "#fooar"
document.querySelector('#foobar') // 不匹配任何元素

console.log('#foo\bar') // "#foobar"
console.log('#foo\\bar') // "#foo\bar"
document.querySelector('#foo\\bar') // 匹配第一个div元素

document.querySelector('#foo:bar') // 不匹配任何元素
document.querySelector('#foo\:bar') // 匹配第二个div
</script>

18.https://blog.csdn.net/qq_3314...：jdk8对list的各种处理实例详解，包括去重，排序，过滤，分组，统计

19.list去重可以使用set(不可重复的)，treeSet(不可重复且排序)

20.最近在使用oracle数据库开发，碰到一些坑：

oracle使用hql的find方法分组查询会报错，因为hql会全部查一遍字段，oracle只允许出现在groupby后面的字段查询，所以使用searchPaginatedSQL(hql,params)

oracle使用count并且条件查询：count(decode(u.end_state, '2', 1, null))
字段名等于某个值就加一否则null

to_date('1970-1-1','yyyy-mm-dd')，oracle需要使用todate进行时间比对

oracle实体类需要创建索引@GeneratedValue(strategy=GenerationType.SEQUENCE,generator="mseq")//主键生成策略

@SequenceGenerator(name="mseq",sequenceName="SUPERVISION_MAIN_S",allocationSize=1)

在navicat中--创建序列
create sequence book_seq start with 1 INCREMENT by 1;

--创建触发器
create or replace TRIGGER book_trigger
before INSERT on BOOK
for each row
begin
SELECT book_seq.nextval into :new.BOOKID from dual;
end;

21.HashMap和Hashtable区别？

到这里我们分析了HashMap和Hashtable的原理，现在比较以下他们的区别。

不同点
继承的类不一样：HashMap继承的AbstractMap抽象类，Hashtable继承的Dictionay抽象类
应对多线程处理方式不一样：HashMap是非线程安全的，Hashtable是线程安全的，所以Hashtable效率比较低
定位算法不一样：HashMap通过key的hashCode()进行hash()得到哈希地址，数组下标=哈希地址 & (容量 - 1)，采用的是与运算，所以容量需要是2的幂次方结果才和取模运算结果一样。而Hashtable则是：数组下标=(key的hashCode() & 0x7FFFFFFF ) % 容量，采用的取模运算，所以容量没要求
键值对规则不一样：HashMap允许键值为null，而Hashtable不允许键值为null
哈希表扩容算法不一样：HashMap的容量扩容按照原来的容量2，而Hashtable的容量扩容按照原来的容量2+1
容量(capacity)默认值不一样：HashMap的容量默认值为16，而Hashtable的默认值是11
put方法实现不一样：HashMap是将节点插入到链表的尾部，而Hashtable是将节点插入到链表的头部
底层结构不一样：HashMap采用了数组+链表+红黑树，而Hashtable采用数组+链表

为什么HashMap允许null键值呢，而Hashtable不允许null键值呢？这里还得先介绍一下什么是null，我们知道Java语言中有两种类型，一种是基本类型还有一种是引用类型，其实还有一种特殊的类型就是null类型，它不代表一个对象(Object)也不是一个对象(Object)，然后在HashMap和Hashtable对键的操作中使用到了Object类中的equals方法，所以如果在Hashtable中置键值为null的话就可想而知会报错了，但是为什么HashMap可以呢？因为HashMap采用了特殊的方式，将null转为了对象(Object)，具体怎么转的，这里就不深究了。

相同点
实现相同的接口：HashMap和Hashtable均实现了Map接口
负载因子(loadFactor)默认值一样：HashMap和Hashtable的负载因子默认都是0.75
采用相同的方法处理哈希冲突：都是采用链地址法即拉链法处理哈希冲突
相同哈希地址可能分配到不同的链表，同一个链表内节点的哈希地址不一定相同：因为HashMap和Hashtable都会扩容，扩容后容量变化了，相同的哈希地址取到的数组下标也就不一样。