[译]Javascript的弱点

本文翻译youtube上的up主kudvenkat的javascript tutorial播放单

源地址在此:

https://www.youtube.com/watch?v=PMsVM7rjupU&list=PL6n9fhu94yhUA99nOsJkKXBqokT3MBK0b

本次的视频主要讨论使用Javascript的弱势之处以及不利的地方

Javascript主要有两个弱点:

安全性:Javascript是在客户端机器上运行的.所以可能会有用户恶意使用javascript来做一些不好的事情,比如追踪你的浏览历史记录,盗取你的密码等等.这是人们倾向于禁用Javascript的主要原因之一

浏览器兼容性:不是所有的浏览器都用同样的规则来处理同一份Javascript代码.这就意味着,功能和用户界面也会因为浏览器的不同而不同.这就是为什么跨浏览器测试这么重要的原因.但是,Javascript的库比如jQuery让这个问题不再那么头痛.

Javascript浏览器兼容性例子

例子1:innerText属性被IE和Chrome支持,但是不被Firefox支持.这就意味着ValidatForm()这个我们在第一部分做过的函数只会在IE和Chrome下工作,Firefox下则不会

function ValidatForm()
{
    var ret = true;
    if (document.getElementById("txtFirstName").value == "")
    {
        document.getElementById("lblFirstName").innerText = "First Name is required";
        ret = false;
    }
    else
    {
        document.getElementById("lblFirstName").innerText = "";
    }
 
    if (document.getElementById("txtLastName").value == "")
    {
        document.getElementById("lblLastName").innerText = "Last Name is required";
        ret = false;
    }
    else
    {
        document.getElementById("lblLastName").innerText = "";
    }
 
    if (document.getElementById("txtEmail").value == "")
    {
        document.getElementById("lblEmail").innerText = "Email is required";
        ret = false;
    }
    else
    {
        document.getElementById("lblEmail").innerText = "";
    }
 
    return ret;
}

要让以上代码在IE,Chrome或者Firefox下都能工作的话,需要用textContent替换掉innerText属性,如下所示:

function ValidatForm()
{
    var ret = true;
    if (document.getElementById("txtFirstName").value == "")
    {
        document.getElementById("lblFirstName").textContent = "First Name is required";
        ret = false;
    }
    else
    {
        document.getElementById("lblFirstName").textContent = "";
    }
 
    if (document.getElementById("txtLastName").value == "")
    {
        document.getElementById("lblLastName").textContent = "Last Name is required";
        ret = false;
    }
    else
    {
        document.getElementById("lblLastName").textContent = "";
    }
 
    if (document.getElementById("txtEmail").value == "")
    {
        document.getElementById("lblEmail").textContent = "Email is required";
        ret = false;
    }
    else
    {
        document.getElementById("lblEmail").textContent = "";
    }
 
    return ret;
}

例子2: 下面的ddlGenderSelectionChanged()只在Chrome和Firefox下工作,但是IE则无法识别该函数

[!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml..."]
 
[html xmlns="http://www.w3.org/1999/xhtml"]
[head runat="server"]
    [title][/title]
    [script type="text/javascript" language="javascript"]
        function ddlGenderSelectionChanged()
        {
            alert('You selected ' + ddlGender.value);
        }
    [/script]
[/head]
[body]
    [form id="form1" runat="server"]
    [div]
        [select id="ddlGender" onchange="ddlGenderSelectionChanged()"]
            [option]Male[/option]
            [option]Female[/option]
        [/select]
    [/div]
    [/form]
[/body]
[/html]

要让这个Javascript函数在所有浏览器中都可用,我们需要做如下调整

[script type="text/javascript" language="javascript"]
    function ddlGenderSelectionChanged()
    {
        alert('You selected ' + document.getElementById('ddlGender').value);
    }
[/script]