CommonJS

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

模块的声明

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

模块和浏览器

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

模块加载器

RequireJS

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

例子

*require-example/index.html

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

<!DOCTYPE html>
<html>
<head>
<title></title>
<script data-main="app" src="lib/require.js"></script>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>

*require-example/app.js

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

requirejs.config({
baseUrl: 'lib',
paths: {
app: '../app'
}
});
requirejs(['app/main'], function(){});
  • require-example/lib/print.js

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

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

定义一个普通脚本

define(function () {
return {
getHello: function () {
return 'Hello World';
}
};
});
  • require-example/app/main.js

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

define(function (require) {

    var messages = require('./messages');

    var print = require('print');

    print(messages.getHello());
});

包装模块

手动将模块合并压缩打包

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

LAB.js

简单地脚本加载器

<script>
$LAB
.script(''/js/json2.js')
.script("/js/jquery.js").wait()
.script("/js/juqery-ui.js")
.script("/js/vaport.js")
</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. 批处理命令——goto 和 :

    谈起goto,相信大家应该想到的是面向过程编程.其实,这就相当于当有人向你谈起class,意味着你就懂得面向对象编程.如果你不懂,那么你们的沟通将会很困难.不懂我说的啥意思吗?请参见曾经分享王路的一篇 ...

  2. 20145213《Java程序设计》第七周学习总结

    20145213<Java程序设计>第七周学习总结 教材学习内容总结 周末快乐的时间总是短暂的,还没好好感受就到了要写博客的周日.有人喟叹时间都去哪儿了,那本周我们就来认识一下Java里的 ...

  3. 在iOS 应用中直接跳转到appstore的方法

    找到应用程序的描述链接,比如:http://itunes.apple.com/gb/app/yi-dong-cai-bian/id391945719?mt=8 然后将 http:// 替换为 itms ...

  4. 闭包(block)

    block主要解决反向传值和传值问题 1.block申明的公式       返回值类型 (^名字)(参数列表); 2.block实现的公式       名字= ^(参数列表){}; 3.局部变量   ...

  5. 最小集合(51nod 1616)

    A君有一个集合. 这个集合有个神奇的性质. 若X,Y属于该集合,那么X与Y的最大公因数也属于该集合. 但是他忘了这个集合中原先有哪些数字. 不过幸运的是,他记起了其中n个数字. 当然,或许会因为过度紧 ...

  6. stm32——NFC芯片--PN532的使用

    stm32——NFC芯片--PN532的使用 一.NFC简介 NFC(Near Field Communication)近场通信,是一种短距高频的无线电技术,在13.56MHz频率运行于20厘米距离内 ...

  7. 16.迭代器模式(Iterator Pattern)

    using System; namespace ConsoleApplication9 { class Program { /// <summary> /// 迭代器模式提供了一种方法顺序 ...

  8. repo 版本回退

    转自:http://blog.csdn.net/wed110/article/details/52179386 1.repo 回退到具体某一天的提交 repo forall -c 'ID=`Git l ...

  9. .net学习之进程外Session的配置

    转载地址:http://www.cnblogs.com/rohelm/archive/2012/05/13/2498465.html 人人都知道怎么去使用session,但是初学者,尤其是自学的学生可 ...

  10. SQL小纸条--一些方便平时参考的SQL语句--随用随查

    SQL 语句 语句 语法 AND / OR SELECT column_name(s)FROM table_nameWHERE conditionAND|OR condition ALTER TABL ...