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

本文涉及的产品
文本翻译,文本翻译 100万字符
图片翻译,图片翻译 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

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

相关文章
|
8月前
|
JavaScript 前端开发
|
8月前
|
存储 API
使用Webpack的module.hot API来定义模块的热替换
使用Webpack的`module.hot` API实现模块热替换,简单示例展示如何在`myModule`变化时执行回调。`module.hot.accept`接收模块路径和回调函数,当模块或其依赖变更时触发回调,用于执行更新逻辑。可通过`module.hot.data`保存和恢复状态以实现热替换时保持应用程序的状态。
|
7月前
es6 proxy的作用和用法
es6 proxy的作用和用法
37 5
|
8月前
|
存储 前端开发 索引
【Web 前端】ES6中,Set和Map的区别 ?
【5月更文挑战第1天】【Web 前端】ES6中,Set和Map的区别 ?
|
8月前
|
前端开发
ES6 如何动态加载 import
ES6 如何动态加载 import
203 1
|
存储 JSON UED
Flask框架之RESTful--参数验证--add_argument方法参数详解
参数验证的重要性,Flask-RESTful 参数验证方法,add_argument方法参数详解
【vue2小知识】实现store中modules模块的封装与自动导入
store仓库中分模块时的需要每次导入index的问题
【vue2小知识】实现store中modules模块的封装与自动导入
|
JavaScript 前端开发 开发者
ES6模块化与导出(export)导入(import)的用法
1.ES6模块化的介绍 在 ES6 模块化规范诞生之前,JavaScript 社区已经尝试并提出了 AMD、CMD、CommonJS 等模块化规范。 但是,这些由社区提出的模块化标准,还是存在一定的差异性与局限性、并不是浏览器与服务器通用的模块化 标准,例如: ⚫ AMD 和 CMD 适用于浏览器端的 Javascript 模块化 ⚫ CommonJS 适用于服务器端的 Javascript 模块化 太多的模块化规范给开发者增加了学习的难度与开发的成本。因此,大一统的 ES6 模块化规范诞生了!
274 1
ES6模块化与导出(export)导入(import)的用法
|
存储 Java Unix
Python中的模块、包、import module1,mudule2、from…import、from … import *、as、定位模块、模块中的__all__和__name__、模块的注意点
在Python中用关键字import来引入某个模块,比如要引用模块math,就可以在文件最开始的地方用import math来引入想一想:为什么必须加上模块名调用呢?因为可能存在这样一种情况:在多个模块中含有相同名称的函数,此时如果只是通过函数名来调用,解释器无法知道到底要调用哪个函数。所以如果像上述这样引入模块的时候,调用函数必须加上模块名通过这种方式引入的时候,调用函数时只能给出函数名,不能给出模块名,但是当两个模块中含有相同名称函数的时候,后面一次引入会覆盖前一次引入。也就是说假如模块A中有函数fun
237 1
Python中的模块、包、import module1,mudule2、from…import、from … import *、as、定位模块、模块中的__all__和__name__、模块的注意点
|
缓存 JavaScript 网络协议
Node.js在Buffers对象在数据报的表现交互在Modules的实战心得
Node.js在Buffers对象在数据报的表现交互在Modules的实战心得
Node.js在Buffers对象在数据报的表现交互在Modules的实战心得

热门文章

最新文章

相关实验场景

更多
下一篇
开通oss服务