Detailed analysis of javascript data proxy and events

Data Brokers and Events

Review of Object.defineProperty method
What is a data broker?
Data Proxy in Vue
Basic use of events
Event modifiers
Keyboard events

Data Brokers and Events

aa09e529d5176fa7494e6d675e36dcbb

The starlight does not disappoint the travelers, and the butterflies come to you with the fragrance of flowers

Review of Object.defineProperty method

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Review of Object.defineproperty method</title>
	</head>
	<body>
		<script type="text/javascript" >
			let number = 18
			let person = {
				name:'Zhang San',
				sex:'male',
			}

			Object.defineProperty(person,'age',{
				// value:18,
				// enumerable:true, //controls whether the property can be enumerated, the default value is false
				// writable:true, //controls whether the property can be modified, the default value is false
				// configurable: true //Controls whether the property can be deleted. The default value is false

				//When someone reads the age property of person, the get function (getter) will be called and the return value is the value of age get(){
					console.log('Someone read the age property')
					return number
				},

				//When someone modifies the age property of person, the setter function will be called and receive the modified value set(value){
					console.log('Someone modified the age property, and the value is', value)
					number = value
				}

			})

			// console.log(Object.keys(person))

			console.log(person)
		</script>
	</body>
</html>

What is a data broker?

Data proxy: Operation (read/write) of attributes in another object through an object proxy

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>What is a data agent?</title>
	</head>
	<body>
		<!-- Data proxy: operation (read/write) of attributes in another object through an object proxy -->
		<script type="text/javascript" >
			let obj = {x:100}
			let obj2 = {y:200}

			Object.defineProperty(obj2,'x',{
				get(){
					return obj.x
				},
				set(value){
					obj.x = value
				}
			})
		</script>
	</body>
</html>

Data Proxy in Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Data Proxy in Vue</title>
		<!-- Import Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1. Data proxy in Vue:
							Use the vm object to proxy the operation (read/write) of the attributes in the data object
				2. Benefits of data proxy in Vue:
							More convenient operation of data in data 3. Basic principle:
							Add all properties in the data object to vm through Object.defineProperty().
							For each property added to the vm, specify a getter/setter.
							Operate (read/write) the corresponding attributes in data inside the getter/setter.
		 -->
		<!-- Prepare a container -->
		<div id="root">
			<h2>School name: {{name}}</h2>
			<h2>School address: {{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'Shang Silicon Valley',
				address:'Hongfu Technology Park'
			}
		})
	</script>
</html>

Basic use of events

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Basic use of events</title>
		<!-- Import Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				Basic use of events:
							1. Use v-on:xxx or @xxx to bind the event, where xxx is the event name;
							2. The event callback needs to be configured in the methods object and will eventually be on the vm;
							3. Do not use arrow functions for functions configured in methods! Otherwise this is not vm;
							4. The functions configured in methods are all functions managed by Vue, and this points to vm or component instance object;
							5. @click="demo" and @click="demo($event)" have the same effect, but the latter can pass parameters;
		-->
		<!-- Prepare a container -->
		<div id="root">
			<h2>Welcome to {{name}} study</h2>
			<!-- <button v-on:click="showInfo">Click me for info</button> -->
			<button @click="showInfo1">Click me for information 1 (no parameters)</button>
			<button @click="showInfo2($event,66)">Click me for prompt information 2 (parameter passing)</button>
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.

		const vm = new Vue({
			el:'#root',
			data:{
				name:'Shang Silicon Valley',
			},
			methods:{
				showInfo1(event){
					// console.log(event.target.innerText)
					// console.log(this) //This is vm
					alert('Hello, classmate!')
				},
				showInfo2(event,number){
					console.log(event,number)
					// console.log(event.target.innerText)
					// console.log(this) //This is vm
					alert('Hello classmate!!')
				}
			}
		})
	</script>
</html>

Event modifiers

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Event Modifiers</title>
		<!-- Import Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			*{
				margin-top: 20px;
			}
			.demo1{
				height: 50px;
				background-color: skyblue;
			}
			.box1{
				padding: 5px;
				background-color: skyblue;
			}
			.box2{
				padding: 5px;
				background-color: orange;
			}
			.list{
				width: 200px;
				height: 200px;
				background-color: peru;
				overflow:auto;
			}
			li{
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 
				Event modifiers in Vue:
						1.prevent: prevent default events (commonly used);
						2.stop: stop event bubbling (commonly used);
						3.once: the event is triggered only once (commonly used);
						4.capture: Use event capture mode;
						5.self: The event is triggered only when event.target is the element currently being operated;
						6. passive: The default behavior of the event is executed immediately, without waiting for the event callback to be executed;
		-->
		<!-- Prepare a container -->
		<div id="root">
			<h2>Welcome to {{name}} study</h2>
			<!-- Prevent default events (commonly used) -->
			<a href="http://www.atguigu.com" rel="external nofollow" rel="external nofollow" @click.prevent="showInfo">Click me for information</a>

			<!-- Prevent event bubbling (commonly used) -->
			<div class="demo1" @click="showInfo">
				<button @click.stop="showInfo">Click me for information</button>
				<!-- Modifiers can be written consecutively-->
				<!-- <a href="http://www.atguigu.com" rel="external nofollow" rel="external nofollow" @click.prevent.stop="showInfo">Click me for information</a> -->
			</div>

			<!-- Event is triggered only once (commonly used) -->
			<button @click.once="showInfo">Click me for information</button>

			<!-- Use event capture mode -->
			<div class="box1" @click.capture="showMsg(1)">
				div1
				<div class="box2" @click="showMsg(2)">
					div2
				</div>
			</div>

			<!-- The event is triggered only when event.target is the element currently being operated; -->
			<div class="demo1" @click.self="showInfo">
				<button @click="showInfo">Click me for info</button>
			</div>

			<!-- The default behavior of the event is executed immediately, without waiting for the event callback to complete; -->
			<ul @wheel.passive="demo" class="list">
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ul>

		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.

		new Vue({
			el:'#root',
			data:{
				name:'Shang Silicon Valley'
			},
			methods:{
				showInfo(e){
					alert('Hello, classmate!')
					// console.log(e.target)
				},
				showMsg(msg){
					console.log(msg)
				},
				demo(){
					for (let i = 0; i < 100000; i++) {
						console.log('#')
					}
					console.log('Tired')
				}
			}
		})
	</script>
</html>

Keyboard events

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Keyboard Events</title>
		<!-- Import Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
				1. Commonly used button aliases in Vue:
							Enter => enter
							Delete => delete (captures "delete" and "backspace" keys)
							Exit => esc
							Space => space
							Line break => tab (special, must be used with keydown)
							Up => up
							down => down
							left => left
							Right => right

				2. For buttons that Vue does not provide aliases, you can use the original key value of the button to bind, but be careful to convert it to kebab-case (short dash naming)

				3. System modifier keys (special usage): ctrl, alt, shift, meta
							(1) Used with keyup: Press the modifier key, then press other keys, and then release the other keys, the event will be triggered.
							(2) Used with keydown: trigger events normally.

				4. You can also use keyCode to specify specific keys (not recommended)

				5.Vue.config.keyCodes.Custom key name = key code, you can customize the key alias -->
		<!-- Prepare a container -->
		<div id="root">
			<h2>Welcome to {{name}} study</h2>
			<input type="text" placeholder="Press Enter to prompt input" @keydown.huiche="showInfo">
		</div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //Prevent Vue from generating production tips at startup.
		Vue.config.keyCodes.huiche = 13 // defines an alias key new Vue({
			el:'#root',
			data:{
				name:'Shang Silicon Valley'
			},
			methods: {
				showInfo(e){
					// console.log(e.key,e.keyCode)
					console.log(e.target.value)
				}
			},
		})
	</script>
</html>

This is the end of this article about the detailed analysis of javascript data proxy and events. For more relevant javascript data proxy and event content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:

Reflection and Proxy in Front-end JavaScript
An article to understand the use of proxies in JavaScript
JavaScript design pattern learning proxy pattern
JavaScript Design Patterns – Proxy Pattern Principles and Usage Example Analysis
JavaScript adds event listeners to event delegation in batches. Detailed process
In-depth understanding of JavaScript event execution mechanism
A brief analysis of event bubbling and event capture in js
JavaScript event loop case study

<<: Pure CSS to achieve a single div regular polygon transformation

>>: How to ensure the overall user experience