随着时间的推移，原生js越来越强大，es6中的improt，export已经可以实现模块化开发，但可惜的是现在的浏览器还不支持，需要进行编译，相信在不久的将来，一定会大行其道，今天我们来聊聊模块化开发中一个比较好的库，sea.js

先说说模块化开发的优点吧：

1，避免全局的变量或方法之间的污染

2，管理模块之间的依赖

来看一下sea.js如何使用

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

	</head>

	<body>

	</body>

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

	<script type="text/javascript">

		seajs.use("main",function(){

			//接收2个参数，一个是要导入的模块，一个是加载完之后的一个回掉，第二个参数可写，可不写

		});

	</script>

</html>

首先我们要引入sea.js库，然后调用seajs中的use方法,use方法是主入口的方法，此时要注意，默认情况下，导入的模块的根目录是以sea.js为准，后缀.js可写可不写。

define(function(require,exports,module){

    require('jquery');    //导入jquery

    var a_ex = require('./a.js');    //导入a.js

    console.log(a_ex);               //打印从a.js中导入过来的内容   {a:1,b:2}

    console.log(a_ex.a);      //

    console.log(a_ex.b);      //

    console.log(module,99999);    //打印mdule参数所包含的信息

});

我们可以看到a.js中调用了define方法，这个方法是sea.js的核心方法，接收三个参数，第一个参数是模块的id标识，第二个参数是数组 ，deps是模块依赖（第一个和第二个参数一般不写，自动化工具在构建的时候会自动添加）

define('hello', ['jquery'], function(require, exports, module) {  

  // 模块代码  

});

第三个参数是一个回调函数，接收三个参数，require，exports，module注意这三个参数不能任意更改，否则会报错，require用来导入一个模块，exports用来导出一个模块，moudle是这个模块中所包含的一些信息

define('a.js',[],function(require,exports,module){

    var a = 1;

    var b = 2;

    exports.a = a;

    exports.b = b;

});

以上是a.js中的代码

以上是main模块中所打印出的module的数据

这就是sea.js的一些基本的用法，也是最常用的一些，有了这些知识，就可以进行模块化开发，至于其他的一些不太常用的比如seajs.config方法等大家可以看seajs的官网，都说的挺详细的。

模块化开发之sea.js的更多相关文章

  1. 模块化开发之sea.js实现原理总结

    seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签 引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实 ...

  2. Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”

    整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...

  3. Asp.net Mvc模块化开发之“部分版本部分模块更新(上线)”

    项目开发从来就不是一个简单的问题.更难的问题是维护其他人开发的项目,并且要修改bug.如果原系统有重大问题还需要重构. 怎么重构系统不是本文探讨的问题,但是重构后如何上线部署和本文关系密切.这个大家可 ...

  4. 前端模块化开发之seaJs

    了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开 ...

  5. [JS] JS模块化开发之RequireJS

    本节将简述RequireJS常用的功能 RequireJS 实现了 Asynchronous Module API. 目录: 为什么使用RequireJS 加载RequireJS Hello Worl ...

  6. 模块化开发之butterknife 在 library中使用

    在Android开发中butterknife是一个很好的对资源初始化的工具,它可以使你的代码简洁通俗易懂,同时配合Android ButterKnife Zelezny插件可以让你写代码的速度提升至少 ...

  7. 原生+H5开发之：js交互【location方式】

    1. 交互方式总结 1Android与JS通过WebView互相调用方法,实际上是: Android去调用JS的代码 JS去调用Android的代码 二者沟通的桥梁是WebView 对于Android ...

  8. 模块化开发之Amd规范和Cmd规范

    CMD规范:是SeaJS 在推广过程中对模块定义的规范化产出的. AMD规范:是 RequireJS 在推广过程中对模块定义的规范化产出的 // CMD define(function(require ...

  9. 项目伪模块化开发之：requirejs（AMD）开发

    附:伪模块开发,终将会被es6的模块开发取代.其只为过渡阶段使用 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码 ...

随机推荐

  1. 手动mvn install指令向maven本地仓库安装jar包

    mvn install:install-file -DgroupId=imsdriver(jar包的groupId) -DartifactId=imsdriver(jar包的artifactId) - ...

  2. 记一次线上由nginx upstream keepalive与http协议"协作"引起的接口报错率飙高事件

    年前接到个任务,说要解决线上一些手机客户端接口报错率很高的问题.拿到了监控邮件,粗略一看,各种50%+的错误率,简直触目惊心.这种疑难杂症解决起来还是挺好玩的,于是撸起袖子action. 最终的结果虽 ...

  3. Ubuntu-18.04更改安装源为国内源

    环境查看 修改源文件 /etc/apt/sources.list 备份配置文件后把文件内容替换如下 deb http://mirrors.aliyun.com/ubuntu/ bionic main ...

  4. AWS 存储服务（三）

    目录 AWS S3 业务场景 挑战 解决方案 S3的好处 S3 属性 存储桶 Buckets 对象 Object S3 特性 S3 操作 可用性和持久性 一致性 S3 定价策略 S3高级功能 存储级别 ...

  5. 《Fluid Engine Development》 学习笔记3-光滑粒子流体动力学

    用粒子表示流体最热门的方法就是就是光滑粒子流体动力学(Smoothed Particle Hydrodynamics (SPH).) 这种方法模糊了流体的边界,用有限数量的粒子代表流体,该方法的基本思 ...

  6. leetcode1105 Filling Bookcase Shelves

    思路: dp[i]表示摆放好前i本书所需要的最小代价. 实现: class Solution { public: int minHeightShelves(vector<vector<in ...

  7. Android Studio优化编译速度

    随着Android Studio的不断完善,其安卓开发者阵营也基本从Eclipse转移到了Android Studio,毕竟Android Studio是谷歌亲力亲为开发的官方开发软件.不过其最重要的 ...

  8. 在React native 如何写if判断和for循环

    在vue中一般在需要判断时都是通过if语句来实现的,但是在react native中一般则通过三元运算法来实现. 具体代码如下所示. import React from 'react'; import ...

  9. linux中LVM介绍及实验过程

    LVM LVM这个词不仅一次出现过,在安装Centos时,磁盘分区时,默认分区就是使用LVM方式分区:再一个就是在OpenStack部署时候用到LVM作为后端存储.对LVM的理解还是不太清晰,查询资料 ...

  10. TypeScript 迭代器(iterator)和生成器(generator)

    ⒈迭代器(iterator) 1.可迭代性 当一个对象实现了Symbol.iterator属性时,我们认为它是可迭代的. 一些内置的类型如 Array,Map,Set,String,Int32Arra ...