项目结构目录：

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. 【简】题解 AWSL090429 【数塔问题】

    因为每次只ban一个点 而且不是永久性的 预处理出每个点从上往下和从下往上的最大值 每次询问直接暴力 被ban掉点那行去掉那点的最大值 也可以直接预处理出每行的最大值和次大值 还有种做法貌似可以过 预 ...

  2. python学习day21 面向对象(三)嵌套/特殊方法

    1.嵌套 类/方法/对象都可以当做变量或嵌套到其他类型中. 函数的参数可以是任意类型. 可哈希(不可变)数据类型可以做字典的key. 类和对象可以做字典的key. 2.特殊方法(8) __init__ ...

  3. JavaScript手工编写滚动条组件

    0 前言 上周的一个练习,由于没来得及编写笔记,这里补充一下~ 虽然CSS3中提供了overflow:scroll; 来实现滚动条,但是这里可以使用原生JS来编写一个,以达到练习组件编写的效果. 练习 ...

  4. React学习笔记（一）- 入门笔记

    React入门指南 作者:狐狸家的鱼 本文链接:React学习笔记 GitHub:sueRimn 1.组件内部状态state的修改 修改组件的每个状态,组件的render()方法都会再次运行.这样就可 ...

  5. server.xml配置介绍

    server.xml位于$TOMCAT_HOME/conf目录下,是Tomcat中最重要的配置文件,server.xml的每一个元素都对应了Tomcat中的一个组件:通过对xml文件中元素的配置,可以 ...

  6. SQL2012数据库还原失败System.Data.SqlClient.SqlError: 无法执行 BACKUP LOG，因为当前没有数据库备份

    在一次数据库还原的操作过程中遇到如上错误,去百度了下找到了对应的解决方法 第一个: 在还原完整备份时候,在回复状态状态哪里选择 restore with norecovery ,尾日志部分可选可不选, ...

  7. <03>labview在winCE6.0系统下的程序移植与界面开发

    任务布置:labview与winCE开发<3> 要求一:学会TouchPane的环境配置,建立调试通道:要求二:掌握触控屏幕界面优化: 正文: 今天介绍labview虚拟仪器软件中 Tou ...

  8. python3.x执行post请求时报错“POST data should be bytes or an iterable of bytes...”的解决方法

    使用python3.5.1执行post请求时,一直报错"POST data should be bytes or an iterable of bytes. It cannot be of ...

  9. Java基础--面向对象编程2(封装)

    1.封装的定义: 封装:将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.  为什么需要封装?封装的作用和含义? 首先思考一个问题:当我们要 ...

  10. HBase读写的几种方式（二）spark篇

    1. HBase读写的方式概况 主要分为: 纯Java API读写HBase的方式: Spark读写HBase的方式: Flink读写HBase的方式: HBase通过Phoenix读写的方式: 第一 ...