前面说了js的一些高级方面的基础知识，这些都是比较容易出错的和比较难理解的东西，除了这些之外其它的知识都比较简单了，基础学好了，扩展起来就是小意思。今天说说js方面可以快速学习和入门的知识。

1、闭包

对于闭包来说，很多人对它有误解，有的说的怎么怎么好，但是我觉得这个东西说的那么悬无非是忽悠人的，对于闭包我看到有一篇博客上面说的很好：

）闭包是一种设计原则，它通过分析上下文，来简化用户的调用，让用户在不知晓的情况下，达到他的目的；

）网上主流的对闭包剖析的文章实际上是和闭包原则反向而驰的，如果需要知道闭包细节才能用好的话，这个闭包是设计失败的；

）尽量少学习

所以，我在这里就用很少的内容去说下，先说一个例子，你如何得用js去写一个计数器？保证我在任何时候调用的时候都不重复？

对于上面的这个例子应该用想到用全局的变量 ，但是我们知道，全局变量有本身的缺点，如果在多人协作的时候，容易被修改和覆盖。所以我们要想到时这个变量要能在全局访问，不能在全局修改。所以我们可以考虑把他封装有一个函数中，如下代码：

function a(){
var cnt=0;
return cnt++;
}

但是这样会有一个问题，虽然是被保护起来了，但是没有实现功能。所以我们再修改下

var cnt = (function() {
    var cnt = 0;
    return function() {
        cnt = cnt + 1;
        return cnt;
    }
})();
alert(cnt());

这样就能满足我们的想法了，这个是没有什么新的东西，只是一个设计的原则，cnt对于里面的匿名函数来说是有访问权限，但对于其它的形成了封闭的包，如同是一个封闭起来的全局变量，称之为闭包。

2、js的事件机制

对于js来说，事件机制无非有两种，一个是冒泡模型，一个是捕捉。

捕捉模型：是从外面的dom对象开始触发，然后再依次到层层的到当前的触发对象。

绑定的方法：dom.addEventListener('click',doSomething2,true)

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="d1" style="border:1px solid black;width:300px;height:300px;">
        <div id="d2" style="border:1px solid black;width:200px;height:200px;margin-top:50px;margin-left:50px;"></div>
    </div>
</body>

</html>
<script type="text/javascript">
var d2 = document.getElementById('d2');
var d1 = document.getElementById('d1');
var body = document.getElementsByTagName('body')[0];
d2.addEventListener('click', function() {
    console.log("d2");
}, true);
d1.addEventListener('click', function() {
    console.log("d1");
}, true);
body.addEventListener('click', function() {
    console.log("body");
}, true);
</script>

运行结果如下：

从上面的运行结果可以看出，这个事件的顺序是从外到里，总结图如下：

冒泡模型： 事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

IE 5.5: div -> body -> document

IE 6.0: div -> body -> html -> document

Mozilla 1.0: div -> body -> html -> document -> window

绑定的方法：dom.addEventListener('click',doSomething2,false),让冒泡停止的方法是stopPropagation

相关代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
</head>

<body>
    <div id="d1" style="border:1px solid black;width:300px;height:300px;">
        <div id="d2" style="border:1px solid black;width:200px;height:200px;margin-top:50px;margin-left:50px;"></div>
    </div>
</body>

</html>
<script type="text/javascript">
var d2 = document.getElementById('d2');
var d1 = document.getElementById('d1');
var body = document.getElementsByTagName('body')[0];
d2.addEventListener('click', function() {
    console.log("d2");
}, false);
d1.addEventListener('click', function() {
    console.log("d1");
}, false);
body.addEventListener('click', function() {
    console.log("body");
}, false);
</script>

运行结果如下：

冒泡事件模型如下，这里不多说了：

3、匿名函数

先看代码：

(function() {
    console.log("hello");
})();

! function() {
    console.log("hello");
}();
+ function() {
    console.log("hello");
}();
- function() {
    console.log("hello");
}();

这几个都是匿名函数，执行的结果是一样的，不过效率不一样，第一种最为常用 也是效率最高

今天，就先说到这，下次说下js的其它方面的优化小知识

喜欢交流请加入：113249828

写于 2015.11.19

第23篇 js快速学习知识的更多相关文章

  1. Knockout.js快速学习笔记

    原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...

  2. 第26篇 jQuery 快速学习下

    前面说了下jQuery了,大部分说的都是选择器和过滤器方面的东西,这个写完后,后面就说下剩下的东西了,离目标越来越近了.下面就说说这些东西 事件 传统比较 在js中说了原生js的绑定事件,基本的形式如 ...

  3. 第25篇 jQuer快速学习（上）---选择器和DOM操作

    这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...

  4. 第24篇 js小知识和“坑”

    前面说了说了js的相关知识,基本上除了语法外,把项目常用的知识做了一个梳理,现在说下js的其它方面的知识,这些知识不成体系,属于不理解对于一般开发没什么太多影响,但如果理解清楚,可以更好去开发. js ...

  5. vue.js和vue-router和vuex快速上手知识

    vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...

  6. RabbitMQ学习总结 第二篇：快速入门HelloWorld

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  7. js 正则学习小记之匹配字符串优化篇

    原文:js 正则学习小记之匹配字符串优化篇 昨天在<js 正则学习小记之匹配字符串>谈到 个字符,除了第一个 个,只有 个转义( 个字符),所以 次,只有 次成功.这 次匹配失败,需要回溯 ...

  8. Node.js学习笔记（1）：Node.js快速开始

    Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...

  9. js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术（一） LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq

    js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...

随机推荐

  1. 我对CSS中的BFC的理解

       1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下 ...

  2. kafkaspout以及kafkabolt的最简实例

            这个实例中有一个KafkaSpout,一个KafkaBolt,一个自定义Bolt QueryBolt.数据流程是KafkaSpout从topic为recommend的消息队列中取出St ...

  3. Angular - - ngReadonly、ngSelected、ngDisabled

    ngReadonly 该指令将input,textarea等文本输入设置为只读. HTML规范不允许浏览器保存类似readonly的布尔值属性.如果我们将一个Angular的插入值表达式转换为这样的属 ...

  4. 在DFS和BFS中一般情况可以不用vis[][]数组标记

    开始学dfs 与bfs 时一直喜欢用vis[][]来标记有没有访问过, 现在我觉得没有必要用vis[][]标记了 看代码 用'#'表示墙,'.'表示道路 if(所有情况都满足){ map[i][j]= ...

  5. js模块化开发——require.js的用法

    这个系列的第一部分和第二部分,介绍了Javascript模块原型和理论概念,今天介绍如何将它们用于实战. 我采用的是一个非常流行的库require.js. 一.为什么要用require.js? 最早的 ...

  6. 微信扫码下载APP

    前段时间开发过程中,要实现一个扫描二维码下载APP的功能,但是苹果系统中,微信不可以直接跳转苹果商店,需要先下载应用宝,显然太麻烦... 这样我们可以做个中间页,用中间页面生成二维码链接,在中间页代码 ...

  7. Linux笔记（九） - 软件包管理

    (1)软件包简介1.源码包   脚本安装包2.二进制包(rpm,系统默认包) (2)rpm包管理安装-i 安装 -v 显示详细信息 -h 显示进度--nodeps 不检测依赖性-U 升级例:安装: r ...

  8. 小谈JavaScript中this的用法

    "this"关键字是JavaScript中广泛应用的一种特性,但它经常也是这门语言中最容易混淆和误解的特性.那么"this"的实际意义是什么?它是如何求值的? ...

  9. ECMAScript 6 笔记（五）

    Iterator和for...of循环 1. Iterator(遍历器)的概念 Iterator接口的目的,就是为所有数据结构,提供了一种统一的访问机制,即for...of循环 遍历器(Iterato ...

  10. java_db常见错误总结

    1.java.sql.SQLSyntaxErrorException: ORA-00911: 无效字符 在拼写seq时是否存在存在特殊字符,如:常见语句后面添加了;2.ORA-01722:无效数字解决 ...