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"
});
时间: 2024-10-09 18:00:44

seajs hello world的相关文章

简单的使用Seajs

什么是Seajs Seajs是一个加载器 http://yslove.net/seajs/ 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 兼容性 Chrome 3+ Firefox 2+ Safari 3.2+ Opera 10+ IE 5.5+ 基本应用 导入Seajs库 去官网下载最新的seajs文件, http://seajs.org/docs/#downloads 在页尾引入seajs: <script src="/site/script/sea.js"

seajs

seajs 与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载.SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑.SeaJS可以与jQuery这类框架完美集成.使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,

自己动手写快速开发框架1【EF+WEBAPI+EASYUI+SEAJS+...】大概想法

自己动手写个框架,大约周期为半年,作为5年.net工作的积累及思考,构想是蛮大的,先看架构图(貌似什么都想做...): 已经开始了大概半个月时间,大概的更新记录如下: 20160715: 1.后端加入EF 的Code First 2.前端引用easyui 3.加入log4net日志管理 4.日志管理加入txt记录管理页面 20160727: 1.引入seajs,管理所有前前端接口 2.加入日志支持数据库记录 3.引入signalr 支持消息推送 20160801: 1.修正了清除日志功能 2.将

JS模块化库seajs体验

seajs http://seajs.org/docs/en.html#intro https://github.com/seajs/seajs/releases Extremely simple experience of modular development Why use Sea.js ? Sea.js's pursuit of a simple, natural coding and organization,has the following key aspects: The def

SeaJS与RequireJS最大的区别

1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行.不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同).CMD 推崇 as lazy as possible. 2. CMD 推崇依赖就近,AMD 推崇依赖前置. 3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一.比如 AMD 里,require 分全局 require 和局部 require,都叫 require.CMD 里,没有全局 require,而是

seajs的使用

写在前面 seajs是什么? Seajs是一个js文件加载器. 遵循 CMD 规范模块化开发,依赖的自动加载.配置的简洁清晰. 用于Web开发的模块加载工具,提供简单.极致的模块化体验 一:使用 文件目录: demo_1.html <!DOCTYPE html> <html> <head> <title></title> <script src="seajs/sea.js"></script> <

seajs加载jquery时提示$ is not a function该怎么解决

这篇文章主要介绍了seajs加载jquery时提示$ is not a function该怎么解决的相关资料,需要的朋友可以参考下 jquery1.7以上的都支持模块化加载,只是jquery默认的是支持amd,不支持cmd.所以要用seajs加载jquery时,我们需要稍微做下改动,需要把以下内容做下修改,具体修改方式如下: 把 ? 1 2 3 4 5 if (typeof define === "function" && (define.amd)) {   defin

seajs在jquery多个版本下引用jquery的插件的方案

好多插件是依赖jquery的特定版本的,用的jQuery全局对象,而项目有时候用的是jquery的其他版本,例如:项目默认用的jquery1.7.2,而插件用的jquery1.2.6 假如用1.7.2就不正常怎么处理呢? 这个属于jquery插件的兼容问题…… tickwudi commented on Jul 17, 2014 是的,现在已经通过seajs包装解决了!define(function(require,exports,module){//使用插件指定版本var jQuery=req

新版seajs 如何把 jquery 1.11.x 暴露到全局

define jquery的地方,module.exports = window.$ = window.jQuery = $ 因为seajs的延迟执行策略,单是在define后是不能保证jQuery一定在全局中的吧?应该还需要一次seajs.use或者require吧? army8735 commented on Jun 25, 2014 正确 semious commented on Jun 25, 2014 个人觉得 像jquery这样的基础组件没必要再用什么东东包裹一次,直接引用放出全局$

seajs模块压缩问题

在优化整理项目代码时,想使用seajs来把代码模块化.看了下官方5分钟上手教程,觉得很不错,也没多想就一直开发下去了,也没出什么问题.等一同事说把代码打包个放到设备上去测试一下,发现怎么也跑不起来,郁闷了. 于是单步调试一把,发现模块一直加不进来.看了一下seajs的原码,明白了是怎么回事. define模块解析依赖有两种途径,一种是从define(id, deps, factory)中的deps来:还有一种是解析define代码,从require中来.来看一下代码: 1 Module.defi