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

jiezi

5 年前

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);

2. 在 B,htm 加以下代码

function re(NOre){

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

}

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 转义）：

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 都会扩容，扩容后容量变化了，相同的哈希地址取到的数组下标也就不一样。