require.js 简洁入门
2015-06-28 17:18
537 查看
原文地址:http://blog.sae.sina.com.cn/archives/4382
其实其他很多编程语言都已经在代码里实现了类似的功能,比如这段python。
很好理解,我们导入了web对象,然后就可以在接下来的代码里使用
既然使用require这种模式的目的是把文件分割成可理解的小块,那么我们的js文件也要分割成一个一个部分,称之为模块,官方api实例中的目录结构是这样的:www/index.html
js/app/sub.js
lib/jquery.js
canvas.js
app.js
这里是一个app应用,但是普通页面开发也可以借鉴的是这个概念,就是把js根据功能和目的分开放,库文件放到一起,子模块放到一起,入口js再来选择性载入。
这里注意一下,模块化开发的目的是方便开发者理解和提高效率,如果读者认为没有必要完全则不需要硬去这么做,为了使用什么概念或者方法反而增加了开发成本的事情不要做。
如果我们定义的东西里面有依赖,比如用到jquery,我们可以这样
思考一下,这里的概念是这样的,第一个参数,数组里的东西是我接下来要依赖的模块,后面的回调函数的参数,依次就是前面数组里的对象的传递。
这里面require了另外两个子模块,part1和part2,并把他们的方法拿出来放到中间块里面并且返回
我们来看下part1,part2长啥样,首先他们都是part1.js 和part2.js文件,require.js里认为你载入的都是js脚本文件,所以统一省略.js
然后我们在主文件里,比如index.html,main.js…调用 sth
我们假设这里还有另外一个check对象,如果check为真则执行sth.f1
,否则执行sth.f2 想一下,f1,f2其实是在两个文件里面。这里只是我虚构一个假的例子,实际应用中要根据自己的实际需求去设计构思自己的项目,再次提醒,不要为了用而用。
http://requirejs.org/
前言
提到require.js大多数人会说提到模块化开发,AMD等等,其实require.js并没有这么多复杂的概念,这里我就希望排除这些概念,从实用的角度来简单说一下require.js是干什么的,我们要怎么用它。1.为什么要用require.js
大多数前端开发者都用过jquery,那么用jquery之前我们首先要把jquery加载进页面,然后在之后的js之中才可以使用$,这里面我们知道了两个道理,一个是我们不能把所有js代码都放到一个文件里,有些东西可以单独提出来成为一个模块,比如jquery。另外一个道理,一部分js是依赖另一部分js的,比如
$依赖jquery文件的载入。其实require.js主要做的事情就是这两点。当你的js项目足够大,足够复杂,依赖的库足够多,你完全需要这样一种工具去做这些js的管理,否则你的项目扩展性很差,结构很糟糕,要找到想修改的地方会很困难。
其实其他很多编程语言都已经在代码里实现了类似的功能,比如这段python。
123 | import web db = web.database(dbn='sqlite', db="todos.db") |
web.database
2.怎么用require.js?
首先页面要载入require.js,这个没办法用它自己依赖1 | <script data-main="js/app.js" src="js/require.js"></script> |
js/app/sub.js
lib/jquery.js
canvas.js
app.js
这里是一个app应用,但是普通页面开发也可以借鉴的是这个概念,就是把js根据功能和目的分开放,库文件放到一起,子模块放到一起,入口js再来选择性载入。
这里注意一下,模块化开发的目的是方便开发者理解和提高效率,如果读者认为没有必要完全则不需要硬去这么做,为了使用什么概念或者方法反而增加了开发成本的事情不要做。
定义模块
jquery这类的库文件先不提,我们说自己怎么定义一个模块,就是sub.js文件里12345 | //定义对象define({ color: "black", size: "unisize"}); |
123456789 | //定义方法define(function () { //Do setup work here return { color: "black", size: "unisize" }}); |
1234567891011 | define(["../lib/jquery"], function($) { return { color: "blue", size: "large", addToCart: function() { $('.cart-color').append(color) } } }); |
调用模块
还记得上面那个目录结构吗,我们依然摘取官网的实例, app.js是项目的入口,内容如下12345678910111213141516171819 | 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 里面,如下12345678 | define(function(require){ var p1 = require('part/part1'); var p2 = require('part/part2'); return { f1: p1.doSome, f2: p2.doOther }}) |
我们来看下part1,part2长啥样,首先他们都是part1.js 和part2.js文件,require.js里认为你载入的都是js脚本文件,所以统一省略.js
12345678 | //part1.jsdefine(function(){ return { doSome: function(){ console.log('doSome') } }}) |
12345678 | //part2.jsdefine(function(){ return { doOther: function(){ console.log('doOther') } }}) |
1234567 | require(['sth','check'],function(sth,check){ if(check.ok){ sth.f1() }else{ sth.f2() }}) |
,否则执行sth.f2 想一下,f1,f2其实是在两个文件里面。这里只是我虚构一个假的例子,实际应用中要根据自己的实际需求去设计构思自己的项目,再次提醒,不要为了用而用。
最后
好了骚年们,对require.js感兴趣了吗,那就去这里疯狂的看吧http://requirejs.org/
相关文章推荐
- Arduino 入门程序示例之步进电机(2015-06-28)
- [API GUIDE学习笔记]Service
- 应当把 database的 validation 放到 database相关实现里面,而不是放到Ui
- UITableView
- UGUI 使用BMFont
- 一个强大的LogParser的UI工具--logparserlizard简介(开源IIS日志分析工具)
- JdbcTemplate.queryForList()方法各不同参数的详解
- HDU 5273 Dylans loves sequence【 树状数组 】
- 杭电ACM1297——Children’s Queue~~大数相加的应用
- Android requires compiler compliance level 5.0 or 6.0. Found '1.7' instead. Please use Android Tools
- 杭电1005 Number Sequence
- iOS UITabBarItem 选中图的颜色,设置UIimage的渲染模式
- Android Volley完全解析(三),定制自己的Request
- UIImageView传值与生命周期的关系
- 用arduino做一个简单的计算器
- 解决SDCycleScrollView组建遇到UINavigationController时图片位置不准确
- hdu 1242 Rescue
- ArrayBlockingQueue源码剖析
- VirtualBox下快速创建新的虚拟机(一)——复制vdi文件
- Word Frequency