JavaScript必知必会(一)

1.原生js实现路由

前端路由，是指随着浏览器地址栏的变化，展示给用户的页面也不相同。

传统的网页根据用户访问的不同地址，浏览器从服务器获取对应页面内容展示给用户。这样造成服务器压力比较大，而且用户访问速度也会比较慢。在这种场景下，单页面应用出现了。

单页面应用，就是只有一个页面，用户访问一个网址，服务器返回的页面也只有一个。地址栏内容改变显示不同页面由前端路由来实现。

法一：hash+hashchange

我们通过读取location.hash和监听hashchange事件来实现路由。

首先定义一个Router对象:

function Router() {
    this.currentUrl = '';
    this.routes = {};
}

Router.prototype.route = function (path, callback) {
    this.routes[path] = callback || function () {};
}

Router.prototype.refresh = function () {
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
}

Router.prototype.init = function () {
    window.addEventListener('load', this.refresh.bind(this), false);
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}

然后创建一个实例：

var route = new Router();
route.init();
route.route('/', changeContent.bind(null, '/'));
route.route('/route1', changeContent.bind(null, '/route1'));
route.route('/route2', changeContent.bind(null, '/route2'));

function changeContent(text) {
    var el = document.getElementById('hash');
    el.innerHTML = text;
}

对应的html为：

        <ul>
            <li><a href="#/">/</a></li>
            <li><a href="#/route1">/route1</a></li>
            <li><a href="#/route2">/route2</a></li>
        </ul>
        <h4>路由是：</h4>
        <h4 id="hash"></h4>

上面就实现了不同路由展示不同的内容。支持浏览器的前进和后退，很好地解决了前后端分离的问题。

法二：history.pushState()+popstate

跟之前的方法一样,pushState()修改url的地址，popstate监听地址的改变，不同的是，手动的进行pushState()并不会触发popstate事件。

2.原生js实现对象属性监听器

可以使用defineProperty来实现对象属性的监听。defineProperty是ES5属性，大部分的使用场景都没有问题。现在首先来看看它的用法：

Object.defineProperty(obj, prop, descriptor)

各参数的作用分别是：

obj是需要定义属性的那个对象。

prop是需要被定义或者修改的属性名。

descriptor是定义属性prop的描述。

下面来详细看看descriptor的各属性可以做什么。

value 设置属性的值

var bob = {};
Object.defineProperty(bob, 'name', {
    value: 'bob'
});

console.log(bob.name); // bob
bob.name = 'Bob';
console.log(bob.name); // 依旧是bob

在代码中，我们定义了bob的一个属性name，value为bob。然后试着给name属性赋值Bob，却发现属性没有发生变化。这是为什么？原来只有把writable修饰符设置为true时，这个属性才能被修改。

writable 当该属性为true时，该属性的才会被赋值运算符改变。默认为false。

var bob = {};
Object.defineProperty(bob, 'name', {
    value: 'bob',
    writable: true
});

console.log(bob.name); // bob
bob.name = 'Bob';
console.log(bob.name); // Bob

依然是上面的例子，这次成功修改了bob的name属性。

enumerable 设置该属性是否是可枚举类型。默认为false。

只有enumerable属性设置为true时，这个属性才可以用for(prop in obj)和Object.keys()枚举出来。

Object.defineProperty(bob, 'age', {
    value: 18,
    enumerable: true
});

Object.defineProperty(bob, 'math', {
    value: 98,
    enumerable: false
});

for(prop in bob) {
    console.log(prop); // age
}

console.log(Object.keys(bob)); // [age]

上面的代码为bob添加了两个属性，一个是可枚举属性age，一个是不可枚举属性math。

configurable 该属性决定了对象的属性是否可以被删除，以及除writable外的其他特性能不能被修改；并且修改writable时只能修改为false。

Object.defineProperty(bob, 'English', {
    value: 80,
    configurable: false
})

Object.defineProperty(bob, 'English', { // 报错
    writable: true
});

Object.defineProperty(bob, 'English', { // 不报错
    writable: false
});

delete bob.English; // 属性不可以被删除

console.log(bob.English); // 80

get 给属性提供的getter方法，如果没有getter则返回undefined，该方法返回值被用作属性值。

set 给属性提供的setter方法,该方法接受唯一参数，并将该参数的新值分配给该属性。

get和set属性不能和value和writable属性一起出现，否则会报错。

bob.weight = '45kg';
var weight = bob.weight;

Object.defineProperty(bob, 'weight', {
    enumerable: true,
    get: function () { 
        console.log('读取体重啦');
        return weight;
     },
    set: function (newValue) {
        console.log('监听中...体重改变啦');
        console.log('set: '+newValue);
        weight = newValue;
    }
});

console.log(bob.weight); // 读取体重啦 45kg
bob.weight = '50kg';
console.log(bob.weight); // 监听中...体重改变啦 set: 50kg

在上面的代码中，我们为bob的weight属性添加了set和get方法，现在读取和修改属性时都会打印出提示文字。注意，为什么需要一个中间变量weight来保存weight属性值。因为如果我们直接在get或set方法里访问bob.weight，则又会触发wegiht的get方法，会导致程序陷入死循环中。

介绍完defineProperty的用法，属性对象监听器的写法就呼之欲出啦。我们只需要重写对象属性的set方法，就可以在对象的属性发生变化时调用我们设置的回调函数了。我们来完成一个函数，实现对对象属性的监听。

// 定义一个属性监听器
function addPropertyListener(obj, prop, callback) {
    if(obj.hasOwnProperty(prop)) {
        var  value = obj[prop];
        Object.defineProperty(obj, prop, {
            enumerable: true,
            get: function () {
                return value;
            },
            set: function (newValue) {
                value = newValue;
                callback && callback(newValue);
            }
        })
    }
    return false;
}

// 测试一下我们的监听器
bob.height = '182cm';

addPropertyListener(bob, 'height', function(value) {
    console.log('设置身高：'+value);
    console.log('bob.height='+bob.height);
});

bob.height = '160cm'; // 设置身高：160cm  bob.height=160cm

我们的监听器已经实现好了，其实，defineProperty非常强大，vuejs的数据绑定也是基于该方法实现的。

3、参考文献

原生js实现前端路由

理解JavaScript的Object.defineProperty()函数