requirejs 简单示例一

现在web前端动不动就模块化,艾玛,吓死宝宝了。所以最近就打听模块化的消息,结果不知咋地就撞到了requirejs,说到Requirjs就要说到 AMD和CMD,

首先:AMD和CMD是规范,而requirejs和sealjs是具体的实现。

可以参考:

基于 AMD(Asynchronous Module Definition)的 JavaScript 设计已经在目前较为流行的前端框架中大行其道,jQuery、Dojo、MooTools、EmbedJS 等纷纷在其最新版本中加入了对 AMD 的支持。

不是我不相信sealjs,只是查阅后,老有人说sealjs什么文档啊,什么打包上线一些问题,突然就转向requirejs了。

官方网站:

http://www.requirejs.org/

http://www.requirejs.cn/

哎呀,本人很懒,不想上传图片啊。

目录:

scripts

  helper

    util.js

  lib

    jquery-1.8.2.js

    require.js

  main.js

project.html

util.js代码:

define({
     add :function  (x,y) {
         return x +y;
     }

})

html代码:

<!DOCTYPE html>
<html>
    <head>
        <title>My Sample Project</title>
        <!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
        <script data-main="scripts/main"  src="scripts/lib/require.js"></script>
        <!-- <script src="scripts/main.js"></script>  -->
    </head>
    <body>
        <h1>My Sample Project</h1>
    </body>
</html>

main.js代码:

require.config({
    baseUrl:"scripts",
    //map:{
    //
    //},
    paths:{
        jquery:"lib/jquery-1.8.2",
        util:"helper/util"
    }

})

require(["util","jquery"],function (util,$) {

    console.log(util.add(1,3));    

    $(document.body).append(‘<span>Content added by Jquery</span>‘);
})

执行,就会在控制台输出 4,和在body下面出现Content added by Jquery的字。

当然,这是入门级别,知识点:

1. data-main属性说明默认入口,你当然可以单独添加一个script标签

2. baseurl:基地址,paths等配置里面就可以直接抒写后面部分就可以

3.path里面是键值对的定义,值里面不需要.js

4. require第一个参数是依赖模块列表,第二个是加载依赖完毕后的回调,回调参数里面是依赖模块

基本上知道这个几点,简单的requirejs加载就回了喽喽。

so easy ,妈妈叫我吃饭去了。

时间: 2024-10-05 12:38:03

requirejs 简单示例一的相关文章

【转】requirejs简单入门

博主今天正式工作啦,工作中用到了js模块化技术,这里转来一个入门教程,很易懂,转给同样刚入门的你们~~ 原地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"&

AMQP消息队列之RabbitMQ简单示例

前面一篇文章讲了如何快速搭建一个ActiveMQ的示例程序,ActiveMQ是JMS的实现,那这篇文章就再看下另外一种消息队列AMQP的代表实现RabbitMQ的简单示例吧.在具体讲解之前,先通过一个图来概览下: 1.添加Maven依赖 <!-- rabbitmq begin --> <dependency> <groupId>org.springframework.amqp</groupId> <artifactId>spring-rabbit

HMM的维特比算法简单示例

今天读了一位大牛的关于HMM的技术博客,读完之后,写了一个关于维特比算法的简单示例,用scala和java语言混合编写的.现在上传之. package com.txq.hmm import java.utilimport scala.collection._ /** * HMM维特比算法,根据显示状态链条估计隐式链条 * @param states 隐式states * @param observations 显式states * @param start_probability 初始概率向量

spring-servlet.xml简单示例

spring-servlet.xml简单示例 某个项目中的spring-servlet.xml 记下来以后研究用 1 <!-- springMVC简单配置 --> 2 <?xml version="1.0" encoding="UTF-8"?> 3 <beans xmlns="http://www.springframework.org/schema/beans" 4 xmlns:xsi="http://w

关于Ajax实现的简单示例

一.代码示例 关于Ajax的基本概念(包括XMLHttpRequest对象及其相关方法属性)移步这里(w3school中文版)学习了解. <!doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title>使用Ajax异步加载数据</title> <script type = "text/javasc

【转】bind简单示例

bind简单示例代码 namespace { class placeholder_ {}; placeholder_ __1; } template <typename R, typename T, typename Arg> class simple_bind_t { private: typedef R (T::*F)(Arg); F f_; T* t_; Arg& a_; public: simple_bind_t(F f, T* t, Arg &a) : f_(f),

SQL左连接、右连接和内连接的简单示例

left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录: right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录: inner join(等值连接) 只返回两个表中联结字段相等的行:举例如下: -------------------------------------------- 表A记录如下: aID aNum 1 a20050111 2 a20050112 3 a20050113 4 a20050114 5 a20050115 表B记录

Backbone简单示例

要的资源: <script type="text/javascript" src="../dep/underscore-1.6.0.min.js"></script> <script type="text/javascript" src="../dep/jquery-1.11.1.min.js"></script> <script type="text/javas

动态网站开发技术学习2:VS 2010制作作第一个简单示例网站

制作一个简单示例网站的步骤: 一,启动VS 2010开发环境,选择菜单中的"文件",选择其中的"新建",再选择"网站",会弹出"新建网站"对话框. 二,在"新建网站"的对话框,在"已安装模板"中选择Visual C#,右侧的选择"ASP.NET网站"选项,单击"新建网 站"中的"文件系统",下拉菜单中有"文件系统&qu