seajs hello world

http://localhost/seajs/index.html

<!doctype html>

<head>

<title>Hello Seajs</title>

    <script src="sea.js"></script>

    <script>

        seajs.config({

          // 调试模式

          debug: true,

          // Sea.js 的基础路径

          base: 'http://localhost/seajs/app',

          // 别名配置

          alias: {

                "jquery": "jquery/jquery"

          },

          // 文件编码

          charset: 'utf-8'

        });

    </script>

    <script>

            //执行模块

            seajs.use("app.js"); 

    </script>



</head>

<body>

    <div id="hello-seajs" >Hello SeaJS</div>

</body>

</html>

 

http://localhost/seajs/app/jquery/jquery.js

 

http://localhost/seajs/app/app.js

define(function(require,exports,module){

    var $ = require("jquery");

     // 引入util模块的接口

     var util = require('./util');

     //var helloSeaJS = document.getElementById('hello-seajs');

     // 调用接口的方法

     //helloSeaJS.style.color = util.randomColor();

     var helloSeaJS = $("#hello-seajs");

     helloSeaJS.css("color",util.randomColor());

});

http://localhost/seajs/app/util.js

define(function(require,exports,module){

     var util = {};    

     var colorRange = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];

     util.randomColor = function(){

          return '#' +

               colorRange[Math.floor(Math.random() * 16)] +

               colorRange[Math.floor(Math.random() * 16)] +

               colorRange[Math.floor(Math.random() * 16)] +

               colorRange[Math.floor(Math.random() * 16)] +

               colorRange[Math.floor(Math.random() * 16)] +

               colorRange[Math.floor(Math.random() * 16)];

     };

     module.exports = util;

});

 

 

 

 

 

base添加规则
  • 完整的绝对路径 不会加base

  • 以 "." 开头 会相对于当前(被调用的)模块解析地址。 如果不存在被调用的模块(如seajs.use() ), 则会相对于当前页面解析地址。

  • 以 "/" 开头 相对于当前页面的根目录 解析地址

  • 普通命名 直接加上base前缀

base值
  • base 默认值是 seajs所在目录

  • seajs.config()中base的解析与ID命名解析规则相同

例如:

http://example.com/test/js/sea/sea.js

http://example.com/test/index.html

在index.html中调用了sea.js

base的默认值为 "http://example.com/test/js/sea/"

如果使用seajs.config()设置了base

seajs.config({

    base: "home"  // base值为 "http://example.com/test/js/sea/home" }); seajs.confg({ base: "./home" // base值为 "http://example.com/test/home" }); seajs.conifg({ base: "/home" // base值为 "http://example.com/home" });

你可能感兴趣的:(Hello world)