sea.js 学习
开篇:终于学习了sea.js的使用了,因为它是一个模块加载工具,所以首先要了解javascript的模块编程,然后对sea.js的了解和使用
javascript 模块编程
为什么要模块化编程,为了让开发人员只需要实现业务逻辑代码,只要加载别人写好的模块化代码即可。
'简单的说,模块化就是实现特定功能的一组方法'
javascript 本身并不支持模块,但是却可以实现“模块”的效果。
从原始写法,将函数和变量写在一起的,即可称为模块,但是这样会污染全局变量。
对象写法
var module = new Object({
_count : 0,
m1 : function(){
//
},
m2 : function(){
//
}
});
对象写法的缺点是模块的方法和变量可能会被重写。
高级写法
var module = (function(mod){
mod.m1 = function(){
}
return mod;
})(jquery || {});
sea.js 是什么?
sea.js 是一款web开发 模块加载工具
因为sea.js 遵循CMD 模块定义规范,所以有必要了解下
碎言:很早就看到过AMD 和CMD ,但是每次看到都不太明白,因为当时也没有用到,所以就没有认真的去看,估计当时去看,也看不明白,今天终于有机会,把它弄清楚了
AMD 和 CMD
CMD common module definitime 基本模块定义,一个文件就是一个模块
AMD asynchronous module definitime 异步模块定义,它采用异步加载模块方式,模块的加载不影响后面语句的运行
你可能会问,他们之间有什么区别呢?我暂时了解到的就是一CMD是同步的,AMD是异步的,语法不一样。
主要用来解决什么问题?
主要用来解决多模块,命名冲突等问题,举例来说,当一个项目很大时,团队之间的合作可能存在命名冲突的问题,可能有些js文件需要优先加载,但是其他成员不知道,这个时候就需要sea.js 了,简单的从我个人理解来看,它就是一种规范。
能解决什么问题,网上描述的太多了,可自行搜索
sea.js 怎么用?
要了解一个东西的使用,首先要查看它的API 接口,sea.js API接口
在使用seajs 时,首先要加载seajs,为了让seajs 能更快获取自身路径,建议手动添加id属性
下面列出个人经常在前端中使用的代码,以前我们可能是如下加载的
<script type="text/javascript" src="js/lib/zepto-1.1.4.min.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/index.js"></script>
学习 sea.js 7个API
sea.js 配置 seajs.config
详细的就不介绍了,这里只介绍几个常用的,
seajs.config({
// sea.js 的基础路径
"base" : "",
// 路径配置 ,如果目录较深,或跨目录时,使用paths配置
"paths" : "",
// 别名配置,方便调用
"alias" :
});
seajs.use 加载一个或多个模块
// 加载多个模块,在加载完成时,执行回调
seajs.use(['./a','./b'],function(a,b){
a.dosomething();
b.dosomething();
});
seajs 与 DOM 优先加载没有关系,如果确保DOM ready,需要使用jquey 等类库来实现
define 定义模块,seajs 推崇一个模块一个文件
define 是一个全局函数,用来定义模块
define(factory) ,factory 可以是字符串、json对象、函数
factory 为对象、字符串时, 模块的接口就是 对象或字符串
factory 为函数时,表示模块的构造方法,执行构造方法,可以得到函数向外提供的接口,factory 在执行,会默认传入三个参数:require、exports、module
define(function(require,exports,module){
// 模块代码
});
define(id?, deps?, factory)
define 也可以接受两个以上的参数,id 表示 模块标识,deps 数组表示模块依赖,例如
define("a",['./b.js'],function(require,exports,module){
// 模块代码
});
前两个参数可省略,可以通过构建工具生成
下面来说下factory函数中的三个参数
require 是一个方法,用来接受模块标识,用来获取其他模块提供的接口,可以使用相对路径和绝对路径
require.async(id, callback?) 用来在模块内部异步加载模块,加载完成后,执行指定回调
exports 是一个对象,用来提供模块接口,还可以使用return 直接向外提供接口
module 是一个对象,存储了当前模块相关联的属性和方法
module.uri String 模块绝对路径
module.dependencies Array 当前模块的依赖
module.exports Object 当前模块对外提供的接口
require 用来获取指定模块的接口
require 的参数必须字符串直接量
动态依赖,推荐使用 require,async,异步加载一个或多个模块
require.async(['./a','./b'],function(a,b){
// 执行回调
})
在项目中使用
简单的使用
首先加载sea.js ,然后加载 后面的两个模块,这样写可以,但是就失去了,sea.js 的意义,和我之前引入没有什么区别,下面我们使用 模块化的写法来加载
<script type="text/javascript" src="js/lib/sea-2.2.1.min.js" id="seajsnode"></script>
<script type="text/javascript">
seajs.config({
"base" : "./js/",
"alias" : {
"zep" : "./js/lib/zepto-1.1.4.min.js"
}
});
seajs.use(["common","index"]);
</script>
// jquery.js
define(function(require, exports, module){
// jquery 代码
module.exports = $.noConflict(true);
});
// common.js
define(function(require,exports,module){
var $ = require("lib/jquery.js");
exports.doit = function(){
console.log($("body"));
}
});
// index.js
define("index",["common"],function(require,exports,module){
var common = require("common");
console.log($);
common.doit();
});
总结
以后每一个文件都是一个模块,每一个文件都要遵循CMD规范去编写,就连我们的jquery库也是
sea.js 学习的更多相关文章
- JavaScript模块载入框架sea.js 学习一
简单总结sea.js 学习 文件文件夹结构 /sea/sea.js 下载地址 http://seajs.org/docs/#downloads /sea/jquery-sea.js ...
- Sea.js学习4——Sea.js的配置
可以对 Sea.js 进行配置,让模块编写.开发调试更方便. seajs.config seajs.config(options) 用来进行配置的方法. seajs.config({ // 别名配置 ...
- Sea.js学习3——Sea.js的CMD 模块定义规范
在 Sea.js 中,所有 JavaScript 模块都遵循 CMD(Common Module Definition) 模块定义规范.该规范明确了模块的基本书写格式和基本交互规则. 在 CMD 规范 ...
- Sea.js学习2——Sea.js的API 快速参考
(7 个接口是最常用的) 一.seajs.config:用来对 Sea.js 进行配置. seajs.config({ // 设置路径,方便跨目录调用 paths: { 'arale': 'https ...
- Sea.js学习1——初识Sea.js
Sea.js 是一个成熟的开源项目,核心目标是给前端开发提供简单.极致的模块化开发体验. 使用 Sea.js,在书写文件时,需要遵守 CMD (Common Module Definition)模块定 ...
- js模块加载框架 sea.js学习笔记
seajs实现了JavaScript 的 模块开发及按模块加载.用来解决繁琐的js命名冲突,文件依赖等问题,其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载. 官方文档:http:/ ...
- Sea.js学习5——Sea.js的构建工具spm
如果项目遵循推荐的标准目录结构: foo-module/ |-- dist 存放构建好的文件 |-- src 存放 js.css 等源码 | |-- foo.js | `-- style.css `- ...
- 深入学习sea.js
入门学习了文档之后,在深入学习里面的一些有趣的知识点 =================================== 一.配置 seajs.config({ alias:( a3:'./js/ ...
- sea.js,spm学习
安装spm 下载sea.js 运行spm npm install spm@2.x -g npm install spm-build -g 下载sea.js git clone https://gith ...
随机推荐
- apache开源项目--Lens
Lens 提供了一个统一数据分析接口.通过提供一个跨多个数据存储的单一视图来实现数据分析任务切分,同时优化了执行的环境.无缝的集成 Hadoop 实现类似传统数据仓库的功能. 该项目主要特性: 简单元 ...
- 使用OLEDB读取不同版本Excel数据的连接字符串设置
摘要: 用OLEDB通过设置连接字符串可以像读取sqlserver一样将excel中的数据读取出来,但是excel2003和excel2007/2010的连接字符串是不同的/// summary // ...
- ArcGIS for Android示例解析之高亮要素-----HighlightFeatures
转自:http://blog.csdn.net/wozaifeiyang0/article/details/7323606 HighlightFeatures 要素高亮化功能,相信有其他gis开发经营 ...
- mysql服务启动 但端口未监听
mysql 启动了,用 localhost 可以连接,但是用 127.0.0.1 不能连接.可能的原因是 1. mysql为了增强安全性而跳过了端口监听,查看方法: 用mysql> SHOW V ...
- md5可能会被破解咋办?
所谓加Salt,就是加点“佐料”.其基本想法是这样的——当用户首次提供密码时(通常是注册时),由系统自动往这个密码里撒一些“佐料”,然后再散列.而当用户登录时,系统为用户提供的代码撒上同样的“佐料”, ...
- 各种sensor名称统计
gyroscopes 陀螺仪accelerometers 加速度计magnetometers 磁力计barometric pressure 气压remote pressure sensing 远程压力 ...
- android用ImageView显示网络图片
1.权限配置 <</SPAN>uses-permission android:name="android.permission.INTERNET"/> .c ...
- java操作pdf添加页眉条码添加水印图片
添加条码页眉以及图片水印 1. 引入jar包 1. itext-4.2.1.jar 2. itext-asian-5.2.0.jar 3. jbarcode-0.2.8.jar ...
- Linux 下svn恢复到某一版本
经常由于坑爹的需求,功能要切回到之前的某一个版本.有两种方法可以实现: 方法1: 用svn merge 1) 先 svn up,保证更新到最新的版本,如20: 2) 然后用 svn log ,查看历史 ...
- sudo 和 sudoers设置
转: http://www.cnblogs.com/zhuowei/archive/2009/04/13/1435190.html sudo是linux下常用的允许普通用户使用超级用户权限的工具,允许 ...