第23篇 js快速学习知识
前面说了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快速学习知识的更多相关文章
- Knockout.js快速学习笔记
原创纯手写快速学习笔记(对官方文档的二手理解),更推荐有时间的话读官方文档 框架简介(Knockout版本:3.4.1 ) Knockout(以下简称KO)是一个MVVM(Model-View-Vie ...
- 第26篇 jQuery 快速学习下
前面说了下jQuery了,大部分说的都是选择器和过滤器方面的东西,这个写完后,后面就说下剩下的东西了,离目标越来越近了.下面就说说这些东西 事件 传统比较 在js中说了原生js的绑定事件,基本的形式如 ...
- 第25篇 jQuer快速学习(上)---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- 第24篇 js小知识和“坑”
前面说了说了js的相关知识,基本上除了语法外,把项目常用的知识做了一个梳理,现在说下js的其它方面的知识,这些知识不成体系,属于不理解对于一般开发没什么太多影响,但如果理解清楚,可以更好去开发. js ...
- vue.js和vue-router和vuex快速上手知识
vue.js和vue-router和vuex快速上手知识 一直以来,认为vue相比react而言,学习成本会更低,会更简单,但最近真正接触后,发现vue的各方面都有做一些客户化的优化,有一些亮点,但也 ...
- RabbitMQ学习总结 第二篇:快速入门HelloWorld
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- js 正则学习小记之匹配字符串优化篇
原文:js 正则学习小记之匹配字符串优化篇 昨天在<js 正则学习小记之匹配字符串>谈到 个字符,除了第一个 个,只有 个转义( 个字符),所以 次,只有 次成功.这 次匹配失败,需要回溯 ...
- Node.js学习笔记(1):Node.js快速开始
Node.js学习笔记(1):Node.js快速开始 Node.js的安装 下载 官方网址:https://nodejs.org/en/ 说明: 在Windows上安装时务必选择全部组件,包括勾选Ad ...
- 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 ...
随机推荐
- ArcGIS Server的切图原理深入(转载)
http://forum.osgearth.org/template/NamlServlet.jtp?macro=search_page&node=2174485&query=arcg ...
- dubbo框架揭秘之服务引用
ApplicationConfig config = new ApplicationConfig("hello-worldp"); RegistryConfig reg = new ...
- 前端程序员应该知道的 15 个 jQuery 小技巧
下面这些简单的小技巧能够帮助你玩转jQuery. 返回顶部按钮 预加载图像 检查图像是否加载 自动修复破坏的图像 悬停切换类 禁用输入字段 停止加载链接 切换淡入/幻灯片 简单的手风琴 让两个div高 ...
- 【翻译】使用Visual Studio在Azure上部署Asp.Net Core Web应用
配置运行环境 Install the latest Azure SDK for Visual Studio. The SDK installs Visual Studio if you don't a ...
- BNU Online Judge-34978-汉诺塔
题目链接 http://www.bnuoj.com/bnuoj/problem_show.php?pid=34978 这题在比赛时AC了不过那时是根据测试数据 抱着来试一下的想法,没想就AC了,其实 ...
- HDU-1020-Encoding(水题,但题目意思容易搞错,英语的问题)
题目链接 http://acm.hdu.edu.cn/webcontest/contest_showproblem.php?pid=1000&ojid=0&cid=7996&h ...
- Flex移动应用程序开发的技巧和窍门(一)
这是一个由多个部分组成的系列文章的第一部分,它包含了Flex移动开发的若干技巧.如果你过去习惯于桌面和Web编程,你会发现,开发移动应用程序将面临一系列新的挑战. 除了重新思考你的对数据存储和处理的策 ...
- 移动设备应用程序中支持多个屏幕大小和 DPI 值
支持多个屏幕大小和 DPI 值的指导原则 要部署独立于平台的应用程序,应了解不同的输出设备.设备可以具有不同的屏幕大小或分辨率以及不同的 DPI 值或密度. Flex 工程师 Jason SJ 在他的 ...
- ASP.NET下使用xml反序列化、缓存实现个性化配置文件的实时生效
因为一些配置属性比较多,存在多组属性,因此结合xml解析.缓存技术,实现配置文化的自动解析.存入缓存.缓存依赖实时更新配置内容. 配置文件反序列化存入缓存的核心方法: public Class.Set ...
- js精要之模块模式
// 模块模式是一种用于创建拥有私有数据的单件对象的模式,基本做法是使用立调函数(IIFE)来返回一个对象 var yourObjet = (function(){ // 私有数据 return { ...