最近可能是习惯了angular、vue之类的前端框架组件化开发的模式，在重新学习JavaScript的过程中总想着用一样的开发模式，通过归类以往的项目经验、整理一点JS文件之间使用的模式，不足之处还望读到此文的大神给出指正，在此感谢！
首先，最简单的两个js文件的之间的方法的调用
在html文件中引入调用：
// index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.3.1.js"></script>
</head>
<body>
<div>
<button οnclick="clickBtn()">点击试验按钮</button>
</div>
<ul id="showHtml"></ul>
<script src="linkA.js"></script>
<script src="test.js"></script>
</body>
</html>
在test.js文件中定义clickBtn()方法;
clickBtn()方法的作用即调用linkA.js中的clickA()方法
// test.js
function clickBtn(){
clickA();
}
//linkA.js
function clickA(){
$("#showHtml").append("<li>TestA成功</li>")
}
在浏览器中预览index.html，点击按钮页面会输出TestA成功，说明方法调用成功；
最简单直接的方法，显然存在很多问题，我们稍作改进，将调用的方法进行封装形成闭包（这个理论性的只是不是特别了解，也许概念会错。）
在index.html新增一个就是文件linkB.js
<script src="linkB.js"></script>
在linkB,js文件中将进行方法的封装
// linkB.js
(function ($, window) {
$.LinkB= function (el, option) {
//初始化
this.init = function () {
var _self =this;
// _self.beginTodo();
};
};
$.extend($.LinkB,{
prototype:{
beginTodo:function(){
$("#showHtml").append("<li>TestB成功</li>")
}
}
});
window. LinkB = new $.LinkB();
$(document).ready(function(){
LinkB.init();
});
})(jQuery, window);
此方法相当于全局定义了LinkB对象，当然只针对引用了linkB.js的文件
然后我们在在test.js文件中的clickBtn()方法中调用LinkB中的方法函数
function clickBtn(){
clickA();
LinkB.beginTodo()
}
刷新浏览器页面，点击按钮，页面会出现TestA成功和TestB成功
此时若想直接在html文件中调用LinkB中的方法，就需要加上对象名
例：<button οnclick="LinkB.beginTodo()">点击试验按钮</button>
否则方法调用失败
封装成对象相当于对直接调用的优化，文件的使用仍需在html中进行调用，且需留意文件调用的顺序，若引用和被引用的文件顺序对调，则会导致一系列的方法未定义的报错，就原始化的html+css+js的文件格式来讲，这种方法需要不断重复在下html文件中调用一堆重复的JS文件，不利于开发的简洁和高效，所以对JavaScript的模块化处理或许会是不错的方法（抛开vue等前端框架的使用）
针对javascript模块化，记录几篇简单介绍，深入的理论还需不断实践进行
1、JS模块化编程——https://www.imooc.com/article/282599
2、JS模块化初步实现过程——https://www.imooc.com/article/16961
接下来可以按照
【Javascript】【模块化】通过requireJs实现模块化——https://blog.csdn.net/u013718730/article/details/90697778的方法进行require.js实现AMD的JavaScript模块化开发：
首先新建文件夹，将下载好的jquery.js和require.js文件放在文件夹内，按照文档步骤新建需要的文档
建立index.html文档，在页面上放置4个按钮，并预备ul留待后续插入li内容展示在页面上
// index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
<button class="add">加法</button>
<button class="sub">减法</button>
<button class="mul">乘法</button>
<button class="divi">除法</button>
</div>
<div>
<ul id="show"></ul>
</div>
<script src="require.js" data-main="config.js"></script>
<script src="index.js"></script>
</body>
</html>
对config文件进行配置
//config.js
require.config({
paths: {
jquery: "jquery-3.3.1",
math: "math",
dm: "dom"
}
});
首先在math.js中编写计算公式方法，没有依赖模块
//math.js
define(function() {
'use strict';
var addition = function(a,b) {
return a + b
}
return{
addition: addition,
subtraction: function(a,b) {
return a - b
},
multiplication: function(a,b) {
return a * b
},
divider: function(a,b) {
return a / b
},
}
});
接下来在index.js中引入math.js方法
//index.js
require(["math.js"],function(mat){
var a = 10;
var b = 2;
var add = mat.addition(a,b);
var sub = mat.subtraction(a,b);
var mul = mat.multiplication(a,b);
var divi = mat.divider(a,b);
console.log(add)
console.log(sub)
console.log(mul)
console.log(divi)
})
至此最简单的模块化就形成了，继续深入探索，点击对应按钮才执行对应方法，并将计算公式在页面展示出来，我们在dom.js文件中实现对dom的操作并调用math的方法
//dom.js
define([
'mat',
'jquery'
], function(mat, $) {
'use strict';
$(".add").on("click",function(a,b){
var a = 10, b = 2;
var result = mat.addition(a,b);
$("#show").append("<li>" +a+ "+" +b+ "=" +result+ "</li>")
});
$(".sub").on("click",function(a,b){
var a = 10, b = 2;
var result = mat.subtraction(a,b);
$("#show").append("<li>" +a+ "-" +b+ "=" +result+ "</li>")
});
$(".mul").on("click",function(a,b){
var a = 10, b = 2;
var result = mat.multiplication(a,b);
$("#show").append("<li>" +a+ "*" +b+ "=" +result+ "</li>")
});
$(".divi").on("click",function(a,b){
var a = 10, b = 2;
var result = mat.divider(a,b);
$("#show").append("<li>" +a+ "/" +b+ "=" +result+ "</li>")
});
});
此时index,js中仅仅需要引入一下dom.js，无需引用math.js就能实现功能
此时的index.js
require(["dom.js"],function(){
})
若dom.js中返回有定义的方法或值时，就需要在function()中引入dom.js的别名作为参数
简单的模块华就这样，距离实战还有很长一段路要走
1939
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
