seajs 学习笔记
seajs的作者是玉伯,具体好处优点等详见官方网址
介绍
1 模块定义define
define(function(require,exports,module){
//require 引入需要的模块如jquery等
//var $ = require('./jquery'); //exports可以把方法或属性暴露给外部
exports.name = 'hi'; exports.hi = function(){
alert('hello');
} //module提供了模块信息
});
2 使用定义好的模块seajs.use
<!doctype html>
<html>
<head>
<title>SeaJs Test</title>
<meta charset="UTF-8"> <script type="text/javascript" src="seajs/sea.js"></script> <script type="text/javascript">
//第一个参数是模块标识,即要使用模块的路径,这里是t1.js
//第二个参数是一个回调函数
seajs.use('./js/t1',function(t){
t.hi();
});
</script>
</head>
<body> </body>
</html>
3 加载依赖项require
//名称必须是require,可以理解为一个关键词一样,接收一个参数
var $ = require('./jquery');
4 向外部提供接口exports
define(function(require,exports,module){
//exports可以把方法或属性暴露给外部
exports.name = 'hi'; exports.hi = function(){
alert('hello');
}
});
5 当前模块信息module
这里只介绍几个基本的,具体可以参考https://github.com/seajs/seajs/issues/242
1 module.id 模块标识
2 module.uri 根据模块系统的路径解析规则得到的模块绝对路径
3 module.dependencies 表示当前模块的依赖列表,是一个数组
4 module.status 当前模块的状态,是一个数值
示例
代码结构
代码文件
index.html
<!doctype html>
<html>
<head>
<title>SeaJs Test</title>
<meta charset="UTF-8"> <script type="text/javascript" src="seajs/sea.js"></script> <script type="text/javascript">
seajs.use('./js/init',function(init){
init.init();
}); seajs.config({
charset: 'utf-8'
});
</script>
</head>
<body>
<div class="main">
<h1>信息</h1>
<ul>
<li id="s1"></li>
<li id="s2"></li>
<li id="s3"></li>
</ul>
</div>
</body>
</html>
init.js
define(function(require,exports,module){
var man = require('./man');
var css = require('../css/main.css'); var $ = function(id){
return document.getElementById(id);
} exports.init = function(){
var s1 = $('s1');
var s2 = $('s2');
var s3 = $('s3'); var name = man.getName();
var age = man.getAge();
var msg = man.say(); s1.innerHTML = name;
s2.innerHTML = age;
s3.innerHTML = msg;
}
});
man.js
define(function(require,exports,module){
var msg = require('./msg'); var _name = 'tom';
var _age = '20'; exports.myName = _name; exports.say = function(){
return msg.getMsg();
} exports.getName = function(){
return _name;
} exports.getAge = function(){
return _age;
}
});
msg.js
define(function(require,exports,module){
var _msg = 'not set msg!'; exports.setMsg = function(msg){
_msg = msg;
} exports.getMsg =function(){
return _msg;
}
});
main.css
*{
font-size: 18px;
font-family: "Tahoma,Arial,Helvetica,sans-serif";
}
.main{
width: 500px;
height: 300px;
margin: 50px auto;
}
seajs 学习笔记的更多相关文章
- seaJs学习笔记2 – seaJs组建库的使用
原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...
- seaJs学习笔记之javascript的依赖问题
之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...
- seajs学习笔记
seajs配置 seajs.config({ //别名配置 alias:{ 'es5-safe':'gallery/es5-safe/0.9.3/es5-safe', 'jquery':'jquery ...
- SeaJS学习笔记(一) ./ 和 ../ 区别
最近要去实习,公司里使用sea.js进行模块化开发 具体下载安装就不多说了,请参见SeaJS官网 <!DOCTYPE html> <html> <head> < ...
- seajs教程之seajs学习笔记 seajs.use用法
seajs.use 用来在页面中加载模块.通过 use 方法,可以在页面中加载任意模块. 实例地址:http://www.android100.org/html/201405/23/12807.htm ...
- seaJS学习资料参考
seajs官方文档:http://seajs.org/docs/#docs http://wenku.it168.com/d_000096482.shtml http://blog.codinglab ...
- amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules
amazeui学习笔记二(进阶开发5)--Web 组件开发规范Rules 一.总结 1.见名知意:见那些class名字知意,见函数名知意,见文件名知意 例如(HISTORY.md Web 组件更新历史 ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- PHP-自定义模板-学习笔记
1. 开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2. 整体架构图 ...
随机推荐
- 纯CSS绘制三角形
扒segmentfault的导航栏时候发现的,用了个span标签写了个三角形出来,第一次发现,好神奇,查了下还有挺多种玩法的.基本的用法就是将盒子的width和height设为0,然后用border搭 ...
- 2016年gift上线相关知识点记录
1.图片初始化加载 2.如何判断横屏 function horAver() { if (window.orientation == 90 || window.orientation == -90) { ...
- UIButton, KVC, KVO
按钮 自定义按钮:调整内部子控件的frame 方式1:实现titleRectForContentRect:和imageRectForContentRect:方法,分别返回titleLabel和imag ...
- JNI加载Native Library 以及 跨线程和Qt通信
Part1 Java Native Interface-JNI-JAVA本地调用 JNI标准是Java平台的一部分, 允许Java代码和其他语言进行交互; 开始实现-> Step 1) 编写Ja ...
- BZOJ 3648: 寝室管理( 点分治 + 树状数组 )
1棵树的话, 点分治+你喜欢的数据结构(树状数组/线段树/平衡树)就可以秒掉, O(N log^2 N). 假如是环套树, 先去掉环上1条边, 然后O(N log^2 N)处理树(同上); 然后再O( ...
- title:EL表达式获取Map里面的数值失败的问题
在控制器中定义了一个Map<Integer,String>集合,看似没有问题,将这个集合的对象map传递到一个JSP页面中,我们都知道,用EL表达式 ${map[key]}就可以取得key ...
- C语言函数qsort的使用方法
qsort函数stdlib.h文件中,函数原型为 void qsort(void *base,size_t nelem,size_t width,int (*Comp)(const void *,co ...
- Python学习笔记(一)基础
学习资料 跟着廖雪峰的Python教程学习Python,大家可以去官方网站查看学习教程.使用的Python版本为3.0.x,解释器为CPython.本系列博客为学习笔记,记录跟随廖老师所学知识,同时会 ...
- Javascript 之内置对象
JS提供了11种引用类型:Object.Array.Date.Function.Error.RegExp.Math.Number.String.Boolean.Globle.其中包括了三种基本包装类型 ...
- 解决Delphi自带UTF8解码缺陷(使用API)
因为Delphi自带的转换函数遇到其无法识别的字符串就返回空,下面函数可解决该问题. function DecodeUtf8Str(const S: UTF8String): WideString;v ...