拾遗 HTML中disabled和readonly的区别

11 篇文章 0 订阅
3 篇文章 0 订阅

共同点:作用是使用户不能够更改表单域中的内容.

区别:
1Readonly只针对input和textarea有效,
   disabled对于所有的表单元素有效(包括select,radio,checkbox,button…)

2、在表单元素使用了disabled后,我们将表单以POST或者GET的方式提交的话,这个元素的值不会被传递出去,
   readonly会将该值传递出去(一句话disabled:说你不行你就不行,行也不行)

disabled,readonly常用情况:

1、在某个表单中为用户预填了某个唯一识别代码,不允许用户改动,但是在提交时需要传递该值,
此时将属性设置为readonly

2、当用户正式提交了表单后需要等待管理员的信息验证,不允许用户再更改表单中的数据,而是只能够查看,
由于disabled的作用元素范围大,所以此时应该使用disabled,但同时应该注意的是要将submit buttondisabled掉,
否则只要用户按了这个按钮,如果在数据库操作页面中没有做完整性检测的话,数据库中的值会被清除。

3、在用户按了提交按钮后,利用javascript将提交按钮disabled掉,可防止在网络条件比较差的环境下,
用户反复点击提交按钮导致数据冗余地存入数据库

qusetion_1

<script>
    (function(){
        var a=b=1;
    // 给未声明的变量赋值,此变量就变为全局变量,严格模式下不可以这样声明
    // 因为赋值给a,b=1,是不存在的,var a=b=1,就可以等同于,b=1;var a=b;
        })()
    console.log(b);
    console.log('b defined?'+(typeof b !=='undefined'));
    console.log('a defined?'+(typeof a !=='undefined'));
   </script>

qusetion_2

<script>
   var  myObject ={
        foo:'bar',
        func:function(){
            var self=this;
            console.log(this.foo);//bar
            console.log(self.foo);//bar
            (function(){
            console.log(this.foo);//undefined
            console.log(self.foo);//bar
            }())
        }
    }
    myObject.func()
// 方法/函数是由谁(对象) 调用 的,方法/函数内部的 this 就指向谁(该对象);
//注意:被谁调用,不是处于谁的作用域,即使在作用域
//1、func是由myObject调用的,this指向 myObject。
//2、self指向myObject,相当于 myObject的this的副本。

//3、这个立即执行匿名函数表达式(IIFE)是由window调用的,this指向 window 。
//4、IIFE的作用域处于myObject.func的作用域中,本作用域找不到self变量,沿着作用域链向上查找self变量,
找到了指向 myObject对象的 self。
   </script>

qusetion_3 关于闭包与for循环的理解

function createFunction1(){
     for(var i=0;i<5;i++){
       function s(){
         console.log(i);
       }
       s();
     }
   }
createFunction1();   //0 1 2 3 4;
以上是一个正常的函数。
 function createFunction2(){
     for(var i=0;i<5;i++){
       setTimeout(function timer(){
         console.log(i);
       },i*1000);
     }
   }
createFunction2();  //每隔1秒输出‘4’、共输出5次

并不会按照我们预想的每隔1秒分别输出0、1、2、3、4
原因:
此函数在for循环的第一层是setTimeout函数,他的执行和createFunction1中的s函数一样,
将按分别在1秒后、2秒后、3秒后执行。但这儿需要注意的是,setTimeout的内部函数timer并没有立即执行,
for循环中的i将会把值分别赋给setTimeout外部参数中的i,但其内部函数timer()则只会引用包含函数
setTimeout()中的变量的最后一个值。因为闭包所保存的是整个变量对象,而不是某个特殊的变量。
当然其中的这些处理变化,
都是瞬间完成的,与执行时间并无关系,即使把1000改成0效果还是一样的。
重写这个函数:


 function createFunction3(){
     for (var i=0;i<5;i++){
       (function(j){
            setTimeout(function timer(){
            console.log(j);
           },i*1000);
       })(i);
     }
   }
createFunction3();   //每隔1秒分别输出0 1 2 3 4
再看上面这个例子,给外部包装了一个立即执行的匿名函数,setTimeout里面的匿名函数不再引用外部函数的参数,
而是直接引用外部匿名函数的参数,这时,一切就会按照我们预想的来执行了。

“use strict”

设立"严格模式"的目的,主要有以下几个:
 - 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为
  在正常模式中,如果一个变量没有声明就赋值,默认是全局变量。严格模式禁止这种用法,全局变量必须显式声明。

"use strict";

  v = 1; // 报错,v未声明

  for(i = 0; i < 2; i++) { // 报错,i未声明
  }//因此,严格模式下,变量都必须先用var命令声明,然后再使用。
  - 消除代码运行的一些不安全之处,保证代码运行的安全;
  禁止this关键字指向全局对象
  function f(){
    return !this;
  }
  // 返回false,因为"this"指向全局对象,"!this"就是false

  function f(){
    "use strict";
    return !this;
  }
  // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true.

因此,使用构造函数时,如果忘了加newthis不再指向全局对象,而是报错。
-----------------------------------------------------------
  function f(){
    "use strict";
    this.a = 1;

  };
  f();// 报错,this未定义2)禁止在函数内部遍历调用栈

  function f1(){

    "use strict";
    f1.caller; // 报错
    f1.arguments; // 报错

  }
  f1();

  - 提高编译器效率,增加运行速度;
  - 为未来新版本的Javascript做好铺垫。
  参考链接:[use strict](http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值