2020年11月21日星期六

年轻人，你搞定对象了吗？-2 -cyy

不允许向对象中添加属性API：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style>  button {   position: absolute;  } </style></head><body> <script>  'use strict'; // 严格模式下有报错提示，非严格模式直接无效  // let obj = {  //  name: 'cyy',  //  age: 18  // };  // Object.preventExtensions(obj); //禁止添加属性  // // obj.sex = 'girl';//会报错  // // 判断对象的属性是否可以被添加或修改  // if (Object.isExtensible(obj)) {  //  obj.sex = 'girl'  // }  // console.log(obj);  let obj = {   name: 'cyy',   age: 18  };  // 判断对象的属性是否可以被添加或修改  if (Object.isExtensible(obj)) {   obj.name = 'cyy2';  }  console.log(obj); </script></body></html>

 

封闭对象的API操作：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style>  button {   position: absolute;  } </style></head><body> <script>  'use strict'; // 严格模式下有报错提示，非严格模式直接无效  let obj = {   name: 'cyy',   age: 18  };  console.log(JSON.stringify(Object.getOwnPropertyDescriptors(obj), null, 2));  Object.seal(obj); //封闭对象  //configurable属性从true变成了false，不能删除和配置属性  console.log(JSON.stringify(Object.getOwnPropertyDescriptors(obj), null, 2));  // 不能添加属性  // obj.sex = 'girl';  // 不能删除属性  // delete obj.name;  //判断对象是否被封闭  console.log(Object.isSealed(obj));  if (!Object.isSealed(obj)) {   delete obj.name;  } </script></body></html>

 

冻结对象API特性：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style>  button {   position: absolute;  } </style></head><body> <script>  'use strict'; // 严格模式下有报错提示，非严格模式直接无效  let obj = {   name: 'cyy',   age: 18  };  console.log(JSON.stringify(Object.getOwnPropertyDescriptors(obj), null, 2));  Object.freeze(obj); //封闭对象  //configurable属性和writable属性从true变成了false，不能删除和配置属性  console.log(JSON.stringify(Object.getOwnPropertyDescriptors(obj), null, 2));  // 不能添加属性  // obj.sex = 'girl';  // 不能修改属性  // obj.name = 'cyy2';  // 不能删除属性  // delete obj.name;  //判断对象是否被冻结  console.log(Object.isFrozen(obj));  if (!Object.isFrozen(obj)) {   obj.name = 'cyy2';  } </script></body></html>

 

VUEJS数据绑定的容器更新：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> </style></head><body> <input type="text" v-model="title"> <input type="text" v-model="title"> <div v-bind="title">这里也会发生更新</div> <hr> <input type="text" v-model="content"> <div v-bind="content">这里也会发生更新</div> <script>  'use strict';  // 构造函数  function View() {   let proxy = new Proxy({}, {    get(obj, property) {    },    set(obj, property, value) {     console.log(obj, property, value);     document.querySelectorAll(`[v-model="${property}"]`).forEach(item => {      item.value = value;     });     document.querySelectorAll(`[v-bind="${property}"]`).forEach(item => {      item.innerHTML = value;     });     return true;    }   });   this.init = function () {    const els = document.querySelectorAll('[v-model]');    els.forEach(item => {     item.addEventListener('keyup', function () {      proxy[this.getAttribute('v-model')] = this.value;     });    });   }  }  new View().init(); </script></body></html>

 

表单验证组件的代理工厂：

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style>  .error {   border: 10px solid red;  } </style></head><body> <input type="text" rule="max:12,min:3" validate> <input type="text" rule="max:3,isNumber" validate> <script>  'use strict';  class Validate {   max(value, len) {    return value.length <= len;   }   min(value, len) {    return value.length >= len;   }   isNumber(value) {    return /^\d+$/.test(value);   }  }  // let v = new Validate();  // console.log(v.max('abc', 4));  // console.log(v.min('abc', 4));  // console.log(v.isNumber('abc'));  // console.log(v.isNumber(22));  // 代理工厂  function ProxyFactory(target) {   return new Proxy(target, {    get(target, key) {     return target[key];    },    set(target, key, el) {     // console.log(target, key, el);     const rule = el.getAttribute('rule');     const validate = new Validate();     let state = rule.split(',').every(rule => {      const info = rule.split(':');      return validate[info[0]](el.value, info[1]);     });     el.classList[state ? 'remove' : 'add']('error');     return true;    }   });  }  const proxy = new ProxyFactory(document.querySelectorAll('[validate]'));  proxy.forEach((item, i) => {   item.addEventListener('keyup', function () {    // console.log(item, i);    proxy[i] = this;   })  }) </script></body></html>

 

JSON数据解决什么问题：

  'use strict';  //   // 现在主要用json  // let data = {  //  name: 'cyy',  //  arr: [  //   1, 2, 3, 4  //  ]  // };  // //js对象转json  // console.log(JSON.stringify(data));  // console.log(JSON.stringify(data, null, 2));  // // json是字符串类型  // console.log(typeof JSON.stringify(data));  let phpJson = `{"name":"\u540e\u76fe\u4eba","url":"hdcms.com"}`;  // json转js对象  let obj = JSON.parse(phpJson);  console.log(obj);  console.log(obj.name); </script>

 

JSON序列化与自定义toJSON：

 <script>  'use strict';  // let data = {  //  name: 'cyy',  //  arr: [  //   1, 2, 3, 4  //  ]  // };  // //stringify字符串化  // // 第二个参数：要保留的字段，设置为null代表全部  // // 第三个参数：tab位  // console.log(JSON.stringify(data, ['name'], 4));  // let arr = [11, 22, 33];  // console.log(JSON.stringify(arr, null, 2));  let data = {   name: 'cyy',   arr: [    1, 2, 3, 4   ],   toJSON() {    return {     name: this.name + "小可爱"    }   }  };  console.log(JSON.stringify(data)); </script>

 

JSON转为JS可操作类型：

 <script>  'use strict';  let data = {   name: 'cyy',   arr: [    1, 2, 3, 4   ]  };  let json = JSON.stringify(data, null, 2);  // let obj = JSON.parse(json);  // console.log(obj);  let obj = JSON.parse(json, (key, value) => {   if (key == 'name') {    value = '我是-' + value;   }   return value;  });  console.log(obj); </script>

 









原文转载：http://www.shaoqun.com/a/492761.html

捷汇：https://www.ikjzd.com/w/419

marks spencer：https://www.ikjzd.com/w/2385

cb体系：https://www.ikjzd.com/w/2063


不允许向对象中添加属性API：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><metaname="viewport"content="wid
zen cart：zen cart
camel：camel
套利软件提供商CEO表示：eBay已采取行动阻止套利交易商的套利行为：套利软件提供商CEO表示：eBay已采取行动阻止套利交易商的套利行为
第一次去香港有什么必到景点？：第一次去香港有什么必到景点？
USPS物流配送延误，包裹丢失？卖家如何冲破物流阻碍：USPS物流配送延误，包裹丢失？卖家如何冲破物流阻碍
时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)

跨境电商资讯：外贸宣传平台有哪些（出口的

现在很多做外贸的人都非常关注 外贸企业怎么推广 ，而现在推广的途径和平台有很多，企业如果都做，成本和时间精力是一个问题，而且并不是所有的推广渠道都是有用的。今天云程网络就来为大家盘点几个有效的外贸推广渠道。 一、海外社交媒体营销 Facebook，领英等海外社交媒体营销在近几年得...

  • 跨境电商资讯：重要信息！法国进口增值税2
    2022年1月1日起，法国进口增值税的管理和征收将由海关总署（DGDDI）移交到法国税务局（DGFIP）管辖。从该日起，法国增值税规则和申报要求有了一些变化。进口增值税的申报和支付将直接整合进增值税申报里，不再需要在海关申报。而这种新的申报方法对所有有义务申报缴纳增值税的纳税人都...
  • Java 排序遇到的神坑，我替你踩了！
    作者：nxlhero 来源：https://blog.51cto.com/nxlhero/2515850 问题描述 一个开发人员写了一段明显有问题的排序代码，大致如下： import java.util.ArrayList;import java.util.Collections...
  • 安克创新入局3D打印机赛道，行业发展前景广阔
    近日，跨境大卖安克创新入局3D打印机赛道，开拓出海新品类，并通过一个月的时间众筹超过600万美元，该消息一出，让众多出海商家对3D打印机赛道的关注又大幅提升。 据悉，安克创新开拓新品类的思路，基本会围绕以下4点：（由博一大叔总结） 1、赛道不太大，否则容易产生护城河高的大公司； ...