Eric's Blog

发表于

数组去重经常被人拿来说事，虽然在工作中不常用，但他能够很好的考察js基础知识掌握的深度和广度，下面从js的不同阶段总结一下去重的方法。

ES3阶段

该阶段主要通过循环遍历数组从而达到去重的目的

  • 多次循环去掉重复元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 以下所有方法默认都那拿该数组进行测试
var array = [1, 1, '1', '1', null, null, undefined, undefined, new String('1'), new String('1'), /a/, /a/, NaN, NaN,{},{},[],[],{name: 'eric',sex: 'male'},{sex: 'male',name: 'eric'}];
function unique_es3_on2 (arr) {
    var len = arr.length,
        i = 0,
        j,
        flag,
        ret = [];
    for (; i < len ; i++) {
      flag = true;
      for (j = i+1 ; j < len ; j++) {
        if (arr[i] === arr[j]) {
          flag = false;
          break;
        }
      }
      if(flag) {
        ret.push(arr[i]);
      }
    }
    return ret;
}
unique_es3_on2(array)

结果如下图：

可见除了NaN没有去掉，其他效果都还挺好。原因就是NaN===NaN的结果是false。还有就是使用嵌套的循环，时间复杂度高，性能不是很好。

阅读全文 »
Eric's Blog

发表于

javascript中实现继承的方式有很多种，一般都是通过原型链和构造函数来实现。下面对各种实现方式进行分析，总结各自的优缺点。

一 原型继承

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let Super = functioin(name = 'eric') {
  this.name = name;
  this.getName = function() {
    return this.name;
  }
}
let Sub = function(sex = 'male') {
  this.sex = sex;
}
Sub.prototype = new Super('eric');  //通过改变原型对象实现继承
Sub.prototype.constructor = Sub // 保持构造函数和原型对象的完整性
let sub1 = new Sub('male')
   sub2 = new Sub('female');
console.log(sub1.getName()); // eric
console.log(sub1.hasOwnProperty('name')) // false 说明是继承而来的属性
console.log(sub1.getName === sub2.getName) // true,复用了方法

优点：父类的方法(getName)得到了复用。

缺点：同理父类的属性(name)也是复用，即子类实例没有自己的属性。

二 构造函数实现继承

阅读全文 »
Eric's Blog

发表于

JSON和JS对象

一 JSON是什么

JSON是基于文本的，轻量的，用于数据交换的，一种格式。

可以看到JSON的定义里面有很多的定语，现在就每个限定解释一下：

1. 基于文本

这里的意思是相对于哪些基于二进制的数据来说的，所以在传输的过程中，传输的是符合JSON格式的字符串。

2. 轻量的

在JSON之前有一种数据格式xml，在表示数据的时候，他需要很多的标签，所以没有JSON轻量。传输相同的数据，JSON占用的带宽更小。

阅读全文 »
Eric's Blog

发表于

工作中有一个很常见的需求，hover或者click某元素后，在该元素旁边出现弹框，主要就是获取该元素的位置坐标以及元素所占区块的大小。最近工作中就遇到了，发现js和jquery的实现方法有很大的区别，这里总结一下，备忘。

  1. 获取元素的相对位置信息

    • 原生js方法

      1
      2
      var x = obj.offsetLeft,
          y = obj.offsetTop;

    • jquery方法

      1
      2
      3
      var _offset = $obj.offset(),
          x = _offset.left,
          y = _offset.top;

      这两个方法看起来相似，其实有很大的不同.

      阅读全文 »
Eric's Blog

发表于

工作中经常会需要获取DOM元素的样式，之前都是通过jquery的css()方法，现在总结一下通过原生js获取元素样式的方法。

  • obj.style

    1
    var _width = obj.style.width;

    该方法基本可以忽略，因为他只能获取到内敛样式。而现在很少会写内联样式。当然他有个好处是可读可写，所以可以据此设置元素的样式。

  • window.getComputedStyle

    1
    2
    3
    // 语法如下： window.getComputedStyle('元素','伪元素');
    var _css = window.getComputedStyle(obj,null); // 不涉及伪元素的可以传null
    var _width = _css.getPropertyValue('width'); // _css.width

    该方法对样式可读不可写，返回一个描述元素最终样式的对象。获取某一个样式的值，可以像访问对象属性那样访问，但建议使用getPropertyValue(propertyName)方法获取(此处属性名不支持Camel-Case,所以要用类似’background-color’)。可惜的是该方法在IE低版本(<IE8)是不支持的，所以IE下可以用下面的方法。

  • obj.currentStyle

    1
    2
    var _css = obj.currentStyle;
    var _width = _css.getAttribute('width'); // _css.width

    该属性是IE自己的一个属性，也是可读不可写的。需要注意的是此处获取具体样式值的时候，getAttribute(propertyName),其中属性名必须是驼峰式命名。

Eric's Blog

发表于

由js生成一切随机数的基础都是Math.random()，这个方法比较特别，生成的随机数落在的区间是[0,1)，进行一次操作的话，js只能生成一个类似于[n,m)这样，左闭右开的区间。所以当有一些特殊需求的时候，就势必要进行一些其它的操作，下面对各种需求进行简单的分析:

生成任意区间的整数

  1. 全闭区间[n,m]
    这种的最常见，大家都知道的那一长串公式：Math.floor(Math.random()*(m-n+1))+n; 就是生成这个全闭区间的方法。说到这个公式很多人都知道，但真正想明白的人估计很少。先生成一个[0,m-n+1)这样左闭右开的区间，然后用Math.floor()取到[0,m-n]之间内的任意整数（看明白这一步很关键），之后加上区间左端点变成[n,m]内的任意整数，达到目的。

    阅读全文 »
Eric's Blog

发表于

目前，web动画主要有两大类：CSS3动画和javascript动画。

一 CSS3动画

现在页面中的动画一般都是css3动画，主要通过transition和animation实现。注意这里没有transform，css3的2D和3D转换是不能单独产生动画的。

transition动画
transition动画的实现方式，是为元素设置需要产生动画效果的属性，当他们变化时就会有相应的过度(transition)效果。transition主要有四个属性：transition-property,transition-duration,transition-timing-function,transition-delay;其中前两个(动画名称和动画之行时间是必须的)。

1
2
3
.demo {
	transition: left .5s ease 1s; // demo元素left属性改变的时候会产生动画
}

animation动画
animation是关键帧动画，他是预先设置多个节点，每个节点有不同的状态属性。他对元素的控制更加精细化，所以可以做出更为复杂的动画。
要产生animation动画，首先要指定关键帧规则，@keyframes+animation-name。然后在绑定到选择器上。animation有八个属性：

1
2
3
4
5
6
7
8
9
10
.demo {
	animation-name: animationName;  // 动画名称 @keyframes
	animation-duration: 1s;         // 动画之行时间(ms)
	animation-time-function: ease;  // 速度曲线
	animation-delay: 1s;			// 动画延迟执行的时间
	animation-iteration-count: 2;   // 动画被播放的次数，默认1，infinite无限播放
	animation-direction: alternate; // 动画下一周期是否反向播放，normal正常播放，alternate反向播放
	animation-play-state: paused;   // 规定动画之行与否，可用js操作该属性，播放和暂停动画
	animation-fill-mode: forwards;  // 动画播放前后，动画效果是否可见
}

这里的最后一个属性，可以很好的解决动画过程中闪现的问题，其中默认值none不改变行为，forwards动画结束后，保持最后一个关键帧的壮体啊，backwards在动画执行之前应用第一个关键帧的状态，both使用以上两个特性。

二 js动画

js动画是动态的控制并改变元素的各种属性值以形成动画效果。
最简单的就是多个兄弟元素采用定位的方式，放在同一个地方，js控制他们的显隐性。还可以通过一些其他的类库实现，比如强大的JQuery动画。还可以通过HTML5种的canvas来生成canvas动画。

三 总结

大部分简单的页面动画都可以通过css3动画实现，js动画往往用于需要结合用户操作而产生的动画效果。在兼容性方面css3动画要比JQuery类库动画差一点，但css3动画的执行效率比他高一点。

Eric's Blog

发表于

在做导航栏的时候，肯定会用到点击滑动。还有就是滑动过程中，要根据滚动条的高度处理一些事情，比如改变导航栏样式。

一 点击滑动(scrollTop)

先看一下下面的代码：

1
2
3
4
5
6
7
8
9
10
11
$(window).animate({
   scrollTop: "1000px" 
})
$(document).animate({
   scrollTop: "1000px" 
})
$('html,body').animate({
   scrollTop: "1000px" 
})

上面三种方法哪种可行？不行的方法为什么行不通？

阅读全文 »
Eric's Blog

发表于

在做移动端开发的时候会经常遇到这种场景，需要适时的弹出遮罩（有时为了突出还会在外面加上蒙层），弹窗出现以后，为了追求良好的用户体验，遮罩以下的屏幕是禁止滑动的。在网上找了很多资料，大体就这两种做法，但都有不完善的地方。加上自己的思考和总结，给出一些解决办法。

一 大众型

一般的思路都是给body或者html添加overflow：hidden样式，当然height要设置成100%。这样在大多数机型上是可以的，但有个别的就是不起作用，我也不知道为什么。

二 高端型

因为有这种弹窗遮罩需求的，一般为移动端，pc很少会出现，就算是在pc的场景里有需要，上面那种方法也是可以解决的，所以可以考虑从移动端特有的滑动事件touchmove下手，当弹窗出现以后阻止该事件的默认行为（关闭弹窗后解除阻止）不就行了吗，于是又有了下面的方法。

阅读全文 »