AngularJS —— 使用模块组织你的代码 【已翻译100%】(1/3)
介绍 AngularJS 的库里面有很多东西,但本文中我只想专注于小的,针对特定主题的库,我相信通过它们能对Angular有一个较好的介绍. 理解这篇文章并不需要你有任何Angular相关的,甚至是JavaScript的经验。希望你能从本文中看到一些使用Angular的好处,并乐于动手尝试. 背景 我使用Angular有一段时间了,而在学习Angular的时候,我也喜欢构建一些样例,所以当我一开始深入进去的时候,对于模块或者JavaScript的设计模式,我也没有多想,那样对保持代码组织和条理性有帮助. 那就是所有的重点:保持代码的组织和条理性. 因此,现在我回过头来,创建了这个极其小巧的样例,以展示使用模块可以有多简单. 一路走来,我希望它能够成为一篇好的对Angular的介绍. (大多数)文章在阐述模式时的问题 大多数时候人们都会尝试去在读者知道模式是啥概念之前就开始阐述一个模式,而这基本上误导了每一个人. 这里要努力使得本文尽量简单,让我们首先来看一看这个问题吧。哪个问题呢?就是有关默认会在全局内存空间被创建的所有东西的Javascript的问题. 下面就是我所说的意思. JavaScript 默认的全局问题 设想你的HTML中有下面这样一段脚本. <script> var isDoingWork = false; </script>
范围? 你清楚这个变量的范围么? 这里你可以看到它在Action中是怎样的. 1.下载本文的代码样例. 2.在你的浏览器中打开 modulePattern.htm . 3.打开浏览器开发工具 -- F12(Chrome,IE) or Ctrl-Shift-I (Opera) -- (那样就可以看见控制台了) 4.在浏览器工具控制台下,输入: isDoingWork,然后回车 5.你会看到输出的值为false. 6.现在输入 : isDoingWork = true,然后回车 7.如此下载的值就为true了. 你已经改变了这个值. 8.你可以看到这个值已经通过输入doingwindow.isDoingWork = true然后回车,被添加到了全局窗口对象之中. 这可能会造成一些名字冲突,也会导致一些严重的bug. 这也许对你而言有点杞人忧天了,是不? 但是请设想你是决定要去实现某一个新的JS库,它每分每秒都可以被创建出来. 假设你发现了这个叫做 Panacea.js 的很棒的库,它将解决你所有的问题. 因此你向下面这样在你的页面中引用了它: script src="panacea.js"></ 如此简单,你就已经解决之前你遇到的所有问题. 然而,因为它是一个庞大的库,而你只想要解决方法,却不回去深挖这个庞大(几千行代码)源文件里的每一行代码. 而深埋在 Panacea.js 里面某个角落的确实下面这样的代码:
在JavaScript中,模块已经被创建用来模拟这种封装行为了,如此我们就不会去将我们的变量组织到一个全局的命名空间中,并造成了隐藏很深的难以被发现和修复的问题. 现在你知道为什么了,让我们来看看如何会是这样的. 函数被立即调用的表达式(IIFE) 看上去就好像每次我们向前推进一步,我们都要走点旁门左道. 因为要获得能让我们创建模块模式的JavaScript语法,我们就得去了解一种叫做函数被立即调用的表达式语法,也叫做IIFE ( IIFE 发音是 "iffy"). 最基础的 IIFE 看起来像这样: ((){
// lines
// of
// code
}());
如果你从来没有看到过像这样的东西,那你就有点说不过去了. 立即被调用 首先,这个名称的第一部分叫做立即被调用的原因是,一般包含这个特殊函数的源文件被加载好了,那么包含在这个函数中的代码就会运行. 对IIFE语法更加仔细的观察 你可以看到这个语法的最中心是一个函数。看一下这个代码块,我已经将代码分段并将一些行标上了号,如此我们就可以探讨它了. ( // 1.
function() //2.
{ // 3.
// 一行一行
// 的
// 代码
}() // 4.
); // 5.
首先,看看上面脚本的第2行。这一行通常看来就是一个匿名(也就是没有命名)的函数声明. 而后,第3一直到第4则是这个函数的主题部分。最后,第4行最后以一对括弧结束,这对 括弧会告诉JavaScript解释器去调用这个函数。最终,所有这些都会被包在一个不归属任何部分的括弧(第1和第5行)中,而这对括弧会告诉解释器要调用这个外部的匿名函数,它包含了我们所定义的函数. IIFE 可以带上参数 这段奇怪的语法会在带上参数之后,看起来会更加的奇怪. 它看起来会像是下面这样 (thing1,thing2){
// code
}("in string",255)">382));
现在,你可以看到这个函数可以带上两个会被内部的函数引用的thing1,thing2参数. 被传入值,在示例中是 "in string" 和 382. 现在我们理解了IIFE语法,让我们来创建另外一个代码示例,我们将运行这段代码来看看封装是如何运作的. (function(){
var isDoingWork = false;
console.log("isDoingWork value : " + isDoingWork);
}());
自己动手看看 1.下载本文的源代码. 2.在你的浏览器中打开 modulePattern3.htm. 3.打开浏览器的开发工具 -- F12(Chrome,sans-serif; font-size:16px"> 4.你可以看到很像下面这样图片中所展示出来的东西
当方法被调用时 -- 这会在代码被JavaScript解释器加载支护立即发生 -- 而后函数会创建 isDoingWork 变量,并调用console.log()来在控制台输出这个变量的值. 现在,让我们使用开发工具中的控制台来试试我们之前所尝试过的步骤: 1.输入: isDoingWork然后回车 当你这样做了之后,你将会看到 浏览器不再相信isDoingWork这个值被定义过。即使是你尝试从全局窗口对象中获取这个值,浏览器也不认为 isDoingWork 这个值在此对象中被定义了. 你所看到的错误消息看起来会像接下来这张图片中所展示的这样. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 使用vim检测C标准头文件的文件类型
- angularjs – Angular translate指令不与ngMessage一起使用
- Scala:用反射来发现你的内心对象(和欲望)?
- 删除以bash中的pattern开头的单词
- 如何把Bootstrap和JQuery在不能上网环境中生效并用Maven来管
- Scala类型类和泛型方法
- angular – 不会安装Microsoft.AspNetCore.SpaTemplates
- unix – 批量替换文本文件中的文本(Linux / OSX Commandlin
- 使用observables订阅的Angular2 HTTP显示数据未定义
- scala – 如何配置Akka Pub / Sub在同一台机器上运行?