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进行扩展的话,如果都在 ...
随机推荐
- 面向连接的socket数据处理过程以及非阻塞connect问题
对于面向连接的socket类型(SOCK_STREAM,SOCK_SEQPACKET)在读写数据之前必须建立连接,首先服务器端socket必须在一个客户端知道的地址进行监听,也就是创建socket之后 ...
- iOS多线程总结(一)NSThread
多线程,简而言之,就是提供代码的多个执行路径,对于App性能和用户体验都有着至关重要的意义.在iOS开发中,Apple提供了不同的技术支持多线程编程,主要有NSThread.NSOperationQu ...
- poj1484---判断保险丝是否烧断
题目输入要求: 2 2 10 //设备数n 接下来的操作数m 保险丝能承受最大电流c5 //电器1的电流7 //2的电流1 //反转开关12 //反转开关2 思路:设置一个flag数组,记得每次 ...
- libiconv的静态编译
./configure --enable-static=yes --prefix=/usr/local/libiconv CentOS安装transmission » Nicky Blog 安装l ...
- string 转换char类型
将string转换成char类型 const char *c = string.c_str() char转换string char *c_name = "char" string ...
- android 计时器,倒计时
自己定义CountDownTimer /** * 计时器 * @author Administrator * */ class TimeCount extends CountDownTimer{ pu ...
- 我终于解决UM编辑器了 泪......
气死我了..... 好不容易测试好了....更显得我笨了..... 原来....什么都不用改 只改了2个小位置....真的是.....回首自己 不敢看 0.0 OK 记下步骤 以免以后忘记 将 ...
- vs2010:【“System.Data.OracleClient.OracleConnection”已过时】警告
在oracle 安装目录下 找到 Oracle.DataAccess.dll添加引用,然后 using Oracle.DataAccess.Client;其他的都不用动,即可.连接字符串中 如有 用的 ...
- Android API Level在11前后及16之后时Notification的不同用法
作为刚入门Android的小白,最近在按照郭大神的<第一行代码>在练习,在用到Notification时遇到了一些问题,网上资料比较零散,我这里做了一个总结分析给各位,若有错误,恳请指正~ ...
- C++学习笔录3
1.隐藏:存在于派生类和基类中.只要成员名字相同就叫做隐藏.参数和函数名都相同时,是一种特殊的隐藏,叫做重写,重写只出现在函数中.若需要访问基类中被隐藏的成员,必须访问这种方法:“对象名:类名::隐藏 ...