RequireJS定义新模块blob

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

Require使用入门

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




    
    Require Blob
    




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

require.config({
    paths: {
        jquery:'jquery.min'
    }
});

详细配置请看官方文档

define模块定义

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

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+"!");
        }
    };
});

然后在使用该模块:

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

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

定义blob模块

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

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()返回的对象,因此需要在服务器中运行才能获取得对象链接。


   转载规则


《RequireJS定义新模块blob》 Sterne Lee 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
My tasks My tasks
迅雷工作经历从2017年后7月至今,基于前端开发的项目总结。 PC页面 大天使之剑H5游戏官网模板 大天使之剑H5游戏进入页 活动充值组件与专题 新版金钻充值官网 迅雷游戏盒子下载页 迅雷游戏盒子官网 手机端页面 夹娃娃游戏 竞猜大富翁
2016-04-07 Sterne Lee
下一篇 
【转载】Web Animation API从入门到上座 【转载】Web Animation API从入门到上座
远观:认识WAAPI 当我们谈及网页动画时,自然联想到的是CSS3动画、JS动画、SVG动画、APNG动画等技术以及jQuery.animate()等动画封装库,根据实际动画内容设计去选择不同的实现方式。然而,每个现行的动画技术都存在一定的
2016-02-26
  目录