js模块化html,js模块化和使用

js模块化html,js模块化和使用很久以前就知道js模块化开发可以使用require.js和sea.js,就一直没去看看。最近在了解查看的,度一下require.js相关的博客和文章,写得真是操蛋的疼,都是互相抄来抄去,博主应该都没有自己实际去敲过,哪怕给我写一个完整的简单应用示例我都可以上手,结果把自己折腾得……后面也看来sea.js,简单明了,上手容易多(主要是别人写的博客文档好)。什么是模块化关于这个概念还是推荐阅读…

很久以前就知道js模块化开发可以使用require.js和sea.js,就一直没去看看。最近在了解查看的,度一下require.js相关的博客和文章,写得真是操蛋的疼,都是互相抄来抄去,博主应该都没有自己实际去敲过,哪怕给我写一个完整的简单应用示例我都可以上手,结果把自己折腾得……后面也看来sea.js,简单明了,上手容易多(主要是别人写的博客文档好)。

什么是模块化

关于这个概念还是推荐阅读阮一峰老师的博文javascript模块化编程

以下是则是从网上收集来概念:

模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理。模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式。可以想象一个巨大的系统代码,被整合优化分割成逻辑性很强的模块时,对于软件是一种何等意义的存在。

(用自己的话来理解就是将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的使用代码示例

这里还是推荐可以看看阮一峰老师写的require.js的用法以及前端模块化和AMD、CMD规范中require定义模块的示例

博文开头也说了,网上太多require互相抄的,没有完整演示案例,初上手看得蛋疼。我这里就直接贴代码演示自己亲测成功简单例子

我在使用requirejs的时候踩最多坑的引入文件的地址,所以请读者注意define中引入其他模块所写的地址

演示代码目录结构,html和js编码对应

bVMV3C?w=142&h=269

示例一

1_math.js

/*

语法结构:

1. define({函数方法})

*/

// 一个没有依赖性的模块可以直接定义对象

define({

name : “测试名字”,

// 加法

add : function(num1, num2){

return num1 + num2;

}

});

1_require.html

Document

/*

引入模块使用

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));

});

结果

bVMV3T?w=514&h=251

示例二

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

Document

require([‘js/2_math’], function(math){

console.log(math.sub(222,111));

});

结果

bVMV4e?w=495&h=155

示例三

3_math.js

bVMV5v?w=567&h=424

3_require.html

bVMV5x?w=719&h=469

效果

bVMV5P?w=503&h=158

示例四

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

Document

require([‘js/4_math’],function(mytool){

console.log(mytool.a(11,22));//33

});

效果

bVMV5Z?w=534&h=237

seajs的使用代码示例

个人还是推荐使用seajs,简单易懂,国人开发。推荐看张鑫旭老师写的seajs中文文档,很容易上手学习。

写法跟request.js类似

演示目录结构

bVMV6T?w=146&h=132

代码示例1

1_math.js

define({

add : function(a,b){

return a + b;

}

});

1_sea.html

Document

// 引用模块方法seajs.use(“地址”,回调函数)

// 注意:需要从当前目录(./)开始找,.js后缀可以省略

seajs.use(“./js/1_math”,function(math){

console.log(math.add(111,222));

})

效果

bVMV7v?w=528&h=238

代码示例2

2_math.js

define(function(require,exports,module){

// require的路径是从当前文件所在路径开始找

var m = require(‘1_math’);

// 1. 第一种写法

// exports.add = m.add;

// exports.sub = function(a,b){

// return a – b;

// }

// 2.第二种写法

module.exports = {

add : m.add,

sub : function(a,b){

return a – b;

}

}

});

2_sea.html

Document

seajs.use(‘./js/2_math’,function(math){

console.log(math.sub(222,111));

})

效果

bVMV8z?w=430&h=199

今天的文章js模块化html,js模块化和使用分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/4587.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注