require.js的模块化知识整理
本文是对自己js学习的一个总结和一些碎片化学习的整理,主要是关于模块化的以及require.js。
javascript模块化(三):require.js的用法
(注:原著真的很清楚详细,如果你看不懂有两种可能:zs不够或层次未到。我也是时隔了很久再看才觉有味的。)
模块化:
1. 原始表达方式:
function m1(){ } function m2(){ } m1() m2()
上面定义了两个模块,m1和m2,写法很直接,但是缺陷在于模块间的依耐关系不明确,也容易造成全局变量的污染问题。
2.对象表达方式:
var moudle=new object({ xx:21, m1: function () { }, m2: function () { } })
把模块封在对象中,缺陷在于内部属性的暴露问题,例如更改内部属性xx的值问题。
3.立即执行方式:
;(function () { })()
这种方式经常见,它解决了对象表达方式的缺陷。
模块化规范问题:
如上述所列,定义模块化的方式很多,为了开发的统一性,产生模块化开发的规范:commonjs(node的模块化依次实施),amd,cmd。
为什么会有三种模块化规范?不同的模块化规范针对两端(服务器端和端),即服务器端和浏览器端的特性不一,例浏览器端的模块化加载需要异步加载。
amd:”异步模块定义”。它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
amd的模块加载方式:
require([module], callback);
第一个参数为需要加载的模块数组,第二个是回调函数。
而博客标题的require.js是依amd规范实施的一个库。
个人理解require.js的意义:
网站大了需要加载的模块数量变多,模块之间的依赖关系变得复杂,如何正确加载?如何不影响网站的加载(减缓响应时间)?
注意:异步加载
require.js的使用:
1:引入
用script标签引入,但是require.js引入发生错误呢?
所以==》
<script src="js/require.js" defer async="true" ></script>
说明:defer和 async:强调异步加载方式引入,defer是ie专用(浏览器有两种,一种叫ie,一种叫其它)。
2:主模块的引入
<script src="js/require.js" data-main="js/main"></script>
说明:data-main用来强调主模块是main(或者你写成js/main.js)。主模块就是整个主体的入口,与其它模块相依。相当于我们c的main函数这种。
3.主模块的书写
例子的前提是main模块现在依赖于’jquery’, ‘underscore’, ‘backbone’这三个模块。
require(['jquery', 'underscore', 'backbone'], function ($, _, backbone){ // some code here });
4.require.config()方法(写在主模块的最上面)
require.config({ paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });
这里需要记录的是,paths的意义就是指各个模块的加载路径。上面的写法默认各模块和主模块在同一级目录下。你也可以用下面的方式替代
require.config({ //baseurl指定模块目录 baseurl: "js/lib", paths: { "jquery": "jquery.min", "underscore": "underscore.min", "backbone": "backbone.min" } });
5.define()定义模块
require.js加载的模块,采用amd规范。也就是说,模块必须按照amd的规定来写
define(['mylib'], function(mylib){ function foo(){ mylib.dosomething(); } return { foo : foo }; });
当require()函数加载上面这个模块的时候,就会先加载mylib.js文件。
6.加载非规范的模块
不是所有的模块都是amd规范,require,js依旧可以加载
require.config({ shim: { 'underscore':{ exports: '_' }, 'backbone': { deps: ['underscore', 'jquery'], exports: 'backbone' } } });
shim参数用来配置不符amd规范的模块,underscore和backbone是两个模块,其中的参数属性exports表示该模块向外暴露的引用方式,例如jquery的$
deps表示该模块的依赖。
6.其它
require.js还提供一系列插件,实现一些特定的功能。
上一篇: linux服务器系统盘坏且系统盘为软raid的修复方法
下一篇: js原型及原型链代码分析