requirejs 简单示例一

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

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

可以参考:

  • 关于 CommonJS AMD CMD UMD

  • SeaJS与RequireJS最大的区别

  • JavaSript模块规范 - AMD规范与CMD规范介绍

基于 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 ,妈妈叫我吃饭去了。

 

你可能感兴趣的:(requirejs 简单示例一)