坑爹的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. 修改Ubuntu16.04默认主题标题栏的颜色

    默认主题为Ambiance: sudo gedit /usr/share/themes/Ambiance/gtk-3.0/gtk-main.css 将: @define-color dark_bg_c ...

  2. Spring boot热部署实战

    1.介绍 在开发工程中,修改一点儿代码,想看效果就需要重新启动服务,这样会花费大量时间在重启服务上,通过devtools热部署可以大大减少重启服务的时间. 之所以能减少时间,是因为Spring Boo ...

  3. CommandLineToArgvW调EXE传入参数【转载】

    #include <afxwin.h>  // TODO: add your code here LPWSTR *szArglist = NULL; ; szArglist = Comma ...

  4. NX二次开发-UFUN编辑图层类别描述UF_LAYER_edit_category_descr

    1 NX11+VS2013 2 3 #include <uf.h> 4 #include <uf_layer.h> 5 6 7 UF_initialize(); 8 9 //创 ...

  5. Always On主辅延迟相关描述

    延迟是AlwaysOn最大的敌人之一 延迟是AlwaysON的最大敌人之一.对AlwaysON而言,其首要目标就尽量减少(无法避免)主副本.辅助副本的数据延迟,实现主副本.辅助副本的“数据同步”.只有 ...

  6. Keystone controller.py & routers.py代码解析

    目录 目录 Keystone WSGI 实现 controllerspy routerspy 参考文档 Keystone WSGI 实现 Keystone 项目把每个功能都分到单独的目录下,EXAMP ...

  7. Tomcat下载部署及解决中文乱码显示

    一.下载 tomcat下载链接:https://tomcat.apache.org/ 1.进入tomcat官网后,我使用的是tomcat9,所以我选择tomcat9.然后点击core下的zip包下载. ...

  8. 20140404 OpencvGPU模块 参考文献交叉引用:引用->题注 加入3.1,3.2,3.2编号

    1.参考文献交叉引用:引用->题注 2.加入3.1,3.2,3.2编号:开始->段落 3.OpencvGPU模块,编译opencv.sln时记得在库目录中添加D:\opencv\build ...

  9. Java 中的 SPI 机制是什么鬼?高级 Java 必须掌握!

    作者:sigangjun blog.csdn.net/sigangjun/article/details/79071850 SPI的全名为:Service Provider Interface,大多数 ...

  10. 01、requests 基本使用

    requests模块的基本使用 基于网络请求的模块. 环境的安装:pip install requests 作用:模拟浏览器发起请求 分析requests的编码流程: 1.指定url 2.发起了请求 ...