Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how to use ES6's class to write a two-way binding related knowledge, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

The final effect is as follows:

Constructor (constructor)

Construct a TinyVue object that contains the basic el,data,methods

Class TinyVue {constructor ({el, data, methods}) {this.$data = data this.$el = document.querySelector (el) this.$methods = methods / / initialize this._compile () this._updater () this._watcher ()}}

Compiler (compile)

Used to parse the click event @ click of the v-model and element bound to the input box and drop-down box.

First create a function to load the event:

/ / el is the element tagName,attr is the element attribute (el, attr, callBack) {this.$el.querySelectorAll (el) .forEach (I = > {if (i.hasAttribute (attr)) {let key = i.getAttribute (attr) callBack (I, key)})}

Load input box event

This._initEvents ('input, textarea',' v key modelling, (I, key) = > {i.addEventListener ('input', () = > {Object.assign (this.$data, {[key]: i.value})}))

Load selection box event

This._initEvents ('select',' v key modelling, (I, key) = > {i.addEventListener ('change', () = > Object.assign (this.$data, {[key]: i.options.selectedIndex] .value})

Load click event

Click events correspond to events in methods

This._initEvents ('*','@ click', (I, key) = > {i.addEventListener ('click', () = > this.$ methods [key] .bind (this.$data) ()}))

View updater (updater)

Similarly, create a public function to deal with views in different elements, including the selection value of value,select for input and textarea, and innerHTML for div.

_ initView (el, attr, callBack) {this.$el.querySelectorAll (el, attr, callBack) .forEach (I = > {if (i.hasAttribute (attr)) {let key = i.getAttribute (attr), data = this.$data [key] callBack (I, key, data)}})}

Update input box view

This._initView ('input, textarea',' v key modelling, (I, key, data) = > {i.value = data})

Update selection box view

This._initView ('select',' v selected', true modelling, (I, key, data) = > {i.querySelectorAll ('option') .forEach (v = > {if (v.value = = data) v.setAttribute (' selected', true) else v.removeAttribute ('selected')}))

Update innerHTML

The implementation method here is a bit low, only thinking of regular replacement {{text}}.

Let regExpInner = /\ {* ([\ w\ -] +) *\}} / gthis.$el.querySelectorAll ("*") .forEach (I = > {let replaceList = I [XSS _ clean] .match (regExpInner) | (i.hasAttribute ('vueID') & & i.getAttribute (' vueID') .match (regExpInner)) if (replaceList) {if (! i.hasAttribute ('vueID')) {i.setAttribute (' vueID') I [XSS _ clean])} I [XSS _ clean] = i.getAttribute ('vueID') replaceList.forEach (v = > {let key = v.slice (2, v.length-2) I [XSS _ clean] = I [XSS _ clean]. Replace (v, this.$data [key])}})

Listener (watcher)

Update the view after the data changes

Plus what you enter is: {{text1}} + {{text2}} + {{text3}} Volvo Saab Volvo Saab you have chosen: {{select}} let app = new TinyVue ({el:'# app', data: {text1: 123, text2: 456, text3: 'text box', select: 'saab'}, methods: {add () {this.text1 + + this.text2 + +})

All TinyVue codes

Class TinyVue {constructor ({el, data, methods}) {this.$data = data this.$el = document.querySelector (el) this.$methods = methods this._compile () this._updater () this._watcher ()} _ watcher (data = this.$data) {let that = this Object.keys (data) .forEach (I = > {let value = data [I] Object.defineProperty (data, I, {enumerable: true, configurable: true, get: function () {return value) }, set: function (newVal) {if (value! = = newVal) {value = newVal That._updater ()})} _ initEvents (el, attr, callBack) {this.$el.querySelectorAll (el) .forEach (I = > {if (i.hasAttribute (attr)) {let key = i.getAttribute (attr) callBack (I, key)}})} _ initView (el, attr, callBack) {this.$el.querySelectorAll (el, attr) CallBack) .forEach (I = > {if (i.hasAttribute (attr)) {let key = i.getAttribute (attr), data = this.$data [key] callBack (I, key, data)})} _ updater () {this._initView ('input, textarea',' v key models, (I, key, data) = > {i.value = data}) this._initView ('select', 'v house models, (I, key) Data) = > {i.querySelectorAll ('option') .forEach (v = > {if (v.value = = data) v.setAttribute (' selected') True) else v.removeAttribute ('selected')}) let regExpInner = /\ {* ([\ w\ -] +) *\}} / g this.$el.querySelectorAll ("*") .forEach (I = > {let replaceList = I [XSS _ clean] .match (regExpInner) | | (i.hasAttribute (' vueID') & & i.getAttribute ('vueID') .match (regExpInner)) if (replaceList) {if (! i.hasAttribute) ('vueID')) {i.setAttribute (' vueID' I [XSS _ clean])} I [XSS _ clean] = i.getAttribute ('vueID') replaceList.forEach (v = > {let key = v.slice (2, v.length-2) I [XSS _ clean] = I [XSS _ clean]. Replace (v, this.$data [key])}})} _ compile () {this._initEvents (' *','@ click', (I, key)) = > {i.addEventListener ('click') () = > this.$ methods [key] .bind (this.$data) ()}) this._initEvents ('input, textarea',' v key modelling, (I, key) = > {i.addEventListener ('input', () = > {Object.assign (this.$data, {[key]: i.value})}) this._initEvents (' select', 'v key modelling, (I, key) = > {i.addEventListener ('change') () = > Object.assign (this.$data, {[key]: i.options [i.options.selectedIndex] .value})})}} this is all the content of the article "how to use ES6's class to write a two-way binding" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.