一、前言

requireJS(一)

本篇主要整理requirejs的一些用法,相对比较零散。

实例目录

二、优化

requirejs建议我们给每一个模块书写一个js文件。但是这样会增加网站的http请求,这时可利用工具打包,详情求戳链接查看。

三、关于define自定义模块

之前说到自定义模块define()可接收三个参数,其中第一个参数为模块的名字。即我们可以显式的定义模块的名字

 define('js/a',["b"],function(b){
do something...
})

但是不建议这样做,因为这样的硬编码对代码的可移植性比较差,就是说若你将文件移动到其他目录下,你就得重命名。

四、在一个模块中的define()内部使用require()调用其他模块

这样就可以用相对于此文件的位置来调用模块了。下面我们演示在d模块中调用c模块,

假设我们在d.js中编写如下代码

 //d.js

 define(["require"],function(require){
var mod = require("./c");
console.log(mod.ccc); //此时可以在控制台看到输出123456789
//alert(mod.ccc)
})
 //而在c.js

 define(function($){
return {
ccc:"123456789"
};
})

这样,你可以访问模块的相邻模块,无需知道该目录的名称。

或者直接用更简洁的代码(commonjs模块语法)ps:没研究过commonjs。

 define(function(require) {
var mod = require("./c"); console.log(mod.ccc);
});
//该形式利用了Function.prototype.toString()去查找require()调用,然后将其与"require"一起加入到依赖数组中,这样代码可以正确地解析相对路径了。

效果与上面的相同。

五、require.toUrl()生成相对于模块的URL地址

 //d.js
define(["require"],function(require){
var url = require.toUrl("./c");
console.log(url); // 输出../c
})

六、控制台调试

我们可以使用require("module/name").callsomefunction()来调试模块,简单实例请看下面截图

七、循环依赖

所谓的循环依赖,即系a依赖b,b同时依赖a。(一般情况下最好要避免循环依赖)

这时候,如果代码这样的写得话

 //e.js

 define(["f"],function(f){
return{
eee:"eeeeee"
}
}) //f.js define(["e"],function(e){
return {
ale:function(){
var E = e.eee;
console.log(E);
}
}
}) //mian.js
代码省略,主要就是注入模块依赖

会出现

这时,我们只要将代码更改为

 define(["require","e"],function(require,e){
return {
ale:function(){
var E = require("e").eee;
console.log(E);
}
}
})

这样就可以看到在控制台下输出eeeeee啦

requireJS(二)的更多相关文章

  1. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  2. 基于angular+bower+glup的webapp

    一:bower介绍 1:全局安装安装bower cnpm i -g bower bower常用指令: bower init //初始化文件 bower install bower uninstall ...

  3. 页面中如何引用外部的HTML(四种方法)

    页面中如何引用外部的HTML(四种方法) 一.总结 一句话总结:a.iframe标签        b.ajax引入代码片段        c.link import的方法导入        d.re ...

  4. 前端学习(三十五)模块化es6(笔记)

    RequireJs:一.安装.下载    官网: requirejs.org    Npm:  npm i requirejs二.使用    以前的开发方式的问题:        1).js 是阻塞加 ...

  5. RequireJS基础(二)

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义 ...

  6. RequireJS入门(二) 转

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...

  7. RequireJS入门(二)

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute.RequireJS使用define来定义模 ...

  8. requireJS的初步掌握(二)

    前面我们讲述了requireJS的一些认知和优点,==>http://www.cnblogs.com/wymbk/p/6366113.html 这章我们主要描述的是requireJS的一些常用的 ...

  9. requireJS 源码(二) data-main 的加载实现

    (一)requireJs 的整体结构: requireJS 源码 前192行,是一些 变量的声明,工具函数的实现 以及 对 三个全局变量(requirejs,require,define)若被占用后的 ...

随机推荐

  1. Python3实现连接SQLite数据库的方法

    本文实例讲述了Python3实现连接SQLite数据库的方法,对于Python的学习有不错的参考借鉴价值.分享给大家供大家参考之用.具体方法如下: 实例代码如下: ? 1 2 3 4 5 6 7 8 ...

  2. 如何让ubuntu启动时打印字符信息----字符启动

    一.概述 要想实现字符启动,需要修改grub.cfg(启动配置文件),将“静态启动”改为“字符启动”. 但是grub.cfg通常只作为只读文件,修改它时实际上修改的是其他的文件然后再通过update- ...

  3. aspose.cells根据模板导出excel

    又隔十多天没写博客了,最近都在忙项目的事情,公司人事变动也比较大,手头上就又多了一个项目.最近做用aspose.cells根据模板导出excel报价单的功能,顺便把相关的核心记下来,先上模板和导出的效 ...

  4. Case When PK PIVOT

    SELECT *FROM ScoreInfogo Name Course Score---------- ---------- -----------Lucy Chinese 74Jim Math 8 ...

  5. redis基本命令的演示:

    import redis r = redis.Redis(host='127.0.0.1', port=6379,db = 0) #查看匹配redis的数据 r.keys() #查看redis的大小 ...

  6. Jquery效果代码--(二)

    //jQuery 效果- 隐藏和显示.通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素: //掩藏效果演示: $(document).ready(fun ...

  7. WEB SSH之Shellinabox

    用起来方便的,参考URL: http://lzw.me/a/shellinabox.html 生成 pem 证书,可以 https 方式启动.pem 证书的格式为公钥加私钥,并以 x509 的格式进行 ...

  8. Python---十年语言之首

    这个图表的数据非常的有意思,没有大起大浮并不是件坏事,这表明不断的有群体(来自Java和PHP——一个大部落)希望学习这种语言.Python是唯一一个在这个图表上表现的与众不同的语言. 我们都知道,P ...

  9. 可爱的PYTHON,更新到0.5版本代码

    这书看得挺顺的. 按着思路学习软件开发的主流思想.. cdctools.py # _*_ coding: utf-8 _*_ import os,sys def cdWalker(CDROM, cdc ...

  10. 【HDU 2255】奔小康赚大钱 (最佳二分匹配KM算法)

    奔小康赚大钱 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Subm ...