JavaScript模块化开发整理

在网上已经有很多关于模块化开发的文章了，这里还是按照自己的理解来整理一下。

随着项目文件的越来越大和需求的越来越贴近现实（我发现现在客户不如：一个领导说我要审批你们报上来的资料，系统发布以后用的还不错，可能是有那个新鲜感，等领导烦了说：每个文件我都这么操作太累了，能不能一次报，到最后说能不能自动判断对不对……），以后的需求估计要让做个人工智能出来……借着上面继续，需求的内容越来越复杂，一个人开发时间长，多个人开发这样那样的问题一堆等等这时候Javascript模块化开发诞生了。

先说说发展历程

刚开始是这样写代码的：

function func1() { }
function func2() { }

后来经过变形是这样的：

var obj = {func1: function () {},func2: function () {}
}

最后经过总价实践后是这样的：

(function () { })();

闭包：至于这种方式防止全局变量的污染，有效的提高了开发的思路和开发的效率。

这里重点说下我设想的思路:

上面的项目文件列表是这样的；index主页上面有不同的标签，每个标签下面有不同的功能（很复杂的）。Index的代码如下

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript模块化编程</title><script src="../jquery.js"></script><script src="Js/main.js"></script><script src="Js/a.js"></script><script src="Js/b.js"></script><script src="Js/c.js"></script>
</head>
<body>
</body></html>

mian处理公用的业务逻辑，a，b，c不同的功能块

main.js的代码如下：

$(function () {var sum = myModule.addMethod(1),sub = myModule.subMethod(1, 3),mod = myModule.modMethod(1, 3);myModule.alert = function () {alert($().jquery);};
});

a.js的代码如下:

(function (my) {var x = 8;my.addMethod = function () {return arguments[0] + x;}
})(window.myModule = window.myModule || {});

b和c的代码就不帖了和a的雷同；

为什么这么写呢？假如说写成下面的样子行吗？

(function (my) {my.modMethod = function () {return arguments[0] / arguments[1];};//比如执行完异步后执行my.callBack = function () {if (typeof arguments[0] == "function") {arguments[0]();}}
})(window.myModule || {});

如果写成了以上的这种，在index页面上引入js的顺序变化有可能window.myModule就是undefined.

a,b,c都是一个页面上不用的业务逻辑处理，当然相互可以关联，导入。

这样就有效的阻止了全局变量的污染, 可以找不同的开发者开发同一个模块。

那这样暴漏出另一个问题就是index页面上引入的js过于过，而且会影响加载速度，在访问index的时候也许只用到a脚本，点击某个按钮才用到b脚本。这就引入下个话题："require.js"

转载于:https://www.cnblogs.com/cyclone77/p/5525785.html

JavaScript模块化开发整理相关推荐

JavaScript模块化开发的演进历程
写在前面的话 js模块化历程记录了js模块化思想的诞生与变迁历史不是过去,历史正在上演,一切终究都会成为历史拥抱变化,面向未来延伸阅读 - JavaScript诞生(这也解释了JS为何一开始没有 ...
JavaScript模块化开发（一）基础知识
2019独角兽企业重金招聘Python工程师标准>>> 随着前段JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理 ...
JavaScript模块化开发技术概述
2019独角兽企业重金招聘Python工程师标准>>> 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应 ...
前端JAVASCRIPT模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
JavaScript 模块化开发入门
JS 为什么要模块化 JavaScript 语言最初设计的主要作用仅仅是用来验证表单输入的有效性,为Web页面添加一些动画效果等,并不包含太多的高级语言的特性,此时通常直接在HTML页面中编写简单的 ...
初探Javascript模块化开发
随着简单网页逐渐变成交互复杂的网站应用,网页上的Javascript代码也变得越来越庞大,越来越复杂.加之随即而来的多人协作分工的开发方式,每个人只负责其中一个或者几个很小的功能模块,最终必须通过把各 ...
javascript模块化开发
一.什么是模块化开发将软件产品看作为一系列功能模块的组合通过特定的方式实现软件所需模块的划分.管理.加载二.模块化开发好处解决命名冲突问题添加命名空间YUI .EXTJS-可以从一定程度上解 ...
Node 之 JavaScript 模块化开发
目录一.模块化 1. 概念 2. 历史 01 - 早期 02 - 现在 3. 问题问题一 01 - 定义 foo.js 02 - 定义 bar.js 03 - 定义 html 页面问题二二.C ...
JavaScript 模块化简述
JavaScript 模块化简述前言关于模块化,最直接的表现就是我们写的 require 和 import 关键字,如果查阅相关资料,就一定会遇到 CommonJS .CMD AMD 这些名词,以 ...

JavaScript模块化开发整理

JavaScript模块化开发整理相关推荐

最新文章

热门文章