- A+
所属分类：Web前端
不允许向对象中添加属性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'; // xml 结构复杂，过于麻烦 // 现在主要用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":"u540eu76feu4eba","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>
