模块化开发之sea.js
随着时间的推移，原生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的更多相关文章
- 模块化开发之sea.js实现原理总结
seajs官网说:seajs是一个模块加载器,所以学习它并不难. 在我的理解就是:本来我们是需要手动创建 script标签 引入 js文件的,但用seajs后,它就自动帮我们完成这些工作. 这里只说实 ...
- Asp.net Mvc模块化开发之“开启模块开发、调试的简单愉快之旅”
整个世界林林种种,把所有的事情都划分为对立的两个面. 每个人都渴望的财富划分为富有和贫穷,身高被划分为高和矮,身材被划分为胖和瘦,等等. 我们总是感叹,有钱人的生活我不懂;有钱人又何尝能懂我们每天起早 ...
- Asp.net Mvc模块化开发之“部分版本部分模块更新(上线)”
项目开发从来就不是一个简单的问题.更难的问题是维护其他人开发的项目,并且要修改bug.如果原系统有重大问题还需要重构. 怎么重构系统不是本文探讨的问题,但是重构后如何上线部署和本文关系密切.这个大家可 ...
- 前端模块化开发之seaJs
了解后端语言的童鞋一定听过模块化开发的概念,比如java.python等后端语言都有自己的模块化特性,然而和后端语言相比,javascript还尚未实现模块化的功能,虽然之后的更高版本可能引入模块化开 ...
- [JS] JS模块化开发之RequireJS
本节将简述RequireJS常用的功能 RequireJS 实现了 Asynchronous Module API. 目录: 为什么使用RequireJS 加载RequireJS Hello Worl ...
- 模块化开发之butterknife 在 library中使用
在Android开发中butterknife是一个很好的对资源初始化的工具,它可以使你的代码简洁通俗易懂,同时配合Android ButterKnife Zelezny插件可以让你写代码的速度提升至少 ...
- 原生+H5开发之：js交互【location方式】
1. 交互方式总结 1Android与JS通过WebView互相调用方法,实际上是: Android去调用JS的代码 JS去调用Android的代码 二者沟通的桥梁是WebView 对于Android ...
- 模块化开发之Amd规范和Cmd规范
CMD规范:是SeaJS 在推广过程中对模块定义的规范化产出的. AMD规范:是 RequireJS 在推广过程中对模块定义的规范化产出的 // CMD define(function(require ...
- 项目伪模块化开发之：requirejs（AMD）开发
附:伪模块开发,终将会被es6的模块开发取代.其只为过渡阶段使用 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码 ...
随机推荐
- GraphQL学习之原理篇
前言 在上一篇文章基础篇中,我们介绍了GraphQL的语法以及类型系统,算是对GraphQL有个基本的认识.在这一篇中,我们将会介绍GraphQL的实现原理.说到原理,我们就不得不依托于GraphQL ...
- linux下的进程通信之管道与FIFO
概念:管道是由内核管理的一个缓冲区,相当于我们放入内存中的一个纸条.管道的一端连接一个进程的输出.这个进程会向管道中放入信息.管道的另一端连接一个进程的输入,这个进程取出被放入管道的信息. 优点:不需 ...
- 【VS开发】【miscellaneous】windows（64位）下使用curl命令
windows(64位)下使用curl命令 Curl命令可以通过命令行的方式,执行Http请求.在Elasticsearch中有使用的场景,因此这里研究下如何在windows下执行curl命令. 工具 ...
- 最新 翔通动漫java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.翔通动漫等10家互联网公司的校招Offer,因为某些自身原因最终选择了翔通动漫.6.7月主要是做系统复习.项目复盘.Leet ...
- java类加载全过程
引用:http://blog.csdn.net/haluoluo211/article/details/49908463 http://www.cnblogs.com/pengfeiliu/p/442 ...
- 点击 显示红色 小案例 vue
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Python 解LeetCode：606 Construct String from Binary Tree
题目描述:用先序遍历的方式把二叉树转换成字符串,其中结点用括号分割,具体示例见题目链接 思路: 先序遍历,先把根结点的值转化成字符串,然后递归的把左右子树的值转化成字符串 把1中的根结点和左右子结点的 ...
- 20191011-构建我们公司自己的自动化接口测试框架-Util的TestDataHandler模块
TestDataHandler模块主要是做测试数据的处理,包括转换数据格式和变量参数处理转换数据格式函数: data是数据,data以$()的方式识别变量,如果请求的数据有变量,则将变量用global ...
- 20191011-构建我们公司自己的自动化接口测试框架-Util的getTestSuite模块
getTestSuite主要是用于在testData里面获取测试集以及对应的测试数据,包括2个主要的方法,一个是获取测试集,一个是获取测试集里面要执行的测试用例 获取测试集方法: from Util. ...
- asp.net core-5.控制台读取json文件
1,创建控制台应用程序,应用using Microsoft.Extensions.Configuration; 2,新建一个app.json文件 然后修改app.json的属性 3,生成项目,可以看到 ...