RequireJS定义新模块blob

发表于 | 分类于

RequireJS是一个非常小巧的JavaScript模块载入框架，目标为实现浏览器端的模块化开发。

Require使用入门

在RequireJS中下载最新版require.js文件，在index.html中加载

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Require Blob</title>
	<script src="require.js" data-main="main"></script>
</head>
<body>
<img src="blob.jpg" alt="" >
</body>
</html>

其中，data-main所指向的为函数代码入口，即是main.js

1
2
3
4
5
require.config({
	paths: {
		jquery:'jquery.min'
	}
});

详细配置请看官方文档

define模块定义

在RequireJS中，require()是用来加载和使用模块，define()是用来定义新模块(注册为requirejs中模块)，define(“”,[], function(){})中第一个参数是定义模块的名字，第二个参数是依赖的名称数组，第三个参数是函数，在模块的所有依赖加载完毕后，该函数会被调用来定义该模块。依赖关系会以参数的形式注入到该函数上，参数列表与依赖名称列表一一对应。
一个简单的例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
define('app',['jquery'],function($){
	return {
		log: function(msg){
			if(window.console && console.log){
				console.log(msg);
			}else{
				alert(msg);
			}
		},
		hello: function(){
			this.log("hello, I'm powered by jquery"+$().jquery+"!");
		}
	};
});

然后在使用该模块:

1
2
3
require(['app'],function(sub){
	sub.hello();
});

我们可以看到，新模块以及在定义是依赖了jQuery，在使用中已经实现了jQuery模块的依赖并实现了新模块的操作。

定义blob模块

详细blob的介绍在此不再重复，以下直接上代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
define("blob",[],function(){
	var t = function(e){
        var that = e;
        window.URL = window.URL || window.webkitURL;
        if(typeof history.pushState == "function"){
            var xhr = new XMLHttpRequest();
            xhr.open("get",that.src,true);
            xhr.responseType="blob";
            xhr.onload=function(){
                if(this.status == 200){
                    var blob = this.response;
                    that.src = window.URL.createObjectURL(blob);
                }
            }
            xhr.send();
        }else{
            console.log("不支持blob,请更新浏览器哈");
        }
    };
	return t
});
require(["jquery","blob"],function($,blob){
	$(document).ready(function(){
		blob($("img")[0]);
	});
});

此模块的功能是将页面图片的src链接转化成blob对象链接，define用返回一个函数对象来实现require中依赖的实例化。

注意：blob是属于XMLHttpRequest()返回的对象，因此需要在服务器中运行才能获取得对象链接。