require.js 简洁入门
原文地址:http://blog.sae.sina.com.cn/archives/4382
前言
提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多复杂的概念,这里我就希望排除这些概念,从实用的角度来简单说一下require.js是干什么的,我们要怎么用它。
1.为什么要用require.js
大多数前端开发者都用过jquery,那么用jquery之前我们首先要把jquery加载进页面,然后在之后的js之中才可以使用$
,这里面我们知道了两个道理,一个是我们不能把所有js代码都放到一个文件里,有些东西可以单独提出来成为一个模块,比如jquery。另外一个道理,一部分js是依赖另一部分js的,比如$
依赖jquery文件的载入。其实require.js主要做的事情就是这两点。
当你的js项目足够大,足够复杂,依赖的库足够多,你完全需要这样一种工具去做这些js的管理,否则你的项目扩展性很差,结构很糟糕,要找到想修改的地方会很困难。
其实其他很多编程语言都已经在代码里实现了类似的功能,比如这段python。
1
2
3
|
import web
db = web.database(dbn='sqlite', db="todos.db")
|
很好理解,我们导入了web对象,然后就可以在接下来的代码里使用web.database
2.怎么用require.js?
首先页面要载入require.js,这个没办法用它自己依赖
1
|
<script data-main="js/app.js" src="js/require.js"></script>
|
既然使用require这种模式的目的是把文件分割成可理解的小块,那么我们的js文件也要分割成一个一个部分,称之为模块,官方api实例中的目录结构是这样的:
- www/
- index.html
- js/
- app/
- sub.js
- lib/
- jquery.js
- canvas.js
- app.js
- app/
这里是一个app应用,但是普通页面开发也可以借鉴的是这个概念,就是把js根据功能和目的分开放,库文件放到一起,子模块放到一起,入口js再来选择性载入。
这里注意一下,模块化开发的目的是方便开发者理解和提高效率,如果读者认为没有必要完全则不需要硬去这么做,为了使用什么概念或者方法反而增加了开发成本的事情不要做。
定义模块
jquery这类的库文件先不提,我们说自己怎么定义一个模块,就是sub.js文件里
1
2
3
4
5
|
//定义对象
define({
color: "black",
size: "unisize"
});
|
1
2
3
4
5
6
7
8
9
|
//定义方法
define(function () {
//Do setup work here
return {
color: "black",
size: "unisize"
}
});
|
如果我们定义的东西里面有依赖,比如用到jquery,我们可以这样
1
2
3
4
5
6
7
8
9
10
11
|
define(["../lib/jquery"], function($) {
return {
color: "blue",
size: "large",
addToCart: function() {
$('.cart-color').append(color)
}
}
}
);
|
思考一下,这里的概念是这样的,第一个参数,数组里的东西是我接下来要依赖的模块,后面的回调函数的参数,依次就是前面数组里的对象的传递。
调用模块
还记得上面那个目录结构吗,我们依然摘取官网的实例, app.js是项目的入口,内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
require.config({
//By default load any module IDs from js/lib
baseUrl: 'js/lib',
//except, if the module ID starts with "app",
//load it from the js/app directory. paths
//config is relative to the baseUrl, and
//never includes a ".js" extension since
//the paths config could be for a directory.
paths: {
app: '../app'
}
});
// Start the main app logic.
require(['jquery', 'canvas', 'app/sub'],
function ($, canvas, sub) {
//jQuery, canvas and the app/sub module are all
//loaded and can be used here now.
});
|
require.config
配置文件,这里定义了baseUrl等
接下来我们require调用,注意这里是调用,上面是定义define,不过看到代码发现和之前类似,同样是第一个参数是依赖对象的数组,回调里会执行,参数是之前依赖的对象。
3.举个栗子
实践是检验真理的唯一标准,光看别人实践也没用,自己动手做一遍胜读十年书。我自己写了一个简单的例子,读者如果感兴趣也可以自己写一个
我有一个中间模块,我把他叫做sth,这个模块放在 sth.js 里面,如下
1
2
3
4
5
6
7
8
|
define(function(require){
var p1 = require('part/part1');
var p2 = require('part/part2');
return {
f1: p1.doSome,
f2: p2.doOther
}
})
|
这里面require了另外两个子模块,part1和part2,并把他们的方法拿出来放到中间块里面并且返回
我们来看下part1,part2长啥样,首先他们都是part1.js 和part2.js文件,require.js里认为你载入的都是js脚本文件,所以统一省略.js
1
2
3
4
5
6
7
8
|
//part1.js
define(function(){
return {
doSome: function(){
console.log('doSome')
}
}
})
|
1
2
3
4
5
6
7
8
|
//part2.js
define(function(){
return {
doOther: function(){
console.log('doOther')
}
}
})
|
然后我们在主文件里,比如index.html,main.js…调用 sth
1
2
3
4
5
6
7
|
require(['sth','check'],function(sth,check){
if(check.ok){
sth.f1()
}else{
sth.f2()
}
})
|
我们假设这里还有另外一个check对象,如果check为真则执行sth.f1
,否则执行sth.f2 想一下,f1,f2其实是在两个文件里面。
这里只是我虚构一个假的例子,实际应用中要根据自己的实际需求去设计构思自己的项目,再次提醒,不要为了用而用。
最后
好了骚年们,对require.js感兴趣了吗,那就去这里疯狂的看吧
http://requirejs.org/
require.js 简洁入门的更多相关文章
- require.js简单入门
推荐文章:http://www.ruanyifeng.com/blog/2012/11/require_js.html 1.以下例子主要实现功能, 1)引用jq库获取dom中元素文本, 2)实现并引用 ...
- require.js资料
1.http://www.ruanyifeng.com/blog/2012/11/require_js.html?bsh_bid=230697246 (require.js的用法) 2.http:// ...
- require.js 入门笔记
网站越来越庞大,JS也是越写越多. 当所有的JS 都集中在 HTML的 head 部分时,网页加载变得很慢,很多的 JS代码也并不是全都适用在当前的页面,造成了代码的冗余度非常高. 而且长长的JS代码 ...
- require.js 入门学习 (share)
以下内容转自阮一峰老师的网络日志:http://www.ruanyifeng.com/blog/2012/11/require_js.html 更多学习资源: require.js官网:http:// ...
- require.js入门指南(三)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- require.js入门指南(二)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- require.js入门指南(一)
*:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important; } /* ...
- require.js 入门学习-备
一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代 ...
- require.js入门
小颖目前所在的公司在用require.js,小颖一只说要写个小demo,今天抽空把自己写的小demo分享出来,希望对初学者有一些帮助,嘻嘻 学习资料: CSDN上的一篇文章:使用RequireJS优化 ...
随机推荐
- 【坐在马桶上看算法】算法4:队列——解密QQ号
新学期开始了,小哈是小哼的新同桌(小哈是个小美女哦~),小哼向小哈询问QQ号,小哈当然不会直接告诉小哼啦,原因嘛你懂的.所以小哈给了小哼一串加密过的数字,同时小哈也告诉了小哼解密规则. ...
- elasticsearch安装servicewrapper插件
1)下载elasticsearch-servicewrappergit clone https://github.com/elasticsearch/elasticsearch-servicewrap ...
- APK方法数超过65535及MultiDex解决方案
以下参考自官方文档配置方法数超过 64K 的应用 随着 Android 平台的持续成长,Android 应用的大小也在增加.当您的应用及其引用的库达到特定大小时,您会遇到构建错误,指明您的应用已达到 ...
- C#, CLR, and .NET Framework versions
- yolov2在CUDA8.0+cudnn8.0下安装、训练、检测经历
这次用yolov2做检测时遇到个大坑,折腾了我好几天,特以此文记录之. 一.安装cuda+cudnn 它们的版本必须要匹配,否则训练后检测不出目标! 1.下载cuda8.0.61_375.26_lin ...
- MongoDB学习笔记-1
mongod --dbpath D:\MogonDB3.4.10\db //开启数据库,无端口号mongod --dbpath D:\MogonDB3.4.10\db --port=10086 //开 ...
- C/C++的64位整型
在C/C++中,64为整型一直是一种没有确定规范的数据类型.现今主流的编译器中,对64为整型的支持也是标准不一,形态各异.一般来说,64位整型的定义方式有long long和__int64两种(VC还 ...
- DDD领域模型企业级系统(三)
相关代码: public static void ShowArray() { //数据源 int[] arrayas = new int[] { 1, 2, 3, 4 }; //创建查询 var qu ...
- mysql 日期操作 增减天数、时间转换、时间戳(转换)
http://hi.baidu.com/juntao_li/item/094d78c6ce1aa060f6c95d0b MySQL datediff(date1,date2):两个日期相减 date1 ...
- Python3 计算相关系数
# -*- coding: utf-8 -*- """ Created on Mon Jan 8 19:36:48 2018 @author: markli " ...