SeaJS入门教程系列之SeaJS介绍(一)


Posted in Javascript onMarch 03, 2014

前言
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。
SeaJS的作者是淘宝前端工程师玉伯。
SeaJS本身遵循KISS(Keep It Simple, Stupid)理念进行开发,其本身仅有个位数的API,因此学习起来毫无压力。在学习SeaJS的过程中,处处能感受到KISS原则的精髓——仅做一件事,做好一件事。
本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程,然后详细讨论SeaJS的使用方法,最后给出一些与SeaJS相关的资料。

传统模式 vs SeaJS模块化
假设我们现在正在开发一个Web应用TinyApp,我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到module1.js,module1.js依赖module2.js和module3.js,同时module3.js依赖module4.js。
传统开发
使用传统的开发方法,各个js文件代码如下:

//module1.js
var module1 = {
    run: function() {
        return $.merge(['module1'], $.merge(module2.run(), module3.run()));
    }
}//module2.js
var module2 = {
    run: function() {
        return ['module2'];
    }
}
//module3.js
var module3 = {
    run: function() {
        return $.merge(['module3'], module4.run());
    }
}
//module4.js
var module4 = {
    run: function() {
        return ['module4'];
    }
}

此时index.html需要引用module1.js及其所有下层依赖(注意顺序):
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
    <script src="./jquery-min.js"></script>
    <script src="./module4.js"></script>
    <script src="./module2.js"></script>
    <script src="./module3.js"></script>
    <script src="./module1.js"></script>
</head>
<body>
    <p class="content"></p>
    <script>
        $('.content').html(module1.run());
    </script>
</body>
</html>

随着项目的进行,js文件会越来越多,依赖关系也会越来越复杂,使得js代码和html里的script列表往往变得难以维护。
SeaJS模块化开发
下面看看如何使用SeaJS实现相同的功能。
首先是index.html:
<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p class="content"></p>
    <script src="./sea.js"></script>
    <script>
        seajs.use('./init', function(init) {
            init.initPage();
        });
    </script>
</body>
</html>

可以看到html页面不再需要引入所有依赖的js文件,而只是引入一个sea.js,sea.js会处理所有依赖,加载相应的js文件,加载策略可以选择在渲染页面时一次性加载所有js文件,也可以按需加载(用到时才加载响应js),具体加载策略使用方法下文讨论。
index.html加载了init模块,并使用此模块的initPage方法初始化页面数据,这里先不讨论代码细节。
下面看一下模块化后JavaScript的写法:
//jquery.js
define(function(require, exports, module) = {    //原jquery.js代码...
    module.exports = $.noConflict(true);
});
//init.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m1 = require('module1');
    exports.initPage = function() {
        $('.content').html(m1.run());    
    }
});
//module1.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m2 = require('module2');
    var m3 = require('module3');
    exports.run = function() {
        return $.merge(['module1'], $.merge(m2.run(), m3.run()));    
    }
});
//module2.js
define(function(require, exports, module) = {
    exports.run = function() {
        return ['module2'];
    }
});
//module3.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m4 = require('module4');
    exports.run = function() {
        return $.merge(['module3'], m4.run());    
    }
});
//module4.js
define(function(require, exports, module) = {
    exports.run = function() {
        return ['module4'];
    }
});

乍看之下代码似乎变多变复杂了,这是因为这个例子太简单,如果是大型项目,SeaJS代码的优势就会显现出来。不过从这里我们还是能窥探到一些SeaJS的特性:
一是html页面不用再维护冗长的script标签列表,只要引入一个sea.js即可。
二是js代码以模块进行组织,各个模块通过require引入自己依赖的模块,代码清晰明了。
通过这个例子朋友们应该对SeaJS有了一个直观的印象,下面本文具体讨论SeaJS的使用。
Javascript 相关文章推荐
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
Mar 06 Javascript
jquery异步请求实例代码
Jun 21 Javascript
防止按钮在短时间内被多次点击的方法
Mar 10 Javascript
理解jquery事件冒泡
Jan 03 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
vue中路由验证和相应拦截的使用详解
Dec 13 Javascript
解决Layui中layer报错的问题
Sep 03 Javascript
浅析js实现网页截图的两种方式
Nov 01 Javascript
js实现随机抽奖
Mar 19 Javascript
JavaScript实现串行请求的示例代码
Sep 14 Javascript
js的hasownproperty使用示例
Mar 02 #Javascript
javascript对象的使用和属性操作示例详解
Mar 02 #Javascript
使用js显示当前时间示例
Mar 02 #Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 #Javascript
jquery制作弹窗提示窗口代码分享
Mar 02 #Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 #Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 #Javascript
You might like
用php来检测proxy
2006/10/09 PHP
谈谈新手如何学习PHP
2006/12/14 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
功能强大的php分页函数
2016/07/20 PHP
PHP获取路径和目录的方法总结【必看篇】
2017/03/04 PHP
一个基于jquery的图片切换效果
2010/07/06 Javascript
IE下js调试工具Companion.JS
2010/10/15 Javascript
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
Js从头学起(基本数据类型和引用类型的参数传递详细分析)
2012/02/16 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
js实现鼠标经过时图片滚动停止的方法
2015/02/16 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
分享网页检测摇一摇实例代码
2016/01/14 Javascript
Javascript基础教程之比较null和undefined值
2016/05/16 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
jQuery实现移动端Tab选项卡效果
2017/03/15 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
vue微信分享的实现(在当前页面分享其他页面)
2019/04/16 Javascript
在树莓派2或树莓派B+上安装Python和OpenCV的教程
2015/03/30 Python
Python升级导致yum、pip报错的解决方法
2017/09/06 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
python使用re模块爬取豆瓣Top250电影
2020/10/20 Python
Python之京东商品秒杀的实现示例
2021/01/06 Python
this关键字的作用
2016/01/30 面试题
摄影助理岗位职责
2014/02/07 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
安装Windows Server 2012 R2企业版操作系统并设置好相关参数
2022/04/29 Servers