坑爹的ie,作为小组leader,尼玛,小伙伴儿们不乐意做的事情,我来做好了。。心累、、、

如果,各位同学有定制开发ie6-8版本的需求,还是尽量不要用单页应用模式了,也不要用avalon这类mvvm框架了,也不是不能做,这种mvvm模式写起来还是挺爽的。

只是一旦在 ie6上遇到奇葩问题,你会很闹心,这个风险在工期约束比较紧的情况下,尤其需要注意。

基础框架

本项目为单页应用,框架搭建为:avalon(双向数据绑定)+requireJS(js及模板动态加载)+director(路由管理)

avalon

  • 只用到了数据绑定和指令,其他如组件等未使用

requireJS

  • 业务代码(js&&html)模块化加载
  • html模板动态加载使用require的插件text.js实现

注:css在scss中引入命名空间,实现的模块管理(原则上也可以做require动态加载,但是没大必要了)

director.js

  • 非常优秀的路由管理库。git地址:https://github.com/flatiron/director.js (调研过竞品page.js,其开发文档以及ie6-8支持度远不如其文档描述的那样友好,果断放弃)
  • 一些源码改动。因为业务中需要设置document.domain,这会导致ie6-8中操作或者访问location对象或者iframe时遇到不同程度的“拒绝访问”限制,所以,手动修改了director.js的源码,改动部分见内网项目

js&&css 兼容性

最佳实践:
尽量避开使用ie6-8不支持的特性(如css属性选择器等等等等),因为多数polyfill并不像他们声称的那样靠谱(比如ieBetter、selectivizr)

一些可用的polyfill

  • 少量代码段 一些特性几句代码即可支持,如html5标签支持、IE6背景图闪烁

  • es6-promise

  • jquery.placeholder(不是特完美)

ie6-8 avalon2 单页应用项目实战备忘的更多相关文章

  1. vue-route+webpack部署单页路由项目,访问刷新出现404问题

    问题描述:前端同事使用Vue.js框架,利用vue-route结合webpack编写了一个单页路由项目,运维协助在服务器端配置nginx.部署完成后,访问首页没问题,从首页里打开二级页面没问题,但是所 ...

  2. Vue.js结合vue-router和webpack编写单页路由项目

    一.前提 1. 安装了node.js. 2. 安装了npm. 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js. 打开cmd,输入np ...

  3. Vue Cli 3 搭建单页应用项目刷新 404 问题 解决方案(以Apache为例)

    vue 项目 版本 Vue Cli 3.3 官方文档 https://router.vuejs.org/zh/guide/essentials/history-mode.html 因为本项目部署在 A ...

  4. Vue之vue自动化工具快速搭建单页项目目录

    1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...

  5. 如何在vue单页应用中使用百度地图

    作为一名开发人员,每次接到开发任务,我们首先应该先分析需求,然后再思考技术方案和解决方案.三思而后行,这是一个好的习惯. 需求:本项目是采用vue组件化开发的单页应用项目,现需要在项目中引入百度的地图 ...

  6. vue 单页应用中微信支付的坑

    vue 单页应用中微信支付的坑 标签(空格分隔): 微信 支付 坑 vue 场景 在微信H5页面(使用 vue-router2 控制路由的 vue2 单页应用项目)中使用微信 jssdk 进行微信支付 ...

  7. 单页应用seo收录神器 -- seo-mask

    前言 看到标题的人肯定会问,seo-mask是什么,为什么可以解决单页应用seo无法被收录的难题呢? 简单来讲seo-mask做的就是为已经发布线上运营的的单页应用项目建立另一个简单的利于seo的镜像 ...

  8. 手把手教你把web应用丢到服务器上(单页应用+ 服务端渲染)

    前两篇文章中,我分别介绍了框架的搭建利用vue-cli + vant搭建一个移动端开发模板,并且把项目中axios请求和vuex的用法做了简要的介绍如何在项目里管理好axios请求与vuex.在这两篇 ...

  9. 从零搭建一个IdentityServer——单页应用身份验证

    上一篇文章我们介绍了Asp.net core中身份验证的相关内容,并通过下图描述了身份验证及授权的流程: 注:改流程图进行过修改,第三方用户名密码登陆后并不是直接获得code/id_token/acc ...

随机推荐

  1. 如何打造7*24h持续交付通道?阿里高级技术专家的5点思考

    我们对于研发效能的讨论,本质上是提高整个技术生态中的协同效率.如果仅从研发角度出发,技术团队要实现的终极目标是7*24小时的灵活发布窗口,以及更快的业务迭代能力. 7*24小时发布窗口的实现其实并不简 ...

  2. NX二次开发-UFUN返回当前图纸页的Tag函数UF_DRAW_ask_current_drawing

    除了UF_DRAW_ask_current_drawing这个函数外,用UF_DRAW_ask_drawings也可以获得tag.UF_DRAW_ask_current_drawing只能获得当前这一 ...

  3. vue-cli整合axios的几种方法

    Vue这个框架现在在单页面应用方面非常受人欢迎. 基于vue-cli创建的项目怎么样才能更好地处理网络请求? 首选的应该就是axios了 这次给刚接触vue的新手介绍一下axios在vue中如何使用 ...

  4. Tomcat debug 模式, Application一直reload,导致内存溢出

    在server.xml配置文件中,将reloable改为false.

  5. HDU6395-Sequence 矩阵快速幂+除法分块 矩阵快速幂模板

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:Portal传送门  原题目描述在最下面. Solution ...

  6. Devstack — screen 调试工具的使用

    目录 目录 为什么要使用 screen 工具 启动 screen screen 的切换常用 退出和重新连接 screen Restart Openstack Services screen 指令选项总 ...

  7. RoadFlow开源工作流源码-项目架构分析

    项目文件结构: 很明了一个标准的三层架构的系统. 表示层:Web 业务层:Business 数据访问层:Data 另外存在缓存层:Cache缓存 增加公共使用类库:Utility 下面以一个实例(系统 ...

  8. ultis, BIT(x), BITCOUNT(x)

    /* http://resnet.uoregon.edu/~gurney_j/jmpc/bitwise.html */ #define BITCOUNT(x) (((BX_(x)+(BX_(x)> ...

  9. 常用的css解决方案

    一. css 2.x code 1. 文字换行  /*强制不换行*/ white-space:nowrap; /*自动换行*/ word-wrap: break-word; word-break: n ...

  10. 实现solr热词排行榜

    现在有业务场景,要求实现词库里面,最新,最热的词并显示,点击热词后可以进入相关信息的文章或者句子 热词的显示频率12小时更新一次. 实现思路: 实现步骤: