坑爹的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. linux服务器创建docker

    关于Docker在Linux服务器中的安装以及使用1 安装: yum install docker 2 启动: systemctl start docker.service 3.加入开机启动: sys ...

  2. .net Core之【区域】路由配置

    1.创建项目 现在的项目是比较干净的 2.创建一个区域 创建完成后,会出现一个页面,人家都说了怎么设置路由规则 3.进入Startup.cs文件中添加红色代码 app.UseMvc(routes =& ...

  3. HashMap 介绍

    基本介绍 1. 用于存储Key-Value键值对的集合(每一个键值对也叫做一个Entry)(无顺序). 2. 根据键的hashCode值存储数据,大多数情况下可以直接定位到它的值. 3. 键key为n ...

  4. 1、linux常用命令的英文单词缩写

    1.linux常用命令的英文单词缩写 命令缩写: ls:list(列出目录内容) cd:Change Directory(改变目录) su:switch user 切换用户 rpm:redhat pa ...

  5. windows中无法访问共享问题

    http://jingyan.baidu.com/article/456c463b66d9320a5831448b.html 很多情况下我们遇到我们设置的共享没有密码别人无法访问,为此为大家推荐几步操 ...

  6. 重启集群的时候发现HBase的HRegionServer 服务启动失败

    今天在测试环境下的集群重启了下,启动Hbase的时候报错: $ sh start-hbase.sh starting master, logging to /home/hadoop/hbase-0.9 ...

  7. JQuery AJAX 通过一般处理程序 取列表

    由于上一篇的积累 这一个就简单了 也就是把反回了字符串 显示到table中 $("#btnSearch").click(function () { $.post("Cur ...

  8. vue中解决拖动和点击事件的冲突

    BUG说明: 鼠标上下方向拖拽,如果松开时鼠标位于悬浮按钮上会默认执行click事件,经验证,click事件与mouse事件的执行顺序为onmousedown =>onmouseup => ...

  9. JS对象 指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

    指定分隔符连接数组元素join() join()方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. 语法: arrayObject.join(分隔符) 参数说明: 注意:返回 ...

  10. JS对象 字符串分割 split() 方法将字符串分割为字符串数组,并返回此数组。 语法: stringObject.split(separator,limit)

    字符串分割split() 知识讲解: split() 方法将字符串分割为字符串数组,并返回此数组. 语法: stringObject.split(separator,limit) 参数说明: 注意:如 ...