共计 3437 个字符,预计需要花费 9 分钟才能阅读完成。
前言:
这里记录我工作、学习中值得注意的小知识点,希望对你有所帮助。
1、moment.js 将某年某周转为具体日期
举例:将 2019 年第二周转为具体日期
<script src="moment.js"></script>
<script>
const year=2019
const week=2
const start = moment()
// 年
.year(year)
// 周
.week(week)
// 周一
.isoWeekday(1)
// 日期格式
.format('M.D');
const end = moment()
.year(year)
.week(week)
.isoWeekday(7)
.format('M.D');
//2019 第 2 周
//(1.7-1.13)
console.log(`${year}第 ${week}周 \n(${start}-${end})`)
</script>
(1)关于 ISO 8601
时间标准对周的定义,请参考:
ISO 8601 中周数的处理及 Joda-Time 的使用
(2)moment.js
将某年某周转化为具体日期的方法,请参考:http://momentjs.cn/docs/#/get-set/iso-weekday/
2、IE11 导出 excel 表格和图片(兼容性)
导出 excel:
const fileData = [''+ ('<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-mic' + 'rosoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><meta cha'+'rset="UTF-8"><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:Exce'+'lWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>'+'</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></'+'xml><![endif]--></head><body>') + a.outerHTML +'</body></html>'];
const blobObject = new Blob(fileData);
window.navigator.msSaveOrOpenBlob(blobObject, `${tableTitle}.xls`);
说明:a.outerHTML
是 <table id='a'>
的outerHTML
导出图片:
let dataURItoBlob = function(dataURI) {let binary = atob(dataURI.split(',')[1]);
let array = [];
for(let i = 0; i < binary.length; i++) {array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)], {type: 'image/png'});
}
let blob = dataURItoBlob(picBase64Info);
window.navigator.msSaveOrOpenBlob(blob, '图片.png');
说明:picBase64Info
即图片的 base64
格式。
3、IE11 在请求头中设置 Cache-Control 来清除缓存
headers: {
Authorization: requestToken,
//ie11 缓存问题
'Cache-Control': 'no-cache, must-revalidate',
},
如果没效果的话,只能手动设置 IE11,不使用数据缓存了。
4、for 循环的语法(a; b; c)
// a 在单次循环开始前执行
// b 是单次循环的条件(这里即 cur 存在)// c 是单次循环结束后执行
for (; cur; cur = cur.parentNode) {//xxx}
说明:a
在单次循环 开始前 执行;b
是单次循环的 条件 (这里即 cur 存在);c
是单次循环 结束后 执行。
5、类数组与数组的区别
类数组:
const arrayLike = {'1':1, '2':2, '3':3, 'a':'a', 'b':'b', length: 7}
console.log(arrayLike.length) //7
// 直接使用数组的方法
//{3: 3, 4: 2, 5: 1, a: "a", b: "b", length: 7}
console.log(Array.prototype.reverse.call(arrayLike));
//undefined
console.log(Array.prototype.pop.call(arrayLike,4));
//+++3+2+1
console.log(Array.prototype.join.call(arrayLike,'+'));
区别:
(1)类数组对象具有数组的一些属性(如 length
)
(2)类数组对象,缺少从数组的原型对象上继承下来的内置方法(例如:pop()
、reverse()
等)
(3)类数组对象 不关心 除了 数字索引 和length属性以外的东西
6、function(){} 默认返回 undefined
就是你不写return xxx
,它默认return undefined
let a=function () {//return undefiend}
a() //undefined
7、stopImmediatePropagation()
有两个作用:
(1)阻止剩下的事件处理程序被执行
$("div").click(function(event){alert("点击了 divOne");
event.stopImmediatePropagation();});
$("div").click(function(event){alert("点击了 divTwo");
});
只显示 点击了 divOne
(2)阻止冒泡
$("body").click(function(event){alert("body 被执行");
});
$("div").click(function(event){alert("事件句柄 1 被执行");
event.stopImmediatePropagation();});
只显示 点击了 divOne
stopImmediatePropagation()
与 stopPropagation()
的区别:
(1)stopImmediatePropagation()
方法既可以 阻止剩下的事件处理程序被执行 ,又可以 阻止冒泡
(2)stopPropagation()
方法只能 阻止冒泡
8、MVVM 框架中,只要操作 VM
的数据,它就自然而然地同步到 view,是利用什么属性同步的?Object.defineProperty
,Object.defineProperty
的作用是将对象的某一个属性,转换一个 setter
与getter
,我们只要劫持这两个方法,通过 Pub/Sub
模式就能偷偷操作视图。
9、tabindex 属性,让 div 元素成为 focusable(可获取焦点的)元素
<div id="A" style="background-color: deeppink" tabindex="0">
这是 A
<div id="C" style="background-color: aqua" tabindex="1">
这是 C
</div>
</div>
$("#A").on("focus" ,function (event) {console.log(event,"A 被 focus 了")
})
$("#C").on("focus",function (event) {console.log(event,"C 被 focus 了")
})
注意:focus 不会冒泡!
点击#C
(聚焦#C
):
点击#A
(聚焦#A
):
10、js 禁止 excel 格式转化(重要!)
为每个 <td>
添加\xa0
<td key={id} >{value+ '\xa0'}</td>
\xa0
是不间断空白符
注意:不要在 number
类型的列下这么做,不然用户不能在 excel
里进行数值计算
(完)