使用seaJs也有一阵子了，一直也想抽个时间写个这方面的博客，直到今天才写……也许写的不是很完善，但跟大伙分享也是一种乐趣，不对之处欢迎指出。[抱拳]

时间有限，我这里不过多介绍前端模块化，有兴趣可以去了解。

一、写在前面

seaJs出自前端工程师玉伯之手，一个文件就是一个模块，实现JavaScript的模块化及按模块加载。使用SeaJS可以提高JavaScript代码的可读性和清晰度，确保各个JS文件先后加载的顺序，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题，方便代码的编写和维护。seaJs遵循的是CMD规范，所以引用一些遵循AMD规范的JS代码，需要进行一些封装处理。譬如常用的JQ就遵循的AMD规范，引用时需要做一些封装：

define(function(){

    //jquery源代码

    return $.noConflict();

});

seaJs浏览器兼容上理论兼容所有的浏览器，包括移动端，所以兼容性很好。同时，API少加上配置简洁清晰，学习成本较低。

二、seaJs的使用

1、模块定义。

define(function(require,exports, module){

});
require是可以把其他模块导入进来的一个参数，而exports是可以把模块内的一些属性和方法导出的，module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。
2、暴露及引入变量
一个模块想要对外暴露变量（函数也是变量），可以用module.exports = variable;，一个模块要引用其他模块暴露的变量，用var ref = require('module_name');就拿到了引用模块的变量。
3、加载模块，seajs.use 用来在页面中加载模块。通过 use 方法，可以在页面中加载任意模块。
语法： seajs.use(a,function(a){...});，也可以加载多个模块：seajs.use(['a','b'],function(a,b){...});回调函数可选，当没有回调函数的时候，seajs.use(a);即可

来一个最简单的例子。创建学习项目，相关文件及路劲如下：

index.html如下：

<!DOCTYPE html>

<html>

<head>

    <title>seaJs学习 --by WZQ</title>

</head>

<body>

<script src="js/sea.js"></script>

<script>

    seajs.use('./js/index.js');

</script>

</body>

</html>

index.js如下：

define(function(require,exports, module){

    alert(1);

});

打开index.html，能执行弹出alert框，就说明引用seajs成功

接着说一下sea.config相关方面的配置。

新建一个seajs.config.js

seajs.config({

    // 指定base目录

    base: './js',

    // 目录长的可以声明别名, 这点十分人性化

    alias: {

        index: index.js // 左边index是别名，可以直接使用，右边是路径，由于base的存在，只需要雪名称即可，同时.js是可以去掉的

    },

    // 其他配置自行百度，重点是路径的配置

    charset: 'utf-8',

    timeout: 20000,

    debug: 0 ,

    preload: ["jquery"]

});

有了配置文件，就方便管理全部的js文件，使用别名，还可以不用担心路劲问题，以后搬运js文件的时候也只需要改配置文件就好了。所以引用的时候使用别名，可以这样写：

seajs.use('index');（注意引入配置js）

接着练习一个复杂点的例子：
目录结构：

配置文件seajs.config.js给他们的别名如下：

seajs.config({

    // 指定base目录

    base: './js',

    // 目录长的可以声明别名, 这点十分人性化

    alias: {

        'index': 'index.js', // 左边index是别名，可以直接使用，右边是路径，由于base的存在，只需要雪名称即可，同时.js是可以去掉的

        'otherJs': 'a',

        'bJs':'b',

        'jquery': 'jquery.js'

    },

    // 其他配置自行百度，重点是路径的配置

    charset: 'utf-8',

    timeout: 20000,

    debug: 0 ,

    preload: ["jquery"]

});

各个JS文件如下：

index.js

define(function(require,exports, module){

    function Example(){

        this.people = 'WZQ';

        this.address = '广州';

    }

    Example.prototype.initFn = function(){

        console.log(this.people + '在' + this.address);

    }

    module.exports = Example;

});

a.js

define(function(require,exports, module){

    function Other(){

        this.nowTime = '2018年10月10日'

    }

    module.exports = Other;

});

b.js

define(function(require,exports, module){

    var $ = require('jquery'),

        AObj = require('otherJs');

    var aObj = new AObj();

    function TestObj(){

        this.time = aObj.nowTime;

    }

    TestObj.prototype.getTime = function(){

        return this.time;

    }

    var testObj = new TestObj();

    var indexFn = {

        init: function(){

            var time = testObj.getTime();

            console.log('这是b.js打印出来的时间：'+ time);

            $('body').css('background', 'red');

        }

    }

    indexFn.init();

});
index.html
<!DOCTYPE html>

<html>

<head>

    <title>seaJs学习 --by WZQ</title>

</head>

<body>

<script src="js/sea.js"></script>

<script src="js/seajs.config.js"></script>

<script>

    seajs.use(['index', 'otherJs', 'jquery', 'bJs'], function(Example, Other, $){

        var example = new Example();

        example.initFn();

        var other = new Other();

        console.log('今天是' + other.nowTime);

        console.log($('body').length); //引入jquery之后能直接用$是因为对JQ做了CMD封装，最后一行代码return $.noConflict();的缘故

    });

</script>

</body>

</html>

然后最后运行结果如下即可：

模块化之seaJs学习和使用的更多相关文章

  1. seaJs学习笔记之javascript的依赖问题

    之前分别为大家介绍了有关javascript中的冲突和性能问题,今天为大家介绍一下有关javascript中的依赖问题.我们将继续就之前javascript中性能问题继续介绍. 先来回顾一下性能问题的 ...

  2. javascript 模块化 (切记：学习思想)

    模块化(切记:学习思想) 如果不用模块化编写代码,那么会具有以下问题: 代码杂乱无章,没有条理性,不便于维护,不便于复用 很多代码重复.逻辑重复 全局变量污染 不方便保护私有数据(闭包) 模块化的基本 ...

  3. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

  4. seaJS学习资料参考

    seajs官方文档:http://seajs.org/docs/#docs http://wenku.it168.com/d_000096482.shtml http://blog.codinglab ...

  5. 模块化之SeaJS(一)

    模块化(之SeaJS) 刚接触的童鞋可能会有很多疑惑,比喻:什么是模块?模块的目的是干嘛呀?怎么样实现模块化呢? 不要急,博主正是带着这三个问题来写这篇文章的. 一,什么是模块化? 在前端开发领域,一 ...

  6. 2.精通前端系列技术之JS模块化开发-深入学习seaJs（四）

    深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基 ...

  7. seajs学习一天后的总结归纳

    公司项目最近需要将js文件迁移到seajs来进行模块化管理,由于我以前主要接触模块化开发是接触的AMD规范的requireJS,没有接触过CMD规范,而且在实际项目中还没有用过类似技术.于是,我非常兴 ...

  8. 该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结

    是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道requi ...

  9. 前端MVC学习——模块发开发、seajs学习

    这份学习链接已经足够了:http://seajs.org/docs/#intro 我假设你至少已经浏览过上述链接文档.并且掌握了基本的seajs基础知识~ 手把手教你创建helloworld~ Hel ...

随机推荐

  1. 543. Diameter of Binary Tree 二叉树的最大直径

    ［抄题］: Given a binary tree, you need to compute the length of the diameter of the tree. The diameter ...

  2. 面向对象的JavaScript-005-Function.prototype.call()的3种作用

    1. // call的3种作用 // 1.Using call to chain constructors for an object function Product(name, price) { ...

  3. code2800 送外卖

    首先,对图进行一次Floyd(g[][]是图) 1.dfs:(u是当前在的节点,d是已经走的路程) void dfs(int u,int d){ if(d>=ans)return; bool f ...

  4. Web测试-day

    昨天太忙忘了写博客,今天补上: 这两天完成的工作: 我们组选定了博客园和CSDN作为对比,进行Web测试. 胡俊辉--找到了10个网页的bug,并完成了bug记录文档,并且对CSDN和博客园进行功能分 ...

  5. Perl 学习笔记－输入输出

    1.读取标准输入<STDIN>(行输入操作=> 读取一行直到换行符) chomp($line = <STDIN>); # 读取一行并去掉最后的换行符(不会自动去掉) pr ...

  6. MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled. Please check Redis logs for details about the error

    今天购物车突然不能添加了,发现redis报错了,重启了一下好了,一会又报错了. 错误信息: MISCONF Redis is configured to save RDB snapshots, but ...

  7. [GO]并发实现聊天室服务器

    package main import ( "net" "fmt" "strings" "time") type Cli ...

  8. [GO]结构体的比较和赋值

    package main import "fmt" func main() { type student struct { id int name string sex byte ...

  9. zrender源码分析2--初始化Storage

    接上次分析到初始化ZRender的源码,这次关注内容仓库Storage的初始化 入口1:new Storage(); // zrender.js /** * ZRender接口类,对外可用的所有接口都 ...

  10. schedule-pool模拟并行任务分片

    模拟并行任务分片 代码部分: package com.pool; import com.alibaba.fastjson.JSON; import java.io.BufferedReader; im ...