坑爹的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. Bribing FIPA

    Bribing FIPA 给出多棵有n个节点的有根树,第i个节点有一个权值\(a_i\),定义一个点能控制的点为其所有的子节点和它自己,询问选出若干个点的最少的权值之和,并且能够控制大于等于m个点,\ ...

  2. Promise 解决同步请求问题

    在写小程序和vue项目中,由于 api 不提供 同步请求,因此,可以通过  Promise 来实现 同步请求操作 在这里 对于 Promise 不太了解的小伙伴 可以查找 Promise 的api 文 ...

  3. chkconfig 与 systemctl

    chkconfig命令 主要用来更新(启动或停止)和查询系统服务(service)的运行级信息,用于维护/etc/rc[0-6].d目录的命令行工具. chkconfig -–add httpd 增加 ...

  4. 56 Marvin: 一个支持GPU加速、且不依赖其他库(除cuda和cudnn)的轻量化多维深度学习(deep learning)框架介绍

    0 引言 Marvin是普林斯顿视觉实验室(PrincetonVision)于2015年提出的轻量化GPU加速的多维深度学习网络框架.该框架采用纯c/c++编写,除了cuda和cudnn以外,不依赖其 ...

  5. (转)使用Apache的ab工具进行压力测试

    转:http://www.cnblogs.com/luckyliu/archive/2012/03/04/2379306.html Apache附带的ab工具(本机使用的PHP环境是WAMP集成环境, ...

  6. hdu4126_hdu4756_求最小生成树的最佳替换边_Kruskal and Prim

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:  Portal: hdu4126 hdu4756  原题目 ...

  7. 使用RAS+AES对接口数据加解密

    在实际开发中,会遇到两个系统之间传输数据,为了对传输的数据进行保护,需要发送方对接口数据进行加密,接收方对数据解密. 对数据加密,采用RSA+AES双重加密,是数据更加安全. 使用前提: 如果客户端本 ...

  8. LeetCode刷题笔记-递归-将有序数组转换为二叉搜索树

    题目描述 将一个按照升序排列的有序数组,转换为一棵高度平衡二叉搜索树. 本题中,一个高度平衡二叉树是指一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过 1. 示例: 给定有序数组: [-10, ...

  9. Codeforces 1159A A pile of stones

    题目链接:http://codeforces.com/problemset/problem/1159/A 题意:初始石头堆石子数未知,求进行 n 次加减操作后,石头堆石子数最小的可能是多少. 思路:正 ...

  10. 拾遗:Perl 正则表达式

    三种正则模式: 匹配:m//,其中前缀 m 可省略 替换:s/// 转化:tr/// 操作符: =~:存在匹配项则返回结果 !~:不存在匹配项则返回结果 修饰符: i:忽略大小写,如:s/.../.. ...