理想是丰满的,现实是骨感的,react早期的版本虽然号称支持IE8,但是页面总会不自觉切换到奇异模式下,导致报错。因此必须让react连IE6,7都支持,这才是最安全。但React本身并不支持IE6,7,因此anu使有用武之地了。
https://github.com/RubyLouvre...
但光是anu不行,兼容IE是一个系统性的工程,涉及到打包压缩,各种polyfill垫片。
首先说一下anu如何支持低版本浏览器。anu本身没有用到太高级的API,像Object.defineProperty,Object.seal,Object.freeze,Proxy,WeakMap等无法 模拟的新API,anu一个也没有用,而const,let,箭头函数,es6模块,通过babel编译就可以搞定了。
而框架用到的一些es5,es6方法,我已经提供了一个叫polyfill的文件为大家准备好,大家也可以使用bable.polyfill实现兼容。
Array.prototype.forEach
Function.prototype.bind
JSON
window.console
Object.keys
Object.is
Object.assign
Array.isArray
https://github.com/RubyLouvre...
剩下就是事件系统的兼容。React为了实现一个全能的事件系统,3万行的react-dom,有一半是在搞事件的。事件系统之所以这么难写,是因为React要实现整个标准事件流,从捕获阶段到target阶段再到冒泡阶段。如果能获取事件源对象到document这一路经过的所有元素,就能实现事件流了。但是在IE下,只有冒泡阶段,并且许多重要的表单事件不支持冒泡到document。为了事件冒泡,自jQuery时代起,前端高手们已经摸索出一套方案了。使用另一个相似的事件来伪装不冒泡事件,冒泡到document后,然后变成原来的事件触发对应的事件。
比如说IE下,使用focusin冒充focus,focusout冒充blur。chrome下,则通过addEventListener的第三个参加为true,强制让focus,blur被document捕获到。
//Ie6-9 if(msie < 9){ eventHooks.onFocus = function(dom) { addEvent(dom,"focusin",function(e) { addEvent.fire(dom,"focus"); }); }; eventHooks.onBlur = function(dom) { addEvent(dom,"blurout","blur"); }); }; }else{ eventHooks.onFocus = function(dom) { addEvent( dom,"focus","focus"); },true ); }; eventHooks.onBlur = function(dom) { addEvent( dom,"blur","blur"); },true ); }; }
低版本的oninput, onchange事件是一个麻烦,它们最多冒泡到form元素上。并且IE也没有oninput,只有一个相似的onpropertychange事件。IE9,IE10的oninput其实也有许多BUG,但大家要求放低些,我们也不用理会IE9,IE10的oninput事件。IE6-8的oninput事件,我们是直接在元素上绑定onpropertychange事件,然后触发一个datasetchanged 事件冒泡到document上,并且这个datasetchanged事件对象带有一个__type__属性,用来说明它原先冒充的事件。
function fixIEInput(dom,name) { addEvent(dom,"propertychange",function(e) { if (e.propertyName === "value") { addEvent.fire(dom,"input"); } }); } addEvent.fire = function dispatchIEEvent(dom,type,obj) { try { var hackEvent = document.createEventObject(); if (obj) { Object.assign(hackEvent,obj); } hackEvent.__type__ = type; //IE6-8触发事件必须保证在DOM树中,否则报"SCRIPT16389: 未指明的错误" dom.fireEvent("ondatasetchanged",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) && target.nodeType === 1); // ...略 }
addEvent.fire这个方法在不同浏览器的实现是不一样的,这里显示的IE6-8的版本,IE9及标准浏览器是使用document.createEvent,initEvent,dispatchEvent等API来创建事件对象与触发事件。在IE6-8中,则需要用document.createEventObject创建事件对象,fireEvent来触发事件。
ondatasetchanged事件是IE一个非常偏门的事件,因为IE的 fireEvent只能触发它官网上列举的几十个事件,不能触发自定义事件。而ondatasetchanged事件在IE9,chrome,firefox等浏览器中是当成一个自定义事件来对待,但那时它是使用elem.dispatchEvent来触发了。ondatasetchanged是一个能冒泡的事件,只是充作信使,将我们要修改的属性带到document上。
此是其一,onchange事件也要通过ondatasetchanged也冒充,因为IE下它也不能冒泡到document。onchange事件在IE还是有许多BUG(或叫差异点)。checkBox,radio的onchange事件必须在失去焦点时才触发,因此我们在内部用onclick来触发,而select元素在单选时候下,用户选中了某个option,select.value会变成option的value值,但在IE6-8下它竟然不会发生改变。最绝的是select元素也不让你修改value值,后来我奠出修改HTMLSelectElement原型链的大招搞定它。
try { Object.defineProperty(HTMLSelectElement.prototype,"value",{ 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 === "radio" || dom.type === "checkBox" ? "click" : "change"; addEvent(dom,eventType,function(e) { if (dom.type === "select-one") { var idx = dom.selectedIndex,option,attr; if (idx > -1) { //IE 下select.value不会改变 option = dom.options[idx]; attr = option.attributes.value; dom.value = attr && attr.specified ? option.value : option.text; } } addEvent.fire(dom,"change"); }); }
此外,滚动事件的兼容性也非常多,但在React官网中,统一大家用onWheel接口来调用,在内部实现则需要我们根据浏览器分别用onmousewheel,onwheel,DOMMouseScroll来模拟了。
当然还有很多很多细节,这里就不一一列举了。为了防止像React那样代码膨胀,针对旧版本的事件兼容,我都移到ieEvent.js文件中。然后基于它,打包了一个专门针对旧版本IE的ReactIE
https://github.com/RubyLouvre...
大家也可以通过npm安装,1.0.2就拥有这个文件
npm install anujs
下面通过一个示例介绍如何使用ReactIE.
<!DOCTYPE html> <html> <head> <Meta charset="utf-8"> <Meta name="viewport" content="width=device-width"> <script src="./dist/polyfill.js"></script> <script src="./dist/ReactIE.js"></script> <script src="./dist/index9.js"></script> </head> <body> <div>这个默认会被清掉</div> <div id='example'></div> </body> </html>
首先建立一个页面,里面有三个JS,其实前两个文件也能单独打包的。
index.js的源码是这样的,业务线开发时是直接上JSX与es6,为了兼容IE6-8,请不要在业务代码上用Object.defineProperty与Proxy
class Select extends React.Component{ constructor() { super() this.state = { value: 'bbb' } this.onChange = this.onChange.bind(this) } onChange(e){ console.log(e.target.value) this.setState({ value: e.target.value }) } render() { return <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>{this.state.value}</p></div> } } class Input extends React.Component{ constructor() { super() this.state = { value: 'input' } this.onInput = this.onInput.bind(this) } onInput(e){ this.setState({ value: e.target.value }) } render() { return <div><input value={this.state.value} onInput={this.onInput} />{this.state.value}</div> } } 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 <span><input type='radio' name={this.props.name} value={this.props.value} onChange={this.onChange} />{this.state.value+''}</span> } } 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 <div style={{width:300,height:300,backgroundColor:'red',display:'inline-block'}} onWheel={this.onWheel} >{this.state.value}</div> } } 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 <div style={{width:300,backgroundColor:'#a9ea00',display:'inline-block'}} onMouseMove={this.onMouseMove} >{this.state.value}</div> } } 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 <input title={this.props.title} onKeyUp={(e)=>{console.log(e.which)}} style={{width:100,height:50,backgroundColor:'green',display:'inline-block'}} onFocus={this.onFocus} /> } } window.onload = function(){ window.s = ReactDOM.render( <div><Select /><Input /><Radio name='sex' value="男" /><Radio name='sex' value='女'/> <p><Playground /> <MouseMove /><FocusEl title="aaa" /><FocusEl title="bbb" /></p> </div>,document.getElementById('example')) }
然后我们建一个webpack.config.js,用的是webpack1
const webpack = require("webpack"); const path = require("path"); const fs = require("fs"); var es3ifyPlugin = require('es3ify-webpack-plugin'); module.exports = { context: __dirname,entry: { index9: "./src/index9.js" },output: { path: __dirname + "/dist/",filename: "[name].js" },plugins: [new es3ifyPlugin()],module: { loaders: [ { test: /\.jsx?$/,loader: "babel-loader",exclude: path.resolve(__dirname,"node_modules") } ] },resolve: { //如果不使用anu,就可以把这里注释掉 alias: { react: "anujs/dist/ReactIE.js","react-dom": "anujs/dist/ReactIE.js" } } };
es3ify-webpack-plugin是专门将es5代码转换为es3代码,因为es5是允许用关键字,保留字作为对象的方法与属性,而es3不能。万一碰上module.default,我们就坑大了。es3ify是一个利器。
babel是通过.babelrc来配置,里面用到一个
{ "presets": [ ["es2015",{ "modules": false }],"react" ],"plugins": [ [ "transform-es2015-classes",{ "loose": true } ] ] }
babel-plugin-transform-es2015-classes记使用loose模式。
babel-preset-es2015后面这样设置是禁用生成 "use strict",也建议直接换成babel-preset-avalon,这是个preset生成的代码兼容性更好。
如果大家用 uglify-js进行代码上线,这也要注意一下,这里有许多坑,它默认会把es3ify干的活全部白做了。详见 https://github.com/zuojj/fedl... 这篇文章
最后大家可以通过加Q 79641290 联系我。