不允許向物件中添加屬性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 = https://www.cnblogs.com/chenyingying0/p/{ // 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 = https://www.cnblogs.com/chenyingying0/p/{
// 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/226369.html
標籤：JavaScript
上一篇：關于學習html的一點總結