首先是github地址,可以用git克隆命令也可以直接在git页面下载

https://github.com/kazetotori/js-requireAsync

下载下来后目录结构是这样的

-package.json

-index.js

-node_modules

--bluebird

--jquery

--requirejs

requireAsync函数

requireAsync函数是index.js里定义的一个全局函数,该函数接受无限多个字符串参数,参数为需要加载的模块名或模块路径,路径不能包含.js后缀,这是因为本身是通过requirejs加载的,这个函数返回一个Promise,当resolve时,就返回一个数组,数组中包含了所有需要加载的模块,当reject时,就会抛出requirejs加载错误,一般是找不到模块即模块路径的错误。

由于是Promise,所以允许链式加载

 requireAsync('jquery', 'bootstrap').then(function () {
window['jquery'] = arguments[0];
window['bootstrap'] = arguments[1];
return requireAsync('bootstrap-table');
}).then(function () { })

co函数

co函数和tj大神的co模块一样,但是tj大神的node模块只能用于nodejs,不能用于浏览器,这里是用的bluebird.coroutine实现的相同效果的co函数。

co函数在于能够配合generator/yield使用,从而达到async/await的效果,关于什么是generator,百度可以找出很多,我不赘述。

总而言之在浏览器的环境,基本是支持generator的。所以上面的代码能写成CMD的形式的代码,再配合上es6解构,简直爽歪歪

这是写在main函数中的代码

 function* main() {
let [$, bootstrap] = yield requireAsync('jquery', 'bootstrap');
yield requireAsync('bootstrap-table');
}

为什么使用requireAsync加co来加载模块

1、CMD的加载方式更直观,按需加载,需要加载jquery就加载jquery,需要加载react就加载react

2、能控制加载的先后顺序。这点我需要着重说一下。

由于并非所有前端模块都是使用requirejs组织代码的,所以必然出现类似这样的模块,比如说依赖于jquery,但是不用requirejs加载

 !function ($) {
"use strict"; $.fn.extend({
bgColor: function (color) {
return $(this).css('background-color', color);
}
}) }(jQuery);

requirejs的写法并不能控制加载的先后,并不是写在前面就先加载进来,他是用的script标签,是异步加载的,这就导致了你如果要先加载jquery再加载这个模块(比如说叫jquery-bgColor.js),就必须用嵌套的代码形式。嵌套的写法非常丑陋,当依赖变多并且都不使用requirejs组织的情况下必然嵌套越来越深。

这同时也是AMD的非常不好的地方。

 require(['jquery'],function($){
require(['jquery-bgColor'],function(){ })
})

但是使用了requireAsync+co后,这段代码就展平了,想要多深的依赖都没有关系

 co(function* () {
const [$] = yield requireAsync('jquery');
yield requireAsync('jquery-bgColor');
yield requireAsync('jquery-bgColor-blue');
yield requireAsync('jquery-bgColor-blue-white');
})

使用

可以参照上面的github地址中的how to start,其实就是html中加载requirejs,并设置data-main为index.js,之后的代码写在main函数里就行了,当然你也可以写一个main.js,然后修改index.js里的源代码加载这个main.js模块。

原理

index.js里的代码去掉注释只有50+行,我们一步一步看

1、首先是配置了一下requirejs,添加了几个模块路径,你的模块也可以在这里配置

2、我们跳到后面来看两个函数定义,这是我的习惯,把函数定义放在主逻辑之后

第一个slice函数毫无疑问,只是调用了一下Array.prototype.slice函数

第二个就是requireAsync函数,其实就是用requirejs加载,然后用promise将加载好的模块resolve出来

3、绕回我们的主逻辑,我在这里首先定义了一个变量co,但是我需要在加载bluebird后才对这个变量进行初始化。

首先我使用requirejs加载bluebird和jquery,并初始化co函数。

bluebird.coroutine将函数包装成一个返回promise的函数,但仅仅返回这个函数并不执行,我需要执行并且直接返回这个promise

然后我使用co去执行一个generator,首先等待dom加载完毕这个promise状态变为resolve,然后执行main函数中的内容

这里不想用jquery也可以直接用

window.addEventListener('DOMContentReady',function(){resolve()})

来取代

$(function(){resolve()})

这样就能不加载jquery了。

4、最后是main函数,毫无疑问,args为jquery传的参数

总结

generator/yield实在是好特性,原本我是写的async/await版本,但是只能用在最新版本的chorme中,所以改成了用生成器,本质上是一样的,即将异步代码同步化,用yield取代回调。现在的js,新特性如果还有什么期待的我想我还是比较期待import/export,毕竟这个才是正统的模块加载方式。而且各个模块维护自己的作用域,等于是默认闭包了。如此一来想输出到window上就必须window.jQuery=jQuery了。

嵌套和回调自然是越少越好。

基于requirejs+bluebird,50行代码实现轻巧实用的前端CMD加载器的更多相关文章

  1. AngularJs2与AMD加载器(dojo requirejs)集成

    现在是西太平洋时间凌晨,这个问题我鼓捣了一天,都没时间学英语了,英语太差,相信第二天我也看不懂了,直接看结果就行. 核心原理就是require在AngularJs2编译过程中是关键字,而在浏览器里面运 ...

  2. python爬虫实战:利用scrapy,短短50行代码下载整站短视频

    近日,有朋友向我求助一件小事儿,他在一个短视频app上看到一个好玩儿的段子,想下载下来,可死活找不到下载的方法.这忙我得帮,少不得就抓包分析了一下这个app,找到了视频的下载链接,帮他解决了这个小问题 ...

  3. 50行代码实现python计算器主要功能

    实现功能:计算带有括号和四则运算的式子   3*( 4+ 50 )-(( 100 + 40 )*5/2- 3*2* 2/4+9)*((( 3 + 4)-4)-4) 基本思路:使用正则表达式提取出每一层 ...

  4. 50行代码实现缓存,JAVA内存模型原理

    遇见这样的高人怎么办??下面是一个简单缓存的实现,相当牛叉!自己看吧,只有50行代码. 摘自:http://www.oschina.net/code/snippet_55577_3887 import ...

  5. HTML5游戏实战(1):50行代码实现正面跑酷游戏

    前段时间看到一个"熊来了"的HTML5跑酷游戏,它是一个典型的正面2D跑酷游戏,这里借用它来介绍一下用Gamebuilder+CanTK开发正面跑酷游戏的基本方法. CanTK(C ...

  6. 50行代码实现GAN | 干货演练

    2014年,Ian Goodfellow和他的同事发表了一篇论文,向世界介绍了生成对抗网络(GAN).通过对计算图和博弈论的创新性组合,他们表明如果有足够的建模能力,两个相互对抗的模型可以通过普通的反 ...

  7. 《你必须知道的.NET》读书实践:一个基于OO的万能加载器的实现

    此篇已收录至<你必须知道的.Net>读书笔记目录贴,点击访问该目录可以获取更多内容. 一.关于万能加载器 简而言之,就是孝顺的小王想开发一个万能程序,可以一键式打开常见的计算机资料,例如: ...

  8. 使用RequireJS并实现一个自己的模块加载器 (一)

    RequireJS & SeaJS 在 模块化开发 开发以前,都是直接在页面上引入 script 标签来引用脚本的,当项目变得比较复杂,就会带来很多问题. JS项目中的依赖只有通过引入JS的顺 ...

  9. RequireJS 是一个JavaScript模块加载器

    RequireJS 是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就像 Rhino and Node. 使用RequireJ ...

随机推荐

  1. JS base64 加密和解密

    /*** * 加密 base64encode(utf16to8(str)) * 解密 utf8to16(base64decode(str)) * * */ var base64EncodeChars ...

  2. 在web前端使用SVG

    前言: 花了些时间了解了一下svg,然而仍然不怎么了解... 第一步:直接在html代码中使用svg. 首先了解几个标签: <svg version="1.1" xmlns= ...

  3. LINQ 的查询_联表、分组、排序

    1.查询 var v = from s in db.Set<ScoreInfo>().ToList()group s by s.subject into scoreselect new{  ...

  4. log4j.rootLogger详细说明

    http://blog.csdn.net/anlina_1984/article/details/5313023

  5. php之 有点复杂的 流程管理

    1.流程管理的用法是什么样的? 2.怎么发起想要的流程? 3.审批的人要是怎么审批通过? 4.流程审核是不是要挨个走过? 一.还是要有数据库的内容的 肯定会有表的,首先就是用户表了,然后就是流程表,用 ...

  6. 测试员浅谈App测试的重点

    近年来,手机app也时持续大热.基于安卓和ios的手机app,更是受到众多投资者的青睐.而手机软件测试行业也是如此. 现在听的最多的是web测试和App测试,但实际上两者本质上没有什么区别,性质都一样 ...

  7. WPF开发进阶 - Fody/PropertyChanged(一)

    INotifyPropertyChanged 在WPF MVVM模式开发中,实现INotifyPropertyChanged的ViewModel是非常重要且常见的类: public class Mai ...

  8. WinForm 文件操作

    文件及文件夹操作 C/S:WinForm可以操作客户端文件 Client ServerB/S:浏览器服务 Brower Server 命名空间:using system .IO; 1. File类:文 ...

  9. 内功心法 -- Java中的深拷贝和浅拷贝

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------这篇博客主要来谈谈" ...

  10. lable 以及cell的高度自适应

    1.先cell自适应 可以先拿到 这个lable里文字的高度 //lable自适应的高度 -(CGFloat)heightWithString:(NSString *)aString { CGRect ...