zoukankan      html  css  js  c++  java
  • Javascript平稳退化、渐进增强

    平稳退化 :

      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能力,我们解决这种问题的方式。

  • 相关阅读:
    201871020225牟星源 《面向对象程序设计(java)》第一周学习总结
    201871020225牟星源《面向对象程序设计(java)》第十周学习总结
    201871020225牟星源 《面向对象程序设计(java)》课程学习进度条
    201871020225牟星源《面向对象程序设计(java)》第67周学习总结
    201871020225牟星源《面向对象程序设计(java)》第四周学习总结
    201871020225牟星源《面向对象程序设计(java)》第七周学习总结
    模拟赛 题目重修
    SP1026 FAVDICE Favorite Dice
    可是姑娘,你为什么要编程呢?
    javascript中offset、client、scroll的属性总结
  • 原文地址:https://www.cnblogs.com/intangible/p/6746584.html
Copyright © 2011-2022 走看看