CommonJS

  • CommonJS规范，主要解决命名空间管理模块和用一套标准的编程模式来加载模块；
  • 很快成为了JavaScript模块写法的事实标准；
  • 它包含IO接口，底层的套接字流，以及单元测试等标准；

模块的声明

  • 模块被分隔为不同文件，通过给exports对象添加内容来对外暴露模块的变量的方法，exports变量是在解析器中定义好的；
  • 要想使用在模块中定义的函数，只需require()这个文件，同时将运行结果保存在本地变量中；
  • 模块就是命名空间，目前CommonJS规范在js服务器端运用，如node.js
  1. //math.js
  2. exports.per = function(value, total) {
  3.   return ( (value / total) * 100 );
  4. }
  5. //application.js
  6. var Maths = require("/maths");
  7. assertEqual(Math.per(50, 100), 50);

模块和浏览器

  • 在浏览器中不容易实现CommonJS,因为它需要阻塞UI并适时地执行刚加载地script脚本（在客户端则要避免这种情况出现)；
  • CommonJS团队提出一个规范：模块转换格式，将CommonJS地模块包装在一个回调函数中，以便更好地处理客户端地异步加载；
  1. //math.js
  2. require.define("maths", function(require, exports) {
  3.   exports.per = function(value, total) {
  4.     return ((value / total) * 100);
  5.   };
  6. });
  7. //application.js
  8. require.define("application", function() {
  9.   var per = require("./maths").per;
  10.  assertEqual(per(500, 100), 50);
  11. }, ["./maths"]); //给出它地依赖

模块加载器

RequireJS

  • 对模块加载地看法略不同，它遵循“异步模块定义”（AMD）格式，主要不同在于AMD的API是即时计算依赖关系，而不是延迟计算；
  • 具体可以去了解AMD, CMD;

例子

*require-example/index.html

data-main属性快捷引入初始化脚本

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. 	<title></title>
  5. 	<script data-main="app" src="lib/require.js"></script>
  6. </head>
  7. <body>
  8.   <h1>Hello World</h1>
  9. </body>
  10. </html>

*require-example/app.js

requirejs.config, baseUrl定义第三方库的路径， paths定义第三方库引入到的文件夹；requirejs(['app/main'])， 定义了引入文件夹中最先执行的脚本;

  1. requirejs.config({
  2.     baseUrl: 'lib',
  3.     paths: {
  4.         app: '../app'
  5.     }
  6. });
  7. requirejs(['app/main'], function(){});
  • require-example/lib/print.js

引入的第三方库中也可以自己定义通用的脚本

  1. define(function() {
  2.   return function print(msg) {
  3.   	console.log(msg);
  4.   }
  5. })
  • require-example/app/message.js

定义一个普通脚本

  1. define(function () {
  2.     return {
  3.         getHello: function () {
  4.             return 'Hello World';
  5.         }
  6.     };
  7. });
  • require-example/app/main.js

主程序执行的脚本, 注意引入第三方库脚本和一般脚本的区别

  1. define(function (require) {
  3.     var messages = require('./messages');
  5.     var print = require('print');
  7.     print(messages.getHello());
  8. });

包装模块

手动将模块合并压缩打包

  • 随着应用体积越来越大，考虑到可维护性，需要将模块很细地颗粒化；新的文件会拆分成很多个；
  • 而考虑到性能，不得不将文件合并载入；
  • 两者是一对矛盾，所以模块依赖管理既要考虑到代码结构地整洁、清晰，又要兼顾性能地最优化；

LAB.js

简单地脚本加载器

  1. <script>
  2.   $LAB
  3.   .script(''/js/json2.js')
  4.   .script("/js/jquery.js").wait()
  5.   .script("/js/juqery-ui.js")
  6.   .script("/js/vaport.js")
  7. </script>
  • 所有地脚本加载都是并行的；
  • LABjs会确保jquery.js在juqery-ui.js和vaport.js之前加载；

mvc-6依赖管理的更多相关文章

  1. Spring mvc 4系列教程（二）——依赖管理（Dependency Management）和命名规范（Naming Conventions）

    依赖管理(Dependency Management)和命名规范(Naming Conventions) 依赖管理和依赖注入(dependency injection)是有区别的.为了将Spring的 ...

  2. Gradle系列教程之依赖管理(转)

    转自Lippi-浮生志 :http://ezlippi.com/blog/2015/05/gradle-dependency-management.html 这一章我将介绍Gradle对依赖管理的强大 ...

  3. Gradle实战教程之依赖管理

    这是从我个人网站中复制过来的,原文地址:http://coolshell.info/blog/2015/05/gradle-dependency-management.html,转载请注明出处. 简要 ...

  4. Gradle系列教程之依赖管理

    这一章我将介绍Gradle对依赖管理的强大支持,学习依赖分组和定位不同类型仓库.依赖管理看起来很容易,但是当出现依赖解析冲突时就会很棘手,复杂的依赖关系可能导致构建中依赖一个库的多个版本.Gradle ...

  5. SpringBoot原理深入及源码剖析（一） 依赖管理及自动配置

    前言 传统的Spring框架实现一个Web服务需要导入各种依赖jar包,然后编写对应的XML配置文件等,相较而言,SpringBoot显得更加方便.快捷和高效.那么,SpringBoot究竟是如何做到 ...

  6. 在Eclipse中使用建立使用Gradle做依赖管理的Spring Boot工程

    前述: Gradle存在很长时间了,以前只知道Maven和ivy ,最近才知道有这个存在,因为以后要用这个了; 所以,要先学会怎么用这个工具,就从建立一个简单工程开始! 实际上以前是见过Gradle的 ...

  7. Gradle Maven 依赖管理

    仓库管理简介 本质上说,仓库是一种存放依赖的容器,每一个项目都具备一个或多个仓库. Gradle支持以下仓库格式: Ivy仓库 Maven仓库 Flat directory仓库 我们来看一下,对于每一 ...

  8. MVC Castle依赖注入实现代码

    1.MVc 实现依赖注入 public class WindsorControllerFactory : DefaultControllerFactory { private readonly IKe ...

  9. webpack模块依赖管理介绍

    http://webpack.github.io/docs/ webpack is a module bundler. 是一个模块管理器 webpack可以管理模块的依赖关系,并产生可以替代这些模块的 ...

  10. Liferay7 BPM门户开发之43: Gradle依赖管理

    进入liferay v7.0,官方推荐使用Gradle进行依赖管理和发布,所以必须知道Gradle的用法,网上资料很多,不赘述 只写依赖管理的分类 一般用外部仓库依赖,也可以用本地文件依赖(依赖本地j ...

随机推荐

  1. Memcache使用

    //需要下载memcache 服务 然后 在命令里面 安装和启动服务 //引用 Memcached.ClientLibrary.dllpublic class MemcacheHelper { pub ...

  2. 【leetcode】Evaluate Reverse Polish Notation（middle）

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...

  3. 【Excel 4.0 函数】REGISTER

    REGISTER.ID 返回指定的 DLL 或 代码资源注册过的函数 ID.如果 DLL 或 代码资源没有注册,这个函数将会注册它们,并返回 注册ID. REGISTER.ID 可以用于工作表(不同于 ...

  4. 【python升级录】--列表，元组

    本节内容 字符串格式化输出 数据运算 for循环 while循环 列表 元组 [字符串格式化输出] 占位符 %s—string,%d—digital,%f —float # __author:&quo ...

  5. Java抽象类接口、内部类题库

    一.    选择题 1. Person类和Test类的代码如下所示,则代码中的错误语句是(  C  ).(选择一项)   public class Person { public String nam ...

  6. [Android Pro] 使用apktool工具遇到could not decode arsc file的解决办法

    转:http://www.cnblogs.com/sage-blog/p/4323049.html 最近使用APKtool工具反编译APK老是提示不成功,错误如下: Exception in thre ...

  7. 营业额统计（bzoj1588）

    Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...

  8. 数对的个数(cogs610)

    Description出题是一件痛苦的事情!题目看多了也有审美疲劳,于是我舍弃了大家所熟悉的A+B Problem,改用A-B了哈哈! 好吧,题目是这样的:给出一串数以及一个数字C,要求计算出所有A- ...

  9. SQL Server多表多列更新

    student表: lag表: 要求将student表stu_id列为1的stu_nick列和stu_phont列的数据更新为lag表的lag_nick列和lag_phone列. SQL语句: upd ...

  10. CLR via C#（07）-静态类，分部类

    一.      静态类-Static 静态类是一些不能实例化的类,它的作用是将一些相关的成员组合到一起,像我们常见的Math, Console等.静态类由static关键字标识,静态类成员也只能是st ...