那么如何去使用seajs呢?下面是本人学习seajs时的简单记录。
例子简单目录如下:
myapp/
|– js/
|– lib //存放 seajs、jquery 等文件
|–seajs
|–jquery
|– mod //存放各个页面的 js模块文件
|–slide.js //滑动插件
|–list.js
|–content.js
|– common //共用js入口文件
|– index.html
|– list.html
|– content.html
一、引入seajs
1、首先去官网下载seajs:http://seajs.org/docs/#downloads
2、在页面(比如index.html)页尾,通过 script 引入 sea.js(<script src=”js/lib/sea.js”></script>)
二、在页面中配置和加载模块在上述index.html页面引入好seajs后,我们需要在引入的script后面,简单配置有一段代码,即可使用了。如下
seajs.config({ base: "./js/", alias: { "jquery": "lib/jquery-2.2.0.min" }, vars:{ paths:'./js/' //路径配置(用变量表示路径) } }) seajs.use("{paths}common") //共用js入口文件1、关于配置
具体可以查看:https://github.com/seajs/seajs/issues/262
2、关于路径的问题
可以查看如下内容:
模块的加载启动:https://github.com/seajs/seajs/issues/260
关于sea.js里各种路径的解析:https://github.com/seajs/seajs/issues/689
三、模块的定义
// 所有模块都通过 define 来定义 define(function(require, exports, module) { // 通过 require 引入依赖 var $ = require('jquery'); var slide = require('./slide'); // 对外提供 foo 属性 exports.foo = 'bar'; // 对外提供 doSomething 方法 exports.doSomething = function() {}; // 或者通过 module.exports 提供整个接口 module.exports = ... });具体模块定义请查看:https://github.com/seajs/seajs/issues/242
1、插件的使用(本例子中,slide为插件)
define(function(require, exports, module) { // slide插件代码 /** * @authors laoyuan * @version 1.0 */ ;(function($){ $.fn.slide=function(options){ })(jQuery) });2、jQuery的使用。
在开始学习之中,发现引入jQuery总是 $ is not defined,
后来用如下代码封装一下就可以了。(本例子jquery是2.2.0版本)。
define(function(){ //jquery源代码 return $.noConflict(); });四、模块的加载启动
1、页面中加载模块和启动
seajs.use Function:它是用来在页面中加载模块的。我们通过 use 方法,可以在页面中加载任意模块:
如我们第一步写的seajs.use(“{paths}common”) ,是不带回调函数的加载。
有回调函数和加载多个模块:
// 加载模块 list,并在加载完成时,执行指定回调 seajs.use('mod/list', function(list) { list.init(); }); // 一次和加载多个模块:并发加载模块 a 和模块 b,并在都加载完成时,执行指定回调 seajs.use(['./a', './b'], function(a, b) { a.init(); b.init(); });
具体详情可移步:https://github.com/seajs/seajs/issues/260(模块的加载启动)
2、模块内部的加载
可以使用require require(id)和require.async require.async(id, callback?)。
require 是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供的接口。
require.async 方法用来在模块内部异步加载模块,并在加载完成后执行指定回调。callback 参数可选。
简单的加载如下(以本例的common为例子):
define(function(require, exports) { var $ = require('jquery'); //加载jquery require("mod/slide"); //加载slide }); define(function(require, exports) { // 异步加载一个模块,在加载完成时,执行回调 require.async('./b', function(b) { b.doSomething(); }); });关于更多require加载的详情请查看
https://github.com/seajs/seajs/issues/242
五、本例子代码
index.html:
<script type="text/javascript" src="js/lib/sea.js"></script> <script type="text/javascript"> seajs.config({ base: "./js/", alias: { "jquery": "lib/jquery-2.2.0.min" }, vars:{ paths:'./js/' //路径配置(用变量表示路径) } }) seajs.use("{paths}common") </script>common.js:
//所有模块都通过 define 来定义 define(function(require, exports, module) { var $ = require('jquery'); $(function(){ //返回顶部代码 ... //导航条 ... //整站通用代码 ... }) require("mod/slide"); $(function(){ $(".slide-box").slide({ "affect":'translate3d', "space":3500, "addStag":false }); }) });list.html:
<script type="text/javascript" src="js/lib/sea.js"></script> <script type="text/javascript"> seajs.config({ base: "./js/", alias: { "jquery": "lib/jquery-2.2.0.min" }, vars:{ paths:'./js/' //路径配置(用变量表示路径) } }) seajs.use(["{paths}common","{paths}/mod/list"]); </script>同理content.html跟list.html类似。以上就是自己学习seajs的简单记录,可以快速上手seajs。