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

本文涉及的产品
语种识别,语种识别 100万字符
文档翻译,文档翻译 1千页
图片翻译,图片翻译 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

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

相关文章
|
Dubbo Java 应用服务中间件
深入了解Spring Cloud Alibaba Dubbo
在现代分布式系统开发中,构建高性能、可伸缩性和弹性的微服务架构变得越来越重要。Spring Cloud Alibaba Dubbo(简称Dubbo)是一个开源的分布式服务框架,可以帮助开发者构建强大的微服务架构,具备负载均衡、服务治理、远程调用等强大功能。本文将深入介绍Spring Cloud Alibaba Dubbo,帮助你理解它的核心概念、工作原理以及如何在你的项目中使用它。
|
缓存 JSON 前端开发
超详细讲解:http强缓存和协商缓存
超详细讲解:http强缓存和协商缓存
|
Android开发
【错误记录】Android Studio 编译报错 ( Installed Build Tools revision 31.0.0 is corrupted )
【错误记录】Android Studio 编译报错 ( Installed Build Tools revision 31.0.0 is corrupted )
1304 0
【错误记录】Android Studio 编译报错 ( Installed Build Tools revision 31.0.0 is corrupted )
|
小程序 JavaScript 前端开发
uni app 入门
uni app 入门
364 2
|
人工智能 自然语言处理 前端开发
探索未来——前端开发中的人工智能技术应用
在前端开发领域,人工智能技术的应用正逐渐成为趋势。本文将介绍人工智能在前端开发中的几个关键应用领域,并探讨其对未来前端开发的影响。
|
消息中间件 存储 关系型数据库
实时计算 Flink版产品使用问题之有哪些方法可以实现整库同步
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。
|
NoSQL 开发工具 数据库
开发与运维测试问题之应用启动报 Can not load this fake sdk class 的异常如何解决
开发与运维测试问题之应用启动报 Can not load this fake sdk class 的异常如何解决
247 0
|
存储 传感器 数据采集
嵌入式系统:原理、应用与代码实践
嵌入式系统:原理、应用与代码实践
610 1
|
自然语言处理 数据可视化 算法
Python主题建模LDA模型、t-SNE 降维聚类、词云可视化文本挖掘新闻组数据集1
Python主题建模LDA模型、t-SNE 降维聚类、词云可视化文本挖掘新闻组数据集
|
关系型数据库 MySQL
mysql 5.5.62版本建表语句报错: Index column size too large. The maximum column size is 767 bytes
mysql 5.5.62版本建表语句报错: Index column size too large. The maximum column size is 767 bytes
695 0

热门文章

最新文章