SeaJs模块化加载

最新推荐文章于 2020-09-18 10:52:00 发布
最新推荐文章于 2020-09-18 10:52:00 发布
阅读量93 收藏 1
点赞数
分类专栏： Js&JQuery 文章标签： javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rayln/article/details/84267686
版权
SeaJs模块化加载, 这个是国人写的一个框架, 遵循CMD模块准则. 目的是整个项目模块化.
也可以有效的减少数据的加载量.
直接看例子:

注意. 这里的Jquery需要模块化, 是需要一点改造!!
改造也很简单: 

define(function(){
	/*! jQuery v1.7.2 jquery.com | jquery.org/license */
        /*
        jquery源码!!
        */

        //最后的返回是关键, 让SeaJs把jquery的$纳入模块化中
	return $;
});


require: 调用外部模块的对外方法
exports: 声明该模块的对外方法
module: 用于表示当前模块的信息，具有如下属性:
id: 模块的唯一表示， require方法需要用到他
exports: 当前模块开放的接口, Object
dependencies: 当前模块的依赖列表

一个hello.js文件, 一个模块 
define(function(require, exports, module){
	var $ = require("jquerymin");
	exports.sayhello = function(){
		alert("helloworld");
	};
});


一个hello.html. 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="lib/sea.js"></script>
</head>
<body>
<button id="helloworld">helloworld</button>
</body>
</html>
<script>
seajs.config({
	alias: {
		'jquerymin': './lib/jquery.js'
	}
});

seajs.use(['./hello','jquerymin'], function(hello, jquery){
	jquery("#helloworld").click(function(){
		hello.sayhello();
	});
});
</script>
RaylnGuan
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
seajs模块化加载框架使用
dengqulun3433的博客
05-08 180
seajs是模块化加载框架。seajs.org已经打不开了，seajs的github。seajs速查文档 <!--如果完成下面4步，则seajs掌握了80%js模块化1.引入seajs的库 :<script type="text/javascript" src="sea/sea.js"></script>2.如何变成模块define：一个文件就是一个模块。...
SeaJS简介三：模块载入和引用
热门推荐
Q
05-23 2万+
之前对模块有过介绍，一个模块对应一个js文件，而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块，所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。 SeaJS支持如下几种方式： 第一种：绝对路径--给出js文件的绝对路径 require("http://example/js/a"); 第二种：相对路径--用相对调用载入函数所在js文件的相对地址寻找模块 require(".
seajs模块之间依赖的加载以及模块的执行
11-28
本文介绍的是seajs模块之间依赖的加载以及模块的执行，下面话不多说直接来看详细的介绍。 入口方法 每个程序都有个入口方法，类似于c的main函数，seajs也不例外。系列一的demo在首页使用了seajs.use() ，这便是入口方法。入口方法可以接受2个参数，第一个参数为模块名称，第二个为回调函数。入口方法定义了一个新的模块，这个新定义的模块依赖入参提供的模块。然后设置新模块的回调函数，用以在loaded状态之后调用。该回调函数主要是执行所有依赖模块的工厂函数，最后在执行入口方法提供的回调。 // Public API // 入口地址 seajs.use = function(ids,
SeaJS 模块化加载框架使用
weixin_34049948的博客
07-22 86
SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS，CMD，AMD等规范后文会提到，这里主要先了解如何在代码中使用。   如果你有使用过nodejs ，那么理解起来就容易多了。   我们通过sea.js来加载我们定义的模块（这会儿遵循CMD规范）并使用相应的数据。 首先，当然是要下载sea.js,可以直接去 http://seajs.org/docs/#downlo...
TP5.1 单入口多域名多模块设置
叶落无痕的博客
09-18 666
TP5.1 单入口多域名多模块设置如下,有两个域名www.codelobers.cn,m.codelovers.cn 其中www域名想指向index模块，m域名想指向m模块 1. 首先设置入口文件 /public/index.php switch($_SERVER['HTTP_HOST']){ case'www.codelovers.cn': $model='index';//index模块 ...
模仿seajs模块化加载的自行实现练习
12-19
这是自己编写的模仿seajs模块加载的模块加载器，用于学习交流之用。大致模仿seajs的模块化加载实现。
深入探寻seajs的模块化与加载方式
10-24
本文是对Sea.js 提供seajs的模块化与加载方式的讲解，对学习JavaScript编程技术有所帮助,与大家分享。有需要的小伙伴可以参考下。
seajs和requirejs模块化简单案例分析
10-16
本文将深入探讨Seajs和RequireJS这两款经典的模块化工具，并通过具体的案例来阐述它们的工作原理和使用技巧。 Seajs是一款基于CMD（Common Module Definition）规范的模块加载器，它允许开发者按需加载模块，避免了...
seajs学习之模块的依赖加载及模块API的导出
10-21
SeaJS 是一个遵循 CommonJS 规范的模块加载...通过模块的依赖加载和 API 导出，SeaJS 实现了代码的模块化和解耦，提高了代码的可维护性和复用性。对于需要处理复杂模块依赖关系的项目，SeaJS 是一个值得考虑的工具。
SeaJS 中的 exports 和模块加载
LzwGlory的专栏
10-16 1701
exports 首先是 exports 的几种形式，我们可以：  define(function(require, exports, module) { exports.a = 'a'; exports.fn = function() {}; }); 也可以：  define(function(require, exports, module) { module
seaJs的模块定义、模块加载及模块依赖关系
weixin_34240657的博客
12-23 69
SeaJS 是由玉伯开发的一个遵循 CommonJS 规范的模块加载框架，可用来轻松愉悦地加载任意 JavaScript 模块和css模块样式。SeaJS非常小巧，小巧在于压缩和gzip后体积只有4K,而且接口和方法也非常少，SeaJS 就两个核心：模块定义和 模块的加载及依赖关系。SeaJS非常强大，SeaJS可以加载任意 JavaScript 模块和css模块样式，SeaJS会保证你在使...
SeaJS 按需加载js模块
weixin_30646315的博客
11-07 134
1.目录结构 2.index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>seajs</title> <script src="https://cdn.b...
seaJs学习笔记之seaJs的异步加载和加载多个js文件
梦龙小站
12-27 1万+
到目前为止，seaJs的大部分使用方法已经为大家介绍完了，有关javascript的模块化大部分功能也已经向大家介绍完了。下面再向大家深入的介绍一下seaJs。Define除了可以对回调函数进行操作之外，还可以对数据进行加载。Define中的第三个参数module主要是辅助调试的作用，它是对模块内部进行调试作用。可以通过module可以获得这个模块的id，可以获取到这个模块依赖哪些模块的数
(三)seajs中的模块标识
aty
10-23 777
本文转载自[模块标识#258]，介绍下模块id相关的东东。模块标识是一个字符串，用来标识模块。在 require、 require.async 等加载函数中，第一个参数都是模块标识。Sea.js 中的模块标识是 CommonJS模块标识的超集。也就是说符合CommonJS规范的id，一定符合seajs，反之则不然。
seajs模块加载
hefeng
11-16 344
在使用seajs加载模块时，对模块中依赖的模块都要加载一次才能使用，比如用jquery写代码，在每个模块中都需要require一次，像jquery这种全局都需要用到的模块，可以在config中设置preload,保证事先准备好jquery
seajs学些（5）----模块的加载启动
cpf506497746的专栏
04-21 5012
Sea.js 是一个模块加载器，模块加载器需要实现两个基本功能： 实现模块定义规范，这是模块系统的基础。模块系统的启动与运行。 模块定义规范的实现 这就是 define，require，exports，module 的实现。具体实现细节，有兴趣的可以看 Sea.js 的源码：seajs/src。可以按照 Gruntfile.js 中声明的合并顺序阅读，核心是 module.js 文件
(一)页面中引入seajs以及模块的加载和启动
aty
10-22 3095
本文转载自官网上"模块的加载启动#260"这篇文章，seajs官网上的文档都是中文的，大部分写的也很清楚，看看就能上手了。这里之所以转载官网文档，一个是因为自己在学习阶段，自己手动敲一遍印象会更深，一个是因为GitHub访问比较慢，所以放在自己的博客，以后看着方便点。
在SeaJS中实现html模板文件的加载（Temod介绍）
weixin_34167043的博客
07-01 181
在几天前的一篇文章中，我介绍了JavaScript的模块化加载框架SeaJS。目前SeaJS支持js和css的模块化加载。在实际应用中，可能会遇到需要加载html页面模板文件的场景，例如我接触的某些应用使用Template Toolkit（以下简称TT）写页面模板，然后由js载入TT模板后渲染输出，在这种纯JavaScript渲染的Web架构中，需要将tt文件（或其它格式html模板文件）作为模块...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值