脚本宝典收集整理的这篇文章主要介绍了

高性能迷你React框架anu在低版本IE的实践

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>理想是丰满的,现实是骨感的,react早期的版本虽然号称支持IE8,但是页面总会不自觉切换到奇异模式下,导致报错。因此必须让react连IE6,7都支持,这才是最安全。但<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>本身并不支持IE6,7,因此anu使有用武之地了。</p> <p><a href="https://github.com/RubyLouvre/anu" rel="nofollow noreferrer" target="_blank">https://github.com/RubyLouvre...</a></p> <p>但光是anu不行,兼容IE是一个系统性的工程,涉及到打包压缩,各种polyfill垫片。</p> <p>首先说一下anu如何支持低版本浏览器。anu本身没有用到太高级的<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>,像<a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>.def<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>e<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>erty, <a href="http://www.js-code.com/tag/Object" title="Object" target="_blank">Object</a>.seal, <a href="http://www.js-code.com/tag/Object" title="浏览关于“Object”的文章" target="_blank" class="tag_link">Object</a>.freeze, Proxy, Weak<a href="http://www.js-code.com/tag/map" title="Map" target="_blank">Map</a>等无法 模拟的新<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>,anu一个也没有用,而<a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>, <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a>, <a href="http://www.js-code.com/tag/%e7%ae%ad%e5%a4%b4%e5%87%bd%e6%95%b0" title="箭头函数" target="_blank">箭头函数</a>,<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>模块,通过<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>编译就可以搞定了。</p> <p>而框架用到的一些<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a>,<a href="http://www.js-code.com/tag/es6" title="es6" target="_blank">es6</a>方法,我已经提供了一个叫polyfill的文件为大家准备好,大家也可以使用bable.polyfill实现兼容。</p> <ol> <li> <p><a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a>.<a href="http://www.js-code.com/tag/prototype" title="prototype" target="_blank">prototype</a>.<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>Each</p> </li> <li> <p>Function.<a href="http://www.js-code.com/tag/prototype" title="prototype" target="_blank">prototype</a>.b<a href="http://www.js-code.com/tag/in" title="in" target="_blank">in</a>d</p> </li> <li> <p>JSON</p> </li> <li> <p>w<a href="http://www.js-code.com/tag/in" title="浏览关于“in”的文章" target="_blank" class="tag_link">in</a><a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>w.console</p> </li> <li> <p>Object.keys</p> </li> <li> <p>Object.is</p> </li> <li> <p>Object.<a href="http://www.js-code.com/tag/assign" title="assign" target="_blank">assign</a></p> </li> <li> <p><a href="http://www.js-code.com/tag/Array" title="Array" target="_blank">Array</a>.is<a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a></p> </li> </ol> <p><a href="https://github.com/RubyLouvre/anu/blob/master/dist/polyfill.js" rel="nofollow noreferrer" target="_blank">https://github.com/RubyLouvre...</a></p> <p>剩下就是<strong>事件系统</strong>的兼容。<a href="http://www.js-code.com/tag/react" title="React" target="_blank">React</a>为了实现一个全能的事件系统,3万行的react-<a href="http://www.js-code.com/tag/do" title="do" target="_blank">do</a>m,有一半是在搞事件的。事件系统之所以这么难写,是因为<a href="http://www.js-code.com/tag/react" title="浏览关于“React”的文章" target="_blank" class="tag_link">React</a>要实现整个标准事件流,从捕获阶段到target阶段再到冒泡阶段。如果能获取事件源对象到<a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>这一路经过的所有元素,就能实现事件流了。但是在IE下,只有冒泡阶段,并且许多重要的表单事件不支持冒泡到<a href="http://www.js-code.com/tag/document" title="document" target="_blank">document</a>。为了事件冒泡,自<a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a>时代起,前端高手们已经摸索出一套方案了。使用另一个相似的事件来伪装不冒泡事件,冒泡到<a href="http://www.js-code.com/tag/document" title="浏览关于“document”的文章" target="_blank" class="tag_link">document</a>后,然后变成原来的事件触发对应的事件。</p> <p>比如说IE下,使用<a href="http://www.js-code.com/tag/focus" title="focus" target="_blank">focus</a>in冒充<a href="http://www.js-code.com/tag/focus" title="focus" target="_blank">focus</a>, <a href="http://www.js-code.com/tag/focus" title="浏览关于“focus”的文章" target="_blank" class="tag_link">focus</a>out冒充<a href="http://www.js-code.com/tag/blur" title="blur" target="_blank">blur</a>。chrome下,则通过addEventListener的第三个参加为<a href="http://www.js-code.com/tag/true" title="true" target="_blank">true</a>,强制让focus, <a href="http://www.js-code.com/tag/blur" title="blur" target="_blank">blur</a>被<a href="http://www.js-code.com/tag/do" title="浏览关于“do”的文章" target="_blank" class="tag_link">do</a>cument捕获到。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="//Ie6-9<br /> <a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>(msie < 9){ eventHooks.onFocus = function(dom) { addEvent(dom, &quot;focusin&quot;, function(e) { addEvent.fire(dom, &quot;focus&quot;); }); }; eventHooks.onBlur = function(dom) { addEvent(dom, &quot;blurout&quot;, function(e) { addEvent.fire(dom, &quot;blur&quot;); }); }; }else{ eventHooks.onFocus = function(dom) { addEvent( dom, &quot;focus&quot;, function(e) { addEvent.fire(dom, &quot;focus&quot;); }, true ); }; eventHooks.onBlur = function(dom) { addEvent( dom, &quot;blur&quot;, function(e) { addEvent.fire(dom, &quot;blur&quot;); }, true ); }; } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-comment">//Ie6-9</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/if" title="浏览关于“if”的文章" target="_blank" class="tag_link">if</a></span>(msie &lt; <span class="hljs-number">9</span>){ <a href="http://www.js-code.com/tag/event" title="浏览关于“event”的文章" target="_blank" class="tag_link">event</a>Hooks.onFocus = <span class="hljs-function"><span class="hljs-keyword"><a href="http://www.js-code.com/tag/function" title="浏览关于“function”的文章" target="_blank" class="tag_link">function</a></span>(<span class="hljs-params">dom</span>) </span>{ addEvent(dom, <span class="hljs-string">"focusin"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ addEvent.fire(dom, <span class="hljs-string">"focus"</span>); }); }; eventHooks.onBlur = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">dom</span>) </span>{ addEvent(dom, <span class="hljs-string">"<a href="http://www.js-code.com/tag/blur" title="浏览关于“blur”的文章" target="_blank" class="tag_link">blur</a>out"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ addEvent.fire(dom, <span class="hljs-string">"blur"</span>); }); }; }<span class="hljs-keyword"><a href="http://www.js-code.com/tag/else" title="浏览关于“else”的文章" target="_blank" class="tag_link">else</a></span>{ eventHooks.onFocus = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">dom</span>) </span>{ addEvent( dom, <span class="hljs-string">"focus"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ addEvent.fire(dom, <span class="hljs-string">"focus"</span>); }, <span class="hljs-literal"><a href="http://www.js-code.com/tag/true" title="浏览关于“true”的文章" target="_blank" class="tag_link">true</a></span> ); }; eventHooks.onBlur = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">dom</span>) </span>{ addEvent( dom, <span class="hljs-string">"blur"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ addEvent.fire(dom, <span class="hljs-string">"blur"</span>); }, <span class="hljs-literal">true</span> ); }; } </code></pre> <p>低版本的oninput, onchange事件是一个麻烦,它们最多冒泡到<a href="http://www.js-code.com/tag/form" title="form" target="_blank">form</a>元素上。并且IE也没有oninput,只有一个相似的onpropertychange事件。IE9,IE10的oninput其实也有许多BUG,但大家要求放低些,我们也不用理会IE9,IE10的oninput事件。IE6-8的oninput事件,我们是直接在元素上绑定onpropertychange事件,然后触发一个datasetchanged 事件冒泡到document上,并且这个datasetchanged事件对象带有一个__type__属性,用来说明它原先冒充的事件。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="function fixIEInput(dom, name) { addEvent(dom, &quot;propertychange&quot;, function(e) { if (e.propertyName === &quot;value&quot;) { addEvent.fire(dom, &quot;input&quot;); } }); } addEvent.fire = function dispatchIEEvent(dom, type, obj) { try { var hackEvent = document.createEventObject(); if (obj) { Object.assign(hackEvent, obj); } hackEvent.__type__ = type; //IE6-8触发事件必须保证在DOM树中,否则报&quot;SCRIPT16389: 未指明的错误&quot; dom.fireEvent(&quot;ondatasetchanged&quot;, hackEvent); } catch (e) {} }; function dispatchEvent(e) {//document上绑定的事件派发器 var __type__ = e.__type__ || e.type; e = new SyntheticEvent(e); var target = e.target; var paths = [];//获取整个冒泡的路径 do { var events = target.__events; if (events) { paths.push({ dom: target, props: events }); } } while ((target = target.parentNode) &amp;&amp; target.nodeType === 1); // ...略 } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs javascript"><code><span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fixIEInput</span>(<span class="hljs-params">dom, <a href="http://www.js-code.com/tag/name" title="浏览关于“name”的文章" target="_blank" class="tag_link">name</a></span>) </span>{ addEvent(dom, <span class="hljs-string">"propertychange"</span>, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">e</span>) </span>{ <span class="hljs-keyword">if</span> (e.propertyName === <span class="hljs-string">"value"</span>) { addEvent.fire(dom, <span class="hljs-string">"input"</span>); } }); } addEvent.fire = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">dispatchIEEvent</span>(<span class="hljs-params">dom, type, obj</span>) </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/try" title="浏览关于“try”的文章" target="_blank" class="tag_link">try</a></span> { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/var" title="浏览关于“var”的文章" target="_blank" class="tag_link">var</a></span> hackEvent = <span class="hljs-built_in">document</span>.createEventObject(); <span class="hljs-keyword">if</span> (obj) { <span class="hljs-built_in">Object</span>.<a href="http://www.js-code.com/tag/assign" title="浏览关于“assign”的文章" target="_blank" class="tag_link">assign</a>(hackEvent, obj); } hackEvent.__type__ = type; <span class="hljs-comment">//IE6-8触发事件必须保证在<a href="http://www.js-code.com/tag/dom" title="浏览关于“DOM”的文章" target="_blank" class="tag_link">DOM</a>树中,否则报"SCRIPT16389: 未指明的错误"</span> dom.fireEvent(<span class="hljs-string">"ondatasetchanged"</span>, hackEvent); } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/catch" title="浏览关于“catch”的文章" target="_blank" class="tag_link">catch</a></span> (e) {} }; <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">dispatchEvent</span>(<span class="hljs-params">e</span>) </span>{<span class="hljs-comment">//document上绑定的事件派发器</span> <span class="hljs-keyword">var</span> __type__ = e.__type__ || e.type; e = <span class="hljs-keyword"><a href="http://www.js-code.com/tag/new" title="浏览关于“new”的文章" target="_blank" class="tag_link">new</a></span> SyntheticEvent(e); <span class="hljs-keyword">var</span> target = e.target; <span class="hljs-keyword">var</span> paths = [];<span class="hljs-comment">//获取整个冒泡的路径</span> <span class="hljs-keyword">do</span> { <span class="hljs-keyword">var</span> events = target.__events; <span class="hljs-keyword">if</span> (events) { paths.push({ <span class="hljs-attr">dom</span>: target, <span class="hljs-attr">props</span>: events }); } } <span class="hljs-keyword"><a href="http://www.js-code.com/tag/while" title="浏览关于“while”的文章" target="_blank" class="tag_link">while</a></span> ((target = target.<a href="http://www.js-code.com/tag/parent" title="浏览关于“parent”的文章" target="_blank" class="tag_link">parent</a>Node) &amp;&amp; target.<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>Type === <span class="hljs-number">1</span>); <span class="hljs-comment">// ...略</span> } </code></pre> <p>addEvent.fire这个方法在不同浏览器的实现是不一样的,这里显示的IE6-8的版本,IE9及标准浏览器是使用document.createEvent, initEvent, dispatchEvent等<a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a>来创建事件对象与触发事件。在IE6-8中,则需要用document.createEventObject创建事件对象,fireEvent来触发事件。</p> <p>ondatasetchanged事件是IE一个非常偏门的事件,因为IE的 fireEvent只能触发它官网上列举的几十个事件,不能触发自定义事件。而ondatasetchanged事件在IE9,chrome, firefox等浏览器中是当成一个自定义事件来对待,但那时它是使用elem.dispatchEvent来触发了。ondatasetchanged是一个能冒泡的事件,只是充作<strong>信使</strong>,将我们要修改的属性带到document上。</p> <p>此是其一,onchange事件也要通过ondatasetchanged也冒充,因为IE下它也不能冒泡到document。onchange事件在IE还是有许多BUG(或叫差异点)。<a href="http://www.js-code.com/tag/checkbox" title="checkbox" target="_blank">checkbox</a>, <a href="http://www.js-code.com/tag/radio" title="radio" target="_blank">radio</a>的onchange事件必须在失去焦点时才触发,因此我们在内部用<a href="http://www.js-code.com/tag/onclick" title="onclick" target="_blank">onclick</a>来触发,而<a href="http://www.js-code.com/tag/select" title="select" target="_blank">select</a>元素在单选时候下,用户选中了某个<a href="http://www.js-code.com/tag/option" title="option" target="_blank">option</a>, <a href="http://www.js-code.com/tag/select" title="select" target="_blank">select</a>.value会变成<a href="http://www.js-code.com/tag/option" title="option" target="_blank">option</a>的value值,但在IE6-8下它竟然不会发生改变。最绝的是<a href="http://www.js-code.com/tag/select" title="浏览关于“select”的文章" target="_blank" class="tag_link">select</a>元素也不让你修改value值,后来我奠出修改<a href="http://www.js-code.com/tag/html" title="HTML" target="_blank">HTML</a>SelectElement原型链的大招搞定它。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" try { Object.defineProperty(HTMLSelectElement.prototype, &quot;value&quot;, { set: function(v) { this._fixIEValue = v; }, get: function() { return this._fixIEValue; } }); } catch (e) {} function fixIEChange(dom, name) { //IE6-8, radio, checkbox的点击事件必须在失去焦点时才触发 var eventType = dom.type === &quot;radio&quot; || dom.type === &quot;checkbox&quot; ? &quot;click&quot; : &quot;change&quot;; addEvent(dom, eventType, function(e) { if (dom.type === &quot;select-one&quot;) { var idx = dom.selectedIndex, option, attr; if (idx > -1) {<br /> //IE 下select.value不会改变<br /> option = dom.options[idx];<br /> attr = option.attributes.value;<br /> dom.value = attr &amp;&amp; attr.specified ? option.value : option.text;<br /> }<br /> }<br /> addEvent.fire(dom, &quot;change&quot;);<br /> });<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs actionscript"><code> <span class="hljs-keyword">try</span> { Object.define<a href="http://www.js-code.com/tag/prop" title="浏览关于“Prop”的文章" target="_blank" class="tag_link">Prop</a>erty(<a href="http://www.js-code.com/tag/html" title="浏览关于“HTML”的文章" target="_blank" class="tag_link">HTML</a>SelectElement.<a href="http://www.js-code.com/tag/prototype" title="浏览关于“prototype”的文章" target="_blank" class="tag_link">prototype</a>, <span class="hljs-string">"value"</span>, { <span class="hljs-keyword">set</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(v)</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>._fixIEValue = v; }, <span class="hljs-keyword">get</span>: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/return" title="浏览关于“return”的文章" target="_blank" class="tag_link">return</a></span> <span class="hljs-keyword">this</span>._fixIEValue; } }); } <span class="hljs-keyword">catch</span> (e) {} <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">fixIEChange</span><span class="hljs-params">(dom, name)</span> </span>{ <span class="hljs-comment">//IE6-8, <a href="http://www.js-code.com/tag/radio" title="浏览关于“radio”的文章" target="_blank" class="tag_link">radio</a>, <a href="http://www.js-code.com/tag/checkbox" title="浏览关于“checkbox”的文章" target="_blank" class="tag_link">checkbox</a>的点击事件必须在失去焦点时才触发</span> <span class="hljs-keyword">var</span> eventType = dom.type === <span class="hljs-string">"radio"</span> || dom.type === <span class="hljs-string">"checkbox"</span> ? <span class="hljs-string">"click"</span> : <span class="hljs-string">"change"</span>; addEvent(dom, eventType, <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{ <span class="hljs-keyword">if</span> (dom.type === <span class="hljs-string">"select-one"</span>) { <span class="hljs-keyword">var</span> idx = dom.selectedIndex, <a href="http://www.js-code.com/tag/option" title="浏览关于“option”的文章" target="_blank" class="tag_link">option</a>, attr; <span class="hljs-keyword">if</span> (idx &gt; <span class="hljs-number">-1</span>) { <span class="hljs-comment">//IE 下select.value不会改变</span> option = dom.options[idx]; attr = option.attributes.value; dom.value = attr &amp;&amp; attr.specified ? option.value : option.<a href="http://www.js-code.com/tag/text" title="浏览关于“text”的文章" target="_blank" class="tag_link">text</a>; } } addEvent.fire(dom, <span class="hljs-string">"change"</span>); }); }</code></pre> <p>此外,滚动事件的兼容性也非常多,但在React官网中,统一大家用onWheel接口来调用,在内部实现则需要我们根据浏览器分别用onmousewheel, onwheel, <a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>MouseScroll来模拟了。</p> <p>当然还有很多很多细节,这里就不一一列举了。为了防止像React那样代码膨胀,针对旧版本的事件兼容,我都移到ieEvent.js文件中。然后基于它,打包了一个专门针对旧版本IE的ReactIE</p> <p><a href="https://github.com/RubyLouvre/anu/tree/master/dist" rel="nofollow noreferrer" target="_blank">https://github.com/RubyLouvre...</a></p> <p>大家也可以通过npm安装,1.0.2就拥有这个文件</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install anujs" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">inst<a href="http://www.js-code.com/tag/all" title="浏览关于“all”的文章" target="_blank" class="tag_link">all</a></span> anujs</code></pre> <p>下面通过一个示例介绍如何使用ReactIE.</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="button" target="_blank">button</a>" <a href="http://www.js-code.com/tag/class" title="class" target="_blank">class</a>="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="top" target="_blank">top</a>" data-clipboard-<a href="http://www.js-code.com/tag/text" title="text" target="_blank">text</a>="<!DOCTYPE html><br /> <html></p> <p><head><br /> <meta charset=&quot;utf-8&quot;><br /> <meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;></p> <p> <script src=&quot;./dist/polyfill.js&quot;></script><br /> <script src=&quot;./dist/ReactIE.js&quot;></script><br /> <script src=&quot;./dist/index9.js&quot;></script></p> <p></head></p> <p><body></p> <div>这个默认会被清掉</div> <div id='example'></div> <p></body></p> <p></html>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-meta">&lt;!DOCTYPE html&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">html</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr"><a href="http://www.js-code.com/tag/char" title="浏览关于“char”的文章" target="_blank" class="tag_link">char</a>set</span>=<span class="hljs-string">"utf-8"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dist/polyfill.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dist/ReactIE.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"./dist/index9.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span>这个默认会被清掉<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">'example'</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span></code></pre> <p>首先建立一个页面,里面有三个JS,其实前两个文件也能单独打包的。</p> <p>index.js的源码是这样的,业务线开发时是直接上<a href="http://www.js-code.com/tag/jsx" title="JSX" target="_blank">JSX</a>与<a href="http://www.js-code.com/tag/es6" title="浏览关于“es6”的文章" target="_blank" class="tag_link">es6</a>,为了兼容IE6-8,请不要在业务代码上用Object.define<a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>erty与Proxy</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="<a href="http://www.js-code.com/tag/button" title="浏览关于“button”的文章" target="_blank" class="tag_link">button</a>" class="copyCode code-tool" data-toggle="tooltip" data-placement="<a href="http://www.js-code.com/tag/top" title="浏览关于“top”的文章" target="_blank" class="tag_link">top</a>" data-clipboard-text="class Select <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component{<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructor() {<br /> <a href="http://www.js-code.com/tag/super" title="super" target="_blank">super</a>()<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.state = {<br /> value: 'bbb'<br /> }<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.onChange = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.onChange.bind(<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>)<br /> }<br /> onChange(e){<br /> console.log(e.target.value)<br /> <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.set<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>({<br /> value: e.target.value<br /> })<br /> }<br /> render() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <div><select value={this.state.value} onChange={this.onChange}><option value='aaa'>aaa</option><option value='bbb'>bbb</option><option value='ccc'>ccc</option></select></p> <p>{<a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.state.value}</p> </div> <p> }<br /> }<br /> class Input <a href="http://www.js-code.com/tag/extends" title="extends" target="_blank">extends</a> React.Component{<br /> <a href="http://www.js-code.com/tag/constructor" title="constructor" target="_blank">constructor</a>() {<br /> <a href="http://www.js-code.com/tag/super" title="super" target="_blank">super</a>()<br /> this.state = {<br /> value: 'input'<br /> }<br /> this.onInput = this.onInput.bind(this)<br /> }<br /> onInput(e){<br /> this.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a>({<br /> value: e.target.value<br /> })<br /> }<br /> render() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <div><input value={this.state.value} onInput={this.onInput} />{this.state.value}</div> <p> }<br /> }<br /> class Radio <a href="http://www.js-code.com/tag/extends" title="浏览关于“extends”的文章" target="_blank" class="tag_link">extends</a> React.Component{<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructor(props) {<br /> <a href="http://www.js-code.com/tag/super" title="super" target="_blank">super</a>(props)<br /> this.state = {<br /> value: this.props.value<br /> }<br /> this.onChange = this.onChange.bind(this)<br /> }<br /> onChange(e){<br /> console.log(e.target.value)<br /> this.set<a href="http://www.js-code.com/tag/state" title="State" target="_blank">State</a>({<br /> value: e.target.value<br /> })<br /> }<br /> render() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> <span><input type='radio' name={this.props.name} value={this.props.value} onChange={this.onChange} />{this.state.value+''}</span><br /> }<br /> }<br /> class Playground extends React.Component{<br /> <a href="http://www.js-code.com/tag/const" title="const" target="_blank">const</a>ructor(props) {<br /> <a href="http://www.js-code.com/tag/super" title="super" target="_blank">super</a>(props)<br /> this.state = {<br /> value: '请上下滚动鼠标滚轮'<br /> }<br /> this.onWheel = this.onWheel.bind(this)<br /> }<br /> onWheel(e){<br /> this.<a href="http://www.js-code.com/tag/setstate" title="setState" target="_blank">setState</a>({<br /> value: e.wheelDelta<br /> })<br /> }<br /> render() {<br /> <a href="http://www.js-code.com/tag/return" title="return" target="_blank">return</a> </p> <div style={{width:300,height:300,backgroundColor:'red',display:'inline-block'}} onWheel={this.onWheel} >{this.state.value}</div> <p> }<br /> }<br /> class MouseMove extends React.Component{<br /> <a href="http://www.js-code.com/tag/constructor" title="constructor" target="_blank">constructor</a>(props) {<br /> <a href="http://www.js-code.com/tag/super" title="浏览关于“super”的文章" target="_blank" class="tag_link">super</a>(props)<br /> this.state = {<br /> value: '请在绿色区域移动'<br /> }<br /> this.onMouseMove = this.onMouseMove.bind(this)<br /> }<br /> onMouseMove(e){<br /> <a href="http://www.js-code.com/tag/var" title="var" target="_blank">var</a> v = e.pageX+' '+e.pageY;<br /> this.<a href="http://www.js-code.com/tag/setstate" title="浏览关于“setState”的文章" target="_blank" class="tag_link">setState</a>({<br /> value: v<br /> })<br /> }<br /> render() {<br /> return </p> <div style={{width:300,height:300,backgroundColor:'#a9ea00',display:'inline-block'}} onMouseMove={this.onMouseMove} >{this.state.value}</div> <p> }<br /> }<br /> class FocusEl extends React.Component{<br /> <a href="http://www.js-code.com/tag/constructor" title="浏览关于“constructor”的文章" target="_blank" class="tag_link">constructor</a>(props) {<br /> super(props)<br /> this.state = {<br /> value: '点我'<br /> }<br /> this.onFocus = this.onFocus.bind(this)<br /> }<br /> onFocus(e){<br /> console.log(e.target.title)<br /> }<br /> render() {<br /> return <input title={this.props.title} onKeyUp={(e)=>{console.log(e.which)}} style={{width:100,height:50,backgroundColor:'green',display:'inline-block'}} onFocus={this.onFocus} /><br /> }<br /> }<br /> <a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>.<a href="http://www.js-code.com/tag/onload" title="onload" target="_blank">onload</a> = <a href="http://www.js-code.com/tag/function" title="function" target="_blank">function</a>(){<br /> <a href="http://www.js-code.com/tag/window" title="window" target="_blank">window</a>.s = React<a href="http://www.js-code.com/tag/dom" title="DOM" target="_blank">DOM</a>.render( </p> <div><Select ></Select><Input /><Radio name='sex' value=&quot;男&quot; ></Radio><Radio name='sex' value='女'></Radio></p> <p><Playground ></Playground> <MouseMove ></MouseMove><FocusEl title=&quot;aaa&quot; ></FocusEl><FocusEl title=&quot;bbb&quot; ></FocusEl></p> </p></div> <p>, document.getElementById('example'))<br /> }<br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Select</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/const" title="浏览关于“const”的文章" target="_blank" class="tag_link">const</a>ructor</span>() { <span class="hljs-keyword">super</span>() <span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">value</span>: <span class="hljs-string">'bbb'</span> } <span class="hljs-keyword">this</span>.onChange = <span class="hljs-keyword">this</span>.onChange.bind(<span class="hljs-keyword">this</span>) } onChange(e){ <span class="hljs-built_in">console</span>.log(e.target.value) <span class="hljs-keyword">this</span>.set<a href="http://www.js-code.com/tag/state" title="浏览关于“State”的文章" target="_blank" class="tag_link">State</a>({ <span class="hljs-attr">value</span>: e.target.value }) } render() { <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">select</span> <span class="hljs-attr">value</span>=<span class="hljs-string">{this.state.value}</span> <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.onChange}</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'aaa'</span>&gt;</span>aaa<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'bbb'</span>&gt;</span>bbb<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">option</span> <span class="hljs-attr">value</span>=<span class="hljs-string">'ccc'</span>&gt;</span>ccc<span class="hljs-tag">&lt;/<span class="hljs-name">option</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">select</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>{this.state.value}<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span> } } <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">Input</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">React</span>.<span class="hljs-title">Component</span></span>{ <span class="hljs-keyword">constructor</span>() { <span class="hljs-keyword">super</span>() <span class="hljs-keyword">this</span>.state = { <span class="hljs-attr">value</span>: <span class="hljs-string">'input'</span> } <span class="hljs-keyword">this</span>.onInput = <span class="hljs-keyword">this</span>.onInput.bind(<span class="hljs-keyword">this</span>) } onInput(e){ <span class="hljs-keyword">this</span>.setState({ <span class="hljs-attr">value</span>: e.target.value }) } render() { <span class="hljs-keyword">return</span> &lt;div&gt;&lt;input value={this.state.value} onInput={this.onInput} /&gt;{this.state.value}&lt;/div&gt; } } class Radio extends React.Component{ constructor(props) { super(props) this.state = { value: this.props.value } this.onChange = this.onChange.bind(this) } onChange(e){ console.log(e.target.value) this.setState({ value: e.target.value }) } render() { return &lt;span&gt;&lt;input type='radio' name={this.props.name} value={this.props.value} onChange={this.onChange} /&gt;{this.state.value+''}&lt;/span&gt; } } class Playground extends React.Component{ constructor(props) { super(props) this.state = { value: '请上下滚动鼠标滚轮' } this.onWheel = this.onWheel.bind(this) } onWheel(e){ this.setState({ value: e.wheelDelta }) } render() { return &lt;div style={{width:300,height:300,backgroundColor:'red',display:'inline-block'}} onWheel={this.onWheel} &gt;{this.state.value}&lt;/div&gt; } } class MouseMove extends React.Component{ constructor(props) { super(props) this.state = { value: '请在绿色区域移动' } this.onMouseMove = this.onMouseMove.bind(this) } onMouseMove(e){ var v = e.pageX+' '+e.pageY; this.setState({ value: v }) } render() { return &lt;div style={{width:300,height:300,backgroundColor:'#a9ea00',display:'inline-block'}} onMouseMove={this.onMouseMove} &gt;{this.state.value}&lt;/div&gt; } } class FocusEl extends React.Component{ constructor(props) { super(props) this.state = { value: '点我' } this.onFocus = this.onFocus.bind(this) } onFocus(e){ console.log(e.target.title) } render() { return &lt;input title={this.props.title} onKeyUp={(e)=&gt;{console.log(e.which)}} style={{width:100,height:50,backgroundColor:'green',display:'inline-block'}} onFocus={this.onFocus} /&gt; } } <a href="http://www.js-code.com/tag/window" title="浏览关于“window”的文章" target="_blank" class="tag_link">window</a>.<a href="http://www.js-code.com/tag/onload" title="浏览关于“onload”的文章" target="_blank" class="tag_link">onload</a> = function(){ window.s = ReactDOM.render( &lt;div&gt;&lt;Select /&gt;&lt;Input /&gt;&lt;Radio name='sex' value="男" /&gt;&lt;Radio name='sex' value='女'/&gt; &lt;p&gt;&lt;Playground /&gt; &lt;MouseMove /&gt;&lt;FocusEl title="aaa" /&gt;&lt;FocusEl title="bbb" /&gt;&lt;/p&gt; &lt;/div&gt;, document.getElementById('example')) } </code></pre> <p>然后我们建一个webpack.config.js,用的是webpack1</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="const webpack = require(&quot;webpack&quot;); const path = require(&quot;path&quot;); const fs = require(&quot;fs&quot;); var es3ifyPlugin = require('es3ify-webpack-plugin'); module.exports = { context: __dirname, entry: { index9: &quot;./src/index9.js&quot; }, output: { path: __dirname + &quot;/dist/&quot;, filename: &quot;[name].js&quot; }, plugins: [new es3ifyPlugin()], module: { loaders: [ { test: /.jsx?$/, loader: &quot;babel-loader&quot;, exclude: path.resolve(__dirname, &quot;node_modules&quot;) } ] }, resolve: { //如果不使用anu,就可以把这里注释掉 alias: { react: &quot;anujs/dist/ReactIE.js&quot;, &quot;react-dom&quot;: &quot;anujs/dist/ReactIE.js&quot; } } };" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">const</span> webpack = <span class="hljs-built_in">require</span>(<span class="hljs-string">"webpack"</span>); <span class="hljs-keyword">const</span> path = <span class="hljs-built_in">require</span>(<span class="hljs-string">"path"</span>); <span class="hljs-keyword">const</span> fs = <span class="hljs-built_in">require</span>(<span class="hljs-string">"fs"</span>); <span class="hljs-keyword">var</span> es3ifyPlugin = <span class="hljs-built_in">require</span>(<span class="hljs-string">'es3ify-webpack-<a href="http://www.js-code.com/tag/plugin" title="浏览关于“plugin”的文章" target="_blank" class="tag_link">plugin</a>'</span>); <span class="hljs-built_in">module</span>.<a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a>s = { <span class="hljs-attr">context</span>: __dirname, <span class="hljs-attr">entry</span>: { <span class="hljs-attr">index9</span>: <span class="hljs-string">"./src/index9.js"</span> }, <span class="hljs-attr">output</span>: { <span class="hljs-attr">path</span>: __dirname + <span class="hljs-string">"/dist/"</span>, <span class="hljs-attr">filename</span>: <span class="hljs-string">"[name].js"</span> }, <span class="hljs-attr">plugins</span>: [<span class="hljs-keyword">new</span> es3ifyPlugin()], <span class="hljs-attr">module</span>: { <span class="hljs-attr">loaders</span>: [ { <span class="hljs-attr">test</span>: <span class="hljs-regexp">/.jsx?$/</span>, <span class="hljs-attr">loader</span>: <span class="hljs-string">"<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>-loader"</span>, <span class="hljs-attr">exclude</span>: path.resolve(__dirname, <span class="hljs-string">"node_modules"</span>) } ] }, <span class="hljs-attr">resolve</span>: { <span class="hljs-comment">//如果不使用anu,就可以把这里注释掉</span> alias: { <span class="hljs-attr">react</span>: <span class="hljs-string">"anujs/dist/ReactIE.js"</span>, <span class="hljs-string">"react-dom"</span>: <span class="hljs-string">"anujs/dist/ReactIE.js"</span> } } };</code></pre> <p>es3<a href="http://www.js-code.com/tag/if" title="if" target="_blank">if</a>y-webpack-<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>是专门将<a href="http://www.js-code.com/tag/es5" title="es5" target="_blank">es5</a>代码转换为es3代码,因为<a href="http://www.js-code.com/tag/es5" title="浏览关于“es5”的文章" target="_blank" class="tag_link">es5</a>是允许用关键字,保留字作为对象的方法与属性,而es3不能。万一碰上module.<a href="http://www.js-code.com/tag/default" title="default" target="_blank">default</a>,我们就坑大了。es3ify是一个利器。</p> <p><a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>是通过.babelrc来配置,里面用到一个</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" { &quot;presets&quot;: [ [&quot;es2015&quot;, { &quot;modules&quot;: false }], &quot;react&quot; ], &quot;plugins&quot;: [ [ &quot;transform-es2015-classes&quot;, { &quot;loose&quot;: true } ] ] }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="json hljs"><code class="json"> { <span class="hljs-attr">"p<a href="http://www.js-code.com/tag/reset" title="浏览关于“reset”的文章" target="_blank" class="tag_link">reset</a>s"</span>: [ [<span class="hljs-string">"es2015"</span>, { <span class="hljs-attr">"modules"</span>: <span class="hljs-literal"><a href="http://www.js-code.com/tag/false" title="浏览关于“false”的文章" target="_blank" class="tag_link">false</a></span> }], <span class="hljs-string">"react"</span> ], <span class="hljs-attr">"plugins"</span>: [ [ <span class="hljs-string">"trans<a href="http://www.js-code.com/tag/form" title="浏览关于“form”的文章" target="_blank" class="tag_link">form</a>-es2015-classes"</span>, { <span class="hljs-attr">"loose"</span>: <span class="hljs-literal">true</span> } ] ] }</code></pre> <p>babel-<a href="http://www.js-code.com/tag/plugin" title="plugin" target="_blank">plugin</a>-trans<a href="http://www.js-code.com/tag/for" title="for" target="_blank">for</a>m-es2015-classes记使用loose模式。</p> <p>babel-p<a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>-es2015后面这样设置是禁用生成<strong> "use strict"</strong>,也建议直接换成<strong>babel-p<a href="http://www.js-code.com/tag/reset" title="reset" target="_blank">reset</a>-avalon</strong>,这是个preset生成的代码兼容性更好。</p> <p>如果大家用 uglify-js进行代码上线,这也要注意一下,这里有许多坑,它默认会把es3ify干的活全部白做了。详见 <a href="https://github.com/zuojj/fedlab/issues/5" rel="nofollow noreferrer" target="_blank">https://github.com/zuojj/fedl...</a> 这篇文章</p> <p>最后大家可以通过加Q 79641290 联系我。</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

高性能迷你React框架anu在低版本IE的实践

全部内容,希望文章能够帮你解决

高性能迷你React框架anu在低版本IE的实践

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过