HTML5

https://developer.mozilla.org/zh-CN/docs/Web/HTML
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference
https://developer.mozilla.org/zh-CN/docs/Web/HTTP

input

1
2
3
4
5
<!--- 不被html5后规范采纳的,仅用于解决Iphone 输入框,弹出数字键盘,却又可以在代码中加入逗号用作格式化 --->
<input placeholder="test" id="test" inputmode="decimal" />

<!--- html5 新特性,安卓手机 弹出键盘是可以有小数点的 --->
<input placeholder="test2" id="test2" pattern="[0-9]*" />

form表单内 button type=submit

1
2
3
4
<form>
<input type="text" name="username">
<input type="submit" onclick="login">
</form>

预期:以上代码结构,我想在 点击 submit button 时,在click login 方法内以ajax方式请求后端
不能以改结构方式处理,因为form input submit 都与style相关联
问题:实际结果始终不如预期
原因: form表单虽然没有 action 属性,点击 submit同样会触发form 提交方式,action为当前地址栏URL
解决:点击submit button 时,使用 e.preventDefault(); 阻止默认的from表单提交方式


JavaScript 常用脚本记录

去掉数字末尾的0

1
2
// 去掉数字末尾的0
"0.000100".match(/[-]?\d*(?:\d|[.]\d*[^0])/);

JavaScript设计模式

资料:gitbook书籍资源1

素材库

图标素材库:阿里图标库

文件下载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://192.168.7.128:8080/download');
xhr.onprogress = function(e) {
if (e.lengthComputable) {
console.log(e.loaded + ' / ' + e.total);
}
};
xhr.onloadstart = function(e) {
console.log('start');
};
xhr.onloadend = function(e) {
console.log('end');
};
xhr.send({
form: JSON.stringify({
id: 1
})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/**
* PC 文件下载
* @param {Object} params
* @param {Blob} params.blob
* @param {String} params.fileName
*/
export function fileDownload(params) {
const uA = window.navigator.userAgent
const isIE =
/msie\s|trident\/|edge\//i.test(uA) &&
!!(
'uniqueID' in document ||
'documentMode' in document ||
'ActiveXObject' in window ||
'MSInputMethodContext' in window
)
const isEdge = uA.indexOf('Edge') > -1

if (isIE || isEdge) {
navigator.msSaveBlob(params.blob, params.fileName)
} else {
const url = window.URL.createObjectURL(params.blob)
const link = document.createElement('a')
link.setAttribute('style', 'display:none')
link.setAttribute('id', 'download')
link.setAttribute('href', url)
link.setAttribute('download', params.fileName)
document.body.appendChild(link)
link.click()
link.addEventListener('click', function() {
URL.revokeObjectURL(url)
document.getElementById('download').remove()
})
}
}

跨域问题

如跨域在Chrome正常,火狐浏览器提示
firefox with reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:4200, *’).
则应检查 火狐浏览器是否有安装 cors 相关插件
参考链接:firefox with reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘http://localhost:4200, *’).

IE 站点图标无法切换问题

参考链接:https://stackoverflow.com/questions/29404559/how-to-force-ie11-to-request-a-new-favicon
html

1
<link rel="icon" type="image/x-icon" href="resources/favicon.ico">

javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Chrome allows you to simply tweak the HREF of the LINK tag.
// Firefox appears to require that you remove it and readd it.
function setFavicon(url)
{
removeFavicon();
var link=document.createElement('link');
link.type='image/x-icon';
link.rel='icon';
link.href=url;
document.getElementsByTagName('head')[0].appendChild(link);
if (window.console) console.log("Set FavIcon URL to " + getFavicon().href);
}

function removeFavicon()
{
var links=document.getElementsByTagName('link');
var head=document.getElementsByTagName('head')[0];
for(var i=0; i<links.length; i++)
{
if(links[i].getAttribute('rel')==='icon'){
head.removeChild(links[i])
}
}
}

JavaScript编码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
let RESERVED_CHAR_SET =
'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-.~_'

function get_normalized_char(b) {
let result = new Map()
for (let i = 0; i < 256; i++) {
// 转ASCII码,跟java, Char temp = (char)i ; 一样
let c = String.fromCharCode(i)
if (!b && c === '/') {
continue
}
if (RESERVED_CHAR_SET.indexOf(c) !== -1) {
result.set(c, c)
} else {
// 转16进制
let temp = i.toString(16).toUpperCase()
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
result.set(c, '%' + temp.padStart(2, '0'))
}
}
return result
}

window.encodString = function(path, b) {
let length = path.length
let result = ''
let encode_f = get_normalized_char(b)

for (let i = 0; i < length; i++) {
if (path.charAt(i) === '/' && !b) {
result += '/'
}
let c = encode_f.get(path.charAt(i))
if (!c) {
continue
}
result += c
}
return result
}

获取指定时区时间(中国)

方案1,兼容IE,chrome

1
2
3
4
5
var timezone = 8; //目标时区时间,东八区
var offset_GMT = new Date().getTimezoneOffset(); // 本地时间和格林威治的时间差,单位为分钟
var nowDate = new Date().getTime(); // 本地时间距 1970 年 1 月 1 日午夜(GMT 时间)之间的毫秒数
var targetDate = new Date(nowDate + offset_GMT * 60 * 1000 + timezone * 60 * 60 * 1000);
console.log("东8区现在是:" + targetDate);

参考链接:点这里

方案2,不兼容IE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 获取北京时间,毫秒数
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/parse
Date.parse(new Date().toLocaleString("en", {timeZone: "Asia/Shanghai", timeZoneName: 'short'}))

// e.g.
var aestTime = new Date().toLocaleString("en-US", {timeZone: "Australia/Brisbane"});
aestTime = new Date(aestTime);
console.log('AEST time: '+aestTime.toLocaleString())

var asiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Shanghai"});
asiaTime = new Date(asiaTime);
console.log('Asia time: '+asiaTime.toLocaleString())

var usaTime = new Date().toLocaleString("en-US", {timeZone: "America/New_York"});
usaTime = new Date(usaTime);
console.log('USA time: '+usaTime.toLocaleString())

var indiaTime = new Date().toLocaleString("en-US", {timeZone: "Asia/Kolkata"});
indiaTime = new Date(indiaTime);
console.log('India time: '+indiaTime.toLocaleString())

参考资料:click me

http response

参考资料

1
2
3
4
# 设置缓存
expires 1d;
add_header Pragma private;
add_header Cache-Control "private,no-cache";

谷歌Chrome 浏览器 禁用安全机制

click me
–disable-web-security –user-data-dir

谷歌浏览器缓存变化情况

20191105101451.png
第一次打开页面时,从服务器下载

20191105101611.png
退出浏览器后(关闭所有标签页),再次打开时,看到 Size列说明是:读取disk cache

20191105101623.png
不关闭浏览器,刷新时,说明 memory cache(因为js文件已经加载进内存

*prefetch cache,是html5 缓存标签,表示该文件在浏览器空闲时,预先加载该文件


浏览器使用缓存时,与服务端文件比对的两个关键属性

last Modify
文件一共有两个时间:创建时间 与 最后修改时间(Last modify)
复制文件时,只会改变创建时间,最后修改时间不会改变

E-TAG
相当于文件的指纹,如文件未发生变更,E-TAG 不会发生改变


跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username = request.getParameter("name");
String password = request.getParameter("password");
System.out.println("username: "+ username +" \n password: "+password);

Map<String, Object> result = new HashMap<String, Object>();
UserVO user = new UserVO(username,password);
result.put("user", user);
result.put("success", true);
response.setContentType("text/html;charset=gb2312");
response.setHeader("Access-Control-Expose-Headers", "Content-Type,Cversion,test,test1,Test2");

response.setHeader("Access-Control-Request-Headers", "Content-Type,Cversion,test,test1,Test2");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,OPTIONS,GET");
response.setHeader("Access-Control-Max-Age", "60");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Cversion", "cccc");
response.setHeader("test", "test");
response.setHeader("test1", "test1");
response.setHeader("Test2", "test2");

PrintWriter out = response.getWriter();
JSONObject LoginFieldsList = JSONObject.fromObject(result);
System.out.println(LoginFieldsList.toString());
out.println(LoginFieldsList);
out.flush();
out.close();
}

服务端需要响应 header参考


遇到的问题列表

new Date().getTime() 时间戳

参考资料:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Date/getTime
*这个 getTime 获取到的时间戳 ,都是 格林威治时间数值,所以这个数值使用的 格林威治时区的时间,当服务端与客户端交互时,做时间差比对时,不需要转换为服务器端时区时间 来执行 getTime


setTimeout() setInterval() 定时器问题 & 注意点

setTimeout-desc.png
setInterval-desc.png