`
rayln
  • 浏览: 430509 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

SeaJs模块化加载

 
阅读更多
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>

分享到:
评论

相关推荐

    模仿seajs模块化加载的自行实现练习

    这是自己编写的模仿seajs模块加载的模块加载器,用于学习交流之用。大致模仿seajs的模块化加载实现。

    seajs js 模块加载器

    总结来说,SeaJS 是一个强大的JavaScript模块加载器,它遵循CommonJS规范,提供了模块化编程的支持,帮助开发者更好地组织和管理Web应用的JavaScript代码。通过异步加载、动态配置和丰富的插件系统,SeaJS 使得...

    seajs模块加载框架

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。

    简易实现seajs模块转换成esmodules模块的脚本

    Seajs和ES Modules(ESM)是两种不同的模块加载规范,分别代表了JavaScript模块化发展的不同阶段。Seajs是早期广泛使用的CMD(Common Module Definition)规范的实现,而ES Modules则是现代浏览器和Node.js原生支持...

    gulp构建seajs模块案列

    这个插件的主要功能是自动分析Seajs模块间的依赖关系,将它们按需合并,并进行压缩,从而优化项目加载速度,提升性能。 以下是一些关于`gulp-cmd-pack`的使用知识点: 1. **安装**:首先,你需要在你的项目中安装`...

    SeaJS(Javascript 模块加载框架) v1.0.2.zip

    SeaJS 正是这样一个工具,它遵循了 CommonJS 规范,允许开发者在浏览器环境中实现类似服务器端 Node.js 的模块化开发体验。 CommonJS 是一套定义了模块规范的接口标准,主要应用于服务器端编程,但 SeaJS 将这一...

    深入探寻seajs的模块化与加载方式

    Sea.js 的模块化与加载方式涉及到几个核心概念,包括 require 方法、预加载机制、构建工具的使用以及模块定义的构建前后差异。 首先,seajs 的 require(XXX) 方法是如何实现模块加载的呢?Sea.js 通过模块标识符...

    Javascript模块化编程(三):模块化编程实战,试用SeaJS

    SeaJS是一款专注于浏览器端的模块加载器,它遵循CommonJS规范,旨在解决JavaScript在浏览器环境下的模块化问题。 1. 模块化编程概念: 模块化编程是一种软件设计方法,它将复杂的程序分解为一系列相互独立、可重用...

    SeaJS(Javascript模块加载框架)v0.9.1免费版

    SeaJS是中国开源社区贡献的一款JavaScript模块加载框架,其主要目标是为Web开发提供一种遵循CommonJS规范的模块化解决方案。这个框架的版本v0.9.1是一个免费版,适用于各种项目开发,帮助开发者更有效地组织和管理...

    seajs学习之模块的依赖加载及模块API的导出

    SeaJS 是一款轻量级的前端模块加载器,它遵循CommonJS规范,允许开发者按照模块化的方式编写和加载JavaScript代码。本文将深入探讨SeaJS如何实现模块的依赖加载以及模块API的导出。 首先,SeaJS的核心在于其对模块...

    SeaJS(Javascript 模块加载框架) v1.0.2

    SeaJS 的出现,使得在前端开发中可以像在服务器端使用Node.js那样,方便地进行模块化的编程。 SeaJS的核心功能包括以下几个方面: 1. **模块定义**:SeaJS 使用 `seajs.use` 和 `define` 方法来定义和加载模块。`...

    JavaScript模块化开发库之SeaJS

    JavaScript模块化开发库之SeaJS 在Web开发中,JavaScript代码的组织和管理是一个重要的问题。随着项目的复杂性增加,代码的模块化变得至关重要。SeaJS便是一个专注于JavaScript模块化开发的库,它提供了一种在...

    SeaJS快速入门,让js代码模块化 - 2011-09-09修订,新添参考资料

    SeaJS 是一个用于浏览器端的 JavaScript 模块加载器,它旨在帮助开发者实现模块化的 JavaScript 编程。SeaJS 的出现,是为了解决 JavaScript 在大型项目中的组织和依赖管理问题,使得代码更加清晰、可维护,并且支持...

    sea.js模块化加载框架

    javascript模块化开发所以使用的 - seajs模块加载框架 Sea.JS 是一个遵循 CommonJS 规范的模块加载框架,可用来轻松愉悦地加载任意 JavaScript 模块。 SeaJS 支持的标准模块遵循 Modules/Wrappings 规范的 define ...

    CMD规范之seajs

    Seajs是一款轻量级的前端模块加载器,它遵循CommonJS规范,使得JavaScript在浏览器端也能实现模块化的开发。这个规范主要包含模块定义、模块加载和模块化开发的思想,大大提高了代码的可维护性和复用性。 1. **模块...

    seajs源码阅读

    Seajs是一款轻量级的JavaScript模块加载器,它遵循CommonJS规范,使得在浏览器端也能实现模块化的开发。通过阅读Seajs的源码,我们可以深入理解JavaScript模块化的工作原理,以及如何实现一个模块加载器。 在开始...

    seajs-2.3.0.zip

    Seajs是中国开源社区非常受欢迎的一款JavaScript模块加载器,它的出现为Web开发引入了CommonJS规范,使得前端开发更加模块化,便于代码管理和维护。Seajs 2.3.0是该库的一个稳定版本,提供了丰富的功能和优化。 一...

    seajs入门完整案例,适合新手学习

    Seajs 是一个基于浏览器的模块加载器,它遵循 CommonJS 规范,使得在浏览器环境中可以实现模块化开发。这个“seajs入门完整案例”针对初学者提供了学习资源,帮助他们快速掌握Seajs的基本用法和特性。 1. **模块化...

    seaJs的模块定义和模块加载浅析

    一个典型的SeaJS模块定义如下所示: ```javascript define(function(require, exports, module) { exports.sayHello = function(eleID, text) { document.getElementById(eleID).innerHTML = text; }; }); ``` ...

Global site tag (gtag.js) - Google Analytics