JavaScript 学习记录

推荐文章

arguments 的 callee 属性

function factorial(num) {
    if (num <= 1) {
        return 1;
    } else {
        // arguments 的 callee 属性是一个指针，指向拥有此 arguments 对象的函数
        // 这样，无论引用函数是使用的是什么名字，都可以保证正常完成递归调用
        return num * arguments.callee(num - 1);
    }
}

alert(factorial(4));

// 这样编写就会出错
function factorial(num){
    if (num <= 1){
        return 1;
    } else {
        return num * factorial(num-1);
    }
}

var anotherFactorial = factorial2;
factorial2 = null;
alert(anotherFactorial(4)); //出错！

caller 属性

function callerTest() {
    function outer() {
        inner();
    }

    function inner() {
        alert(arguments.callee.caller);
    }

    outer();
}

callerTest();

call() 和 bind()

/**
 * bind 函数使用练习
 */
function callAndBindTest() {
    window.color = "red";
    var o = {color: "blue"};

    function sayColor() {
        alert(this.color);
    }

    sayColor(o); //red
    sayColor.call(o); //blue

    var objectSayColor = sayColor.bind(o);
    objectSayColor(); //blue
}

// callAndBindTest();

通过触发监听事件获取 DOM 元素的结构（target）和下标（index）

var fontColors = document.getElementById("right_nav");
var list = fontColors.querySelectorAll("span");

for (var j = 0; j < list.length; j++) {
    list[j].index = j;
}

fontColors.addEventListener('mouseover', function (event) {
    /* event.target 指被执行事件的 DOM 对象
     * event.currentTarget 的区别是：若无监听事件，则向上追溯 DOM 对象
     */
    var no_ = event.target.index;
    var obj = document.getElementById("right_nav").getElementsByTagName("span")[no_];
    obj.style.color = "lightskyblue";
    obj.style.fontWeight = "bolder";
})

fontColors.addEventListener('mouseout', function (event) {
    var no_ = event.target.index;
    var obj = document.getElementById("right_nav").getElementsByTagName("span")[no_];
    obj.style.color = "black";
    obj.style.fontWeight = "unset";
})

间歇调用与超时调用

// 间歇调用（后者）与超时调用
setTimeout(function () {
    alert("Hello world!");
}, 10000);

setInterval(function () {
    alert("Hello world!");
}, 4000);

动态加载

function loadScript(url) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    document.body.appendChild(script);
}

function loadStyles(url){
    var link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href = url;
    var head = document.getElementsByTagName("head")[0];
    head.appendChild(link);
}

insertAdjacentHTML() 方法

接收两个参数：插入位置和要插入的 HTML 文本。第一个参数必须是下列值之一：

  • “beforebegin” ，在当前元素之前插入一个紧邻的同辈元素；
  • “afterbegin” ，在当前元素之下插入一个新的子元素或在第一个子元素之前再插入新的子元素；
  • “beforeend” ，在当前元素之下插入一个新的子元素或在最后一个子元素之后再插入新的子元素；
  • “afterend” ，在当前元素之后插入一个紧邻的同辈元素。
//作为前一个同辈元素插入
element.insertAdjacentHTML("beforebegin", "<p>Hello world!</p>");
//作为第一个子元素插入
element.insertAdjacentHTML("afterbegin", "<p>Hello world!</p>");
//作为最后一个子元素插入
element.insertAdjacentHTML("beforeend", "<p>Hello world!</p>");
//作为后一个同辈元素插入
element.insertAdjacentHTML("afterend", "<p>Hello world!</p>");

jQuery 为未来元素绑定点击事件

html 中用js动态添加的元素，用jquery的普通点击事件写法是不行的，例如：

$(".mremove").click(function(){
   alert(this.innerHTML);
});

这样写是不行的。

可以这样写

$(document).on("click", ".mremove", function(){
    alert(this.innerHTML);
});

event.target 和 event.currentTarget 的区别

var btn = document.getElementById("myBtn");
btn.onclick = function(event){
    alert(event.currentTarget === this); //true
    alert(event.target === this); //true
};
document.body.onclick = function(event){
    alert(event.currentTarget === document.body); //true
    alert(this === document.body); //true
    alert(event.target === document.getElementById("myBtn")); //true
};
/*
当单击这个例子中的按钮时， this 和 currentTarget 都等于 document.body ，因为事件处理程序是注册到这个元素上的。然而， target 元素却等于按钮元素，因为它是 click 事件真正的目标。由于按钮上并没有注册事件处理程序，结果 click 事件就冒泡到了 document.body ，在那里事件才得到了处理。
*/

事件流

事件冒泡：即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）

事件捕获：不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件

TypeScript

参考教程：https://ts.xcatliu.com

<noscript> 用法

noscript 元素用来定义在脚本未被执行时的替代内容（文本）。

此标签可被用于可识别

博客在允许 JavaScript 运行的环境下浏览效果更佳