项目结构目录：

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. 关于PWA ( Progressive web apps )

    渐进式Web应用程序使用现代Web API以及传统的渐进式增强策略来创建跨平台Web应用程序.这些应用程序无处不在,并提供多种功能,使其具有与本机应用程序相同的用户体验优势.这套文档告诉您需要了解的所 ...

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

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

  3. filter的使用

    (1)什么是filter 过滤器是处于客户端与服务器资源文件之间的一道过滤网,在访问资源文件之前,通过一系列的过滤器对请求进行修改,判断等,把不符合规则的请求在中途拦截或者修改.或者对响应进行过滤.拦 ...

  4. Alibaba Java开发手册索引规约学习笔记

    最近一段时间再看阿里巴巴 Java开发手册索引规约,写篇帖子总结一下,索引规约内容如下 为了通用,更为了避免造数据的痛苦,文中所涉及表.数据,均来自于MySQL官网提供的示例库employees,可通 ...

  5. jenkins+ant+jmeter接口测试

    <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl=" ...

  6. Java基础--常见计算机编码类型

    计算机编码指电脑内部代表字母或数字的方式,常见的编码方式有:ASCII编码,GB2312编码(简体中文),GBK,BIG5编码(繁体中文),ANSI编码,Unicode,UTF-8编码等. 1.ASC ...

  7. Linux命令_sed_2

    2.替换(将包含"xxx"的行中的"yyy"替换成"zzz") 现有文件“replace_specified_contained_line” ...

  8. 详解散列hashCode在HashMap中的使用原理

    1散列的价值在于它的速度:散列使得查询变快,它将键key保存在某处,而我们知道存储一组数组最快的数据结构是数组,所以用它来表示键的信息(注意,数组保存的是键的信息,不是键本身),由于数组是固定的,当我 ...

  9. JGUI源码：DataTable固定列样式（20）

    本来感觉这个固定列很容易实现的,一般都是几个table组合实现,真正自己从头做的时候,发现有很多坑,本文只是固定列原理,真正实现datatable的话,代码量比较大的,后续再进行完善. 使用左中右三个 ...

  10. 第十三届东北师范大学程序设计竞赛热身赛 C(exgcd+欧拉函数)

    题目链接 思路 对于答案,我们考虑对于每个可行的$c$会和多少$d$产生合法序偶.首先证明$c$和$b$必然互质. 假设$c$和$b$不互质,那么设$t_{1}=gcd(c, b),(t_{1} &g ...