第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/

QT连接SQL(1) QSQLQuery prepare and bindValue

#include #include #include int main(int argc, char *argv[]) { QCoreApplication a(argc...
  • seven_dj
  • seven_dj
  • 2014年05月09日 02:32
  • 621

C++学习日志第四篇

1.3 多态 定义:指属于不同类的对象对同一消息做出的不同的响应,具体表现是函数调用的“一种接口,多种方法”特性。从实现的角度可分为:编译时多态(常用且易学)和运行时多态(常用但不易学)。编译时多态...
  • irisalwayshere
  • irisalwayshere
  • 2016年03月30日 12:38
  • 219

《鸟哥的linux私房菜:基础学习篇》第3版 - 核心笔记(全)

一、什么是 Linux 呢?! • Unix 与 Linux 的历史     o Multics 系统:由 Bell(贝尔实验室)、MIT(麻省理工学院)与 GE(美国通     用电器)合作开发的...
  • sinat_36184075
  • sinat_36184075
  • 2017年05月19日 23:50
  • 616

Python快速学习第五天

第五天:抽象 1、    函数 检测函数是否可调用:callable >>> import math >>> y=math.sqrt >>> callable(y) True >>>...
  • tanggao1314
  • tanggao1314
  • 2016年08月14日 22:21
  • 1410

鸟哥的Linux私房菜 基础学习篇(第三版)

第零章 计算器概论 1 计算机:辅助人脑的好工具 接收用户指令与数据,经由中央处理器的数学与逻辑单元运算处理后,以产生或存储成有用的信息。 1.1 计算器的五大单元 输入单元,CPU控制单元,CPU算...
  • niuzhihuan
  • niuzhihuan
  • 2015年08月03日 20:17
  • 1015

C++开发高级篇(转)

 堆和栈的区别 一、预备知识—程序的内存分配 一个由c/C++编译的程序占用的内存分为以下几个部分 1、栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等。其操...
  • gggg_ggg
  • gggg_ggg
  • 2015年01月05日 12:59
  • 1176

学习JavaScript你必须掌握的8大知识点!

一、JavaScript思维导图之的学习 二、    JavaScript思维导图之  三、JavaScript思维导图之 四、JavaScript思维导图之...
  • u011313703
  • u011313703
  • 2017年04月06日 17:59
  • 1416

Echarts的初学者应该掌握的知识

1、新建一个echarts.html文件,为ECharts准备一个具备大小(宽高)的Dom。        ECharts        2、新建标签引入模块化单文件echarts.js       ...
  • qq_30546099
  • qq_30546099
  • 2017年05月05日 13:56
  • 469

快速学习JS的思考方法、有用

当人们尝试学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战:有些概念容易混淆,特别是当你学习过其他语言的时候。很难找到学习的时间(有时候是动力)。一旦当你理解了一些东西的时...
  • xllily_11
  • xllily_11
  • 2016年10月20日 15:54
  • 2640

JS学习十五天----设计模式开篇

JS设计模式开篇 前言 作为小小程序员一枚,除了敲个hello,world以后啥都不会了,最近发现设计模式这个东西挺好,想搞一下,声明,本屌不是一个看见什么好,什么新潮就追什么的人,本屌还是一个比...
  • shanyongxu
  • shanyongxu
  • 2015年08月15日 19:28
  • 1044
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:第23篇 js快速学习知识
举报原因:
原因补充:

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