项目结构目录:

Html页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<script type="text/javascript" data-main="/Jquery/require/app.js" src="/Jquery/require/require.js"></script> <div>
春江潮水连海平,海上明月共潮生。
滟滟随波千万里,何处春江无月明!
江流宛转绕芳甸,月照花林皆似霰;
空里流霜不觉飞,汀上白沙看不见。
江天一色无纤尘,皎皎空中孤月轮。
江畔何人初见月?江月何年初照人?
人生代代无穷已,江月年年只相似。
</div>
<div id="best"> </div> </body>
</html>

参数配置:

requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单

  • require
  • define

define是用于定义模块,而require是用于载入模块以及载入配置文件。

require.config() 是用于配置参数的核心方法,它接收一个有固定格式与属性的对象作为参数,这个对象便是我们的配置对象。
在配置对象中 baseUrl 定义了基准目录,它会与 paths中模块的地址自动进行拼接,构成该模块的实际地址,并且当配置参数是通过script标签嵌入到html文件中时,baseUrl默认的指向路径就是该html文件所处的地址。
paths 属性的值也是一个对象,该对象保存的就是模块key/value值。其中key便是模块的名称与ID,一般使用文件名来命名,而value则是模块的地址,在requireJS中,当模块是一个JS文件时,是可以省略 .js 的扩展名,比如 “index.js” 就可以直接写成 “index” 而当定义的模块不需要与 baseUrl 的值进行拼接时,可以通过 "/" 与 http:// 以及 .js 的形式来绕过 baseUrl的设定。

app.js

require.config({
// baseUrl: '/jquery/bs/' //另一个同名文件夹 baseUrl: '/jquery/require/', paths: {
'jquery': 'http://cdn.webfont.youziku.com/wwwroot/js/jquery-1.10.2.min'
}
});
//确定引用,没有这句代码,没法使用jquery
require(["jquery"]);

require 提供的 data-main 属性,该属性是直接写在引入require.js的script标签上,在require.js 加载完毕时,会自动去加载配置文件 app.js。

require(['BjTest'], function (a) {
var name = "小明";
alert(a.addName(name));
});
require(['BjTest', 'TjTest'], function (a, b) {
var name = "小明";
alert(a.addName(name));
alert(b.Apple(name));
});

通过 data-main 去加载入口文件,便会使配置对象中的 baseUrl 属性默认指向地址改为 app.js 所在的位置,相比之下我更加推荐这种方式,因为它更可能的方便快捷。

当我们的项目足够的庞大时,我也会推荐将入口文件作为一个普通的模块,然后在这个模块中,根据业务的不同再去加载不同的配置文件。

BjTest.js

define({
addName: function (n) { $("#best").text("人生得意须尽欢");
return "今天的测试用户名字是:" + n;
}, fang: function (a, b, c) {
return "京津新城:" + a + "小区,高铁站:" + b + "到北京:" + c + "分钟!";
}
});

详细内容请点击

requireJS简单应用的更多相关文章

  1. gulp + angular + requirejs 简单学习

    一.安装gulp(已经安装了node环境) npm  install -g gulp 二.在package.json文件中配置依赖插件 { "name": "xxxx&q ...

  2. requireJS简单的学习门户网站

    总结 requireJS.这翻译成中国"必须js".说白了就是装js文件与.如何装好了?.这是继AMD标准化的模块化装.除了AMD另一种规范称为CMD规范.跟随CMD兼容模块加载. ...

  3. RequireJS简单实用说明

    OM前端框架说明 om前端框架采用RequireJS,RequireJS  是一个JavaScript模块加载器.它非常适合在浏览器中使用, 它非常适合在浏览器中使用,但它也可以用在其他脚本环境, 就 ...

  4. Requirejs简单介绍

    具体详情请进入官网查阅:http://requirejs.org 一.什么是Requirejs RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一. 二. ...

  5. 【转】requirejs简单入门

    博主今天正式工作啦,工作中用到了js模块化技术,这里转来一个入门教程,很易懂,转给同样刚入门的你们~~ 原地址:http://www.ruanyifeng.com/blog/2012/11/requi ...

  6. requireJS文件夹

    前言 对于像我这样的requireJS刚開始学习的人而言,requireJS最难理解的部分应该是它的路径问题.晚上随便折腾了一下,算是略微理清了这个文件夹问题吧. requireJS学习网址:requ ...

  7. 关于 js 一些基本的东西

    r.js 可以打包(可以实现前端文件的压缩与合并). 客户端尽量遵循 amd 规范. 推荐使用 requirejs 规范. requirejs 简单教程: http://www.runoob.com/ ...

  8. 2016iweb峰会参会总结

    2016年8月27日去国家会议中心参加iweb峰会. 8点半开始签到入场,8点20分排队签到的人已经排到另一个门口,人超级多啊. 9点一如既往的由h5女神娜姐开场. 上午场 基本是各公司的大佬们介绍各 ...

  9. js模块化规范

    1. CommonJS 用于服务端模块化编程,比如nodejs就采用此规范: 一个文件就是一个模块,require方法用来加载模块,该方法读取一个文件并执行,最后返回文件内部的module.expor ...

随机推荐

  1. luogu4365 秘密袭击 (生成函数+线段树合并+拉格朗日插值)

    求所有可能联通块的第k大值的和,考虑枚举这个值: $ans=\sum\limits_{i=1}^{W}{i\sum\limits_{S}{[i是第K大]}}$ 设cnt[i]为连通块中值>=i的 ...

  2. ES 常用java api

    java rest client 有两种: 1.Java Low Level REST Client :用于Elasticsearch的官方低层客户端.它允许通过http与Elasticsearch集 ...

  3. mongodb副本集原理及部署记录

    工作原理 1.副本集之间的复制是通过oplog日志现实的.备份节点通过查询这个集合就可以知道需要进行复制的操作 2.oplog是节点中local库中的一个固定的集合,在默认情况下oplog初始化大小为 ...

  4. [面试]future模式

    Future模式 什么是future模式? 传统单线程环境下,调用函数是同步的,必须等待程序返回结果后,才可进行其他处理. Futrue模式下,调用方式改为异步. Futrue模式的核心在于:充分利用 ...

  5. CPM、CPC、CPA、CPS、CPL、CPR 是什么意思 -解析互联网广告术语

    CPA CPS CPA/CPS常见的推广方式 CPA和CPSCPA,CPS CPS与CPA CPA.CPSCPA.CPS产品教  CPA CPS什么意思 CPACPS是什么 1. CPM(Cost p ...

  6. 分布式系列十一: Redis进阶

    分布式锁 数据库 数据库是使用唯一索引不允许重复的特性(或自定义实现如乐观锁). 但持有锁的进程如果释放锁时异常则容易导致死锁. zookeeper 使用临时节点, watcher可以获得节点被删除的 ...

  7. 吴恩达《机器学习》课程笔记——第六章:Matlab/Octave教程

    上一篇  ※※※※※※※※  [回到目录]  ※※※※※※※※  下一篇 这一章的内容比较简单,主要是MATLAB的一些基础教程,如果之前没有学过matlab建议直接找一本相关书籍,边做边学,matl ...

  8. hammer.js初探

    hammer.js官方文档 hammerjs是什么 hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势. hammerjs的两大优势如下: 为移动端网页添加相关手势. 去除移动端 ...

  9. @PostConstruct和@PreDestroy注解

    从Java EE5规范开始,Servlet增加了两个影响Servlet生命周期的注解(Annotation):@PostConstruct和@PreConstruct.这两个注解被用来修饰一个非静态的 ...

  10. 开源智能英文单词提取翻译工具(C#)

    WordsTool 这个工具用于分析文本文件中所有的英语单词 并且通过内置字典数据库工具对这些单词进行解析 可以生成表格形式 并且支持导出到excel文件中 用于学习单词 本代码禁止商业用途 如需要商 ...