js一些使用的记录
2019-08-13 本文已影响0人
小小了墨
moment 计算时间差
//天数差值
moment(this.date).diff(moment(this.interestStartDate),'days');
依赖jQuery实现的多语言包 jquery.localize
html
<head>
<title data-localize="head.title">
3
</title>
</head>
<body>
<div data-localize="greeting">1</div>
<p data-localize="p">2</p>
<script src="./js/jquery.min.js"></script>
<script src="./jquery.localize.min.js"></script>
</body>
js
// 使用浏览器默认的
// $("[data-localize]").localize("demo")
// 使用制定的语言包
$("[data-localize]").localize("demo", { language: "d" })
当前路径下创建json文件
demo-d.json
{
"greeting": "修改1",
"p": "<span>修改2</span>",
"head": {
"title": "修改3"
}
}
利用jQuery动态加载css文件
js
$("<link>")
.attr({ rel: "stylesheet",
type: "text/css",
href: "./css/demo.css",
id: 'enCss'
})
.appendTo("head");
JS 实现深拷贝
- 浅拷贝后，他们还是会指向同一个堆空间，一个改变另一个也会改变，所以有的时候需要深拷贝。
Object.assign也属于浅拷贝
- 深拷贝实现
//判断类型
const isType = (obj, type) => {
if (typeof obj !== 'object') return false;
const typeString = Object.prototype.toString.call(obj);
let flag;
switch (type) {
case 'Array':
flag = typeString === '[object Array]';
break;
case 'Date':
flag = typeString === '[object Date]';
break;
case 'RegExp':
flag = typeString === '[object RegExp]';
break;
default:
flag = false;
}
return flag;
};
//对正则的处理，提取出flags
const getRegExp = re => {
var flags = '';
if (re.global) flags += 'g';
if (re.ignoreCase) flags += 'i';
if (re.multiline) flags += 'm';
return flags;
};
/*深拷贝函数*/
/**
* @param 需要克隆的对象
* @return 深拷贝后的对象
*/
const clone = parent => {
// 维护两个储存循环引用的数组
const parents = [];
const children = [];
const _clone = parent => {
if (parent === null) return null;
if (typeof parent !== 'object') return parent;
let child, proto;
if (isType(parent, 'Array')) {
// 对数组做特殊处理
child = [];
} else if (isType(parent, 'RegExp')) {
// 对正则对象做特殊处理
child = new RegExp(parent.source, getRegExp(parent));
if (parent.lastIndex) child.lastIndex = parent.lastIndex;
} else if (isType(parent, 'Date')) {
// 对Date对象做特殊处理
child = new Date(parent.getTime());
} else {
// 处理对象原型
proto = Object.getPrototypeOf(parent);
// 利用Object.create切断原型链
child = Object.create(proto);
}
// 处理循环引用
const index = parents.indexOf(parent);
if (index != -1) {
// 如果父数组存在本对象,说明之前已经被引用过,直接返回此对象
return children[index];
}
parents.push(parent);
children.push(child);
for (let i in parent) {
// 递归
child[i] = _clone(parent[i]);
}
return child;
};
return _clone(parent);
};
测试
function person(pname) {
this.name = pname;
}
const Messi = new person('Messi');
function say() {
console.log('hi');
}
const oldObj = {
a: say,
c: new RegExp('ab+c', 'i'),
d: Messi,
};
oldObj.b = oldObj;
//进行深拷贝
const newObj = clone(oldObj);
console.log(newObj.a, oldObj.a);
// [Function: say] [Function: say]
console.log(newObj.b, oldObj.b);
// { a: [Function: say], c: /ab+c/i, d: person { name: 'Messi' }, b: [Circular] }
// { a: [Function: say], c: /ab+c/i, d: person { name: 'Messi' }, b: [Circular] }
console.log(newObj.c, oldObj.c);
// /ab+c/i /ab+c/i
console.log(newObj.d.constructor, oldObj.d.constructor);
// [Function: person] [Function: person]
使用原生js实现锚点滑动效果而不使用jquery
js
const jump = (target) => {
//目标锚点位置
let goal = target.offsetTop;
//当前位置，兼容处理
let currentTop = document.documentElement.scrollTop || document.body.scrollTop;
let diff = goal - currentTop;
let step = Math.abs(diff / 50);
if(diff > 0){
slideDown();
}else{
diff *= -1;
slideUp();
}
// slideDown
function slideDown (){
if(goal > currentTop){
currentTop += step;
document.body.scrollTop = currentTop;
document.documentElement.scrollTop = currentTop;
return setTimeout(slideDown ,10);
}else{
document.body.scrollTop = goal;
document.documentElement.scrollTop = goal;
}
}
//slideUp
function slideUp (){
if(goal < currentTop){
currentTop -= step;
document.body.scrollTop = currentTop;
document.documentElement.scrollTop = currentTop;
return setTimeout(slideUp ,10);
}else{
document.body.scrollTop = goal;
document.documentElement.scrollTop = goal;
}
}
})
监听滚动条事件
window.addEventListener('scroll',(e)=>{
console.log(e)
})
