Avalon compatibility with IE6 is actually not as difficult as you think, mainly due to the difference in knowledge.
On the premise that I have mastered various scripting languages such as js, ruby, python, vbscript, etc., some ideas that are unthinkable are actually not a big deal to me.
Taking a step back, it is not always the case that the various versions of avalon implement two-way binding.
avalon1.4.* and 1.5.* use dynamic collection of dependencies, which is learned from knockout.
js statement for the = sign, there are two usages
assignment statement, obj.a = 1
Value statement, var b = obj.a
What I want to do is to hijack this equal sign, let it perform dependency collection when it takes a value, and update the view when it is assigned. In other languages, settter and getter are available, but in the front-end, only IE8 can only use set and get statements, and Object.defineProperty can only be used for element nodes. Only in IE9 and other high-version W3C browsers can this Object.defineProperty allow me to use it boldly. Fortunately, W3C browsers already have __defineSetter__, defineGetter__ available.
The problem is IE6-8, I use VBScript a little bit. No more than 100 lines of code using VBScript. Of course this may be difficult for people who don't know VBScript. So erudition is good, can expand your thinking and approach.
Others should be compatible with IE's processing, use attachEvent and detachEvent to compare event bindings, use propertychange event to monitor the value change of elements, and IE's NodeList cannot be converted with Array.property.slice.call, these are all ready-made The solution is not difficult to be compatible at all, and it does not exceed 500 lines of code in total.
In avalon1.5, I also learned to use static analysis for dependency collection like angular. By avalon1.6, this technology has been studied almost. In avalon2, due to the extensive use of virtual DOM technology and pure static analysis dependencies, vm is more lightweight, The DOM is rarely manipulated in the source code.
As long as the DOM is not manipulated very much, the hack for IE is rarely used. On the contrary, for performance, avalon uses a large number of new APIs. The proportion of these HTML5 APIs is unmatched by other MVVM frameworks.
So don't always stare at Avalon's compatibility with IE6, even if it is compatible with IE6, avalon1.4.7.2's 5893 lines of code are smaller than the small and beautiful Vue's 9820 lines of code, angular's 30248 lines of code, and only focus on the view's react. 2W lines of code (in addition, you usually have to add 1W5K lines of JSX converter, redux can be used in production environment), emberjs 5W8K lines of code, much more streamlined!
Beijing's broken reminders, hutong skewers, talking ruffians, don't come near the virgin bitch
15 people upvoted this answer
Passing
by, I just said this when I was bullshitting with the leader,
and I wrote a rough example
. I can answer it without thinking.
Mainly you can use Object.defineProperty to do it,
but for the old version of IE
, you can use VBS to do it
(this is what Zhengmei said, I haven't seen or used his avalon...)
Basically, it's old It is estimated that the front end is about to enter the soil, and this is understood.
The principle is very simple
. The member objects in VBS's Class can get and set
the variable value of VBS. In the old IE, it can also communicate with JScript,
so it should be built with VBS and instantiated to return the result,
and IE's execScript function can be dynamically based on the language type. Running the code
can dynamically build VBS code execution and get the return result. The
core principle is roughly as follows:
var code = '' +
'Class MyObject\n' +
' Private px \n' +
' Sub Class_Initialize()\n' +
' px = 1\n' +
' End Sub\n' +
' Public Property Get x\n' +
' alert("Get Value is:" & px)\n' +
' End Property\n' +
' Public Property Let x(nx)\n' +
' alert("Set Value is:" & nx)\n' +
' px = nx\n' +
' End Property\n' +
'End Class\n' +
'Dim obj\n' +
'Set obj = New MyObject';
execScript(code, 'vbscript');
obj.x;
obj.x = 2;
At this time, the obj object member x of JS
can have an alert hook call when set get.
Of course,
angular doesn't do the same thing as avalon because
they don't need to be compatible with old IE at all.
After all, old antiques such as IE6 in foreign markets have long been buried.