seajs:一个适用于web浏览器端的模块加载器(代码片段)

架构师小跟班 架构师小跟班     2022-11-22     442

关键词:

什么是SeaJS?
SeaJS是一款适用于Web浏览器端的模块加载器,它同时又与Node兼容。在SeaJS的世界里,一个文件就是一个模块,所有模块都遵循CMD(Common Module Definition)规范。SeaJS本身遵循(Keep it Simple, Stupid)理念开发,API仅有几个。

为什么用SeaJS?
假如我们要开发一个web应用App,在这个应用中需要使用jquery框架。App的首页index.html会用到module1.js,module1.js依赖module2.js和module3.js,同时module3.js依赖module4.js。传统方式,index.html需要引入module1.js及其所有下层依赖(顺序不能错)。随着项目的进行,js文件会越来越多,依赖关系会越来越复杂,使得js代码和html里的script列表变的难以维护。
而使用SeaJS,index.html不再需要引入所有依赖的js文件,只需要引入一个sea.js,sea.js会处理所有依赖,加载相应的js文件。

SeaJS特性
1、html页面不用再维护冗长的script标签列表,只要引入一个sea.js即可。
2、js代码以模块进行组织,各个模块通过require引入自己依赖的模块,代码清晰明了。

基本原则
1、在sea.js里,使用define(工厂函数factory)函数定义模块,模块就是一个函数,在CMD(Common Module Definition)模块定义规范中,一个模块就是一个JS文件。
2、模块的执行,必须要其依赖的模块准备就绪才能顺利执行。
3、在Sea.js里,模块的概念类似于面向对象中的类,模块有自己的数据和方法,数据和方法可以是公共的也可以是私有的,公共的可以供别的模块调用。

三种载入模块的API
seajs.use 主要用于载入入口模块,同时也是整个模块依赖树的根。一般只用在页面载入入口模块,用来在页面中加载一个或多个模块。如果入口模块只有一个,也可以使用sea.js的script标签加入"data-main"="./main"属性来省略seajs.use.
require 主要的模块加载方法,引入依赖,指定模块的接口,当一个模块需要另一个模块时用require加载。require只接受字符串直接量作为参数。
require.async 用来在模块内部异步加载一个或多个模块。seajs会在html页面打开时通过静态分析一次性加载所需要的js文件,如果想某个js文件在用到时才加载,则使用该方法。
分别:require是同步向下执行,require.async则是异步回调执行,且一般用来加载可延迟异步加载的模块。

前台JS应尽可能使用缓存,将config.js中的map:[]中代码去掉。可以在firebug里查看效果,去掉后请求的连接后没有了?d=……,即去掉了时间戳,下次访问将使用缓存。

如何使用?
Step1:
在页面引入sea.js。为了让sea.js内部能快速获取到自身路径,推荐手动加上id属性:
<script src="http://path/to/seajs/1.2.0/sea.js" id="seajsnode"></script>
Step2: 使用seajs.use加载模块文件:

<script>
    seajs.use(\'./hello\')// 可以带 callbackseajs.use(\'./hello\',function(hello)hello.api())// 也可同时(依次)加载多个模块        seajs.use([\'./hello\',\'./world\'],function(hello,world)hello.api()world.api())
</script>

你应该已经注意到,被加载的模块文件都没带后缀,那是因为 SeaJS 默认会给没有指定后缀的自动补上.js后缀。但有两种情况是不会自动添加的,一是路径以井号#结尾,二是路径中含有问号?。

 SeaJS全局配置参数

static/my/js/sea/config.js

base:表示基址寻址时的基址路径,若设置base: www.baidu.com/,当var model = require("jquery");,会载入www.baidu.com/jquery.js;

alias:可以让文件的真实路径与调用标识分开,对较长的常用路径设置缩写,有利于统一维护;

charset:表示下载js时script标签的charset属性;

timeout:表示加载文件的最大时长,单位为毫秒;

debug:表示是否工作在调试模式下。

seajs.config(
paths: 
\'gallery\':\'https://a.alipayobjects.com/gallery\',
\'app\':\'path/to/app\',

);
define(function(require, exports, module) 
var underscore =require(\'gallery/underscore\');
//=> 加载的是 https://a.alipayobjects.com/gallery/underscore.jsvar biz =require(\'app/biz\');
//=> 加载的是 path/to/app/biz.js

);

paths:当目录比较深,或需要跨目录调用模块时,可以使用paths来简化书写;也可以结合alias配置一起使用,让模块引用更方便。

seajs.config(
vars: 
\'locale\':\'zh-cn\'

);
define(function(require, exports, module) 

var lang =require(\'./i18n/locale.js\');
//=> 加载的是 path/to/i18n/zh-cn.js

);

 SeaJS示例演示

在页面中引用main.js文件:

main.js文件依赖view.js文件:

view.js文件的架构,依赖model.js和rm.js:

 

三个参数

工厂函数factory解析:

工厂函数是模块的主体和重点,在只传递一个参数给define时,这个参数就是工厂函数,此时工厂函数有三个参数。

require:用来指定模块的接口,引入依赖,获取其他模块提供的接口;注意:require只接受字符串直接作为参数。
exports:用来在模块内部对外提供接口,将数据或方法定义在其上则将其暴露给外部调用。
module:模块的元数据,该对象存储了与当前模块关联的一些属性和方法。

 

 

02.模块化相关规范(代码片段)

...代码的重用,从而提升开发效率,并且方便后期的维护2.浏览器端模块化规范(已过时,不推荐使用,推荐使用ES6模块化规范)AMDRequire.js(http://www.requirejs.cn/)CMDSea.js(https://seajs.github.io/seajs/docs/)3.服务器端模块化规范CommonJS①模块... 查看详情

模块化开发---seajs入门学习

SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器 [CMD规范](https://github.com/cmdjs/specification/blob/master/draft/module.md)9、seaJs启动函数的回调函数官网:http://seajs.org/docs/github:https://github.com/seajs/seajs如何选择一个技术产品栈 查看详情

day21

##前言##SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放... 查看详情

适用于 Web 和移动设备的 Flutter 图像选择器

...题描述】:我需要使用支持移动和网络平台的Flutter开发一个跨平台应用程序。我需要一个适用于移动设备和网络的图像选择器。目前我正在使用用于移动设备的图像选择器Flutter插件和用于网络的flutter_web_image_picker。但是构建失... 查看详情

seajs实现javascript的模块开发及按模块加载

...先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数“define” fn.define=function(id,deps,f 查看详情

angularjs1笔记-(20)-模块化加载机制seajs

SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模... 查看详情

模块相关

模块使用模块加载器去导入其它的模块。在运行时,模块加载器的作用是在执行此模块代码前去查找并执行这个模块的所有依赖。大家最熟知的JavaScript模块加载器是服务于Node.js的 CommonJS和服务于Web应用的Require.js。 查看详情

适用于mac电脑的web网页浏览器哪款好用?icabmac版好用吗?

适用于Mac电脑的Web网页浏览器哪款好用?iCabMac版好用吗?iCabforMac是另一款Web浏览器。它支持HTML4,图像过滤,cookie过滤,书签,java和javascript支持,搜索模式,从资源管理器导入Web档案,下载管理器以及许多其他浏览器中没有的... 查看详情

简单的使用seajs

 什么是SeajsSeajs是一个加载器 http://yslove.net/seajs/遵循CMD规范模块化开发,依赖的自动加载、配置的简洁清晰。兼容性Chrome3+Firefox2+Safari3.2+Opera10+IE5.5+基本应用导入Seajs库去官网下载最新的seajs文件, http://seajs.org/docs/#dow... 查看详情

如何检查 Angular 模块延迟加载是不是适用于 Chrome?

】如何检查Angular模块延迟加载是不是适用于Chrome?【英文标题】:HowtocheckifAngularModuleLazyLoadingworksonChrome?如何检查Angular模块延迟加载是否适用于Chrome?【发布时间】:2019-06-2722:16:48【问题描述】:如何检查使用Chrome开发工具打... 查看详情

seajs的模块化开发--实践笔记

2017-04-02SeaJS是一个遵循CMD规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。有效的解决复杂项目中命名冲突、依赖、性能等问题。SeaJS中使用define函数定义一个模块。define可以接收三个参数:require, exp... 查看详情

es6特性之模块modules(代码片段)

...要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS... 查看详情

seajs简介和完整实例

...加载工作,可简单理解为JS文件的加载器,它非常适合在浏览器中使用,它可以确保所依赖的JS文件加载完成之后再加载当前的JS文件,这在大量使用JS文件的项目中可确保各个JS文件的先后加载顺序,确保避免了以前因某些原因... 查看详情

前端模块化——seajs

...owerBowerinstallseajs二:Use方法是整个项目的入口方法,通常一个项目中只调用一次即可方法接受两个参数第一个参数表示引入模块的路径可以是一个字符串,此时引入一个文件也可以是一个数组,每个成员表示一个文件地址第二个... 查看详情

[node.js]web模块

...它只需支持HTTP协议、HTML文档格式及URL,与客户端的网络浏览器配合。大多数web服务器都支持服务端的语言(php、python、ruby,asp.net)等,并通过语言从数据库获取数据,将结果返回给客户端浏览器。目前最主流的三个Web服务器... 查看详情

用react重构个人网站

...要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范,为同步加载方案如seaJS。ES6在语言规格的层面上,实现了模块功能,而且实现得相当简单,完全可以取代现有的CommonJS... 查看详情

seajs基本开发原则

...切皆为模块。引入SeaJS后,编写JavaScript代码就变成了编写一个又一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。... 查看详情

模块化开发(代码片段)

...三种:CommonJs,AMD和CMD。CommonJs用在服务器端,AMD和CMD用在浏览器环境AMD是RequireJS在推广过程中对模块定义的规范化产出。CMD是SeaJS在推广过程中对模块定义的规范化产出。AMD:提前执行(异步加载:依赖先执行)+延迟执行CMD:延迟... 查看详情