`
wfsheep
  • 浏览: 17409 次
文章分类
社区版块
存档分类
最新评论

seajs使用小结(一)

 
阅读更多

前端模块化管理工具seajs已经广泛使用在国内前端开发中,我也算在好几个项目中使用了几次,从1.3.1~3.0.0也碰到了一些问题,现在想就主要的两种使用方式进行总结,也就使用中的问题给出一些解决方案。

首先,我们来看看常用的两种seajs使用方式,一种是使用seajs.use直接将js模块引入进来,另一种是先用<script>标签先将js引入进来,再由seajs.use引用(需要有id):

比如:对以下目录结构

seajs-test

|-----js

|----- |-----a.js

|-----seajs-3.0.0.js

|-----seajs-test.html

可以采用如下方式对a.js进行加载:

a.js如下:

define('a.id', function() {
    console.log('i am a.js');
    return {
        hello: function() {
            console.log('a.js says hello!');
        }
    }
});

    <!-- 第一种方式 -->
    <script>
        seajs.use('./js/a.js', function(p) {
            p.hello();
        })
    </script>

    <!-- 第二种方式 -->
    <script src="./js/a.js"></script>
    <script>
        seajs.use('a.id', function (p) {
            p.hello();
        });
    </script>


以上两种方式都可以将a.js中定义的模块引入页面,在实践中,发现,虽然这两种方式功能一样,但是在具体运行中还是有一些不同,私下里总结了这两种方法的几个优缺点。

方式一优点:

1、简单方便

2、代码量少,可以减少script的数量

缺点:

1、当文件地址变更的时候,相对路径和绝对路径的方式不好进行修改

2、将项目所有js文件都压缩合并后,难以加载。


方法二优点:

1、可以利用script标签管理js文件的加载

2、利于script文件的压缩合并,压缩后依然可以通过id加载

缺点:

1、需要给每一个配置文件都加上id

2、代码量较多


个人还是比较喜欢第二种方法,因为现在对代码进行合并压缩对于较大型的网站都是标配,另外对模块加上id的工作也可以通过自动化工具按照规则来生成,不会占用太多工作量。

而具体怎么使用seajs批量加载文件,将在seajs使用小结(二)中进行讨论

分享到:
评论

相关推荐

    seajs官方小实例

    **Seajs 官方小实例详解** Seajs 是一个用于浏览器端的模块加载器,它遵循 CommonJS 规范,让 JavaScript 开发者能够在浏览器环境中实现模块化开发,提高代码的可维护性和复用性。Seajs 的核心理念是通过模块化解决...

    seajs手册,教程

    Seajs是中国开源社区发展出来的一款轻量级的前端模块化加载器,它的出现是为了应对JavaScript在浏览器端组织和管理代码的复杂性。本手册将详细阐述Seajs的核心概念、使用方法以及如何通过它来构建高效的前端应用。 ...

    seajs入门小实例

    Seajs 是一个轻量级的前端模块加载器,它的出现是...不过随着Webpack、Rollup等现代构建工具的普及,Seajs 在大型复杂项目中的使用逐渐减少,但在理解和学习前端模块化思想的过程中,Seajs 仍是一个值得学习的案例。

    seajs-5分钟上手

    本教程将带你快速了解并掌握Seajs的使用,让你在5分钟内对这个强大的工具有一个基本的认识。 **一、Seajs的基本概念** Seajs的核心理念是模块化,它允许我们将JavaScript代码分割成多个独立的模块,每个模块都有...

    seajs js 模块加载器

    在使用SeaJS时,你需要为每个模块定义一个标识(通常是文件路径),并通过`seajs.use`方法来加载模块。模块内部可以通过`define`函数来定义其依赖和其他模块的关系。例如: ```javascript // 定义模块 seajs.use('....

    seajs下载以及规范

    Seajs是中国开源社区推出的一款基于模块化开发的前端加载器,它借鉴了CommonJS的模块化思想,但针对浏览器环境进行了优化。Seajs的核心理念是让JavaScript模块化变得简单,帮助开发者解决在大型Web项目中代码组织、...

    seajs-2.3.0.zip

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

    seajs 使用文档

    ### seajs 使用文档 #### Sea.js简介 Sea.js 是一款专为前端开发设计的轻量级模块加载器,它遵循 CMD(Common Module Definition)模块定义规范。与 AMD(Asynchronous Module Definition)规范相比,CMD 规范更加...

    seajs_2.3.0以及学习文档

    Seajs 是一个轻量级的前端模块加载器,它的出现是为了在浏览器端实现 CommonJS 规范,使得 JavaScript 的组织和开发变得更加模块化。Seajs 版本 2.3.0 是其稳定的一个版本,提供了更完善的特性和优化。 在...

    seajs源码阅读

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

    seajs-2.2.3

    Seajs-2.2.3 是一个开源的 JavaScript 模块加载器,旨在为开发者提供简单、极致的模块化开发体验。它强调的是简洁、自然的代码书写和组织方式,使得项目管理和协同工作变得更加高效。Seajs 在JavaScript社区中扮演着...

    CMD规范之seajs

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

    seajs源代码

    Seajs是一款轻量级的JavaScript模块加载器,它遵循CommonJS规范,旨在解决浏览器环境中的模块化问题。在深入理解seajs源代码之前,我们首先需要了解模块化的基本概念和CommonJS规范。 模块化是软件开发中的一种组织...

    seaJS框架简介和完整例子

    然而,由于浏览器的异步特性,直接在浏览器中使用CommonJS并不现实,SeaJS则为此提供了一个兼容的解决方案。 SeaJS 的工作流程如下: 1. **配置**:通过`seajs.config`方法配置模块路径、别名、预加载模块等,帮助...

    SeaJS与RequireJS区别

    SeaJS 虽然在中国有一定影响力,但整体社区规模较小。 4. **API 设计**:SeaJS 的 API 设计较为简洁,而 RequireJS 的 API 功能更强大,但可能对新手来说稍显复杂。 5. **使用场景**:SeaJS 适合追求简洁和易用性...

    前端开源库-grunt-react-seajs

    "grunt-react-seajs"就是一个这样的工具,它是一个专门为前端开发者设计的Grunt插件,旨在帮助开发者将React组件转换为SeaJS模块,使得在不支持ES6模块语法的环境中也能顺利地使用React组件。下面我们将深入探讨这个...

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

    在用户Example01中,你可能会看到一个简单的 Seajs 应用实例,包括配置文件、模块定义和使用。通过这个案例,你可以学习如何创建模块,如何设置和使用配置,以及如何在实际项目中整合 Seajs。逐步理解和实践这些知识...

    seajs相关模板

    Seajs是中国开源社区发展出来的一款模块化加载器,它的出现是为了应对JavaScript在浏览器环境中缺乏一个标准的模块化解决方案的问题。Seajs的设计理念是基于CMD(Common Module Definition)规范,它鼓励开发者采用...

    seajs-2.2.0源码

    本文将深入解析Seajs 2.2.0版本的源码,探讨其核心机制、设计理念以及如何使用它来组织和管理前端项目。 首先,Seajs的核心功能是解决JavaScript的异步加载问题,它允许开发者按照模块化的方式来编写代码,每个模块...

    前端项目-seajs.zip

    【前端项目-seajs.zip】是一个包含前端开发工具的压缩包,主要关注的是Seajs模块加载器,这是一个专为Web设计的模块化解决方案。Seajs在前端开发领域扮演着重要角色,因为它提供了一种组织和管理JavaScript代码的...

Global site tag (gtag.js) - Google Analytics