`

前台代码模块化 seajs

    博客分类:
  • js
阅读更多

   随着程序的增加,前台代码变的越来越复杂,重复的js 模块会变多,文件间的依赖也会变复杂,会经常出现引用了一个文件就忘了它所依赖的文件是哪个。seajs 很好的解决了这个问题,它属于模块级管理,能搞让我们引用文件时减少文件间的依赖。

 

    如果用过nodejs 的话,会发现seajs的用法和nodejs的模块语法相似,使用简单

 

1.下载seajs 文件,下载地址http://seajs.org/docs/#downloads

 

2.将文件放到工程文件里,并在页面上引用

 

<script type="text/javascript" src="/javascripts/libs/seajs/2.2.0/sea.js"></script>

 3.定义自己的模块

 

   创建文件a.js

 

define( 'myModule', function(require, exports, module ){
    module.exports ={
       init:function(){}
    };
})

4.页面调用

 

    

<script type="text/javascript">

    seajs.use('myMoudle', function(practiceStarter) {
        practiceStarter.init('first');
    });

</script>

 

 

这个就完成的了页面调用,但是这个只是单一的文件加载没有看到页面的模块化,seajs 最大的好处就是把文件间的依赖写在文件中,前台不需要关心

例如 a.js的运行需要b.js

b.js

define(function(require, exports, module ){
    var Other = function(){
    }
    module.exports = Other;
})

在a.js中引入b.js

define( 'myModule', function(require, exports, module ){
    module.exports ={
       init:function(){
          var Other = require('b_path')
       }
    };
})

 

如果页面上要引入多个模块可以

 <script type="text/javascript">

    seajs.use(["/javascripts/editor_layout.js", "/javascripts/paper_practice_starter.js"], function(editor_layout, practiceStarter) {
       
    });

</script>

  也可以在页面上在seajs.use 前加入

seajs.config({
    base: '/'  //或者 . 
});

 指定加载文件的其实位置,如果不设置,默认为当前页面的上级目录

 

分享到:
评论

相关推荐

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

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

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

    通过SeaJS,开发者可以在浏览器环境中实现类似CommonJS的模块化编程,有效地管理和组织代码。了解和熟练掌握SeaJS的使用,能够提升前端项目的开发效率和代码质量。对于"GuessNumber-master"这样的项目,理解并实践...

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

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

    JavaScript模块化开发库之SeaJS

    总结,SeaJS是一个强大的JavaScript模块化开发库,通过CMD规范实现了模块化编程,帮助开发者更好地组织和管理代码。了解并熟练运用SeaJS,可以提升项目的可维护性和开发效率,尤其是在大型项目中。通过深入学习其...

    seajs js 模块加载器

    随着Web应用的复杂度不断提升,JavaScript代码的组织和依赖管理变得至关重要,SeaJS 提供了一种有效的解决方案,使得开发者能够按照模块化的思想来编写代码,提高代码的可维护性和复用性。 SeaJS 的核心概念是模块...

    Web前端模块化组件seajs-3.0.0版

    模块化可以让每个文件的职责单一,非常有利于代码的维护。Sea.js 还提供了 nocache、debug 等插件,拥有在线调试等功能,能比较明显地提升效率。 前端性能优化。Sea.js 通过异步加载模块,这对页面性能非常有益。...

    seajs源代码

    在深入理解seajs源代码之前,我们首先需要了解模块化的基本概念和CommonJS规范。 模块化是软件开发中的一种组织代码的方式,它将复杂的程序分解为相互独立、可重用的部分,使得代码更易于维护和扩展。CommonJS 是一...

    seajs 源代码 学习

    Seajs 是一个轻量级的前端模块加载器,它的出现是为了在浏览器环境中支持 CommonJS 规范,使得前端开发可以采用模块化的开发方式,提高代码的可维护性和复用性。下面将详细介绍 Seajs 的核心概念、工作原理以及如何...

    seajs下载以及规范

    Seajs的核心理念是让JavaScript模块化变得简单,帮助开发者解决在大型Web项目中代码组织、依赖管理以及加载性能等问题。 ## Seajs的下载与安装 要在项目中使用Seajs,首先需要从官方网站或者其他可靠的源获取最新...

    前端模块化进程-requirejs seajs

    requirejs seajs amd cmd,该PPT主要用于讲解前端模块化的前世今身。 requirejs seajs amd cmd,该PPT主要用于讲解前端模块化的前世今身。

    seajs-5分钟上手

    Seajs支持静态化模块加载,通过`seajs.data.preload`预加载模块,可以减少网络请求次数,提高页面加载速度。同时,使用`seajs-text`插件可以方便地加载HTML和CSS模板。 **七、Seajs与其他库的兼容** Seajs与jQuery...

    seajs-2.3.0.zip

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

    seajs_2.3.0以及学习文档

    `seajs-2.3.0` 压缩包则包含了 Seajs 的源代码,你可以深入研究其内部实现,了解其加载和执行模块的原理,对于理解前端模块化和优化代码有很大帮助。此外,如果你打算对 Seajs 进行二次开发或者定制,源码阅读也是必...

    seajs手册,教程

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

    seajs-2.2.3

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

    前端项目-seajs.zip

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

    seajs官方小实例

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

    seajs源码阅读

    Seajs则是将这种规范应用到浏览器环境,让开发者可以在浏览器中按照模块化的思路组织代码。 Seajs的核心功能包括模块的加载、解析和执行。模块加载是指根据模块路径找到对应的脚本文件;解析是将模块路径转换为实际...

    seajs代码以及文档,帮助你学习。

    开始学习seajs,模块化的js思想。SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现...

    JavaScript模块化开发之SeaJS

      SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码...

Global site tag (gtag.js) - Google Analytics