概述

你是不是还在为客户不肯升级浏览器而烦恼？

你是不是还在为IE8调试代码而抓狂？

你是不是也在吐槽IE8稀烂的性能？

如果你也碰到以上问题，恭喜你！！！

看了这篇文章其实也没啥用… T_T

首先，重要的事说三遍 W(￣_￣)W

升级浏览器！升级浏览器！升级浏览器！

不要用IE！不要用IE！不要用IE！

呼~ 吐槽结束

首先明确一点的是，在如今去做IE8的适配是一件非常没有性价比的事。

因为根据 statcounter 的最新统计，国内PC浏览器的占比中，IE仅不足5%，这其中IE8的占比就更少了

当然这份统计数据是根据互联网用户，实际的用户会相对多一些，因为很多行业可能因为硬件原因没办法升级换代，比如医疗、银行、政府部门等。

所以，如果没有特殊的工作需要，非常不建议适配IE8。

当然，类似于百度这样的巨型互联网入口，甚至仍然能够适配IE6。虽然做了一定的体验降级，这就是涉及到其他方面的知识了。

其次还是建议能去说服客户升级浏览器，如果是基于操作系统，比如windows xp。可以安装谷歌或者360浏览器，这两款都是不错的选择。

这时你可能会说，我要能说服客户我还点进来干嘛，

哎呀，说还是要说的嘛，尽力争取一下咯。

IE8 + MVVM的组合其实不是一个很好的方案，只是一种妥协方案，所以：

你是做纯页面展示的话，我推荐服务端渲染，性能好，如果面向互联网也更有利于SEO

你是希望展示页面，但是页面不多，少量页面逻辑，我推荐静态页面 + jquery + xxxui的组合，体积小，渲染快，单页面的开发和维护清晰方便。

但是如果你的页面包含大量的逻辑，因果关系，复杂表单，组件复用等等，可以考虑这套方案。

这个方案是根据个人实际情况来做的选型，偏差和不足还望多多包涵

技术选型

框架

通过查阅资料，搜索github。发现适配IE8的MVVM框架还挺多的，例如 angular1，avalon，yoxjs和san等等

所以在做选型时SHADOW主要考虑以下几点

是否开源
长期维护
API文档的完整性和可阅读性
周边生态是否完整

是否开源

开源能保证碰到问题可以逐步通过源码找到问题，有能力的话也能提交issue帮助它改善，

开源可以在issue中找各种别人碰到过的问题，减少抓耳挠腮的时间。

当然2020年能在网上找到的适配IE8的MVVM的框架，基本也就剩开源的了

长期维护

这个其实可以这么问: 个人开发者和谷歌/阿里/百度的开源技术框架，你会选哪个？

是我，我肯定选后者，有技术支撑，有实际案例，从各个项目的Star数量就可见一斑。

题外话，其实这个如果个人/小型项目完全不用考虑，个人能力能hold住就行

但是如果是企业选型，就需要慎重考虑。假设开源作者忽然不维护了(还挺多的)，后续的升级，bug修复就很让人头疼

在找资料的过程中发现在2020年还有人在争react和vue，还在拿vue是个人维护说事，

其实vue发展到今天其实早就不是个人维护项目了，有着相当庞大的社区体系。

API文档的完整性和可阅读性

说实话，迄今为止看过最舒服的文档要数Vue的官方文档了，简洁，有序，结构分明。

上面列举的几款框架中，yoxjs是比较不错的，非常干净

额外提一下，它借鉴了Vue2.0的语法特性，熟悉Vue的会非常亲切

angular1已经不再维护，avalon由于作者原因也不再维护，san为百度开源，但是文档其实一般，给人一种很跳跃的感觉，东一块西一块

周边生态

当你确定需要使用MVVM，周边生态就显得尤为重要

在前期，基本功能满足就可以了，但是当需求增加，功能需要扩展，诸如状态管理，路由，组件模块化之类的需求也会随之而来。

比较早期的或者不再维护的技术框架在这方面是没有办法得到满足的

yoxjs目前处于初期稳定阶段，周边生态只有路由

san的话是目前SHADOW能找到的比较全的

状态管理有san-store，路由有san-router，服务端渲染有san-ssr，还有模块化开发支持的san-loader

项目不大，其实可以考虑yoxjs，轻，便捷，基本功能能得到满足

以上几点综合考虑后选择百度的 San

百度开源，文档较全且中文友好，周边生态充足能满足常见需要，开发套件也比较齐全，能较好的做模块化拆分

UI

目前主流的两个Mvvm方案都有成熟的UI套件，比如 react + ant-design， vue + element-ui

san在这块没有现成的可用方案，san官方文档的两个周边UI项目，santd 和 san-mui，都不适配IE8。

这样就只有两种选择：

一、自己编写所有的UI样式

二、找个适配IE8的前端库，我选择这个

最终选择 Bootstrap，它本身基于css，可以无需js单独使用。2.3.2的版本对于IE也有着不错的支持。

网络请求

Jquery 或者 axios

如果使用到jquery的一些插件或者功能，可以直接使用jquery ajax，1.12.4的版本的体积在97K

如果只需要网络请求可以使用 axios，体积更小巧 ( <17K )

代码演示

San很容易上手，下面是一个在线演示的双向绑定

在 webpack 中可以使用 san-loader 来加载 .san 文件，下面是一个示例

<template>
  <fregement>
    <p> {{ name }} </p>
    <input value="{= name =}">
  </fregement>
</template>
<script>
  export default {
    initData() {
      return {
        name: 'hello world'
      }
    } 
  }
</script>
复制代码

初始化项目可以通过 San-Cli 构建，非常方便，具体参考官方文档

然后再加一点点的细节，就可以做一个简单的表单

和chrome的对比