彻底明白vue双向绑定底层原理(源码分析)

彻底明白vue双向绑定底层原理(源码分析)vue是一个mvvm框架,双向绑定是vue的一个核心功能,所谓双向绑定就是当试图发生改变的时候传递给VM(ViewModel),让数据得到更新,当数据发生改变的时候传给VM(ViewModel),使得视图发生变化!概念都知道,但是vue怎么做到的呢?看下面的一张图(图是搬运别人的)可能你现在看不明白,observer是什么东西,watchter,Dep又是什么东西?没有关系,接下来只要你看完我这篇文章,保证给你整的明明白白!看上图,从左边开始newMVVM其实就是我newVue(),我们一

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

vue是一个mvvm框架,双向绑定是vue的一个核心功能,所谓双向绑定就是当试图发生改变的时候传递给VM(ViewModel ),让数据得到更新,当数据发生改变的时候传给VM(ViewModel ),使得视图发生变化!概念都知道,但是vue怎么做到的呢?看下面的一张图(图是搬运别人的)
在这里插入图片描述
可能你现在看不明白,observer是什么东西,watchter,Dep又是什么东西? 没有关系,接下来只要你看完我这篇文章,保证给你整的明明白白!看上图,从左边开始 new MVVM 其实就是我new Vue(),我们一般vue代码都这样写

new Vue({ 
   
 el: '#app',
 data: { 
   
     title: 'hello',
     text: 'vue'
})

一. 发布者-订阅者模式

再看图,observer(观察者),劫持监听所有属性,什么意思呢?vue是通过这种模式进行数据劫持的,这种模式是发布者-订阅者模式

  1. 订阅者:就像我们生活中在淘宝京东买东西一样,我们是消费者就相当这种模式中的订阅者一样
  2. 发布者:你想买的书没货了,你和卖家说等你有货了你通知我,我再来买,那么卖家就是这种模式中的发布者,当然不只你一个人想买这本书,所以一个发布者可以给多个订阅者发布信息

知道了这种模式,它们是怎么通过数据劫持的,这里要引出Object.defineProperty(),了解这个之前先来看下对象中存在的属性,看个例子!

var obj = { 
   }
obj.a = 10;
console.log(Object.getOwnPropertyDescriptor(obj, "a"));
//{value: 10, writable: true, enumerable: true, configurable: true}

Object.defineProperty(obj, "b", { 
   
    set: function () { 
   

    },
    get: function () { 
   

    }
})
console.log(Object.getOwnPropertyDescriptor(obj, "b"));
//{enumerable: false, configurable: false, get: ƒ, set: ƒ}

对象里目前存在的属性描述符有两种主要形式:数据描述符和存取描述符,数据描述符是一个拥有可写或不可写值的属性。存取描述符是由一对 getter-setter 函数功能来描述的属性。描述符必须是两种形式之一;不能同时是两者。 所以我们这里要用到存取描述符,这里只是说个大概,不懂的可以点击看详细介绍

var obj = { 
   }
Object.defineProperty(obj, "b", { 
   
    set: function (value) { 
   
        console.log('触发了set方法,我让它变成20');
        this.value = 20;
    },
    get: function () { 
   
        console.log('触发了get方法');
        return this.value;
    }
})
obj.b = 10; //'触发了set方法,我让它变成20'
console.log(obj.b)//'触发了get方法' 20

看到这个例子是不是有点启发,当我给obj.b赋值的时候,这只是数据发生改变,是不是可以通知视图我的值要改变了,然后调用方法去更新视图!b就是之前所说的订阅者,还是看之前的代码

new Vue({ 
   
 el: '#app',
 data: { 
   
     title: 'hello',
     text: 'vue'
})

很明 data里面的属性,它是个对象,不像上面一样是个单独的属性,那么下面来封装一下吧!

//创建一个发布者类
function Observer(data) { 
   
  this.data = data;
  this.walk(data);//对data里面的数据遍历加上发布者模式
}
Observer.prototype = { 
   
  walk: function (data) { 
   
      var self = this;
      Object.keys(data).forEach(function (key) { 
   
          self.defineReactive(data, key, data[key]);
      });
  },
  defineReactive: function (data, key, val) { 
   
      //判断下是不是对象,如果是的继续遍历
      observe(val);
      Object.defineProperty(data, key, { 
   
          enumerable: true,
          configurable: true,
          get: function () { 
   
           
          },
          set: function (newVal) { 
   
              if (newVal === val) { 
   
                  return;
              }
              val = newVal;
              //通知视图更新
          }
      });
  }
};

function observe(value) { 
   
  if (!value || typeof value !== 'object') { 
   
      return;
  }
  return new Observer(value);
};

上面的代码比较简单,先创建一个发布者类Observer,对data对象里面数据进行遍历全部加上发布者模式有没有发现一个问题,看下面例子!

new Vue({ 
   
    el: '#app',
    data: { 
   
        title: 'hello',
        text: 'vue'
    },
    methods: { 
   
        clickFn: function () { 
   
            this.title = 'hello!!!';
        }
    }
});

title数据是在data对象里面定义,但是为什么下面操作数据的时候不是 this.data.title?而是直接this.title是不是很疑惑,到底做了啥操作?那么我们再来看个例子!

var vue = { 
   
    data: { 
   
        b: 10
    }
};

Object.defineProperty(vue, "b", { 
   
    set: function (value) { 
   
        this.data["b"] = value;
    },
    get: function () { 
   
        return this.data["b"]
    }
})
Object.defineProperty(vue.data, "b", { 
   
    set: function (value) { 
   
        this.value = value;
    },
    get: function (value) { 
   
        return this.value
    }
})
vue.b = 20;
console.log(vue.data.b); //20

其实访问到vue.b就访问到了vue.data.b,所以需要定义一个vue类做个代理,看下面代码

function Vue (options) { 
   
    var self = this;
    this.data = options.data;
    this.methods = options.methods;

    Object.keys(this.data).forEach(function(key) { 
   
        //代理发布者模式
        self.proxyKeys(key);
    });
    observe(this.data);
}

Vue.prototype = { 
   
    proxyKeys: function (key) { 
   
        var self = this;
        Object.defineProperty(this, key, { 
   
            enumerable: false,
            configurable: true,
            get: function getter () { 
   
                return self.data[key];
            },
            set: function setter (newVal) { 
   
                self.data[key] = newVal;
            }
        });
    }
};

function observe(value) { 
   
  if (!value || typeof value !== 'object') { 
   
      return;
  }
  return new Observer(value);
};

function Observer(data) { 
   
  this.data = data;
  this.walk(data);//对data里面的数据遍历加上发布者模式
};

Observer.prototype = { 
   
  walk: function (data) { 
   
      var self = this;
      Object.keys(data).forEach(function (key) { 
   
          self.defineReactive(data, key, data[key]);
      });
  },
  defineReactive: function (data, key, val) { 
   
      //判断下是不是对象,如果是的继续遍历
      observe(val);
      Object.defineProperty(data, key, { 
   
          enumerable: true,
          configurable: true,
          get: function () { 
   
           
          },
          set: function (newVal) { 
   
              if (newVal === val) { 
   
                  return;
              }
              val = newVal;
              //通知视图更新
          }
      });
  }
};

好了说完了observe,回到最上面那个图

在这里插入图片描述
再往右看,observe的set方法可以通知变化给了dep的东西,dep又通知变化给watcher,上面说了那么久连html都没有写

<body>
    <div id="app">
        <h1>{
  
  {title}}</h1>
        <h2>{
  
  {title}}</h2>
        <p>{
  
  {text}}</p>
    </div>
</body>

{
{title}}是一个watcher对象,{
{text}}也是个watcher对象,上面html有2个{
{title}},所以需要用Dep包裹起来(这个过程叫做添加订阅者),当数据发生了变化可以通知Dep(遍历)更新视图,可以这么理解视图上的每个watcher是个订阅者,每个watcher都对应一个Dep(watcher集合),当数据发生改变直接通知Dep,Dep会遍历所有watcher更新视图

二. compile

compile阶段做了什么?

  1. 解析模板指令,并替换模板数据,初始化视图
  2. 将模板指令对应的节点绑定对应的更新函数

为了解析模板,首先要获得dom元素,然后对含有dom元素上含有指令的节点进行处理,这个过程对dom元素的操作比较繁琐,所以采用了虚拟DOM的创建

//以前这么写
var ul = document.querySelector('ul');
for (var i = 0; i < 10; i++) { 
   
    var li = document.createElement("li");
    li.innerHTML = "我是第" + i + "个li";
    ul.appendChild(li);
};

//虚拟DOM这么写
var ul = document.querySelector('ul');
var fragment = document.createDocumentFragment();
for (var i = 0; i < 10; i++) { 
   
    var li = document.createElement("li");
    li.innerHTML = "我是第" + i + "个li";
    fragment.appendChild(li);
};
ul.appendChild(fragment);

类似这么频繁的操作dom元素都会引起重新渲染,使得浏览器发生了很多次渲染,效率是比较低的。这是我们提倡通过减少页面的渲染来提高DOM操作的效率的原因,利用创建DocumentFragment可以优化这个问题,因为文档片段存在于内存中,并不在DOM中,所以将子元素插入到文档片段中时不会引起页面回流(对元素位置和几何上的计算),因此使用DocumentFragment可以起到性能优化的作用,所以vue也是利用了这点废话不多说,看下vue是怎么操作的?先把vue类和compile关联起来

function Vue (options) { 
   
    var self = this;
    this.data = options.data;
    this.methods = options.methods;

    Object.keys(this.data).forEach(function(key) { 
   
        //代理发布者模式
        self.proxyKeys(key);
    });
    observe(this.data);
    //关联Compile类
    new Compile(options.el, this);
}

接下来创建Compile类,这里代码比较多,我尽量把注释写详细点

function Compile(el, vm) { 
   
    this.vm = vm;
     //找到el元素
    this.el = document.querySelector(el);
    this.fragment = null;
    //初始化Compile
    this.init();
}

Compile.prototype = { 
   
    init: function () { 
   
        if (this.el) { 
   
            this.fragment = this.nodeToFragment(this.el);
            //这里才是Compile的关键
            this.compileElement(this.fragment);
           //一次性加到el元素里面,这里只需要重新渲染一次即可,提高浏览器性能
            this.el.appendChild(this.fragment);
        } else { 
   
            console.log('Dom元素不存在');
        }
    },
    nodeToFragment: function (el) { 
   
      //创建文档片段
        var fragment = document.createDocumentFragment();
         //把el元素下所有的子都放进文档片段中
        var child = el.firstChild;
        while (child) { 
   
            // 将Dom元素移入fragment中
            fragment.appendChild(child);
            child = el.firstChild
        }
        return fragment;
    },
    
    compileElement: function (el) { 
   
     //获取到文档片当的所有的子节点
        var childNodes = el.childNodes;
        var self = this;
         //遍历所有子节点
        [].slice.call(childNodes).forEach(function(node) { 
   
         // 找到匹配{ 
   {}}的
            var reg = /\{\{(.*)\}\}/;
            var text = node.textContent;
        //判断是不是元素节点
            if (self.isElementNode(node)) { 
     
             //compile元素指令方法
                self.compile(node);
                  //判断是不是文本节点 并且配到{ 
   { }}
            } else if (self.isTextNode(node) && reg.test(text)) { 
   
               //compile文本方法
                self.compileText(node, reg.exec(text)[1]);
            }
            //如果还有子节点就递归下去
            if (node.childNodes && node.childNodes.length) { 
   
                self.compileElement(node);
            }
        });
    },
    compile: function(node) { 
   
     //获取元素的属性 例如 v-model,v-on:click
        var nodeAttrs = node.attributes;
        var self = this;
         //遍历属性
        Array.prototype.forEach.call(nodeAttrs, function(attr) { 
   
            var attrName = attr.name;
              //判断是不是个指令
            if (self.isDirective(attrName)) { 
   
                var exp = attr.value;
                var dir = attrName.substring(2);
                //事件指令处理函数
                if (self.isEventDirective(dir)) { 
     
                //事件指令处理函数
                    self.compileEvent(node, self.vm, exp, dir);
                } else { 
     
                 //v-model指令处理函数
                    self.compileModel(node, self.vm, exp, dir);
                }
                 //解析完之后html上移除v-model,v-on等属性
                node.removeAttribute(attrName);
            }
        });
    },
    compileText: function(node, exp) { 
   
        var self = this;
         //获取值
        var initText = this.vm[exp];
         //初始化的时候更新值
        this.updateText(node, initText);
        //初始化wather
        new Watcher(this.vm, exp, function (value) { 
   
           //更新文本节点
            self.updateText(node, value);
        });
    },
    compileEvent: function (node, vm, exp, dir) { 
   
        //获取事件名
        var eventType = dir.split(':')[1];
        var cb = vm.methods && vm.methods[exp];
        if (eventType && cb) { 
   
            //执行回调事件
            node.addEventListener(eventType, cb.bind(vm), false);
        }
    },
    compileModel: function (node, vm, exp, dir) { 
   
        var self = this;
        //获取值
        var val = this.vm[exp];
        //初始化的时候更新值
        this.modelUpdater(node, val);
        new Watcher(this.vm, exp, function (value) { 
   
              //更新元素文本值
            self.modelUpdater(node, value);
        });
        //这里是视图的数据更改通过事件来获取改变的值
        node.addEventListener('input', function(e) { 
   
            var newValue = e.target.value;
            if (val === newValue) { 
   
                return;
            }
            self.vm[exp] = newValue;
            val = newValue;
        });
    },
    //更新文本,文本节点的是取文本节点textContent
    updateText: function (node, value) { 
   
        node.textContent = typeof value == 'undefined' ? '' : value;
    },
    //因为是v-model 所以一般都是设置value值 例如input.vlaue
    modelUpdater: function(node, value, oldValue) { 
   
        node.value = typeof value == 'undefined' ? '' : value;
    },
     //判断是不是个v-model指令
    isDirective: function(attr) { 
   
        return attr.indexOf('v-') == 0;
    },
    //判断是不是个v-on指令
    isEventDirective: function(dir) { 
   
        return dir.indexOf('on:') === 0;
    },
     //判断是不是元素节点 ,nodeType为1
    isElementNode: function (node) { 
   
        return node.nodeType == 1;
    },
    //判断是不是文本节点,nodeType为3
    isTextNode: function(node) { 
   
        return node.nodeType == 3;
    }
}

接下来是完成watcher的实现

function Watcher(vm, exp, cb) { 
   
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get();  // 将自己添加到订阅器的操作
}

Watcher.prototype = { 
   
    //数据改变更新视图方法
    update: function() { 
   
        this.run();
    },
    run: function() { 
   
        var value = this.vm.data[this.exp];
        var oldVal = this.value;
        if (value !== oldVal) { 
   
            this.value = value;
            //新值和旧值不一样,执行watcher里面的回调函数更新视图
            this.cb.call(this.vm, value, oldVal);
        }
    },
    get: function() { 
   
        //初始化为了加入订阅时候缓存自己,加入订阅之后,删除缓存
        Dep.target = this;  // 缓存自己
        var value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
        Dep.target = null;  // 删除缓存
        return value;
    }
};

所以 watcher初始化的时候 Observer应该把watcher加入订阅,如果有数据更改时候,应该通知Dep,Dep再去通知wacher完成更新视图,Observer代码修改如下(注意注释的地方)

function Observer(data) { 
   
    this.data = data;
    this.walk(data);
}
Observer.prototype = { 
   
    walk: function(data) { 
   
        var self = this;
        Object.keys(data).forEach(function(key) { 
   
            self.defineReactive(data, key, data[key]);
        });
    },
    defineReactive: function(data, key, val) { 
   
        //创建Dep类来包裹watcher
        var dep = new Dep();
        observe(val);
        Object.defineProperty(data, key, { 
   
            enumerable: true,
            configurable: true,
            get: function() { 
   
                //第一次初始化watcher,添加到Dep里面
                if (Dep.target) { 
   
                    dep.addSub(Dep.target);
                }
                return val;
            },
            set: function(newVal) { 
   
                if (newVal === val) { 
   
                    return;
                }
                val = newVal;
                //值发生改变,通知watcher更新视图
                dep.notify();
            }
        });
    }
};

function observe(value, vm) { 
   
    if (!value || typeof value !== 'object') { 
   
        return;
    }
    return new Observer(value);
};

function Dep () { 
   
    this.subs = [];
}
Dep.prototype = { 
   
    addSub: function(sub) { 
   
        this.subs.push(sub);
    },
    notify: function() { 
   
        this.subs.forEach(function(sub) { 
   
            sub.update();
        });
    }
};
Dep.target = null;

最终的代码:

<body>
    <div id="app">
        <h1>{
  
  {title}}</h1>
        <h1>{
  
  {text}}</h1>
        <input v-model="val">
        <h1>{
  
  {val}}</h1>
        <button v-on:click="clickFn">点击</button>
    </div>
</body>
<script src="js/observer.js"></script>
<script src="js/watcher.js"></script>
<script src="js/compile.js"></script>
<script src="js/vue.js"></script>
 <script type="text/javascript"> new Vue({ 
      el: '#app', data: { 
      title: 'hello', text: 'vue', val: "双向绑定" }, methods: { 
      clickFn: function () { 
      this.title = 'vue双向绑定原理'; } } }); </script>
//vue.js
function Vue (options) { 
   
    var self = this;
    this.data = options.data;
    this.methods = options.methods;

    Object.keys(this.data).forEach(function(key) { 
   
        self.proxyKeys(key);
    });

    observe(this.data);
    new Compile(options.el, this);
}

Vue.prototype = { 
   
    proxyKeys: function (key) { 
   
        var self = this;
        Object.defineProperty(this, key, { 
   
            enumerable: false,
            configurable: true,
            get: function getter () { 
   
                return self.data[key];
            },
            set: function setter (newVal) { 
   
                self.data[key] = newVal;
            }
        });
    }
}


//observer.js
 function Observer(data) { 
   
    this.data = data;
    this.walk(data);
}
Observer.prototype = { 
   
    walk: function(data) { 
   
        var self = this;
        Object.keys(data).forEach(function(key) { 
   
            self.defineReactive(data, key, data[key]);
        });
    },
    defineReactive: function(data, key, val) { 
   
        var dep = new Dep();
        observe(val);
        Object.defineProperty(data, key, { 
   
            enumerable: true,
            configurable: true,
            get: function() { 
   
                if (Dep.target) { 
   
                    dep.addSub(Dep.target);
                }
                return val;
            },
            set: function(newVal) { 
   
                if (newVal === val) { 
   
                    return;
                }
                val = newVal;
                dep.notify();
            }
        });
    }
};

function observe(value, vm) { 
   
    if (!value || typeof value !== 'object') { 
   
        return;
    }
    return new Observer(value);
};

function Dep () { 
   
    this.subs = [];
}
Dep.prototype = { 
   
    addSub: function(sub) { 
   
        this.subs.push(sub);
    },
    notify: function() { 
   
        this.subs.forEach(function(sub) { 
   
            sub.update();
        });
    }
};
Dep.target = null;




//compile.js
function Compile(el, vm) { 
   
    this.vm = vm;
    this.el = document.querySelector(el);
    this.fragment = null;
    this.init();
}

Compile.prototype = { 
   
    init: function () { 
   
        if (this.el) { 
   
            this.fragment = this.nodeToFragment(this.el);
            this.compileElement(this.fragment);
            this.el.appendChild(this.fragment);
        } else { 
   
            console.log('Dom元素不存在');
        }
    },
    nodeToFragment: function (el) { 
   
        var fragment = document.createDocumentFragment();
        var child = el.firstChild;
        while (child) { 
   
            // 将Dom元素移入fragment中
            fragment.appendChild(child);
            child = el.firstChild
        }
        return fragment;
    },
    
    compileElement: function (el) { 
   
        var childNodes = el.childNodes;
        var self = this;
        [].slice.call(childNodes).forEach(function(node) { 
   
            var reg = /\{\{(.*)\}\}/;
            var text = node.textContent;

            if (self.isElementNode(node)) { 
     
                self.compile(node);
            } else if (self.isTextNode(node) && reg.test(text)) { 
   
                self.compileText(node, reg.exec(text)[1]);
            }

            if (node.childNodes && node.childNodes.length) { 
   
                self.compileElement(node);
            }
        });
    },
    compile: function(node) { 
   
        var nodeAttrs = node.attributes;
        var self = this;
        Array.prototype.forEach.call(nodeAttrs, function(attr) { 
   
            var attrName = attr.name;
            if (self.isDirective(attrName)) { 
   
                var exp = attr.value;
                var dir = attrName.substring(2);
                if (self.isEventDirective(dir)) { 
     // 事件指令
                    self.compileEvent(node, self.vm, exp, dir);
                } else { 
     // v-model 指令
                    self.compileModel(node, self.vm, exp, dir);
                }
                node.removeAttribute(attrName);
            }
        });
    },
    compileText: function(node, exp) { 
   
        var self = this;
        var initText = this.vm[exp];
        this.updateText(node, initText);
        new Watcher(this.vm, exp, function (value) { 
   
            self.updateText(node, value);
        });
    },
    compileEvent: function (node, vm, exp, dir) { 
   
        var eventType = dir.split(':')[1];
        var cb = vm.methods && vm.methods[exp];

        if (eventType && cb) { 
   
            node.addEventListener(eventType, cb.bind(vm), false);
        }
    },
    compileModel: function (node, vm, exp, dir) { 
   
        var self = this;
        var val = this.vm[exp];
        this.modelUpdater(node, val);
        new Watcher(this.vm, exp, function (value) { 
   
            self.modelUpdater(node, value);
        });

        node.addEventListener('input', function(e) { 
   
            var newValue = e.target.value;
            if (val === newValue) { 
   
                return;
            }
            self.vm[exp] = newValue;
            val = newValue;
        });
    },
    updateText: function (node, value) { 
   
        node.textContent = typeof value == 'undefined' ? '' : value;
    },
    modelUpdater: function(node, value, oldValue) { 
   
        node.value = typeof value == 'undefined' ? '' : value;
    },
    isDirective: function(attr) { 
   
        return attr.indexOf('v-') == 0;
    },
    isEventDirective: function(dir) { 
   
        return dir.indexOf('on:') === 0;
    },
    isElementNode: function (node) { 
   
        return node.nodeType == 1;
    },
    isTextNode: function(node) { 
   
        return node.nodeType == 3;
    }
}



//watcher.js
function Watcher(vm, exp, cb) { 
   
    this.cb = cb;
    this.vm = vm;
    this.exp = exp;
    this.value = this.get();  // 将自己添加到订阅器的操作
}

Watcher.prototype = { 
   
    update: function() { 
   
        this.run();
    },
    run: function() { 
   
        var value = this.vm.data[this.exp];
        var oldVal = this.value;
        if (value !== oldVal) { 
   
            this.value = value;
            this.cb.call(this.vm, value, oldVal);
        }
    },
    get: function() { 
   
        Dep.target = this;  // 缓存自己
        var value = this.vm.data[this.exp]  // 强制执行监听器里的get函数
        Dep.target = null;  // 释放自己
        return value;
    }
};

好累啊!终于写完了,我还是用简短的话描述下原理吧!

compile阶段解析html模板,第一次解析的时候会更新视图(数据的值直接更新到视图中) ,并初始化了watcher对象,初始化的时候做了啥,把watcher强制加入Dep里面,Dep你可以理解是一个装watcher的集合,每个watcher里面有个update方法可以更新视图,当ViewModel数据改变的时候会触发set方法,比较新的值和旧值是否相等,如果不相等,通知Dep,然后Dep会遍历每个watcher对象并执行watcher的update方法更新视图,反之,当视图发生改变(input输入),可以通过监听事件来获取视图的值,然后比较比较新的值和旧值是否相等,如果不相等,把新值赋值给ViewModel,然后ViewModel数据改变的时候又会触发set方法,重复上面的步骤更新视图

参考文献Vue2.0双向绑定原理

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193932.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • iPhone 各屏幕尺寸及解析[通俗易懂]

    一.iPhone各屏幕尺寸表手机型号屏幕物理尺寸屏幕密度开发尺寸像素尺寸倍图4/4s3.5inch326ppi320*480pt640*960px@2×5/5S/5c/SE4.0inch326ppi320*568pt640*1136px@2×6/6S/7/84.7inch326ppi375*667pt75…

  • php开源桌面会议系统,开源视频会议系统 OpenMeetings「建议收藏」

    php开源桌面会议系统,开源视频会议系统 OpenMeetings「建议收藏」OpenMeetings是一个开源的多语言跨平台可定制视频会议和协作系统,基于ApacheLicense2开源协议。它支持音频、视频,支持共享左面,文件协作处理,它还包含一个白板,通过白板可以导入各种格式的图片。它基于OpenLaszlo的新流媒体格式和开源的Flash服务器Red5(基于Java的开源流媒体服务器)。OpenMeetings视频会议具有如下特点:1、基于P2P技术,服务器压…

  • 身为三本的我就是凭借这些前端面试题拿到百度京东offer的,前端面试题2021及答案「建议收藏」

    点进来之后你的噩梦就要来了,接下来你要面对上百道面试题,那么,如果你——是个小白菜:推荐使用2~3周的时间来消化接下来的面试题,遇到不会的专业名词请立刻去搜;文章中只是简答,如果想要详细了解的话还需要你自觉去搜索如果你是个大神:好叭先给您拜个早年,大哥大嫂过年好。请温柔点黑我。顺便,如果有错误的地方请各位一定要指出,免得误导更多人。接下来的题我会根据重点程度使用⭐来标记,⭐越多标明越重点,满星是5颗星ok,你准备好了吗?咱们开始吧!JS数据类型面试官:JavaSc

  • sstream简析

    sstream简析3月20日关于C++中的sstream类C++程序把输入和输出看作字符流,输入时,程序从输入流中提取字节,输出时,程序把字节插入到输出流中。对于输入输出流既可以来自标准输入输出设备,也可以来自文件,甚至可以来自String对象,三者分别属于iostreamfamily、fstreamfamily、sstreamfamily。对于iostream类,就是我们通常所说的标

  • 类,对象,方法,变量

    类,对象,方法,变量

  • 万能网站_我还收集了

    万能网站_我还收集了1、http://www.zitanglj.com/index.htm2、http://www.nkhqlncdj.com/

    2022年10月18日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号