javascript要点

来源：互联网发布：gta5 n卡优化编辑：程序博客网时间：2024/05/17 22:24

// PrimaryStudent构造函数:function PrimaryStudent(props) {    Student.call(this, props);    this.grade = props.grade || 1;}// 空函数F:function F() {}// 把F的原型指向Student.prototype:F.prototype = Student.prototype;// 把PrimaryStudent的原型指向一个新的F对象，F对象的原型正好指向Student.prototype:PrimaryStudent.prototype = new F();// 把PrimaryStudent原型的构造函数修复为PrimaryStudent:PrimaryStudent.prototype.constructor = PrimaryStudent;// 继续在PrimaryStudent原型（就是new F()对象）上定义方法：PrimaryStudent.prototype.getGrade = function () {    return this.grade;};// 创建xiaoming:var xiaoming = new PrimaryStudent({    name: '小明',    grade: 2});xiaoming.name; // '小明'xiaoming.grade; // 2// 验证原型:xiaoming.__proto__ === PrimaryStudent.prototype; // truexiaoming.__proto__.__proto__ === Student.prototype; // true// 验证继承关系:xiaoming instanceof PrimaryStudent; // truexiaoming instanceof Student; // true

apply()类似的方法是call()，唯一区别是：
apply()把参数打包成Array再传入；
call()把参数按顺序传入。
比如调用Math.max(3, 5, 4)，分别用apply()和call()实现如下：
Math.max.apply(null, [3, 5, 4]); // 5Math.max.call(null, 3, 5, 4); // 5
对普通函数调用，我们通常把this绑定为null。
var width = window.innerWidth || document.body.clientWidth;
// 返回ID为'test'的节点：var test = document.getElementById('test');// 先定位ID为'test-table'的节点，再返回其内部所有tr节点：var trs = document.getElementById('test-table').getElementsByTagName('tr');// 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点：var reds = document.getElementById('test-div').getElementsByClassName('red');// 获取节点test下的所有直属子节点:var cs = test.children;// 获取节点test下第一个、最后一个子节点：var first = test.firstElementChild;var last = test.lastElementChild;
// 通过querySelector获取ID为q1的节点：var q1 = document.querySelector('#q1');// 通过querySelectorAll获取q1节点内的符合条件的所有节点：var ps = q1.querySelectorAll('div.highlighted > p');
注意：低版本的IE<8不支持querySelector和querySelectorAll。IE8仅有限支持。
用innerHTML时要注意，是否需要写入HTML。如果写入的字符串是通过网络拿到了，要注意对字符编码来避免XSS攻击。
第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签
两者的区别在于读取属性时，innerText不返回隐藏元素的文本，而textContent返回所有文本。另外注意IE<9不支持textContentvar    list = document.getElementById('list'),    haskell = document.createElement('p');haskell.id = 'haskell';haskell.innerText = 'Haskell';list.appendChild(haskell);
<div id="parent">    <p>First</p>    <p>Second</p></div>
一个是使用appendChild，把一个子节点添加到父节点的最后一个子节点，还可以使用parentElement.insertBefore(newElement, referenceElement);
当我们用如下代码删除子节点时：
var parent = document.getElementById('parent');parent.removeChild(parent.children[0]);parent.removeChild(parent.children[1]); // <-- 浏览器报错
浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。
因此，删除多个节点时，要注意children属性时刻都在变化。
还可以使用parentElement.insertBefore(newElement, referenceElement);<div id="parent">    <p>First</p>    <p>Second</p></div>
当我们用如下代码删除子节点时：
var parent = document.getElementById('parent');parent.removeChild(parent.children[0]);parent.removeChild(parent.children[1]); // <-- 浏览器报错
浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。
因此，删除多个节点时，要注意children属性时刻都在变化。
var    fileInput = document.getElementById('test-image-file'),    info = document.getElementById('test-file-info'),    preview = document.getElementById('test-image-preview');// 监听change事件:fileInput.addEventListener('change', function () {    // 清除背景图片:    preview.style.backgroundImage = '';    // 检查文件是否选择:    if (!fileInput.value) {        info.innerHTML = '没有选择文件';        return;    }    // 获取File引用:    var file = fileInput.files[0];    // 获取File信息:    info.innerHTML = '文件: ' + file.name + '<br>' +                     '大小: ' + file.size + '<br>' +                     '修改: ' + file.lastModifiedDate;    if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {        alert('不是有效的图片文件!');        return;    }    // 读取文件:    var reader = new FileReader();    reader.onload = function(e) {        var            data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'                    preview.style.backgroundImage = 'url(' + data + ')';    };    // 以DataURL的形式读取文件:    reader.readAsDataURL(file);});
function success(text) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = text;
}


function fail(code) {
    var textarea = document.getElementById('test-response-text');
    textarea.value = 'Error code: ' + code;
}


var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象


request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}


// 发送请求:
request.open('GET', '/api/categories');
request.send();


alert('请求已发送，请等待响应...');function success(text) {
    var textarea = document.getElementById('test-ie-response-text');
    textarea.value = text;
}


function fail(code) {
    var textarea = document.getElementById('test-ie-response-text');
    textarea.value = 'Error code: ' + code;
}


var request = new ActiveXObject('Microsoft.XMLHTTP'); // 新建Microsoft.XMLHTTP对象


request.onreadystatechange = function () { // 状态发生变化时，函数被回调
    if (request.readyState === 4) { // 成功完成
        // 判断响应结果:
        if (request.status === 200) {
            // 成功，通过responseText拿到响应的文本:
            return success(request.responseText);
        } else {
            // 失败，根据响应码判断失败原因:
            return fail(request.status);
        }
    } else {
        // HTTP请求还在继续...
    }
}


// 发送请求:
request.open('GET', '/api/categories');
request.send();


alert('请求已发送，请等待响应...');

var request;if (window.XMLHttpRequest) {    request = new XMLHttpRequest();} else {    request = new ActiveXObject('Microsoft.XMLHTTP');}
当创建了XMLHttpRequest对象后，要先设置onreadystatechange的回调函数。在回调函数中，通常我们只需通过readyState === 4判断请求是否完成，如果已完成，再根据status === 200判断是否是一个成功的响应。
XMLHttpRequest对象的open()方法有3个参数，第一个参数指定是GET还是POST，第二个参数指定URL地址，第三个参数指定是否使用异步，默认是true，所以不用写。
注意，千万不要把第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。
最后调用send()方法才真正发送请求。GET请求不需要参数，POST请求需要把body部分以字符串或者FormData对象传进去。
安全限制
上面代码的URL使用的是相对路径。如果你把它改为'http://www.sina.com.cn/'，再运行，肯定报错。在Chrome的控制台里，还可以看到错误信息。
这是因为浏览器的同源策略导致的。默认情况下，JavaScript在发送AJAX请求时，URL的域名必须和当前页面完全一致。
完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。有的浏览器口子松一点，允许端口不同，大多数浏览器都会严格遵守这个限制。
那是不是用JavaScript无法请求外域（就是其他网站）的URL了呢？方法还是有的，大概有这么几种：
一是通过Flash插件发送HTTP请求，这种方式可以绕过浏览器的安全限制，但必须安装Flash，并且跟Flash交互。不过Flash用起来麻烦，而且现在用得也越来越少了。
二是通过在同源域名下架设一个代理服务器来转发，JavaScript负责把请求发送到代理服务器：
'/proxy?url=http://www.sina.com.cn'
代理服务器再把结果返回，这样就遵守了浏览器的同源策略。这种方式麻烦之处在于需要服务器端额外做开发。
第三种方式称为JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：
<html><head>    <script src="http://example.com/abc.js"></script>    ...</head><body>...</body></html>
JSONP通常以函数调用的形式返回，例如，返回JavaScript内容如下：
foo('data');
这样一来，我们如果在页面中先准备好foo()函数，然后给页面动态加一个<script>节点，相当于动态读取外域的JavaScript资源，最后就等着接收回调了。
以163的股票查询URL为例，对于URL：http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice，你将得到如下返回：
refreshPrice({"0000001":{"code": "0000001", ... });
因此我们需要首先在页面中准备好回调函数：
function refreshPrice(data) {    var p = document.getElementById('test-jsonp');    p.innerHTML = '当前价格：' +        data['0000001'].name +': ' +         data['0000001'].price + '；' +        data['1399001'].name + ': ' +        data['1399001'].price;}

最后用getPrice()函数触发：
function getPrice() {    var        js = document.createElement('script'),        head = document.getElementsByTagName('head')[0];    js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';    head.appendChild(js);}
就完成了跨域加载数据。
一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。
一个最简单的高阶函数：
function add(x, y, f) {    return f(x) + f(y);}
如果不需要立刻求和，而是在后面的代码中，根据需要再计算怎么办？可以不返回求和的结果，而是返回求和的函数！
function lazy_sum(arr) {    var sum = function () {        return arr.reduce(function (x, y) {            return x + y;        });    }    return sum;}
x => x * x
上面的箭头函数相当于：
function (x) {    return x * x;}
var d = new Date(2015, 5, 19, 20, 15, 30, 123);d; // Fri Jun 19 2015 20:15:30 GMT+0800 (CST)
你可能观察到了一个非常非常坑爹的地方，就是JavaScript的月份范围用整数表示是0~11，0表示一月，1表示二月……，所以要表示6月，我们传入的是5！这绝对是JavaScript的设计者当时脑抽了一下，但是现在要修复已经不可能了。
第二种创建一个指定日期和时间的方法是解析一个符合ISO 8601格式的字符串：
var d = Date.parse('2015-06-24T19:49:22.875+08:00');d; // 1435146562875
var re1 = /ABC\-001/;var re2 = new RegExp('ABC\\-001');re1; // /ABC\-001/re2; // /ABC\-001/
var re = /^\d{3}\-\d{3,8}$/;re.test('010-12345'); // truere.test('010-1234x'); // falsere.test('010 12345'); // false
var re = /^(\d{3})-(\d{3,8})$/;re.exec('010-12345'); // ['010-12345', '010', '12345']re.exec('010 12345'); // null
拿到一个JSON格式的字符串，我们直接用JSON.parse()把它变成一个JavaScript对象：
JSON.parse('[1,2,3,true]'); // [1, 2, 3, true]JSON.parse('{"name":"小明","age":14}'); // Object {name: '小明', age: 14}JSON.parse('true'); // trueJSON.parse('123.45'); // 123.45
JSON.parse()还可以接收一个函数，用来转换解析出的属性：
JSON.parse('{"name":"小明","age":14}', function (key, value) {    // 把number * 2:    if (key === 'name') {        return value + '同学';    }    return value;}); // Object {name: '小明同学', age: 14}
JSON.stringify(xiaoming, null, '  ');
JSON.stringify(xiaoming, ['name', 'skills'], '  ');
function convert(key, value) {    if (typeof value === 'string') {        return value.toUpperCase();    }    return value;}JSON.stringify(xiaoming, convert, '  ');
var jqxhr = $.ajax('/api/categories', {
    dataType: 'json'
}).done(function (data) {
    ajaxLog('成功, 收到的数据: ' + JSON.stringify(data));
}).fail(function (xhr, status) {
    ajaxLog('失败: ' + xhr.status + ', 原因: ' + status);
}).always(function () {
    ajaxLog('请求完成: 无论成功或失败都会调用');
});编写jQuery插件
给jQuery对象绑定一个新方法是通过扩展$.fn对象实现的。让我们来编写第一个扩展——highlight1()：
$.fn.highlight1 = function () {    // this已绑定为当前jQuery对象:    this.css('backgroundColor', '#fffceb').css('color', '#d85030');    return this;}
如何编写jQuery Plugin
编写jQuery Plugin，要设置默认值，并允许用户修改默认值，或者运行时传入其他值。
最终，我们得出编写一个jQuery插件的原则：
给$.fn绑定函数，实现插件的代码逻辑；
插件函数最后要return this;以支持链式调用；
插件函数要有默认值，绑定在$.fn.<pluginName>.defaults上；
用户在调用时可传入设定值以便覆盖默认值。
var div = $('#test-animate');div.animate({    opacity: 0.25,    width: '256px',    height: '256px'}, 3000, function () {    console.log('动画已结束');    // 恢复至初始状态:    $(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');});
ajax请求(javascript)

适合不需要引入jquery的小应用

function ajax(options) {
    //编码数据
    function setData() {
        var name, value;
        if (data) {
            if (typeof data === "string") {
                data = data.split("&");
                for (var i = 0, len = data.length; i < len; i++) {
                    name = data[i].split("=")[0];
                    value = data[i].split("=")[1];
                    data[i] = encodeURIComponent(name) + "=" + encodeURIComponent(value);
                }
                data = data.replace("/%20/g", "+");
            } else if (typeof data === "object") {
                var arr = [];
                for (var name in data) {
                    var value = data[name].toString();
                    name = encodeURIComponent(name);
                    value = encodeURIComponent(value);
                    arr.push(name + "=" + value);
                }
                data = arr.join("&").replace("/%20/g", "+");
            }
            //若是使用get方法或JSONP，则手动添加到URL中
            if (type === "get" || dataType === "jsonp") {
                url += url.indexOf("?") > -1 ? data : "?" + data;
            }
        }
    }
     // JSONP
    function createJsonp() {
        var script = document.createElement("script"),
            timeName = new Date().getTime() + Math.round(Math.random() * 1000),
            callback = "JSONP_" + timeName;

        window[callback] = function(data) {
            clearTimeout(timeout_flag);
            document.body.removeChild(script);
            success(data);
        }
        script.src = url +  (url.indexOf("?") > -1 ? "" : "?") + "callback=" + callback;
        script.type = "text/javascript";
        document.body.appendChild(script);
        setTime(callback, script);
    }
    //设置请求超时
    function setTime(callback, script) {
        if (timeOut !== undefined) {
            timeout_flag = setTimeout(function() {
                if (dataType === "jsonp") {
                    delete window[callback];
                    document.body.removeChild(script);

                } else {
                    timeout_bool = true;
                    xhr && xhr.abort();
                }
                console.log("timeout");

            }, timeOut);
        }
    }

    // XHR
    function createXHR() {
        //由于IE6的XMLHttpRequest对象是通过MSXML库中的一个ActiveX对象实现的。
        //所以创建XHR对象，需要在这里做兼容处理。
        function getXHR() {
            if (window.XMLHttpRequest) {
                return new XMLHttpRequest();
            } else {
                //遍历IE中不同版本的ActiveX对象
                var versions = ["Microsoft", "msxm3", "msxml2", "msxml1"];
                for (var i = 0; i < versions.length; i++) {
                    try {
                        var version = versions[i] + ".XMLHTTP";
                        return new ActiveXObject(version);
                    } catch (e) {}
                }
            }
        }
        //创建对象。
        xhr = getXHR();
        xhr.open(type, url, async);
        //设置请求头
        if (type === "post" && !contentType) {
            //若是post提交，则设置content-Type 为application/x-www-four-urlencoded
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
        } else if (contentType) {
            xhr.setRequestHeader("Content-Type", contentType);
        }
        //添加监听
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (timeOut !== undefined) {
                    //由于执行abort()方法后，有可能触发onreadystatechange事件，
                    //所以设置一个timeout_bool标识，来忽略中止触发的事件。
                    if (timeout_bool) {
                        return;
                    }
                    clearTimeout(timeout_flag);
                }
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

                    success(xhr.responseText);
                } else {
                     error(xhr.status, xhr.statusText);
                }
            }
        };
        //发送请求
        xhr.send(type === "get" ? null : data);
        setTime(); //请求超时
    }


    var url = options.url || "", //请求的链接
        type = (options.type || "get").toLowerCase(), //请求的方法,默认为get
        data = options.data || null, //请求的数据
        contentType = options.contentType || "", //请求头
        dataType = options.dataType || "", //请求的类型
        async = options.async === undefined && true, //是否异步，默认为true.
        timeOut = options.timeOut, //超时时间。 
        before = options.before || function() {}, //发送之前执行的函数
        error = options.error || function() {}, //错误执行的函数
        success = options.success || function() {}; //请求成功的回调函数
    var timeout_bool = false, //是否请求超时
        timeout_flag = null, //超时标识
        xhr = null; //xhr对角
    setData();
    before();
    if (dataType === "jsonp") {
        createJsonp();
    } else {
        createXHR();
    }
}

0 0