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"
JavaScript模块化开发整理的更多相关文章
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- Javascript模块化开发－轻巧自制
Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...
- JavaScript模块化开发的那些事
模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...
- 详解JavaScript模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
- 2.精通前端系列技术之JavaScript模块化开发 seajs（一）
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...
- JavaScript模块化开发实例
最近接触了一些JavaScript开发的例子,在这里与大家一起分享一下: 例子:当我们一个团队在写Js文件的时候,你一个人写的JS代码自己可以看懂也可以维护,但是别人想对你的JS进行扩展的话,如果都在 ...
- JavaScript模块化开发&&模块规范
在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...
- （转）详解JavaScript模块化开发
https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...
随机推荐
- ZOJ 3703 Happy Programming Contest(DP)
题目链接 输出路径,搞了一个DFS出来,主要是这里,浪费了好长时间. #include <cstdio> #include <string> #include <cstr ...
- Android -- 自定义ImageView(圆形头像)
1. 原图
- 【bzoj2809】[Apio2012]dispatching 左偏树
2016-05-31 15:56:57 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2809 直观的思想是当领导力确定时,尽量选择薪水少的- ...
- iOS开发如何提高
阅读博客 在现在这个碎片化阅读流行的年代,博客的风头早已被微博盖过.而我却坚持写作博客,并且大量地阅读同行的iOS开发博客.博客的文章长度通常在 3000字左右,许多iOS开发知识都至少需要这样的篇幅 ...
- IOS面试题总结
iOS面试题: 一:网络理论知识的理解 1:Internet物理地址和IP地址转换采用什么协议 ARP(Address Resolution Protocol)地址解析协议 2:Internet采用哪 ...
- Thymeleaf基本知识
Thymeleaf是个XML/XHTML/HTML5模板引擎,可以用于Web与非Web应用. Thymeleaf的主要目标在于提供一种可被浏览器正确显示的.格式良好的模板创建方式,因此也可以用作静态建 ...
- IOS UINavigationController 导航控制器
/** 导航控制器掌握: 1.创建导航控制器 UINavigationController *nav = [[UINavigationController alloc] initWithRootVie ...
- 关于padding与margin的区别
代码一:全为padding. <!doctype html><html><head> <meta charset="UTF-8"&g ...
- 如何防御“神器”Mimikatz窃取系统密码？
Mimikatz是一款能够从Windows中获取内存,并且获取明文密码和NTLM哈希值的神器,本文将介绍如何防御这款软件获取密码. Mimikatz介绍 Mimikatz是一款能够从Windows认证 ...
- 织梦5.7 TAG、标题、栏目以及keywords长度字符数限制修改
织梦5.7 TAG.标题.栏目以及keywords长度字符数限制修改[图文] 标签: 织梦关键词长度修改 织梦tag长度修改 织梦标题长度修改 织梦栏目长度限制修改 织梦修改 分类: 技术操作 ...