seaJs的简单应用

sea.js的应用模块化:    将Js代码按模块化分开,提高了代码的重用性;seaJs的好处:    解决了文件的依赖    解决了变量名的冲突seaJs的使用    1、定义模块    define(function(require,exports,module)){        require:引入一个模块        如:var _msg = require("msg");

exports:输出一个模块        如:exports.msg = function(){                alert("ok");            }

module:批量输出模块(很少用)    }    2、使用一个模块    seajs.use("模块名",function(mod){        //code    })    使用多个模块    seajs.use(["a","b",···],function(mod1,mod2···){})

效果:添加一个人的姓名,年龄和通讯方式  框架:

html代码:

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>SeaJs Test</title>
 6     <script src="../js/sea.js"></script>
 7     <script>
 8         seajs.use("init",function(init){
 9             init.init();
10         })
11     </script>
12 </head>
13 <body>
14     <div class="main">
15         <h1>信息</h1>
16         <ul>
17             <li id="s1"></li>
18             <li id="s2"></li>
19             <li id="s3"></li>
20         </ul>
21     </div>
22 </body>
23 </html>
init.js代码:
 1 define(function(require,exports,module){
 2     var man = require("man");
 3     var css = require("../css/main.css");
 4
 5     var $ = function(id){
 6         return document.getElementById(id);
 7     };
 8
 9     exports.init = function(){
10         var s1 = $("s1");
11         var s2 = $("s2");
12         var s3 = $("s3");
13
14         var name = man.getName();
15         var age = man.getAge();
16         var msg = man.say();
17
18         s1.innerHTML = name;
19         s2.innerHTML = age;
20         s3.innerHTML = msg;
21
22     }
23 })
man.js代码:
 1 define(function(require,exports,module){
 2     var msg = require("msg");
 3
 4     var _name = "tom";
 5     var _age = "20";
 6
 7     exports.myName = _name;
 8
 9     exports.say = function(){
10         return msg.getMsg();
11     };
12
13     exports.getName = function(){
14         return _name;
15     };
16
17     exports.getAge = function(){
18         return _age;
19     }
20 })
msg.js代码:
 1 define(function(require,exports,module){
 2     var _msg = "not set msg!";
 3
 4     exports.setMsg = function(msg){
 5         _msg = msg;
 6     }
 7     exports.getMsg = function(){
 8         return _msg;
 9     }
10 });
				
时间: 2024-12-21 07:54:23

seaJs的简单应用的相关文章

使用模块化管理工具seajs实现简单动画效果

今天使用模块化的管理工具seajs实现了一个简单的动画效果. seajs具有简单友好的模块定义规范.seajs遵循CMD规范,可以像nodejs一样编写代码. seajs具有自然直观的代码组织方式.依赖的自动加载,配置简洁清晰. 通过学习,发现seajs的使用是具有一个标准的格式的,如下define(function(require,exports,module){ //定义的代码块 });其中回调的参数名和顺序都是不可改变的. 这次小动画实现的文件结构: word.html代码如下: 1 <!

简单的使用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

快速上手seajs——简单易用Seajs 原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslove.net/seajs/ 背景 一个网站必然会涉及很多功能,tab选项卡.slide轮播图.pop弹出层.美化alert.paging分页等等等等,如果是企业网站那整合成一个js文件就够了,即 插件库 . 但是对于一个大的网站平台来说需要的功能可能会有很多,而且随着平台的发展,功能会越来越多.到最后会

seajs

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

seajs学习笔记(基础)

一:前端开发中常遇到的问题       如果我们的网站简单的时候,结构上也许不会有什么问题,但是如果我们的网站越来复杂的时候(比如功能越来越多的时候,加入项目的人越来越多的时候),我们书写的代码就会遇到下面的两个问题: 1. 恼人的命名冲突 比如我们多人开发一个项目,事先由我自己写好了一个共公的组件库common.js供大家调用,里面的包括 function tab(){ 实现代码: }; function drag(){ 实现代码: }; function dialog(){ 实现代码: };

SeaJS入门篇一 怎么使用query

研究了2个多小时,终于搞定引入jq 1.写个html页面 <h1>ddddddddd</h1> <script src='/Scripts/dist/sea.js'></script> 2.配置脚本路径 // seajs 的简单配置 seajs.config({ //base: "",//默认和sea.js同级,jquery.js和它同级,所以没有写:注意:如果为默认不要写,否则路径出错 alias: { "jquery&quo

seajs 使用文档

// seajs 的简单配置seajs.config({    base: "/scripts/",    alias: {        "jquery": "jquery.js"    }}) //情况一.如果定义和调用在同一个文件//实例一:define.use//必须声明模板标识define("user", function () {    alert("用户信息");});// 加载入口模块sea

高富帅seajs使用示例及spm合并压缩工具露脸

一.扯淡高富帅 很久很久以前……………………的很久很久的以后,也就是昨天的昨天(2012-07-07),D2前端技术论坛,下午3点,分会场,@老赵分享其开源项目(什么来着?名字似乎很难记,让我找找~~)Jscex. 印象较深的是末了,其戏称seajs为高富帅. 为何有此感慨?同样是开源项目,seajs因为①原作者个人影响力②推广渠道或者说团队影响力③背后干爹的大力支持等原因,其知名度以及接受程度要比Jscex高不少. 我自己似乎也有类似的感触,10年年初的时候,我自己折腾了一个关于CSS3的小项

Seajs教程

API 快速参考 该页面列举了 Sea.js 的常用 API.只要掌握这些用法,就可以娴熟地进行模块化开发. seajs.config 用来对 Sea.js 进行配置. seajs.config({ // 设置路径,方便跨目录调用 paths: { 'arale': 'https://a.alipayobjects.com/arale', 'jquery': 'https://a.alipayobjects.com/jquery' }, // 设置别名,方便调用 alias: { 'class'