ES6新特性(7)之Proxy代理/Model模块/import/export

本文涉及的产品
文档翻译,文档翻译 1千页
图片翻译,图片翻译 100张
文本翻译,文本翻译 100万字符
简介: ES6新特性(7)之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,那么未来可能只需要做很少的改动。


作者:zhulin1028

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章
|
5月前
|
JavaScript 前端开发
|
4月前
es6 proxy的作用和用法
es6 proxy的作用和用法
21 5
|
5月前
|
前端开发
ES6 如何动态加载 import
ES6 如何动态加载 import
140 1
|
5月前
es6中proxy如何使用
es6中proxy如何使用
55 0
|
编译器
Spartacus 4.3.x 版本导入 Cart 到 App Module 构造函数的错误消息
Spartacus 4.3.x 版本导入 Cart 到 App Module 构造函数的错误消息
es6如何使用padStart()和padEnd()方法
es6如何使用padStart()和padEnd()方法
83 0
【vue2小知识】实现store中modules模块的封装与自动导入
store仓库中分模块时的需要每次导入index的问题
【vue2小知识】实现store中modules模块的封装与自动导入
|
JavaScript
【ES6】模块化语法(默认、按需导入import导出export的操作)
ES6模块化语法(默认、按需导入导出的操作)
【ES6】模块化语法(默认、按需导入import导出export的操作)
|
JavaScript 前端开发 开发者
ES6模块化与导出(export)导入(import)的用法
1.ES6模块化的介绍 在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。 但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化 标准,例如: ⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化 ⚫ CommonJS 适用于服务器端的 Javascript 模块化 太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!
252 1
ES6模块化与导出(export)导入(import)的用法
|
JavaScript
export ,export default 和 import 区别 以及用法
export ,export default 和 import 区别 以及用法