正文 

当前位置： 首页 > java > java语法

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

春眠不觉晓      2022-02-09     120

关键词：

SeaJS是一个基于CMD模块定义规范实现一个模块系统加载器
 
[CMD规范](https://github.com/cmdjs/specification/blob/master/draft/module.md)9、seaJs启动函数的回调函数
如何选择一个技术产品栈：
- 看作者是否是大牛
- 看社区是否活跃
- 看是否经常更新
SeaJS的作者已经不更新该项目了，但是国内很多公司还是在使用SeaJS作为前端模块化解决方案，
学习SeaJS有助于我们学习 Node.js 中的模块系统，因为他们所使用的规范基本一致。
学习完SeaJS之后可以自学 RequireJS[RequireJS官方网站](http://requirejs.org/)，思想基本一样。无非是API的区别。
### 体验官方demo
###seaJs使用步骤：
1. 下载 sea.js 库
2. 在页面中引入 sea.js
3. define - 定义模块
4. module.exports - 暴露接口
5. require - 加载模块
6. seajs.use - 从入口模块启动模块系统
    seaJs.use(‘./././‘,function(a){
        console.log(a);//其中a就是exports而不是module.exports
    }
10、define()的用法：
    define(object)
    define(string)
    define(function(require,exports,medule){
        //所有的自己的js 代码都写在回调函数中
    })
    例子1：
     define(function (require ,exports , module ){    //最好在每一次定义模块的时候，尽量都使用匿名函数，并传入三个参数的方式；不要重命名require函数；
            module.exports = {    //通过这种形式将对象暴漏到模块之外，供其他文件使用，可以直接使用exports = ...
                    add : require ( ‘ ./././ ‘ ) ,  //require的参数值必须是字符串，该字符串就是表示模块的一个模块标识
                    mod : require ( ‘ ./././ ‘ )    // 访问的时候使用 mod() 直接调用
           }
    })
    例子2：
    define ( function ( require , exports , module ) {
            exports.add = reuire ( ‘ ./././‘ ) ;    // 访问的时候需要通过 exports.add()方式进行调用
            exports.mod =require ( ‘./././‘ );
    })
11、require(‘./././‘)加载文件模块
        最好吧所有的require都写在define 函数中js 代码的最上面
        [require 书写约定](https://github.com/seajs/seajs/issues/259)
12、seaJs在页面中的使用：
        首先加载sea.js 文件
        然后再启动模块：<script> </script>标签中加载入口模块 seajs.use(‘./a‘) 
            启动模块系统----开机
            seaJs.use方法是异步加载模块文件
13、模块标识：其实就是模块的路径，可以不包含文件的后缀名，因为加载的都是js文件
        相对标识：以 ./ 或者 ../ 开始的都是相对标识，相对于当前出现的位置所属的文件
        顶级标识：不以 ./ 或者 ../ 或者 / 开始的标识是顶级标识，顶级标识相对模块系统的基础路径来解析，模块系统的基础路径在不指定的情况下，
            默认顶级目录是第三方插件 sea.js 所在的目录，可以通过 seajs.config() 方法来指定顶级标识的基础路径
            顶级标识配置：seajs.config({
                base : ‘ ./ ‘  ; //指定当前目录为顶级目录 
            })
        模块标识永远相对于require出现的文件路径。
14、require.async( ‘./文件‘ )实现异步按条件加载
        if(true){require(‘./a‘)}else{require(‘./b‘)}这时候a和b文件都会被加载下来
        require是所有加载成功之后才解析和执行
        require.async可以按照条件进行加载，代码执行到具体位置的时候才会加载和执行
         if(true){
                require.async(‘./b‘ , function (foo){
                    console.log(foo) ;  // foo就是在./b 文件中表露出来的内容
                })
         }else {
                require.async(‘./a‘ , function () {   }  )
         }
15、exports 和 module
        module.exports就是模块对外导出 的接口对象，相当于执行了 return module.exports
        exports就是module.exports的一个别名而已。
        module.exports就是当前模块与外部文件的接口对象。
    首先需要明白：
        var  foo2 = {}
        var foo3 =foo2
        foo3.name = ‘name‘ // 这是修改了foo3 ，它的引用也被修改
        console.log(foo2)
        console.log(foo3)
        foo3 = ‘hello‘  // 这是对foo3重新赋值后，就丢失了原来foo2的引用
        console.log(foo2)
        console.log(foo3)
    然后：
        var foo ={
            obj : {}
        }
        function changeFoo(obj,foo){
            console.log(obj===foo.obj) //true
            obj.name = ‘jack‘
            obj = ‘hello‘
            console.log(obj===foo.obj)  //false
            return foo.obj
        }
        console.log(changeFoo(foo.obj,foo)) // {name : jack}
    最后：
        obj 就相当于 exports，foo 就相当于 module。综上所述可知，不能给exports重新赋值，这样就切断了exports与module.exports之间的联系，必须通过 点 的形式修改exports的值。
16、浏览器中的JS不能做什么？
        不能操作数据库、不能操作文件、浏览器的JS只能通过AJAX发送请求而不能接受请求（后面的Socket网络编程就可以进行双向通信了）
        JS可以脱离浏览器单独运行（这时候就没有BOM和DOM）， JS仅仅是语言而已（以前所学的JS仅仅是ECMAScript）
 

seajs入门使用

使用Sea.js进行模块化开发还能够带来非常多优点：模块的版本号管理。通过别名等配置，配合构建工具，能够比較轻松地实现模块的版本号管理。提高可维护性。模块化能够让每一个文件的职责单一，很有利于代码的维护。Sea.js... 查看详情

seajs基本开发原则

...本开发原则在讨论SeaJS的具体使用前，先介绍一下SeaJS的模块化理念和开发原则。使用SeaJS开发JavaScript的基本原则就是：一切皆为模块。引入SeaJS后，编写JavaScript代码就变成了编写一个又一个模块，SeaJS中模块的概念有点类似于面... 查看详情

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

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

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

...名冲突，文件依赖等问题，其主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载。　　官方文档：http://seajs.org/docs/#docs　　首先看看seajs是怎么进行模块开发的。使用seajs基本上只有一个函数“define” fn.define=function(id,... 查看详情

javascript模块化开发笔记

1.Seajs库  解决开发中的冲突依赖等问题，提供代码可维护性。  SeaJS是由玉伯开发的一个遵循CommonJS规范的模块加载框架，可用来轻松愉悦地加载任意JavaScript模块和css模块样式。 SeaJS就两个核心：模块定义和模... 查看详情

cmd规范学习笔记——基于seajs实现

CMD(CommonModuleDefinition):该规范明确了模块的书写格式和基本交互规则。通常一个模块就是一个JS文件。通过define关键字来定义模块，最基本的格式为：define(factory);//这里的define是一个全局函数，factory可以是函数或者合法的值。一... 查看详情

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

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

模块化之seajs

　　Seajs此文来自予舍驿站提供简单、极致的模块化开发体验非官方文档，整理来自己官方文档的文字与实例，方便速查。seajs.configObjectaliasObject别名配置，配置之后可在模块中使用require调用 require(‘jquery‘);seajs.config({alias:{... 查看详情

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

...ommonModuleDefinition)规范。SeaJS本身遵循(KeepitSimple,Stupid)理念开发，API仅有几个。为什么用SeaJS？假如我们要开发一个web应用App，在这个应用中需要使用jquery框架。App的首 查看详情

day21

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

模块化之seajs

模块化(之SeaJS)   刚接触的童鞋可能会有很多疑惑，比喻：什么是模块？模块的目的是干嘛呀？接着就想，玛德怎么样实现模块化呢？  不要急，博主正是带着这三个问题来写这篇文章的。    一... 查看详情

简单的使用seajs

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

seajs学习笔记（基础）

一：前端开发中常遇到的问题    如果我们的网站简单的时候，结构上也许不会有什么问题，但是如果我们的网站越来复杂的时候（比如功能越来越多的时候，加入项目的人越来越多的时候），我们书写的代码就会... 查看详情

androidframework成为热门就业方向，androidframework开发该如何入门学习？(代码片段)

...使整个源码更易更新和维护，它纵向分层，横向模块化，设计非常精妙。其维护的模块主要包括ActivityManagerService；Wind 查看详情

seajs是什么及其优缺点&如何使用？

...简单、自然的代码书写和组织方式，：Sea.js遵循CMD规范，模块化JS代码。依赖的自动加载、配置的简洁清晰，可以让程序员更多地专注编码。 2.Seajs优缺点 优点： 查看详情

jquery转化为seajs模块(代码片段)

学习了模块化之后，接下来就该是各种实践了。因为习惯了用jquery，所以首先想到的一个问题肯定就是怎么把jquery转化为模块。要转化为模块，首先给jquery源码外面套一层define(function(require,exports,module))然后对外暴露... 查看详情

web学习-node.js入门学习(代码片段)

...最基本的web服务器2.5.3根据不同的url响应不同的html内容3.模块化3.1模块化的基本概念3.2Node.js中模块的分类3.2.1加载模块3.2.2模块作用域3.2.3向外共享模块作用域中的成员3.3npm与包3.3.1npm和包的概述3.3.2npm初体验3.3.3包管理配置文件3.3... 查看详情

seajs是什么及sea.js由来，特点以及优势

...简单、自然的代码书写和组织方式，：Sea.js遵循CMD规范，模块化JS代码。依赖的自动加载、配置的简洁清晰，可以让程序员更多地专 查看详情