在AngularJS中module是一个核心的存在,包括了很多方面,比如controller, config, service, factory, directive, constant, 等等。

在Javascript中如何实现类似module的功能呢?

或者说,我们定义一个函数,如何把函数内的函数向外界开放呢?

我想,可以把函数中的函数作为一个对象的键值,从而向外界开放。

这样说很笼统,其实是这样的:

  1. var myModule = function outerFuction(){
  2. var method1 = new function(){}
  3. var method2 = new function(){}
  4.  
  5. return{
  6. method1: method1,
  7. method2, method2
  8. }
  9. }
  10.  
  11. var o = outerFucntion();
  12. o.method1();
  13. o.mehtod2();

举个银行存钱取钱的例子。

  1. var account = function(){
  2.  
  3. //余额
  4. var balance = 0;
  5.  
  6. //存钱
  7. var deposit = function(money){
  8. balance+=money;
  9. console.log("卡上余额为: " + balance);
  10. notifyUser();
  11. }
  12.  
  13. //取钱
  14. var withdraw = function(money){
  15. balance -= money;
  16. console.log("卡上余额为: " + balance)
  17. notifyUser();
  18. }
  19.  
  20. //通知用户
  21. var notifyUser = function(){
  22. console.log("卡上余额有变动");
  23. }
  24.  
  25. return {
  26. deposit:deposit,
  27. withdraw: withdraw
  28. }
  29.  
  30. }
  31.  
  32. var a1 = account();
  33. a1.deposit(100);
  34. a1.withdraw(50);

再来到AngularJS,我们已经习惯了这样写:

  1. var app = angular.module('app',[]);
  2.  
  3. app.config();
  4. app.controller();
  5. app.factory();
  6. ...

也就是获取到module,再调用module提供给我们的方法。

查看angular.js源代码,发现:

angular = window.angular || (window.angular = {} )

这是为什么我们能使用angular这个变量的原因。

  1. ...
  2. var moduleInstace = {
  3. provider: invokeLater('$provide','provider'),
  4. factory: invokeLater('$provider', 'factory'),
  5. service: invokeLater('$provider', 'service'),
  6. value: invokeLater('$provide', 'value'),
  7. constant: invokeLater('$provider', 'constant'...),
  8. animation: invokeLater('$animateProvider',...),
  9. filter: invokeLater('$filterProvider',...),
  10. controller: invokeLater('$controllerProvider',...),
  11. directive: invokeLater('$compileProvider',...),
  12. config: config,
  13. }
  14.  
  15. return moduleInstance;
  16. ...

以上的写法正是module的写法。

淡淡理解下AngularJS中的module的更多相关文章

  1. 关于AngularJs中监听事件及脏循环的理解

    可能很多刚入行或者刚学习的前端对于AngularJs中的一些事件或者概念感觉不理解或者没有思路,今天让我们一起来剖析一下AngularJs中的一些事件. AngularJs中对于的监听事件会用到一个s ...

  2. angularJS中的Promise对象($q)的深入理解

    原文链接:a better way to learn AngularJS - promises AngularJS通过内置的$q服务提供Promise编程模式.通过将异步函数注册到promise对象, ...

  3. (七)理解angular中的module和injector,即依赖注入

    (七)理解angular中的module和injector,即依赖注入 时间:2014-10-10 01:16:54      阅读:63060      评论:1      收藏:0      [点 ...

  4. 理解angular中的module和injector,即依赖注入

    理解angular中的module和injector,即依赖注入 依赖注入(DI)的好处不再赘言,使用过spring框架的都知道.angularjs作为前台js框架,也提供了对DI的支持,这是java ...

  5. 转: 理解AngularJS中的依赖注入

    理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS依赖注入系统是如何运行的. Prov ...

  6. 理解AngularJS中的依赖注入

    点击查看AngularJS系列目录 理解AngularJS中的依赖注入 AngularJS中的依赖注入非常的有用,它同时也是我们能够轻松对组件进行测试的关键所在.在本文中我们将会解释AngularJS ...

  7. 理解SQL Server中的权限体系(下)----安全对象和权限

    原文:http://www.cnblogs.com/CareySon/archive/2012/04/12/SQL-Security-SecurableAndPermission.html 在开始阅读 ...

  8. 理解angularJS中作用域$scope

    angularJS中作用域是什么 作用域(scope)是构成angularJS应用的核心基础,在整个框架中都被广泛使用,因此了解它如何工作是非常重要的 应用的作用域是和应用的数据模型相关联的,同时作用 ...

  9. AngularJS中module的导入导出

    关于AngularJS中module的导入导出,在Bob告诉我之前还没写过,谢谢Bob在这方面的指导,给到我案例代码. 在AngularJS实际项目中,我们可能需要把针对某个领域的各个方面放在不同的m ...

随机推荐

  1. linux压缩日志并删除原始文件

    下面的脚本可以压缩日志并删除原始文件 #!/bin/bash yesterday=`date -d '1days ago' +%Y_%m_%d` cd $ find . -name "*$y ...

  2. H2内嵌数据库使用步骤

    1.找到h2数据库的jar包 D:\repositories\com\h2database\h2\1.4.187\h2-1.4.187.jar 2.双击jar包,配置连接信息 Driver Class ...

  3. sublime sftp 打开远程文件夹

    2014-04-29 13:19:09 总结: 本文介绍两种方法,推荐第二种方法(samba+windows映射) 先贴出sublime打开远程(Linux)目录所需的配置文件(sublime是通过s ...

  4. 07 Go 1.7 Release Notes

    Go 1.7 Release Notes Introduction to Go 1.7 Changes to the language Ports Known Issues Tools Assembl ...

  5. Android 5.0 API

    Android 5.0 (LOLLIPOP) 为用户和应用开发者提供了新功能.本文旨在介绍其中最值得关注的新 API. 如果您有已发布的应用,请务必看一看 Android 5.0 行为变更,了解您的应 ...

  6. Vue2.0 开发移动端音乐webApp 笔记

    项目预览地址:http://ustbhuangyi.com/music/#/recommend 获取歌曲 url 地址方法升级:https://github.com/ustbhuangyi/vue-m ...

  7. HDOJ题目分类

    模拟题, 枚举1002 1004 1013 1015 1017 1020 1022 1029 1031 1033 1034 1035 1036 1037 1039 1042 1047 1048 104 ...

  8. ADO.Net1

    一.ADO.Net 数据库连接技术 二.查询 1.步骤: 1)使用数据库空间:using System.Data.SqlClient; 2)连接数据库 3)创建数据库操作命令 4)输入操作命令 5)开 ...

  9. 微信隐藏的webJS Api汇总

    1.右侧菜单增加"查看公众账号" API document.getElementById('post-user').addEventListener('click', functi ...

  10. 【LOJ】#2084. 「NOI2016」网格

    题解 之前用的mapTLE了,今天用了个hash把题卡了过去,AC数++ 我们只要保留一个点为中心周围5 * 5个格子就可以 如果一个点周围5*5个格子有两个不连通,那么显然输出0 如果一个出现了一个 ...