【前端】填坑记实录

2018-06-24 01:38:40来源：未知阅读 ()

1、字符串转换时间，时区问题

1 //美国时区
2 var str1 = '2018-03-07';
3 var d1 = new Date(str1);// 会变成3月6日
4 
5 var str2 = str1.replace(/-/g,"/");// 2018/03/07
6 var d2 = new Date(str2);// 3月7日

2、Safari浏览器时间转换

//还是时间格式的问题，2018-01-01在Safari浏览器下是转换不成功的
//只能2018/01/01，这个格式可以转换成功
new Date(('2018-01-01').replace(/-/g,"/"));

3、能直接调用方法时，不要触发控件方法

 1 for (var k = 0; k < lableAry.length; k++) {
 2     $checkTd.find("div.lable-context label[lableid=" + lableAry[k].id + "]").click();
 3 }    
 4 
 5 // 可能会事件冒泡
 6 
 7 for (var k = 0; k < lableAry.length; k++) {
 8     var lab = $checkTd.find("div.lable-context label[lableid=" + lableAry[k].id + "]");
 9     pageJs.CtrolCheck.Label(lab);
10 }

4、及时阻止事件冒泡或默认事件

 1 //阻止事件冒泡
 2 if(e && e.stopPropagation) { //非IE 
 3     e.stopPropagation(); 
 4 } else { //IE 
 5     window.event.cancelBubble = true; 
 6 } 
 7 //或
 8 window.event ? window.event.cancelBubble = true : e.stopPropagation();
 9 
10 //阻止默认事件
11 if ( e && e.preventDefault ){
12     e.preventDefault(); 
13 }else {
14     window.event.returnValue = false; 
15 }
16 //或
17 window.event ？window.event.returnValue = false : e.preventDefault();

5、判断元素是否相等

1 $tr == $(tr); // false
2 
3 //$.is()方法
4 
5 $tr.is($(tr));// true

6、返回新数组

1 var ary = [{id: 1, tz: 'gg'},{id: 2, tz: 'ff'}];
2 var newAry = ary.map(n => [n.id, n.tz]);
3 // [
4 //   [1, "gg"],
5 //   [2, "ff"]
6 // ]

7、replaceAll功能

1 ('aaa').replace(/a/g, 'b');// bbb

8、数组Json拼接

var arys = ['1', '2', '4'];
//不写拼接符的话会默认以逗号拼接
var tt= arys.join();//1,2,4
//不需要拼接符
var tt= arys.join('');//124

9、箭头函数和function

export default {
  name: 'App',
  methods:{
    toLink: () => {
      this.$router.push('/'); //undefined
    },
    jumpPage: function(url) {
      this.$router.push(url); //跳转成功
    }
  }
}

　　箭头函数相比function：

　　【1】不可以当做构造函数，也就是说，不可以使用 new 命令，否则会抛出错误。

　　【2】this、arguments、caller等对象在函数体内都不存在。

　　【3】不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。

　　也就是说，箭头函数除了传入的参数之外，其它的对象都没有。

10、事件绑定

//这种绑定方法，不会对动态添加的元素生效
//只对绑定时存在的元素生效
$("#mytable input").on('change',function () {
    alert("塞尔达是谁");
});

//对动态加载的元素也生效
$("#mytable").on('change', 'input', function () {
    alert("为什么要救她");
});

//相似于，注意参数顺序与on()不同
$("#mytable").delegate('input' ,'change', function() {
    alert("还是骑马冒险撩大精灵有趣");  
});