写在前面

在微信支付、手机QQ、腾讯TEG、腾讯IEG等团队已经能够使用 Omi 应用于大量的 to b 的项目以及内部管理系统，为了达到 Omi 全覆盖，兼容 to c 端各种浏览器环境，所以有了 Omio, 拥有几乎和 Omi 一模一样的语法。

兼容老浏览器的 Omi 版本，→ Github

立即使用

$ npm i omi-cli -g             
$ omi init-o my-app   
$ cd my-app           
$ npm start                     
$ npm run build               
复制代码

与 omi 不同之处

omio 拥有 omi一样的语法，但是也有一些差异需要注意：

omio 支持 staticCss，omi 是不支持的

css 和 staticCss 的区别是 ? 例如：

render() {
  return (
    <div>
      <my-ele name={this.name}></my-ele>
      <my-ele name={this.name}></my-ele>
      <my-ele name={this.name}></my-ele>
    </div>
  )
}
复制代码

如上面的例子,css方法会渲染三次，并插入到 head，而staticCss 只会渲染一次。当你 update 组件或者 setState 时候，css方法会渲染三次，并更新head里对应三个地方的样式，staticCss 不再渲染。

Omio 不支持 slot, 请使用 props.children 代替，像 react 一样
Omio 支持 store 注入，但不支持 store path updating
Omio 不支持 render array，未来可能支持
Omio 不支持 fire 触发自定义事件，可以和 react 一样使用 props.xxx() 去触发。Omi 同时支持 fire and props.xxx() 两种方式。

Omi 项目中使用 Omio

先安装:

npm i omio
复制代码

配置 Webpack Alias

如果你想在已经存在的 omi 项目下使用 omio，你可以使用下面配置，不用任何代码更改:

module.exports = {
  //...
  resolve: {
    alias: {
      omi: 'omio'
    }
  }
};
复制代码

兼容 IE 踩坑

第一坑 - 伪数组

IE下 querySelectorAll 出来的伪数组,没有 array 相关的方法：

const codes = document.querySelectorAll('xxx')
//挂了
codesArr.forEach(() => {

})
复制代码

需要转成真数组:

const codes = Array.prototype.slice.call(document.querySelectorAll('xxx'))
复制代码

第二坑 - 静态属性丢失

这是 Omi 的源码:

function define(name, ctor) {
  if (ctor.is === 'WeElement') {
    options.mapping[name] = ctor;
    if (ctor.data && !ctor.pure) {
      ctor.updatePath = getUpdatePath(ctor.data);
    }
  }
}
复制代码

但是在 IE 下进入不了 if 条件！！Omi 源码里明明有有静态属性:

class WeElement {
  static is = 'WeElement'

  constructor(props, store) {
    ...
  }
  ...
  ...
  render() { }
}
复制代码

为什么丢失了呢？追根溯源一下：

使用 define:

define('my-p', class extends WeElement {
  render(props) {
    return props.children[0]
  }
})
复制代码

编译后的代码:

define('my-p', function (_WeElement) {
  _inherits(_class, _WeElement);

  function _class() {
    _classCallCheck(this, _class);

    return _possibleConstructorReturn(this, _WeElement.apply(this, arguments));
  }

  _class.prototype.render = function render$$1(props) {
    return props.children[0];
  };

  return _class;
}(WeElement));
复制代码

那么问题就出在 _inherits 过程中把静态属性 is 丢失了！

function _inherits(subClass, superClass) {
  subClass.prototype = Object.create(superClass && superClass.prototype, { 
    constructor: { 
      value: subClass, 
      enumerable: false, 
      writable: true, 
      configurable: true 
    } 
  }); 
  if (superClass) {
    Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  } 
}
复制代码

好，由于是编译注入代码，后面可能也需要支持纯函数的组件定义，所以这样解决了:

function define(name, ctor) {
  //if (ctor.is === 'WeElement') {
    options.mapping[name] = ctor;
    if (ctor.data && !ctor.pure) {
      ctor.updatePath = getUpdatePath(ctor.data);
    }
  //}
}
复制代码

第三坑 - Object.assign IE 不支持

由于 Omio 源码里使用了 Object.assign，所以这里需要 polyfill 一下：

if (typeof Object.assign != 'function') {
  // Must be writable: true, enumerable: false, configurable: true
  Object.defineProperty(Object, "assign", {
    value: function assign(target, varArgs) { // .length of function is 2
      'use strict';
      if (target == null) { // TypeError if undefined or null
        throw new TypeError('Cannot convert undefined or null to object');
      }

      var to = Object(target);

      for (var index = 1; index < arguments.length; index++) {
        var nextSource = arguments[index];

        if (nextSource != null) { // Skip over if undefined or null
          for (var nextKey in nextSource) {
            // Avoid bugs when hasOwnProperty is shadowed
            if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
              to[nextKey] = nextSource[nextKey];
            }
          }
        }
      }
      return to;
    },
    writable: true,
    configurable: true
  });
}
复制代码

由于 IE9 支持了 ES5, webpack 编译出来的 es5，所以并不需要引入 es5-shim 来兼容。

第四坑 - Proxy 不支持

因为需要监听数据变化，Omi 使用的是 Proxy，所以这里需要一个降级方案 - obaa 库，监听任意对象的任意变化。

安装 obaa

npm install obaa
复制代码

使用

observe object:

var obj = { a: 1 };
obaa(obj, function (name, value , old) {
    console.log(name + "__" + value + "__" + old);
});
obj.a = 2; //a__2__1 
复制代码

observe array:

var arr = [1, 2, 3];
obaa(arr, function (name, value, old) {
    console.log(name + "__" + value+"__"+old);
});
arr.push(4);//Array-push__[1,2,3,4]__[1,2,3] 
arr[3] = 5;//3__5__4
复制代码

observe class instance:

var User = function (name, age) {
    this.name = name;
    this.age = age;
    //observe name only
    obaa(this, ["name"], function (name, value, oldValue) {
        console.log(name + "__" + value + "__" + oldValue);
    });
}
var user = new User("lisi", 25);
user.name = "wangwu";//name__wangwu__lisi 
user.age = 20; //nothing output
复制代码

其他:

arr.push(111) //trigger observe callback
//every method of array has a pureXXX function
arr.purePush(111) //don't trigger observe callback

arr.size(2) //trigger observe callback
arr.length = 2 //don't trigger observe callback

//if obj.c is undefined
obaa.set(obj, 'c', 3)
obj.c = 4 //trigger observe callback

//if obj.c is undefined
obj.c = 3
obj.c = 4 //don't trigger observe callback
复制代码