How to make Component event design?

Component Event Design

Component Event naming conventions were created to make components similar to components when creating components, creating components for users to use components without recharging them.The basic concept was based on the DOM events in W3C, adding the experience we built.

beforeXXX And XXX Event

Separate two events.

: In some cases, when an event is created, the event must occur after the function has been activated, and in some cases the event must occur before proceeding. For example, Suppose we make a checkbox component. And Checkbox has change event. Change events are events that occur after being changed from [] to [V].Change events usually change the status of the changed state to the server, as shown below.

const checkbox = new CheckBox("#id");
checkbox.on("change", ({type})  => {
	fetch("/change",{
		body: JSON.stringify({type})
	}).then( e => {
		console.log("success");
	});
});

However, if you need to handle the logic of change event after confirming a certain condition before changing from [] to [V], you can handle it in change event as below.

checkbox.on("change", ({type})  => {
	if( condition ){
		fetch("/change",{
			body: JSON.stringify({type})
		}).then( e => {
			console.log("success");
		});
	} else {
		// Logic to change to [V] -> []
	}
});

However, since the change event has already been changed from [] to [V], the logic to be passed back from [V] to []should be added. So change the change event to an event that occurs before the change from[]to[V]. **Then the logic to return is no longer needed ** Of course, unlike the initial logic, you have to think that it has changed since it was before the state changed.

checkbox.on("change", ({type})  => {
	if( condition ){
		type = type == 1 ? 2 : 1; // It has not changed yet and must be changed from 1 to 2.
		fetch("/change",{
			body: JSON.stringify({type})
		}).then( e => {
			console.log("success");
		});
	}
});

Next, I created a FileUpload component. The component has a upload event that occurs when the file is uploaded.

const fileUpload = new FileUpolad("#id");
fileUpload.on("upload", {files}  => {
	notifier(`${getFileCount(files)} file(s) uploaded`);
});

In this way, the change event of the Checkbox and the upload event of the FileUpload are events that occur after the action (upload of the file) ends or before the action finishes (change of the checkbox) I can not tell. So, events that occur before the end of the action so that the user can distinguish between the event that occurred after the action (upload) and the event before the action (change), use before prefix .

The beforeXXX event provided by the egjs component is an event that occurs before the action occurs, and XXX is an event that occurs after the action ends. For example, beforeFlickStart is an event that runs before the flickStart event starts. Flick is an event that occurs when the action flick is over. The general event name is easy to understand if you think it works with the after prefix.

Also, beforeXXX and XXX may exist only on one side of a component, but a beforeXXX event should always be ready to create an XXX event. That is, in the beforeXXX event, we should stop the action with the stop() method.

Both events are synchronous and can be stopped with stop().

beforeXXX occurs by default before the action takes place and XXX occurs after the action. Let's make the example in the more precise way. Checkbox must determine whether to change the condition clause before the action runs. If so, you can do so by using the stop() method as shown below.

const checkbox = new CheckBox("#id");
checkbox.on("beforeChange", ({stop})  => {
	if( !condition ){
		stop();
		// If you do `stop ()`, do not change `Checkbox` to [] -> [V].
		// Since the state has not changed, the change event also does not occur.
	}
});
checkbox.on("change", ({type})  => {
	fetch("/change",{
		body: JSON.stringify({type})
	}).then( e => {
		console.log("success");
	});
});