目录

（一）Proxy代理

（二）Model模块/import/export

---

（一）Proxy代理

谷歌,QQ支持，360，搜狗不支持   

//-----------------例1-------------------   

let obj = {   

  webName: "源库网",   

  url:"www.yuanku.com"   

}   

let p = new Proxy(obj, {   

  get: function (target, key) {   

    return target[key]   

  },   

  set: function (target, key, value) {   

    target[key]=value   

  }   

});   

p.webName='yuankuwang';   

console.log(p.webName);   

   

//---------例2---------------------------   

   

Proxy实际上重载（overload）了点运算符   

var proxy = new Proxy(target, handler);   

   

class Register{  

    //name='aaa';  

    constructor(){  

      this.prefix='';

      this.name='';  

      console.log('构造完成');  

    }  

  }  

  let an = new Register();  

   let p = new Proxy(an, {                //an或obj  

      get: function (target, key) {  

        return target[key];  

      },  

      set: function (target, key, value) {

         if(key=='id'>>value==15){

            target['prefix']='此人是逃犯';

         }  

         target[key]=value;  

         if(key=='name'){

           value= target[key]+','+target['prefix'];

         }

         return Reflect.set(target, key, value);  

      }  

    });  

   p.id=1;

   p.name='张三';

   console.log(p.name);

   p.id=15;

   p.name='李四';

   console.log(p.name);

//-----------------------------------------------   

Proxy对象方法列表:   

方法            描述   

handler.apply()    拦截Proxy实例作为函数调用的操作。   

handler.construct()    拦截Proxy实例作为构造函数调用的操作。   

handler.defineProperty()    拦截Object.defineProperty操作。   

handler.deleteProperty()    拦截delete删除属性操作。   

handler.enumerate()    此方法将被废弃，不建议使用。   

handler.get()    拦截属性的读取操作。   

handler.getOwnPropertyDescriptor()    拦截Object.getOwnPropertyDescriptor()操作。   

handler.getPrototypeOf()    拦截获取原型对象操作。   

handler.has()    拦截属性检索操作。   

handler.isExtensible()    拦截Object.isExtensible()操作。   

handler.ownKeys()    拦截Object.getOwnPropertyNames()操作。   

handler.preventExtensions()    拦截Object.preventExtensions()操作。   

handler.set()    拦截属性赋值操作。   

handler.setPrototypeOf()    拦截Object.setPrototypeOf()操作。   

Proxy.revocable()    创建一个可取消的Proxy实例。

（二）Model模块/import/export

所谓的模块就是一个独立的文件，文件与文件之间是相互封闭的。

//--------modeltest.js------------

export var webName = "源库网";

export let url = "www.yuanku.com";

export const year = 2016;

// export {

//   webName as web,

//   url as webUrl,

//   year as webYear

// }



export function add(a,b){

    return a+b;

}



export default class User{

    constructor(){

        console.log('user被创建了');

    }

}

//-----------Hello.vue----------------------

//import User,{webName, url, year,add} from '../models/modeltest.js';

//import User,* as uu from '../models/modeltest.js';

//var mt = require('../models/modeltest.js');

import Student,* as uu from '../models/modelChild.js';



console.log('webName:'+uu.webName);

console.log('add:'+uu.add(9,12));

var user = new uu.User();  //继承中如果有default前缀,降无法访问

var student = new Student();

// console.log(mt.webName);

// console.log(mt.url);

// console.log(mt.age);

// console.log(mt.add(3,4));



//------------modelChild.js(继承)---------------------

export {webName, url, year,add,User} from './modeltest.js'; //User类的default必须去掉，否则无法访问



export default class Student{

    constructor(){

        console.log('Student被创建了');

    }

}

------------------require和import差别-------------------------

require相当于module.exports的传送门，module.exports后面的内容是什么，require的结果就是什么，对象、数字、字符串、函数……再把require的结果赋值给某个变量，相当于把require和module.exports进行平行空间的位置重叠。

而且require理论上可以运用在代码的任何地方，甚至不需要赋值给某个变量之后再使用，比如：
 

require('./a')(); // a模块是一个函数，立即执行a模块函数

var data = require('./a').data; // a模块导出的是一个对象

var a = require('./a')[0]; // a模块导出的是一个数组

在使用时，完全可以忽略模块化这个概念来使用require，仅仅把它当做一个node内置的全局函数，它的参数甚至可以是表达式：

require(process.cwd() + '/a');

但是import则不同，它是编译时的（require是运行时的），它必须放在文件开头，而且使用格式也是确定的，不容置疑。它不会将整个模块运行后赋值给某个变量，而是只选择import的接口进行编译，这样在性能上比require好很多。

从理解上，require是赋值过程，import是解构过程

ES7很快也会发布，js引擎们会尽快实现ES6标准的规定，如果一个引擎连标准都实现不了，就会被淘汰， ES6是迟早的事 。如果你现在仍然在代码中部署require，那么等到ES6被引擎支持时，你必须升级你的代码，而如果现在开始部署import，那么未来可能只需要做很少的改动。