您的位置：首页 > Web前端 > JavaScript

Javascript模块化编程系列一: 模块化的驱动

2013-05-08 20:30 176 查看


Javascript 函数编程

初涉Javascript ,会以为Javascript 是面向过程的编程语言， 和C类似，使用函数来达成效果。

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
function test()
{
	alert("ok");
}
</script>
</HEAD>

<BODY>
<input type=button value="Click" onclick="test()">
</BODY>
</HTML>



Javascript 对象编程

Javascript 本身是没有类的概念，但是确确实实是面向对象的编程语言。

更多相关请参见：

JavaScript实现类与继承

原型(prototype)可以让你直接给一个变量对象添加属性或是函数。

你也可以用以下方式来定义一个对象:

<script>
var jsobj = {};
jsobj.attr1 = "value1";
</script>
更多相关，请参见：

JavaScript 对象和字串之间的转换


模块化需求

不管是使用以上那种方式编程，js代码编写或导入的方式都是相同的。

或是写在 html 的<srcipt>标记块内，或是独立成js 文件，再导入到页面中。

当页面代码很多的时候，有可能还会拆分成多个js文件来导入。

如此，实际的开发中， 就有可能会遇到一些困扰：

困扰1. 变量值被意外篡改

使用函数化的方式的状况： 有可能我们会定义一些js全局变量， 这个全局变量会就被所有的function 用到， 如果这些function 本身又使用了同名的变量。我们知道，js 的变量无须定义就可以使用，最后，那个全局变量的值是什么，就真的很难知道和控制了。

使用对象的方式的状况： 对象内定义的属性和方法对外部来说都是可以获取和改变的， 这个对象也就没有私有变量之说了。而且，如果不同的js 中定义了同名的对象，就会出现覆盖的状况。对于开发和调试的困扰比较大。

困扰2. js 导入附带的问题

拆分成多个js导入，可能这些js直接有先后和依赖关系，顺序不对，有可能导致问题。

困扰3. 导入的文件量较大，页面载入较慢

现在的web开发，伴随着Ajax技术的盛行， 同一个页面需要展现的功能较多，很多时候都是局部的替换，更新，隐藏/展现功能。如此，单个页面的需要导入的js文件的量势必非常大。而这些文件是从服务端传输过来的。


模块化解决探求

针对这些问题，如何寻求一种比较好的解决方式？

立即执行函数解决困扰1

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>

var module1 = (function(){
      var _v1 = 0;
	  var func1 = function(){alert("this is func1")};
	  var func2 = function(){alert("this is func2")};
	  return {"func1":func1,
	  "func2":func2};
}());

module1.func1();

</script>
</HEAD>

<BODY>

</BODY>
</HTML>


通过以上方式， module1对象里的属性 _v1 就无法访问了。私有变量得以保护。

关于立即执行函数的介绍可以参考：

JS 立即执行的函数表达式(function)写法

使用带入参数方式解决困扰2(也称为放大模式， augmentation)

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>

var module1 = (function(){
      var _v1 = 0;
	  var func1 = function(){alert("this is func1")};
	  var func2 = function(){alert("this is func2")};
	  return {"func1":func1,
	  "func2":func2};
}());

var module2 = (function(mod){
    mod.func3 = function(){alert("this is func3")}
}(module1));

module1.func3();

</script>
</HEAD>

<BODY>

</BODY>
</HTML>
看以上代码， module2 是在module1 之上进行的扩展。

如果module2执行时， module1尚未准备好，就要使用宽放大模式了。

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>

var module2 = (function(mod){
    mod.func3 = function(){alert("this is func3")}
}(module1||{}));

var module1 = (function(){
      var _v1 = 0;
	  var func1 = function(){alert("this is func1")};
	  var func2 = function(){alert("this is func2")};
	  return {"func1":func1,
	  "func2":func2};
}());

</script>
</HEAD>

<BODY>

</BODY>
</HTML>



总结

此篇仅为抛砖引玉，介绍模块化动机的探讨和方案的预设， 在目前这个 js library 丰富的时代， 已经有一些很好的library 可以直接使用帮我们达成模块化的效果。

在此篇之后的后续章节会详细介绍
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航