javascript模块化开发编程
随着网站的不断迭代更新,js代码越来越多,那么问题来了
代码比较乱
命名出现冲突
文件依赖比较繁杂
为了解决以上问题,模块化开发出现了
1、一个简单的demo,维护和扩展模块
模块的维护和扩展一定要遵守一个约定:开闭原则
对添加开放,对修改封闭
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>扩展和维护模块</title>
</head> <body>
<div>
<input type="text" id="x">
<select name="" id="opt">
<option value="0"> + </option>
<option value="1"> - </option>
<option value="2"> * </option>
<option value="3"> / </option>
<option value="4"> % </option>
</select>
<input type="text" id="y">
<input type="button" id="btn" value="=">
<input type="text" id="result">
</div>
<script>
/**
* 通过 匿名自执行函数,利用函数作用域的机制 隔离私有变量
*/ var calculator = (function() {
// 对于 _count 来说,如果不通过 return ,外部是无法访问的,无法修改
var _count = 10; function add(x, y) {
return parseFloat(x) + parseFloat(y);
}; function substract(x, y) {
return parseFloat(x) - parseFloat(y);
}; function multiply(x, y) {
return parseFloat(x) * parseFloat(y);
}; function divide(x, y) {
return parseFloat(x) / parseFloat(y);
};
return {
add: add,
substract: substract,
multiply: multiply,
divide: divide
};
})(); var calculator = (function(cal) {
cal.mod = function(x, y) {
return x % y;
};
return cal;
})(window.calculator || {});
// 看一下 全局有没有 calculator 该对象,如果有,直接使用该对象就可以了
// 如果没有,给一个默认的空对象,一种更 鲁棒 的做法,更高的容错性,永远不要相信用户的输入 var oX = document.getElementById('x');
var oY = document.getElementById('y');
var oOpt = document.getElementById('opt');
var oBtn = document.getElementById('btn');
var oResult = document.getElementById('result'); oBtn.addEventListener('click', function(e) {
var x = oX.value.trim();
var y = oY.value.trim();
var opt = oOpt.value; var result = 0;
switch (opt) {
case '0':
result = calculator.add(x, y);
break;
case '1':
result = calculator.substract(x, y);
break;
case '2':
result = calculator.multiply(x, y);
break;
case '3':
result = calculator.divide(x, y);
break;
case '4':
result = calculator.mod(x, y);
break;
}
oResult.value = result;
});
</script>
</body> </html>
2、第三方包依赖的解决
不要直接在模块内部使用第三方依赖,因为模块与模块之间的依赖关系不够明显,最好通过将依赖项注入的形式来解决第三方依赖的问题
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>第三方包依赖的问题</title>
</head> <body>
<div>
<input type="text" id="x">
<select name="" id="opt">
<option value="0"> + </option>
<option value="1"> - </option>
<option value="2"> * </option>
<option value="3"> / </option>
<option value="4"> % </option>
</select>
<input type="text" id="y">
<input type="button" id="btn" value="=">
<input type="text" id="result">
</div>
<!--
模块依赖的问题
1. 手动方式加载:不方便
2. 模块的加载顺序:可能会出错
-->
<script src="../js/jquery-1.11.3.js"></script>
<script>
/**
* 通过 匿名自调用函数,利用函数作用域的机制隔离私有变量
*/ var calculator = (function() {
// 对于 _count 来说,如果不通过 return ,外部是无法访问的,无法修改
var _count = 10; function add(x, y) {
return parseFloat(x) + parseFloat(y);
}; function substract(x, y) {
return parseFloat(x) - parseFloat(y);
}; function multiply(x, y) {
return parseFloat(x) * parseFloat(y);
}; function divide(x, y) {
return parseFloat(x) / parseFloat(y);
};
return {
add: add,
substract: substract,
multiply: multiply,
divide: divide
};
})(); var calculator = (function(cal,$) {
cal.changeColor = function() {
$('#x').css('backgroundColor', 'red');
$('#y').css('backgroundColor', 'green');
}; return cal; // 不要直接用$或其他第三方包,一定要把依赖项 通过参数的形式 注入进来,然后在内部使用注入的属性
// 好处:
// 1. 依赖关系变的明显,有利于代码的阅读
// 2. 提高了性能:减少了作用域的查找范围
})(window.calculator || {}, window.$); var oX = document.getElementById('x');
var oY = document.getElementById('y');
var oOpt = document.getElementById('opt');
var oBtn = document.getElementById('btn');
var oResult = document.getElementById('result'); oBtn.addEventListener('click', function(e) {
calculator.changeColor();
var x = oX.value.trim();
var y = oY.value.trim();
var opt = oOpt.value; var result = 0;
switch (opt) {
case '0':
result = calculator.add(x, y);
break;
case '1':
result = calculator.substract(x, y);
break;
case '2':
result = calculator.multiply(x, y);
break;
case '3':
result = calculator.divide(x, y);
break;
case '4':
result = calculator.mod(x, y);
break;
}
oResult.value = result;
});
</script>
</body> </html>
模块化开发的总结:
最大的问题,即规范问题,尤其在多人协作开发过程中,因此在多人协作开发过程中,一定要注意代码风格的统一。
为了解决模块化规范问题,出现了第三方库,基于AMD规范的Require.js和基于CMD规范的Sea.js,具体使用方法,参考其文档,至于AMD和CMD规范的区别可以参考以下博客
http://www.cnblogs.com/dojo-lzz/p/4707725.html
http://blog.chinaunix.net/uid-26672038-id-4112229.html
javascript模块化开发编程的更多相关文章
- JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
- JavaScript模块化开发的那些事
模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...
- Javascript模块化开发,使用模块化脚本加载工具RequireJS,提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- Javascript模块化开发-轻巧自制
Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...
- JavaScript模块化开发&&模块规范
在做项目的过程中通常会有一些可复用的通用性功能,之前的做法是把这个功能抽取出来独立为一个函数统一放到commonFunctions.js里面(捂脸),实现类似于snippets的代码片段收集. fun ...
- 详解JavaScript模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
- 2.精通前端系列技术之JavaScript模块化开发 seajs(一)
在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完 ...
- JavaScript模块化开发实例
最近接触了一些JavaScript开发的例子,在这里与大家一起分享一下: 例子:当我们一个团队在写Js文件的时候,你一个人写的JS代码自己可以看懂也可以维护,但是别人想对你的JS进行扩展的话,如果都在 ...
随机推荐
- Memcached管理与监控工具 memAdmin
http://www.junopen.com/memadmin/ 使用MemCached以后,肯定希望知道cache的效果,对于MemCached的一些运行状态进行监控是必要的,memcached提供 ...
- [开源]在iOS上实现Android风格的控件Toast
[开源]在iOS上实现Android风格的控件Toast iOS的风格和Apple其他产品一样,简单而粗暴.没有给人其他选择的余地,让你又爱又恨.同样的,Apple对待iOS平台的开发人员和对待大众消 ...
- C# 图片压缩 开源库
http://www.rasteredge.com/how-to/csharp-imaging/image-compressing/ http://www.rasteredge.com/dotnet- ...
- LOL是什么意思? - 已解决 - 搜狗问问
LOL是什么意思? - 已解决 - 搜狗问问 N A T S U . |分类:QQ工具栏 2009-05-04 LOL是什么意思? 满意答案 Shim Nyong 19级 2009-05-04 LOL ...
- 自定义ASP.NET WebApplication中调用SharePoint2010的对象
如果你是做SharePoint开发的话,一定不会对如下这段代码陌生: using(SPSite oSiteCollection = new SPSite("http://Server_Nam ...
- 使用关联对象(AssociatedObject)为UIButton添加Block响应
在开发中,要给UIButton添加点击事件的话,通常的做法是这样的 UIButton *button = [UIButton buttonWithType:UIButtonTypeSystem]; [ ...
- NSThread 的用法
一.线程的注意点: 1.不要同时开太多的线程(最多不要超过5条,其中包括主线程) 2.线程概念 2.1.主线程:UI 线程,显示.刷新 UI 界面,处理 UI 控件的事件 2.2.子线程:后台线程,异 ...
- zxing源码分析——QR码部分
Android应用横竖屏切换 zxing源码分析——DataMatrix码部分 zxing源码分析——QR码部分 2013-07-10 17:16:03| 分类: 默认分类 | 标签: |字号大中 ...
- You have not agreed to the Xcode license.
You have not agreed to the Xcode license. Before running the installer again please agree to the lic ...
- Android studio 查看sha1
高德地图开发申请KEY的时候需要开发者提供SHA1证书指纹数据,在eclipse很容易就找到了,但是Android Studio很久也没找到,只能使用在网上看到的方法了,在Android Studio ...