随着JS越来越庞大,已经不仅仅是以前复制粘贴做特效的时代了,JS越来越偏向于业务逻辑与应用。JS在web开发中占有越来越重要的地位。

由于JS代码庞大,文件数目多,传统的使用<script src=""></script>会带来很多性能的问题,因此requirejs可以为我们提供解决思路,它有以下的功能:

1、声明不同js文件之间的依赖

2、可以按需、并行、延时载入js库

3、可以让我们的代码以模块化的方式组织

下面进行实战:

文档结构是这样的

.js/app/config.js

.js/require.js

.js/app/hello1.js

.js/app/hello2.js

.js/app/hello3.js

index.html

在index.html中引入requirejs

<script src="js/require.js" data-main="js/app/config.js"></script>

其中,data-main指定主要的配置文件. config.js如下:

require.config({

   //默认情况下模块所在目录为js/app
baseUrl: 'js/app', //这里设置的路径是相对与baseUrl的,不要包含.js,否则会报错
paths: { h1: 'hello1',
       h2:'hello2',
       h3:'hello3'
} }); // 开始逻辑.
requirejs(['h1', 'h2', 'h3'], function (h1, h2, h3) {
//这里是引入那三个js之后的回调函数
    h1.hello(); //I am hello1
    h2.hello(); //I am hello2
    h3.hello(); //I am hello3 });

  

hello1.js

define([], function() {
return {
hello: function() {
console.log("I am hello1");
}
}
});

hello2.js

define([], function() {
return {
hello: function() {
console.log("I am hello2");
}
}
});

hello3.js

define([], function() {
return {
hello: function() {
console.log("I am hello3");
}
}
});

 

require加载文件时,会自动加上.js后缀。当某些模块依赖其他模块时,可以通过define([xxx],function(xxx){yyy});的方式添加依赖关系,

require会在异步加载后,自动调整次序。

shim

当有些js不是AMD规范的时候,或者我有一个public.js需要依赖于jquery时,config.js可以这样写

代码如下:

requirejs.config({

	baseUrl: 'js/app',
  
paths:{
"jquery":"jquery-1.11.2.min",
"public":"public",
}, // 这个配置是你在引入依赖的时候的包名,比如一些不是AMD规范的插件
shim: {
'public': {
deps: ['jquery'],
       //exporets 就是被外界访问的接口,比如jquery的$ 
exports: 'public'
},
}
}); require(['public'], function (p) { // somecode
});

  

使用中遇到的问题以及解决方法:

当我require.js没有用在单页面的时候,我遇到了这样一个问题:

  比如我1.html需要有另外的一些单独函数,而其他页面是不需要的,并且我希望在加载完config.js之后再执行我那个单独的函数,那要怎么做呢。

如果直接写在config.js里面的require后的回调函数那里,那么要单独分开每一个config.js,这样就没意思了。一位博友给出的答案是

index.html

<script src="js/require.js" data-main="js/app/config.js"  require-module="js/app/other.js"></script> //加个require-module属性,后面加上你需要单独引入的js

  

config.js 里面这样

require.config({

	baseUrl: 'js/app',
paths:{
"jquery":"jquery-1.11.2.min",
"public":"public",
}, shim: {
'public': {deps: ['jquery'],exports:'public'}
} }); require(['jquery','public'], function($,p){
    //改变的是这里
var scripts = document.getElementsByTagName("script");
for (var i = 0; i < scripts.length; i++) {
    // 获取页面所需加载模块入口名称,需要单独引入的js写在 script里面 require-module这个属性这里
var module = scripts[i].getAttribute("require-module");
if (module != undefined && module != "") {
require([module ]);
break;
}
} });

  

这样的话,你就可以在确保config里面的js加载完毕后,再加载你自己的js

暂时先写到这里先,有错误的话欢迎指出

【原】requirejs学习笔记的更多相关文章

  1. RequireJS学习笔记

    前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...

  2. Requirejs学习笔记(一)

    中文api 和 英文api网上都有的我就不翻译了,我的学习方法是先看英文api,然后看不懂的就比对中文api看一遍. requirejs可以帮助js代码模块化开发,模块化意味了解决了代码凌乱的问题,方 ...

  3. RequireJS学习笔记(转)

    前言 进入移动前端是很不错的选择,这块也是我希望的道路,但是不熟悉啊... 现在项目用的是require+backbone,整个框架被封装了一次,今天看了代码搞不清楚,觉得应该先从源头抓起,所以再看看 ...

  4. RequireJs学习笔记之data-main Entry Point

    You will typically use a data-main script to set configuration options and then load the first appli ...

  5. RequireJs学习笔记之Define a Module

    简单的键值对定义define({    color: "black",    size: "unisize"}); 如果一个模块没有任何依赖,又需要做用一个函数 ...

  6. Matplotlib学习笔记(二)

    原  Matplotlib学习笔记 参考:Python数据科学入门教程 Python3.6.1 jupyter notebook .caret, .dropup > .btn > .car ...

  7. Matplotlib学习笔记(一)

    原   matplotlib学习笔记 参考:Python数据科学入门教程 Python3.6.1 jupyter notebook .caret, .dropup > .btn > .ca ...

  8. 【原】Learning Spark (Python版) 学习笔记(三)----工作原理、调优与Spark SQL

    周末的任务是更新Learning Spark系列第三篇,以为自己写不完了,但为了改正拖延症,还是得完成给自己定的任务啊 = =.这三章主要讲Spark的运行过程(本地+集群),性能调优以及Spark ...

  9. 并发编程学习笔记(4)----jdk5中提供的原子类及Lock使用及原理

    (1)jdk中原子类的使用: jdk5中提供了很多原子类,它会使变量的操作变成原子性的. 原子性:原子性指的是一个操作是不可中断的,即使是在多个线程一起操作的情况下,一个操作一旦开始,就不会被其他线程 ...

随机推荐

  1. 获取 AlertDialog自定义的布局 的控件

    AlertDialog自定义的布局 效果图: 创建dialog方法的代码如下: 1 LayoutInflater inflater = getLayoutInflater(); 2 View layo ...

  2. Beta--项目冲刺第七天

    胜利在望-- 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照片: 2.项目燃尽图 3.冲刺 ...

  3. SpringMVC使用@PathVariable,@RequestBody,@ResponseBody,@RequestParam,@InitBinder

    @Pathvariable public ResponseEntity<String> ordersBack(           @PathVariable String reqKey, ...

  4. Oracle空串与null的处理

    来源于:http://blog.itpub.net/24870090/viewspace-1057853/ Oracle空串与null的处理[@more@] Oracle中的空字符串基本上是被当成空N ...

  5. html5 css3中的一些笔记

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" > <title> ...

  6. 如何在Ubuntu上配置scala教程

    Scala是一门多范式的编程语言,一种类似java的编程语言,设计初衷是实现可伸缩的语言 .并集成面向对象和函数式变成的各种特性.这里为了学习spark特地配置了scala. 1.下载scala安装包 ...

  7. Python:no encoding declared 错误

    使用Python编译的时候出现如下错误: SyntaxError: Non-ASCII character ‘\xe5’ in file magentonotes.com.py on line 2, ...

  8. nginx安装(1) – ttlsa教程系列之nginx

    1.必要软件准备 安装pcre 为了支持rewrite功能,我们需要安装pcre   1 # yum install pcre* //如过你已经装了,请跳过这一步 安装openssl 需要ssl的支持 ...

  9. [转]PL/SQLDeveloper导入导出Oracle数据库方法

    原文地址:http://www.2cto.com/database/201405/305452.html 1.Oracle数据库导出步骤 1.1 Tools→Export User Objects.. ...

  10. 【CodeVS 5032】【省队集训2016 Day5 T1】Play with array

    一开始我用分块大法,分成$\sqrt{n}$块,每个块上维护一个Splay,然后balabala维护一下,时间复杂度是$O(n\sqrt{n}logn)$.后来对拍的时候发现比$O(n^2)$的暴力跑 ...