平稳退化 :

  javascript平稳退化就是如果一个浏览器完全不支持js或者禁用js的时候,它的基本功能不会受到任何影响。比方说一个网站使用了大量javascript来优化页面,我们现在把浏览器的javascript给禁用掉,这个网站的显示效果会变得比较糟,但是基本功能不会受到影响:登录页面可以正常登录,表单可以正常提交等。

  一些网站如果禁用js,它的基本功能就会受到严重影响,比方说某个链接打不开,表单无法提交等,这些都是不能实现平稳退化的。

  如,就像表单提交,通常可以用<input type="submit">来实现提交功能,也可以使用Jquery的AJAX提交来实现:  

$.ajax({
  type:"get",
  url:"url",
  async:true,
  success:function(){
    alert("ajax提交");
  }
});

  这样子也可以实现表单提交,但是如果浏览器的js被禁用了,这个就无效了。如果非要在一些场合使用ajax提交方法又要兼顾js的平稳退化,对于它的处理方法是预先在form中定义好一个submit按钮: 

<form id="form" method="post" action="url">
  <input type="submit" id="sub">
</form>

  JS代码中默认设定submit不可见

<script>
window.onload = function () {
  document.getElementById("sub").setAttribute("style","display:none")
}
</script>

  这样一旦js被禁用,对submit的隐藏就会失效,显示出来的submit按钮可以继续完成表单提交的功能。

  如链接打开事件:

<a href="#" id="openNewUrl">例子</a>
<script>
$("openNewUrl").on("click",function(){
  window.open('http://baidu.com',"新的窗口名字","新的窗口属性(窗口尺寸、工具条、菜单条、初始显示位置等)");
  return false;  //阻止默认事件
}
</script>

  把 href 属性的值设为 “#” 只是为了创建一个空链接。实际工作全部由onclick负责完成。这种做法也不行,一旦用户禁用了浏览器的JavaScript功能,这样的链接将毫无用处。

  兼顾js平稳退化。

<a href="http://baidu.com" id="openNewUrl">例子</a>

渐进增强:

  在客户的浏览器支持JavaScript功能的前提下,我们才考虑“渐进增强”。浏览器有不同的版本,高级版本支持的JavaScript功能就多一些,低级版本浏览器支持的JavaScript功能就少一些。所以就算浏览器支持JavaScript功能,我们也要区别对待不同版本的浏览器。例如:如果你用JavaScript5的对象和方法来编写程序,那么Firefox,Safari,Chrome,IE等低级版本,可能就不能使用你的程序。所以你解决这个问题的方式就叫“渐进增强”,基本上就是一些判断语句------如果这个浏览器不存在这个对象或者方法,则程序退出。

即:
“平稳退化”是在浏览器没有JavaScript功能,或没有开启JavaScript功能情况下,我们解决这种问题的方式;
“渐进增强”是在浏览器开启JavaScript功能后,如果浏览器版本不支持某些JavaScript能力,我们解决这种问题的方式。

Javascript平稳退化、渐进增强的更多相关文章

  1. JavaScript - 平稳退化

    JavaScript使用window对象的open()方法来创建新的浏览器窗口.这个方法有三个参数:window.open(url,name,features)这三个参数都是可选的.1.第一个参数是想 ...

  2. Web设计思想——渐进增强

    最近在拜读一本Web体验相关的书<渐进增强--跨平台用户体验设计 >,阅读后做些总结,消化一下书中的精髓. 在阅读本文前,可以先思考下面几个问题. 1. 浏览网页的目的是什么? 2. 浏览 ...

  3. javascript DOM 编程艺术 札记2 平稳退化

    定义 指的是即便浏览器不支持javascript,页面的基础展示功能也不会受到影响的做法. 不能平稳退化的实例 javascript:这种伪协议,它可以通过链接调用javascript函数.比如< ...

  4. 平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  5. JavaScript DOM编程艺术读后感(1)—— 平稳退化

    最近,在读<JavaScript DOM编程艺术(第二版)>这本书,想着将自己的读后感记录下来,作为记忆吧. 其实我并不是最近才刚开始读这本书的,我读了有一段时间了.我是一名web前端开发 ...

  6. HTML和JavaScript代码分离、平稳退化(1)

    使用的编辑器是Hbuilder,浏览器是Chrome. HTML和JavaScript代码分离,会使得修改网页功能和代码的阅读与维护会轻松的许多,不用在DOM中阅读大量的JavaScript代码. 文 ...

  7. web前端的渐进增强式开发模型

    渐进增强是前端开发的根本基础.从根本的层面上讲,它可以将HTML,CSS,JavaScript这三者的功能分离开来,这能让当前的项目开一个好头.我们在创建项目的开始要将这三者分开,它们对应的称呼是结构 ...

  8. css优雅降级和渐进增强

    今天看前端公众号发布的文章,学到了几个新词 1.modernizr 2.@support 3.优雅降级 其中第三个“优雅降级”,如此文艺的名字居然还是第一次听到.度娘了一下,发现[优雅降级],[渐进增 ...

  9. HTML5跨浏览器表单及HTML5表单的渐进增强

    HTML5跨浏览器表单 http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-f ...

随机推荐

  1. CSS实现栅格布局

    CSS实现栅格布局 设置容器container: .grid-container { width: 100%; max-width: 1200px; } 清除浮动: .row:before, .row ...

  2. win10x64位系统中nodejs的安装和配置

    官网http://nodejs.cn/download/ 2.下载完成后点击安装包 下一步,安装过的,这里根据自己的需求选择.选择第直接正常安装. 这一步是安装的内容,第一个是安装所有的模块,建议全部 ...

  3. 注解实战@Test标签

    1.创建一个Maven工程 2.点击java,右键-新建一个类 package com.course.testng; import org.testng.annotations.Test; publi ...

  4. MHA 主从切换过程及日志分析

    本文主要在MHA 切换日志的角度分析MHA切换的过.MHA故障切换过程如下图所示 第一部分:开启MHA 监控 通过分析日志,得到以下步骤: 1.读取MHA manager 节点的配置文件,并检查配置文 ...

  5. Python 绘图与可视化 seaborn

    Seaborn是一个基于matplotlib的Python数据可视化库.它提供了一个高级界面,用于绘制有吸引力且信息丰富的统计图形. 主页:http://seaborn.pydata.org/ 官方教 ...

  6. Spring Boot 启动的时候遇到 java.lang.ClassNotFoundException: ch.qos.logback.classic.Level

    在刚开始接触spring boot的时候,想创建一个Hello World 的project. 但是创建完之后,Run as 'Spring Boot APP'的时候遇到这个错误. Level类存在于 ...

  7. 【Codeforces Round #499 (Div. 2) E】Border

    [链接] 我是链接,点我呀:) [题意] 给你n个数字,每个数字可以无限用,每种方案可以组成一个和,问你%k的结果有多少种不同的结果. [题解] 相当于给你一个方程 \(x_1*a_1+x_2*a_2 ...

  8. 洛谷——P3258 [JLOI2014]松鼠的新家

    https://www.luogu.org/problem/show?pid=3258 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到 ...

  9. URAL 1457. Heating Main

    space=1&num=1457">1457. Heating Main Time limit: 1.0 second Memory limit: 64 MB Backgrou ...

  10. hdu 5077 NAND(打表)2014 Asia regional 鞍山站 H题

    题目链接:点击打开链接 题意:就是一个按位运算的一个函数.问最少经过多少步运算能够得到给定数. 思路:不是我投机取巧想打表.是特么这题仅仅能打表.. .打表思想用能够得到的数的集合表示状态bfs:最后 ...