ES6学习

发表于 2018-08-18 | 分类于前端 |

字数统计: 568 | 阅读时长 ≈ 2

Promise

Promise 基本用法

下面代码创造了一个Promise实例

const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success   第一个回调函数是Promise对象的状态变为resolved时调用，
}, function(error) {
  // failure   第二个回调函数是Promise对象的状态变为rejected时调用。

}); // 其中，第二个函数是可选的，不一定要提供

阅读全文 »

面向对象编程>>>封装

发表于 2017-12-05 | 分类于前端 |

字数统计: 1,117 | 阅读时长 ≈ 5

所谓封装就是把某些属性和方法封装成为一个对象

生成实例对象的原始模式

var cat = {//原型对象
  name: '',
  color: ''
}
// 我们需要根据这个原型对象的规格（schema），生成两个实例对象(cat1,cat2)

var cat1 = {}; // 创建一个空对象
  cat1.name = "大毛"; // 按照原型对象的属性赋值
  cat1.color = "黄色";
var cat2 = {};
  cat2.name = "二毛";
  cat2.color = "黑色";

// 缺点
//一是如果多生成几个实例，写起来就非常麻烦；
// 二是实例与原型之间，没有任何办法，可以看出有什么联系。

原始模式的改进

我们可以写一个函数，解决代码重复的问题。

function Cat(name,color) {
  return {
  name:name,
  color:color
  }
}
//  然后生成实例对象，就等于是在调用函数：
var cat1 = Cat("大毛","黄色");
var cat2 = Cat("二毛","黑色");
//缺点
//cat1和cat2之间没有内在的联系，不能反映出它们是同一个原型对象的实例。

构造函数模式

为了解决从原型对象生成实例的问题，Javascript提供了一个构造函数（Constructor）模式。

所谓”构造函数”，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上

比如，猫的原型对象现在可以这样写，

function Cat(name,color) {//原型对象
  this.name = name
  this.color = color
}
var cat1 = Cat("大毛","黄色");//实例对象
var cat2 = Cat("二毛","黑色");//实例对象

这时cat1和cat2会自动含有一个constructor属性，指向它们的构造函数

1 2	alert(cat1.constructor == Cat); //true alert(cat2.constructor == Cat); //true

Javascript还提供了一个instanceof运算符，验证原型对象与实例对象之间的关系。
1
2
alert(cat1 instanceof Cat); //true
alert(cat2 instanceof Cat); //true

构造函数模式的问题

构造函数模式的问题

我们现在为Cat对象添加一个不变的属性type（种类），再添加一个方法eat（吃）。那么，原型对象Cat就变成了下面这样：

function Cat(name,color){
  this.name = name;
  this.color = color;
  this.type = "猫科动物";
  this.eat = function(){alert("吃老鼠");};
}

还是采用同样的方法，生成实例：

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat ("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

表面上好像没什么问题，但是实际上这样做，有一个很大的弊端。那就是对于每一个实例对象，type属性和eat()方法都是一模一样的内容，每一次生成一个实例，都必须为重复的内容，多占用一些内存。这样既不环保，也缺乏效率。

alert(cat1.eat == cat2.eat); //false

Prototype模式

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。

function Cat(name,color){
  this.name = name;
  this.color = color;
}
Cat.prototype.type = "猫科动物";
Cat.prototype.eat = function(){alert("吃老鼠")};

然后，生成实例。

var cat1 = new Cat("大毛","黄色");
var cat2 = new Cat("二毛","黑色");
alert(cat1.type); // 猫科动物
cat1.eat(); // 吃老鼠

这时所有实例的type属性和eat()方法，其实都是同一个内存地址，指向prototype对象，因此就提高了运行效率。

alert(cat1.eat == cat2.eat); //true

Prototype模式的验证方法

为了配合prototype属性，Javascript定义了一些辅助方法，帮助我们使用它。，

isPrototypeOf()

这个方法用来判断，某个proptotype对象和某个实例之间的关系。
1
2
alert(Cat.prototype.isPrototypeOf(cat1)); //true
alert(Cat.prototype.isPrototypeOf(cat2)); //true

hasOwnProperty()

每个实例对象都有一个hasOwnProperty()方法，用来判断某一个属性到底是本地属性，还是继承自prototype对象的属性。
1
2
alert(cat1.hasOwnProperty("name")); // true
alert(cat1.hasOwnProperty("type")); // false

in运算符

in运算符可以用来判断，某个实例是否含有某个属性，不管是不是本地属性。
1
2
alert("name" in cat1); // true
alert("type" in cat1); // true

in运算符还可以用来遍历某个对象的所有属性。

for(var prop in cat1) { alert(“cat1[“+prop+”]=”+cat1[prop]); }

Javascript的this用法

发表于 2017-12-05 | 分类于前端 |

字数统计: 357 | 阅读时长 ≈ 2

this总是指向调用函数的那个对象

纯粹的函数调用

this指向window

var x = 1;
function test(){
　this.x = 0;
}
test();  // 相当于window.test()
alert(x); //0

作为对象方法的调用

this 指向这个上级对象

function test(){
  alert(this.x);
}
var o = {};
o.x = 1;
o.m = test;
o.m(); // 1

作为构造函数调用

所谓构造函数，就是通过这个函数生成一个新对象（object）。这时，this就指这个新对象。

function Test(){
　　this.x = 1;
}
var o = new Test();
alert(o.x); // 1

// 为了表明这时this不是全局对象，我对代码做一些改变：
var x = 2;
function test(){
  this.x = 1;
}
var o = new test();
alert(x); //2

apply调用

pply()是函数对象的一个方法，它的作用是改变函数的调用对象，它的第一个参数就表示改变后的调用这个函数的对象。因此，this指的就是这第一个参数。

var x = 0;
function test(){
  alert(this.x);
}
var o={};
o.x = 1;
o.m = test;
o.m.apply(); //0

apply()的参数为空时，默认调用全局对象。因此，这时的运行结果为0，证明this指的是全局对象。

如果把最后一行代码修改为
　　o.m.apply(o); //1

运行结果就变成了1，证明了这时this代表的是对象o。

for语句

发表于 2017-12-03 | 分类于前端 |

字数统计: 337 | 阅读时长 ≈ 2

for

用法：for(var i = 0; i < arr.length; i++)

用来循环遍历数组中的元素

for in

用法：for(var property in obj)

用来枚举对象的属性

每次循环时都会将obj对象中存在的一个属性赋值给property，该循环会一直持续到对象中所有属性都被枚举一边为止
与for 语句类似，这里控制语句中的var也不是必须的，但为了保证使用局部变量，推荐保留var操作符
for in 也可用来遍历数组，因为数组也属于对象的一种，但其拿到的是数组的下标

阅读全文 »

伪类选择器:nth-of-type和:nth-child

发表于 2017-11-29 | 分类于前端 |

字数统计: 146 | 阅读时长 ≈ 1

E:nth-of-type(n)匹配的是同类型中的第n个同级兄弟元素E

E:nth-child(n)匹配的是父元素中的第n个子元素E

阅读全文 »

两个viewport的故事

发表于 2017-11-27 | 分类于前端 |

字数统计: 1,303 | 阅读时长 ≈ 5

概念：设备像素和CSS像素

你需要明白的第一个概念是CSS像素，以及它和设备像素的区别。

设备像素是我们直觉上觉得「靠谱」的像素。这些像素为你所使用的各种设备都提供了正规的分辨率，并且其值可以（通常情况下）从screen.width/height属性中读出。

如果你给一个元素设置了width: 128px的属性，并且你的显示器是1024px宽，当你最大化你的浏览器屏幕，这个元素将会在你的显示器上重复显示8次（大概是这样；我们先忽略那些微妙的地方）。

如果用户进行缩放，那么计算方式将会发生变化。如果用户放大到200%，那么你的那个拥有width: 128px属性的元素在1024px宽的显示器上只会重复显示4次。

现代浏览器中实现缩放的方式无怪乎都是「拉伸」像素。所以，元素的宽度并没有从128个像素被修改为256个像素；相反是实际像素被放大了两倍。形式上，元素仍然是128个CSS像素宽，即使它占据了256个设备像素的空间。

换句话说，放大到200%使一个CSS像素变成为一个设备像素的四倍。（宽度2倍，高度2倍，总共4倍）

阅读全文 »

开发技巧总结CSS

发表于 2017-11-16 |

字数统计: 617 | 阅读时长 ≈ 2

让元素在你的视野消失

设置display:none(该元素从文档流中删除，对布局无影响)

优点
```
* 简单暴力，不需要多余代码
```

缺点

* 元素从文档删除，对于seo不利

阅读全文 »

开发技巧总结JS

发表于 2017-11-16 |

字数统计: 426 | 阅读时长 ≈ 2

回调函数无法获取外部for循环 index之解法

阅读全文 »

我的函数库

发表于 2017-11-14 |

字数统计: 3,382 | 阅读时长 ≈ 18

Map (使用下列有关地图的函数，应该先引入地图js)

计算两地之间距离

//  <script type="text/javascript" src='http://webapi.amap.com/maps?v=1.4.0&plugin=AMap.Geolocation,AMap.ToolBar,AMap.Geocoder,AMap.PlaceSearch,AMap.Autocomplete,AMap.Driving&key=40ee88bd05807620f5abe26ebdf51a85'></script>
//  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Q9AkkY0RD8b9xn4ADVQRvbxm7K5ehxa4"></script>

function distance(lat1,lng1,lat2,lng2) {
    // console.log(lat2);
    // console.log(lng2);
    var map = new BMap.Map("#app");
    var point1 = new BMap.Point(lng1,lat1);
    var point2 = new BMap.Point(lng2,lat2);
    var distance = (map.getDistance(point1,point2)/100000).toFixed(2);
    // console.log(distance);
    return distance
}