首页 > 其他 > 详细

vue的双向绑定

时间:2019-06-23 10:10:20      阅读:41      评论:0      收藏:0      [点我收藏+]

标签:作用范围   flush   订阅者   ask   完美   som   args   mpi   mit   

1、前言

说起双向绑定可能大家都会说:Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。虽然一句话把大概原理概括了,但是其内部的实现方式还是值得深究的,本文就以从简入繁的形式给大家撸一遍,让大家了解双向绑定的技术细节。

2、来一个简单的版本

让我们的数据变得可观测,实现原理不难,利用Object.defineProperty重新定义对象的属性描述符。

 /**
    * 把一个对象的每一项都转化成可观测对象
    * @param { Object } obj 对象
    */
    function observable(obj) {
        if (!obj || typeof obj !== ‘object‘) {
            return;
        }
        let keys = Object.keys(obj);
        keys.forEach((key) => {
            defineReactive(obj, key, obj[key])
        })
        return obj;
    }
    /**
    * 使一个对象转化成可观测对象
    * @param { Object } obj 对象
    * @param { String } key 对象的key
    * @param { Any } val 对象的某个key的值
    */
    function defineReactive(obj, key, val) {
        Object.defineProperty(obj, key, {
            get() {
                console.log(`${key}属性被读取了`);
                return val;
            },
            set(newVal) {
                console.log(`${key}属性被修改了`);
                val = newVal;
            }
        })
    }
    let car = observable({
        ‘brand‘: ‘BMW‘,
        ‘price‘: 3000
    })
    //测试
    console.log(car.brand);

3、一步一步实现一个观察者模式的双向绑定

先给一张思维导向图吧(图盗的,链接:https://www.cnblogs.com/libin-1/p/6893712.html),本文章不涉及Compile部分。
这张图我就不解释,我们先跟着一步一步的把代码撸出来,再回头来看这张图,问题不大。
技术分享图片
建议在读之前一定要了解观察者模式和发布订阅模式以及其区别,一篇简单的文章总结了一下两种模式的区别(链接:https://www.cnblogs.com/chenlei987/p/10504956.html),Vue的双向绑定使用的就是观察者模式,其中Dep对象就是观察者的目标对象,而Watcher就是观察者,然后等待Dep对象的通知更新的,其中update方法是由watcher自己管理的,并非如发布订阅模式由目标对象去管理,在观察者模式中,目标对象管理的订阅者列表应该是Watcher本身,而不是事件/订阅主题。

3.1、声明一个Vue类,并将data里面的数据代理到Vue实例上面。

var Vue = (function (){
    class Vue{
            constructor (options = {}){

                //简化处理
                this.$options = options;

                let data = (this._data = 
                    typeof this.$options.data == ‘function‘ ? 
                        this.$options.data() 
                        : 
                        this.$options.data);
                Object.keys(data).forEach(key =>{ this._proxy(key) });

                // 监听数据
                //observe(data);
            }
            _proxy (key){
                //用this这个对象去代理 this._data这个对象里面的key
                Object.defineProperty(this, key, {
                    configurable: true,
                    enumerable: true,
                    set: (val) => {
                        this._data[key] = val
                    },
                    get: () =>{
                        return this._data[key]
                    }
                })
            }
            
        }
        return Vue;
}
let VM = new Vue({
    data (){
        return {
            a: 1,
            arr: [1,2,3,4,5,6]
        }
    },
});
//说明 _proxy代理成功了
console.log(VM.a);
VM.a = 2;
console.log(VM.a);

3.2、让data里面的数据变得可观测,开启observe之旅

注:下面我所说的"data里面"就是指vue实例的data属性。
上面代码Vue类的constructor里面我注释了一行代码,下面我取消注释,并且开始定义observe函数

// 监听数据
 observe(data);

在定义observe方法之前,首先明白我们observe要做什么?
实参是data数据,我们要遍历整个data数据的key,为data数据的每一个key都用Object.defineProperty去重新定义它的 getter和setter函数,从而使其可观测。

class Observer{
            constructor (value){
                this.value = value;
                this.walk(value);
            }
            // 遍历属性值并监听
            walk(value) {
                Object.keys(value).forEach(key => this.convert(key, value[key]));
            }
            // 执行监听的具体方法
            convert(key, val) {
                defineReactive(this.value, key, val);
            }
        }
        function defineReactive(obj, key, val) {
            const dep = new Dep();
            // 给当前属性的值添加监听
            let chlidOb = observe(val);
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get: () => {
                  
                  //do something
                  //  if (Dep.target) {
                    //    dep.depend();
                    //}
                    return val;
                },
                set: newVal => {
                    if (val === newVal) return;
                    val = newVal;
                    
                    //do something
                    // 对新值进行监听
                    //chlidOb = observe(newVal);
                    // 通知所有订阅者,数值被改变了
                    //dep.notify();
                },
            });
        }

        function observe(value) {
             // 当值不存在,或者不是复杂数据类型时,不再需要继续深入监听
            if (!value || typeof value !== ‘object‘) {
                return;
            }
            return new Observer(value);
        }

看到在get和set函数里面的do something了吗,可以理解为在data里面的每个key的设置和获取都被我们截取到了,在每个key的设置和获取时我们可以干些事情了。比如更数据对应的DOM。
要做什么呢?
get函数: 从思维图图1可以看出需要把当前的Watcher添加进Dep对象,等待数据更新,调用回调。
set函数: 数据更新,Dep对象通知所有订阅的watcher更新,调用回调,更新视图。

3.3、Watcher

先声明一个Watcher类,用于添加进Dep对象并通知更新视图使用。

 let uid = 0;
        class Watcher {
            constructor(vm, expOrFn, cb) {
                // 设置id,用于区分新Watcher和只改变属性值后新产生的Watcher
                this.id = uid++;

                this.vm = vm; // 被订阅的数据一定来自于当前Vue实例
                this.cb = cb; // 当数据更新时想要做的事情
                this.expOrFn = expOrFn; // 被订阅的数据
                this.val = this.get(); // 维护更新之前的数据
            }
            // 对外暴露的接口,用于在订阅的数据被更新时,由订阅者管理员(Dep)调用
            update() {
                this.run();
            }
            addDep(dep) {
                // 如果在depIds的hash中没有当前的id,可以判断是新Watcher,因此可以添加到dep的数组中储存
                // 此判断是避免同id的Watcher被多次储存
                //这里要是不限制重复,你会发现在响应的过程中,Dep实例下的subs会成倍的增加watcher。多输入几个字浏览器就卡死了。
                if (!dep.depIds.hasOwnProperty(this.id)) {
                    dep.addSubs(this);
                    dep.depIds[this.id] = dep;
                }
            }
            run() {
                const val = this.get();
                if (val !== this.val) {
                    this.val = val;
                    this.cb.call(this.vm, val);
                }
            }
            get() {
                // 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时,通知订阅者管理员收集当前订阅者
                Dep.target = this;
                //注意:在这里获取该属性 从而就触发了defineProperty的get方法,该watcher已经进入Dep的subs队列了
                const val = this.vm._data[this.expOrFn]; 
                
                //初始化执行一遍回调
                this.cb.call(this.vm, val);

                //  置空,用于下一个Watcher使用
                Dep.target = null;
                return val;
            }
        }

上面代码我们先从constructor看起,接受三个参数,vm当前的vue实例,expOrFn实例化时该watcher实例所 代表/处理 的"data里面"(‘data里面’上面有解释,这里提醒一下)的哪个值,cb,回调函数,也就是当数据更新后需要做什么(自然是更新DOM咯)。
然后在constructor里面还调用了 this.get()。详细看一下get函数的定义,两行代码需要注意:

// 当前订阅者(Watcher)读取被订阅数据的最新更新后的值时,通知订阅者管理员收集当前订阅者
Dep.target = this;
//注意:在这里获取该属性 从而就触发了defineProperty的get方法,该watcher已经进入Dep的subs队列了
const val = this.vm._data[this.expOrFn]; 

Dep.target = this;确定了当前的活动的watcher实例,Dep.target我们可以认为它是一个全局变量,用于存放当前活动的watcher实例。
const val = this.vm._data[this.expOrFn];获取数据,这句话其实就已经触发了其自身的getter方法(这点要注意,不然你连流程都理解不通)。
进入了getter方法,也就把当前活动的实例的watcher添加进dep对象等待更新。
添加进Dep对象后,置空,用于下一个Watcher使用 Dep.target = null;

3.4、Dep

一直在说dep对象,我们一定要知道dep对象就是观察者模式里面的目标对象,用于存放watcher和负责通知更新的。
下面来定义一个Dep对象,放到class Watcher前面。 注意Dep的作用范围.

class Dep{
            constructor (){
                this.depIds = {}; // hash储存订阅者的id,避免重复的订阅者
                //订阅者列表  watcher实例列表
                this.subs = [];
            }
            depend (){
                Dep.target.addDep(this);//相当于调用this.addSubs 将 watcher实例添加进订阅列表 等待通知更新
                //本来按照我们的理解,在denpend里面是需要将watcher添加进 Dep对象, 等待通知更新的,所以应该调用 this.addSubs(Dep.target)
                //但是由于需要解耦 所以 先调用 watcher的addDep 在addDep中调用Dep实例的addSubs
                //简化理解就是 将 watcher实例添加进订阅列表 等待通知更新
            }
            addSubs (sub) {
                //这里的sub肯定是watcher实例
                this.subs.push(sub);
            }
            notify (){
                //监听到值的变化,通知所有订阅者watcher更新
                this.subs.forEach((sub) =>{
                    sub.update();
                });
            }
        }
         Dep.target = null;//存储当前活动的watcher

再改改defineReactive,把注释打开

function defineReactive(obj, key, val) {
            const dep = new Dep();
            // 给当前属性的值添加监听
            let chlidOb = observe(val);
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get: () => {
                    // 如果Dep类存在target属性,将其添加到dep实例的subs数组中
                    // target指向一个Watcher实例,每个Watcher都是一个订阅者
                    // Watcher实例在实例化过程中,会读取data中的某个属性,从而触发当前get方法
                    if (Dep.target) {
                        dep.depend();
                    }
                    return val;
                },
                set: newVal => {
                    if (val === newVal) return;
                    val = newVal;
                    // 对新值进行监听
                    chlidOb = observe(newVal);
                    // 通知所有订阅者,数值被改变了
                    dep.notify();
                },
            });
        }

然后起一个watcher来监听

3.5、让数据响应起来

先给Vue暴露一个方法 $watcher 可以调用实例化Watcher。

class Vue{
            constructor (options = {}){

                //简化处理
                this.$options = options;

                let data = (this._data = 
                    typeof this.$options.data == ‘function‘ ? 
                        this.$options.data() 
                        : 
                        this.$options.data);
                Object.keys(data).forEach(key =>{ this._proxy(key) });

                // 监听数据
                observe(data);
            }
            // 对外暴露调用订阅者的接口,内部主要在指令中使用订阅者
            $watch(expOrFn, cb) {
                //property需要监听的属性  cb在监听到更新后的回调
                new Watcher(this, expOrFn, cb);
            }
            _proxy (key){
                //用this这个对象去代理 this._data这个对象里面的key
                Object.defineProperty(this, key, {
                    configurable: true,
                    enumerable: true,
                    set: (val) => {
                        this._data[key] = val
                    },
                    get: () =>{
                        return this._data[key]
                    }
                })
            }
        }

3.6、测试: 声明一个实例

html部分

 <h3>Vue双向绑定</h3>
    <input type="text" id="input">
    <p id="react"></p>
    <h3>Vue数组双向绑定</h3>
    <input type="text" id="arr-input">
    <p id="arr-reat"></p>
let reactElement = document.querySelector("#react");
    let input = document.getElementById(‘input‘);
    input.addEventListener(‘keyup‘, function (e) {
        VM.a = e.target.value;
    });

    VM.$watch(‘a‘, val => reactElement.innerHTML = val); //监听属性 a 当a发生改变时


    //数组的响应并不能实现
    let arrReactElement = document.querySelector("#arr-reat");
    let arrInput = document.getElementById(‘arr-input‘);
    arrInput.addEventListener(‘keyup‘, function (e) {
        VM.arr.push(e.target.value);
        console.log(VM.arr);
    });
    VM.$watch(‘arr‘, val => arrReactElement.innerHTML = val); //监听属性 a 当a并没有发生改变时

VM.$watch就可以实例化一个watcher,从而去劫持data里面某个属性的改变,在改变时调用回调函数。
数组的改变并没有实现。上面的代码见https://gitee.com/cchennlleii/MyTest/blob/master/vueReactive/vue-reactive%E7%AE%80%E5%8D%95%E5%AE%9E%E7%8E%B0.html
技术分享图片

4、对数组的支持

在说这个之前我们先去看一看vue官网对于数组更新检测的说明,链接:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B
技术分享图片
技术分享图片
总的来说,对于数组支持更新的只是数组原型上的方法,对于vm.items[index] = newValue是不支持的。
其实Object.defineProperty对于数组都是不支持的,根据消息vue3.0用的proxy对于数组得到了完美的支持,但是兼容性不怎么样。
既然vue实现了对数组原型方法的支持,那么我们也来让我们的例子对数组方法也支持吧。
原理不难,vue对于所有的数组原型方法都写了一层hack,让其支持更新。那么下面我们就一步一步来实现。

4.1、准备一套数组原型方法的hack

/**
        * Define a expOrFn.
        */
        function def(obj, key, val, enumerable) {
            Object.defineProperty(obj, key, {
                value: val,
                enumerable: !!enumerable,
                writable: true,
                configurable: true
            });
        }

        //数组改变的监听
        var arrayProto = Array.prototype;
        var arrayMethods = Object.create(arrayProto);
        var methodsToPatch = [
            ‘push‘,
            ‘pop‘,
            ‘shift‘,
            ‘unshift‘,
            ‘splice‘,
            ‘sort‘,
            ‘reverse‘
        ];
        /**
        * Intercept mutating methods and emit events
        */
        methodsToPatch.forEach(function (method) {
            // cache original method
            var original = arrayProto[method];
            def(arrayMethods, method, function mutator() {
                var args = [], len = arguments.length;
                while (len--) args[len] = arguments[len];

                var result = original.apply(this, args);
                var ob = this.__ob__;
                var inserted;
                switch (method) {
                    case ‘push‘:
                    case ‘unshift‘:
                        inserted = args;
                        break
                    case ‘splice‘:
                        inserted = args.slice(2);
                        break
                }
                if (inserted) { ob.observeArray(inserted); }
                // notify change
                ob.dep.notify(); //调用该数组下的 __ob__.dep 详细可见class Observer的constructor里的注释
                return result
            });
        });

上面代码准备了一个arrayMethods的对象,它继承自Array.prototype,并且对methodsToPatch里面的方法进行了改写,后面我们会把arrayMethods这个对象挂到"data里面"每个数组下,让该数组调用数组原生方法,比如[].push其实调用的是arrayMethods里面被改写的方法,从而在该数组改变时获取到该数组的更新。
下面开始挂载arrayMethods对象,在挂载我之前我们看到有一个this.__ob__属性,这里的this指向要观测的数组。这个__ob__就是前面的observe对象,并且每个observe下面还有一个dep对象。下面我们来理清楚这层关系。

class Observer{
    constructor (value){
        this.value = value;

        //下面两行代码虽然很简单,但是我们需要从这里理清楚关系
        //假如 有数据如 {a: [1,2,3], b: 1},  然后调用oberve(vm.a),vm当前vue实例
        //会自动挂载 __ob__ 和 __ob__.dep
        // 那么对数组a进行oberserve的对象就是a.__ob__, 它所对应的dep对象就是 a.__ob__.dep
        //详细使用可以在对数组的方法进行hack的时候 使用到
        def(value, ‘__ob__‘, this);//让被监听的数据都带上一个不可枚举的属性 __ob__ 代表observe对象
        this.dep = new Dep();//首先每个oberserve实例下有一个dep对象
        
        
        //在这里处理数组
        if (Array.isArray(value)){
            //调用数组的hack方法, 让数组也能被监听  arrayMethods
            var arrayKeys = Object.getOwnPropertyNames(arrayMethods);
            for (var i = 0, l = arrayKeys.length; i < l; i++) {
                var key = arrayKeys[i];
                def(value, key, arrayMethods[key]);
            }
        }   
        else{
            //对象 遍历key  添加监听
            this.walk(value);
        }
    }
    //Observer的其他方法
    //...
}

上面代码首先给每个值挂载__ob__属性(不可枚举),然后给每个Obeserve对象挂载Dep对象。然后根据value的类型,如果是数组就会挂载arrayMethods方法。
现在我们来理清数组在哪里依赖收集,在哪里通知更新的。
在对数组hack的方法里面(上上一段代码)有一段ob.dep.notify(); 这里通知更新,所以依赖收集也一定要收集到value.__ob__.dep对象里面,两个dep对象应该是相同的,下面我们来看看依赖收集写在哪里的。

function defineReactive(obj, key, val) {
            const dep = new Dep();
            // 给当前属性的值添加监听
            let childOb = observe(val);
            Object.defineProperty(obj, key, {
                enumerable: true,
                configurable: true,
                get: () => {
                    // 如果Dep类存在target属性,将其添加到dep实例的subs数组中
                    // target指向一个Watcher实例,每个Watcher都是一个订阅者
                    // Watcher实例在实例化过程中,会读取data中的某个属性,从而触发当前get方法
                    if (Dep.target) {
                        dep.depend();
                        if (childOb) {
                            childOb.dep.depend();
                            if (Array.isArray(val)) {
                                dependArray(val);
                            }
                        }
                    }
                    return val;
                },
                set: newVal => {
                    if (val === newVal) return;
                    val = newVal;
                    // 对新值进行监听
                    childOb = observe(newVal);
                    // 通知所有订阅者,数值被改变了
                    dep.notify();
                },
            });
        }
        function dependArray(value) {
            for (var e = (void 0), i = 0, l = value.length; i < l; i++) {
                e = value[i];
                e && e.__ob__ && e.__ob__.dep.depend();
                if (Array.isArray(e)) {
                    dependArray(e);
                }
            }
        }

数组虽然在Object.defineProperty里面set方法无法响应,但是get方法是没有问题的,所以在数组get的时候,判断val如果是array,会调用value.__ob__.dep.depend进行依赖收集。与上面依赖通知使用了同意个dep对象,也就是挂载在自身的__ob__.dep。
写到这里我们就完全实现对数组原生方法的支持了。
下面看一下效果 代码地址:https://gitee.com/cchennlleii/MyTest/blob/master/vueReactive/vue-reactive%E5%AF%B9%E6%95%B0%E7%BB%84%E7%9A%84%E6%94%AF%E6%8C%81.html

4.2测试代码

html部分

<h3>Vue双向绑定</h3>
    <input type="text" id="input">
    <p id="react"></p>
    <h3>Vue数组双向绑定</h3>
    <input type="text" id="arr-input">
    <p id="arr-reat"></p>
    <h3>Vue对nextTick实现</h3>
    <button id="addBtn">加100000次</button>
    <p id="react-tick"></p>
let reactElement = document.querySelector("#react");
    let input = document.getElementById(‘input‘);
    input.addEventListener(‘keyup‘, function (e) {
        VM.a = e.target.value;
    });

    VM.$watch(‘a‘, val => reactElement.innerHTML = val); //监听属性 a 当a发生改变时


    //数组的响应并能实现
    let arrReactElement = document.querySelector("#arr-reat");
    let arrInput = document.getElementById(‘arr-input‘);
    arrInput.addEventListener(‘keyup‘, function (e) {
        VM.arr.push(e.target.value);
        console.log(VM.arr);
    });
    VM.$watch(‘arr‘, val => arrReactElement.innerHTML = val); //监听属性 a 当a发生改变时


    let reactTick = document.querySelector("#react-tick");
    VM.$watch(‘tickData‘, val => {
        console.log(val);
        reactTick.innerHTML = val;
    }); //监听属性 a 当a发生改变时
    document.querySelector(‘#addBtn‘).addEventListener(‘click‘, function () {
        for (let i = 0; i < 100000; i++) {
            VM.tickData = i;
        }
    }, false)

效果:
技术分享图片

5、对nextTick的支持

vue官网对nextTick的解释:
技术分享图片
nextTick如果自己实现就是在下一个envet loop执行,不在本次同步任务中执行。
自己实现一个简单的:

//nextTick的实现
let callbacks = [];
let pending = false;

function nextTick(cb) {
    callbacks.push(cb);
    if (!pending) {
        pending = true;
        setTimeout(flushCallbacks, 0);
    }
}
function flushCallbacks() {
    pending = false;
    const copies = callbacks.slice(0);
    callbacks.length = 0;
    for (let i = 0; i < copies.length; i++) {
        copies[i]();
    }
}

简单理解: 在本次event loop中收集cb(任务),放到下一个event loop去执行。 关于不知道event loop的可以参考这篇文章:https://www.cnblogs.com/chenlei987/p/10479433.html,我总结的很简单。我参考的http://www.ruanyifeng.com/blog/2014/10/event-loop.html。
在理解event loop的同时也需要同时了解 microtask和macrotask的区别。
好了言归正传,在vue的‘data里面‘某个属性发生了改变,并被观测到后,调用了watcher.update,并不会立即调用watcher.run去更新视图,它会经过nextTick之后再更新视图,说起来有点牵强。
还是第四部=步的代码,没有实现对nextTick的优化。
代码:

<h3>Vue双向绑定</h3>
    <input type="text" id="input">
    <p id="react"></p>
    <h3>Vue数组双向绑定</h3>
    <input type="text" id="arr-input">
    <p id="arr-reat"></p>
    <h3>Vue对nextTick实现</h3>
    <button id="addBtn">加1000次</button>
    <p id="react-tick"></p>

let reactTick = document.querySelector("#react-tick");
    VM.$watch(‘tickData‘, val => {
        console.log(val);
        reactTick.innerHTML = val;
    }); //监听属性 a 当a发生改变时
    document.querySelector(‘#addBtn‘).addEventListener(‘click‘, function () {
        for (let i = 0; i < 1000; i++) {
            VM.tickData = i;
        }
    }, false)

效果是这样的:
技术分享图片
现在的效果是VM.tickData加1000次,那么cb(回调)就会调用1000次,这样是非常影响性能的,我们想要的效果是无论VM.tickData在本次event loop加多少次,都不会触发回调,只需要在VM.tickData加完之后,触发一次最终的cb(回调)就ok了。
下面我们就来实现这种优化,代码不多。

//nextTick的实现
            let callbacks = [];
            let pending = false;

            function nextTick(cb) {
                callbacks.push(cb);
                if (!pending) {
                    pending = true;
                    setTimeout(flushCallbacks, 0);
                }
            }
            function flushCallbacks() {
                pending = false;
                const copies = callbacks.slice(0);
                callbacks.length = 0;
                for (let i = 0; i < copies.length; i++) {
                    copies[i]();
                }
            }
            
            let has = {};
            let queue = [];
            let waiting = false;
            function queueWatcher(watcher) {
                const id = watcher.id;
                if (has[id] == null) {
                    has[id] = true;
                    queue.push(watcher);

                    if (!waiting) {
                        waiting = true;
                        nextTick(flushSchedulerQueue);
                    }
                }
            }
            function flushSchedulerQueue() {
                let watcher, id;

                for (index = 0; index < queue.length; index++) {
                    watcher = queue[index];
                    id = watcher.id;
                    has[id] = null;
                    watcher.run();
                }

                waiting = false;
            }

然后更改Watcher里面的update方法,并不直接调用watcher.run,而是经过queueWatcher控制

update() {
    queueWatcher(this);
    // this.run();
}

代码地址:https://gitee.com/cchennlleii/MyTest/blob/master/vueReactive/vue-reactive%E5%AF%B9nextTck%E7%9A%84%E6%94%AF%E6%8C%81.html

6、总结

如果面试官问我关于双向绑定的问题,从这三个方面去回答,Object.definproperty,观察者模式,nextTick,当然,你需要把这三个点联系起来去描述,相信我你把上面的看懂了,联系起来完全没问题的,你是最棒的!

7、本文参考:

https://codepen.io/xiaomuzhu/pen/jxBRgj/
https://www.jianshu.com/p/2df6dcddb0d7

vue的双向绑定

标签:作用范围   flush   订阅者   ask   完美   som   args   mpi   mit   

原文:https://www.cnblogs.com/Leo_wl/p/11071912.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
分享档案
最新文章
最新新闻
教程昨日排行
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号