SeaJS入门教程系列之SeaJS介绍(一)
入门教程 介绍 系列 SeaJS
2023-06-13 09:15:18 时间
前言
SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。
SeaJS的作者是淘宝前端工程师玉伯。
SeaJS本身遵循KISS(KeepItSimple,Stupid)理念进行开发,其本身仅有个位数的API,因此学习起来毫无压力。在学习SeaJS的过程中,处处能感受到KISS原则的精髓——仅做一件事,做好一件事。
本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程,然后详细讨论SeaJS的使用方法,最后给出一些与SeaJS相关的资料。
传统模式vsSeaJS模块化
假设我们现在正在开发一个Web应用TinyApp,我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到module1.js,module1.js依赖module2.js和module3.js,同时module3.js依赖module4.js。
传统开发
使用传统的开发方法,各个js文件代码如下:
varmodule1={
run:function(){
return$.merge(["module1"],$.merge(module2.run(),module3.run()));
}
}
//module2.js
varmodule2={
run:function(){
return["module2"];
}
}
//module3.js
varmodule3={
run:function(){
return$.merge(["module3"],module4.run());
}
}
//module4.js
varmodule4={
run:function(){
return["module4"];
}
}
此时index.html需要引用module1.js及其所有下层依赖(注意顺序):
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<title>TinyApp</title>
<scriptsrc="./jquery-min.js"></script>
<scriptsrc="./module4.js"></script>
<scriptsrc="./module2.js"></script>
<scriptsrc="./module3.js"></script>
<scriptsrc="./module1.js"></script>
</head>
<body>
<pclass="content"></p>
<script>
$(".content").html(module1.run());
</script>
</body>
</html>
随着项目的进行,js文件会越来越多,依赖关系也会越来越复杂,使得js代码和html里的script列表往往变得难以维护。
SeaJS模块化开发
下面看看如何使用SeaJS实现相同的功能。
首先是index.html:
<htmllang="zh-CN">
<head>
<metacharset="UTF-8">
<title>TinyApp</title>
</head>
<body>
<pclass="content"></p>
<scriptsrc="./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的写法:
define(function(require,exports,module)={
//原jquery.js代码...
module.exports=$.noConflict(true);
});
//init.js
define(function(require,exports,module)={
var$=require("jquery");
varm1=require("module1");
exports.initPage=function(){
$(".content").html(m1.run());
}
});
//module1.js
define(function(require,exports,module)={
var$=require("jquery");
varm2=require("module2");
varm3=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");
varm4=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的使用。
相关文章
- pycharm入门教程(非常详细)_pipe使用教程
- eclipse如何使用svn_pr入门教程
- 软件开发入门教程网之C++ 信号处理
- odoo 开发入门教程系列-约束(Constraints)
- MongoDB入门教程之常用的运维技术介绍
- MongoDB入门教程之聚合和游标操作介绍
- 一篇简单易懂的 Linux 列提取入门教程(linux列提取)
- 深度解析:Oracle数据仓库系统使用入门教程(oracle数据仓库教程)
- Oracle入门一步一步学习(oracle入门教程简书)
- 快速学习Redis入门教程及实战指南(下载redis教程)
- Jquery从头学起第四讲jquery入门教程
- YiiPHPFramework实用入门教程(详细介绍)
- node.js入门教程
- MongoDB入门教程之聚合和游标操作介绍