SeaJS入门教程系列之SeaJS介绍(一)
前言
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文件代码如下:
此时index.html需要引用module1.js及其所有下层依赖(注意顺序):
随着项目的进行,js文件会越来越多,依赖关系也会越来越复杂,使得js代码和html里的script列表往往变得难以维护。
seajs模块化开发
下面看看如何使用seajs实现相同的功能。
首先是index.html:
可以看到html页面不再需要引入所有依赖的js文件,而只是引入一个sea.js,sea.js会处理所有依赖,加载相应的js文件,加载策略可以选择在渲染页面时一次性加载所有js文件,也可以按需加载(用到时才加载响应js),具体加载策略使用方法下文讨论。
index.html加载了init模块,并使用此模块的initpage方法初始化页面数据,这里先不讨论代码细节。
下面看一下模块化后javascript的写法:
乍看之下代码似乎变多变复杂了,这是因为这个例子太简单,如果是大型项目,seajs代码的优势就会显现出来。不过从这里我们还是能窥探到一些seajs的特性:
一是html页面不用再维护冗长的script标签列表,只要引入一个sea.js即可。
二是js代码以模块进行组织,各个模块通过require引入自己依赖的模块,代码清晰明了。
通过这个例子朋友们应该对seajs有了一个直观的印象,下面本文具体讨论seajs的使用。
推荐阅读
-
Router之Qualcomm方案系列一:IPQ6018 2x2 5 GHz and 2x2 2.4 GHz, 11ax 1800Mbps wifi6方案介绍
-
SeaJS入门教程系列之完整示例(三)
-
SeaJS入门教程系列之使用SeaJS(二)
-
SeaJS入门教程系列之SeaJS介绍(一)
-
SeaJS入门教程系列之完整示例(三)_Seajs
-
Oracle OWB介绍系列一之简介及使用流程
-
SeaJS入门教程系列之SeaJS介绍(一)_Seajs
-
SeaJS入门教程系列之SeaJS介绍(一)_Seajs
-
SeaJS入门教程系列之完整示例(三)_Seajs
-
SeaJS入门教程系列之使用SeaJS(二)_Seajs