第23篇 js快速学习知识

原创 2015年11月19日 23:11:01

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

1、闭包

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

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

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

3)尽量少学习

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

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

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

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

 

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

 

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

 

2js的事件机制

对于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

 



 

版权声明:本文为博主原创文章,未经博主允许不得转载。个人独立博客:http://blog.laofu.online/

相关文章推荐

《JS事件探秘》学习——基础知识练习及总结

最近跟着慕课网上的《JS事件探秘》课程学习,
  • mmrsdym
  • mmrsdym
  • 2014年10月09日 17:15
  • 531

Node.js学习--基础知识(6)--常用工具util和事件EventEmitter

一、util全局变量 1.util.inherits(constructor,superConstructor) 此方法是一个实现对象间原型继承的函数。javascript通过原型赋值来实现继承。 案...

Node.js学习--基础知识(2)--异步IO与事件式编程

Node.js 异步IO与事件式编程 Node.js最大的特性就是异步式I/O与事件结合的编程模式.控制流很大程度上靠事件和回调函数来组织,一个逻辑要拆分为若干个单元格.在最外层有一个大的事件,有...

关于这几天学习的一点知识(js,thinkphp等)

自己在家看了一点ThinkPHP的东西,想在这个框架上进行php程序的开发,有些东西看起来简单,可是做起来就没那么简单了,比如说php这个东西,以前一直以为php很简单,因为那时候不知道在什么地方看到...

JS基础知识之:DOM学习

DOM学习   http://www.w3school.com.cn/htmldom/dom_nodes.asp http://www.w3cschool.cc/jsref/dom-obj-attri...

从苏宁电器到卡巴斯基第23篇:难忘的三年硕士时光 I

初次接触逆向工程       不知不觉就来到了2013年的9月份,学校开学了,我开始正式体验研究生的生活了。按道理来说,硕士研究生是需要围绕在导师身边,每天朝九晚五地去实验室做项目的。不过我们老师没有...
  • ioio_jy
  • ioio_jy
  • 2016年07月29日 08:45
  • 4074

悟空学Linux专栏----第23篇

沙僧最近比较郁闷,他的老板知道他最近学了高精度定时器,就要他实现一个精度误差小于100us的高精度定时器。可是沙僧上课都在睡觉,那里会高精度定时器,所以他跑去找悟空帮忙。   悟空听沙僧说完之后,想...

Node.js学习--基础知识(1)--入门

Node.js最大的特性是采用异步式I/O与事件驱动的架构设计. Node.js使用的是单线程模式.在执行过程中会维护一个事件队列 Node.js编程入门: 1.Hello world 打开记事本,输...

Node.js学习--基础知识(9)--HTTP服务器

概念:Node.js 标准库提供了 http 模块,其中封装了一个高效的 HTTP 服务器和一个简易的HTTP 客户端。 http.Server 是一个基于事件的 HTTP 服务器,它的核心由 No...

JS深入学习知识整理(写下每日的收获! )

属性与原型  ?①function foo(){this.add = function(){};}       ②foo.prototype.add = function(){};      ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第23篇 js快速学习知识
举报原因:
原因补充:

(最多只允许输入30个字)