222

mvvm框架

vue的数据驱动视图是通过mvvm这种框架来实现的.mvvm框架主要包含3个部分:

Model: 数据部分,对应到前端就是javascript对象;

View: 视图部分,对应前端就是dom;

ViewModel: 连接视图与数据的中间件;

数据和视图是不能直接通讯的,需要通过viewModel来实现双方的通讯;当数据变化的时候,viewModel能够监听到这种变化,并及时通知view做出修改;

同样,当页面有事件触发时,viewModel也能够监听到事件,并通知model进行响应.

viewMode相当于一个观察者,监控着双方的动作,并及时通知对方进行相应的操作.

• 如何进行监控?

vue在实例化过程中,遍历传给实例化对象选项中的data,遍历其所有属性并使用object.defineProperty把这些属性全部转为getter,setter.

通俗的讲:

//在普通html模板中使用特殊的语法将dom绑定到底层数据,一旦创建绑定,dom将于数据保持同步,每当修改了数据,dom便相应的更新.
//这样我们应用中的逻辑就是直接修改数据了,不必与dom更新搅在一起,让代码更容易编写,理解与维护.

data中定义的数组,数组里面有对象,假如改变了这个this.数组.对象.属性=值,胡子语法中的值没有改变怎么办;

是因为Object.defineProperty()的来劫持各个属性的getter和setter,但是有一个局限性,监听不到数组的变化,诗词可以用this.$set

js

数据类型 检测方法 数组对象怎么检测

• 检测数组类型的方法

  • instanceof操作符 (检测右边构造函数在不在左边对象的原型链中) 不太推荐

    let arr=[1,2,3]
    console.log(arr instanceof Array)
    

    • 存在问题 : propotype是可以改变的,所以为true并不一定是数组
    • 不能判断对象,因为数组,函数,对象的原型链中都有Object

  • Array.isArray()

    let a = [1,2,3]
    Array.isArray(a);//true
    

    • 有一个限制,是在es5还是6才提出,在此之前不支持此方法,so封装一下

      if (!Array.isArray) {
        Array.isArray = function(arg) {
          return Object.prototype.toString.call(arg) === '[object Array]';
        };
      }
      

  • Object.protype.toString.call()

    let a = [1,2,3]
    Object.prototype.toString.call(a) === '[object Array]';//true
    ​
    //检验是否是函数
    let a = function () {};
    Object.prototype.toString.call(a) === '[object Function]';//true
    //检验是否是数字
    let b = 1;
    Object.prototype.toString.call(a) === '[object Number]';//true
    

闭包

• 什么是闭包?

  • 闭包是一个可以在函数外面访问函数内部变量的函数

• 作用

  • 可以在函数外部访问函数内部的变量

• 语法( 闭包语法不固定,可以大致分为三个流程 )

  • 在函数外部声明闭包函数
  • 在闭包函数中 : 返回你想要访问的局部变量
  • 返回这个闭包函数

• 本质

  • 闭包是函数内部和外部沟通的一座桥梁

• 弊端??

构造函数new关键字的作用

js中所有的对象都是由构造函数创建

构造函数(造对象) ： 如果调用一个函数 使用了 new关键字，这个函数称为构造函数

1.创建空对象
2.this指向这个对象
3.执行构造函数代码(完成对象的赋值)
4.返回这个对象

原型

原型 : 每一个构造函数创建的时候,系统会自动创建一个与之对应的对象,称之为原型对象
原型对象 : 为了解决构造函数中的方法  内存资源浪费 和  全局变量污染

• 只要是构造函数就有prototype属性指向自身对应的原型对象
• 只要是实例对象就有 _ prpto_ 指向构造函数原型

  function Person(name,age){                    
            this.name = name;
            this.age = age;
       };
Person.prototype.sex="man";
var p1=new Person()
console.log(p1);
        
console.log(p1.__proto__ === Person.prototype);//true
        
console.log(p1.sex); // 底层 p1.__proto__.sex
        
console.log(p1.__proto__.sex);

innerHTML和innerTEXT的区别

innertext获取文字

innerhtml获取文字+标签

 <div class="box">
        哈哈哈
        <p>我是</p>
    </div>
    
  var some=document.getElementsByClassName('box')[0]
        console.log(some.innerText);
        console.log(some.innerHTML);