JS模块化和使用
JS模块化和使用
很久以前就知道js模块化开发可以使用require.js和sea.js,就一直没去看看。最近在了解查看的,度一下require.js相关的博客和文章,写得真是操蛋的疼,都是互相抄来抄去,博主应该都没有自己实际去敲过,哪怕给我写一个完整的简单应用示例我都可以上手,结果把自己折腾得……后面也看来sea.js,简单明了,上手容易多(主要是别人写的博客文档好)。
什么是模块化
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。
CommonJS
CommonJS API定义很多普通应用程序(主要指非浏览器的应用)使用的API,从而填补了这个空白。 它的终极目标是提供一个类似Python,Ruby和Java标准库。 这样的话,开发者可以使用CommonJS API编写应用程序,然后这些应用可以运行在不同的JavaScript解释器和不同的主机环境中。
在兼容CommonJS的系统中,你可以使用JavaScript开发以下程序: (1).服务器端JavaScript应用程序 (2).命令行工具 (3).图形界面应用程序 (4).混合应用程序(如,Titanium或Adobe AIR) 【NodeJS是CommonJS规范的实现,webpack 也是以CommonJS的形式来书写】
模块的规范:AMD&CMD
目前,通行的Javascript模块规范共有两种:CMD和AMD。 AMD(Asynchronous Module Definition:异步模块定义)是 RequireJS 在推广过程中对模块定义的规范化产出。
CMD(Common Module Definition:公共模块定义)是 SeaJS 在推广过程中对模块定义的规范化产出。 这些规范的目的都是为了 JavaScript 的模块化开发,特别是在浏览器端的。目前这些规范的实现都能达成浏览器端模块化开发的目的。 RequireJS 和 Sea.js 都是模块加载器,倡导模块化开发理念,核心价值是让 JavaScript 的模块化开发变得简单自然。
requirejs的使用代码示例
我在使用requirejs的时候踩最多坑的引入文件的地址,所以请读者注意define中引入其他模块所写的地址
示例一
/*
语法结构:
1. define({函数方法})
*/
// 一个没有依赖性的模块可以直接定义对象
define({
name : "测试名字",
// 加法
add : function(num1, num2){
return num1 + num2;
}
});
1_require.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript">
/*
引入模块使用
require([模块地址],回调函数)
1. [模块地址]可以忽略文件后缀.js
2. 回调函数的参数(math)对应的是引入模块(js/1_math.js)的别名(别名可以随意命名)
*/
require(['js/1_math'],function(math){
console.log(math.name);
console.log(math.add(111,222));
});
</script>
</html>
示例二
2_math.js 注意define中引入其他模块地址,并不是以当前文件作为参照,而是2_require.html。
/* 语法结构: 2. define([引入其他模块地址],回调函数(引入模块别名)); 别名可以在函数里面去调用其他模块提供的方法 */ // 一个返回对象的匿名模块 define([‘js/1_math.js’],function(math){ // 减法 var subtraction = function (num1, num2){ return num1 - num2; } // 把方法返回出去 return { add : math.add,//加法 sub : subtraction//减法 } });
2_require.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript">
require(['js/2_math'], function(math){
console.log(math.sub(222,111));
});
</script>
</html>
示例三
3_math.js
3_require.html
效果
示例四
4_math.js(类似nodejs的用法)
// 一个使用了简单CommonJS转换的模块定义
define(function(require,exports,module){
// 引入其他模块
var math = require('js/1_math');
console.log(math);
// 导出(暴露方法:2种方式)
// 第一种
// exports.a = math.add;
// 第二种
module.exports = {
a : math.add
}
});
4_require.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
<script type="text/javascript" src="js/require.js"></script>
<script type="text/javascript">
require(['js/4_math'],function(mytool){
console.log(mytool.a(11,22));//33
});
</script>
</html>
效果
- 麻省理工学院通过新型人工智能系统用电脑可以合成新材料
- mapx实现热点效果
- 微信小游戏的6大趋势分析
- 在Mapx中设置单个图元的样式
- silverlight之deeplink学习笔记
- Mapx实现双标注
- Silverlight中也玩屏幕截图
- 在虚拟机上进行网络数据包分析
- TiDB 1.1 Alpha Release
- 重温delphi之:如何将Bitmap位图与base64字符串相互转换
- base64编码在silverlight中的使用
- silverlight中如何将BitmapImage转化为Stream或byte数组?
- Centos6.8下编译安装LAMP的操作记录梳理
- Linux下批量管理工具pssh使用记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 深入理解 PHP7 中全新的 zval 容器和引用计数机制
- python中可以声明变量类型吗
- keras中的History对象用法
- php session_decode函数用法讲解
- 解决python对齐错误的方法
- 详解pyinstaller生成exe的闪退问题解决方案
- PHP递归算法的简单实例
- Yii2框架操作数据库的方法分析【以mysql为例】
- 使用OpenCV实现道路车辆计数的使用方法
- python中tab键是什么意思
- PHP实时统计中文字数和区别
- PHP单例模式实例分析【防继承,防克隆操作】
- Python基于network模块制作电影人物关系图
- tp5(thinkPHP5框架)使用DB实现批量删除功能示例
- 统计PHP目录中的文件数方法