学习了一下javascript的模块化编程

现在在我脑海里关于“模块化”的概念是这些词：简单、具有逻辑之美、易用、健壮、可扩展。似乎这些形容与我现在水平写出的代码有点格格不入啊。

所以今天想了解和简单的实践一下“模块化开发”。

1.首先学习一下基础理论方面的知识：

只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。

var module1 = ( function (mod){

　　　　//...

　　　　return mod;

　　})(window.module1 || {});

独立性是模块的重要特点，模块内部最好不与程序的其他部分直接交互。

为了在模块内部调用全局变量，必须显式地将其他变量输入模块。

　　var module1 = (function ($, YAHOO) {

　　　　//...

　　})(jQuery, YAHOO);

通行的Javascript模块规范共有两种：CommonJS和AMD。

浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

　　require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。

2.介绍一下require.js这个库

目标：

　　（1）实现js文件的异步加载，避免网页失去响应；

　　（2）管理模块之间的依赖性，便于代码的编写和维护。

require的加载：

<script src="js/require.js" defer async="true" ></script>

<script src="js/require.js" data-main="js/main"></script>

data-main属性的作用是，指定网页程序的主模块。

主模块的写法：

require（["","",""],function(a,b,c){

//

}）;

模块的加载：

使用require.config()方法，我们可以对模块的加载行为进行自定义。

require.config({

　　　　baseUrl: "js/lib",

　　　　paths: {

　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"

　　　　}

　　});

require.js加载的模块，采用AMD规范。模块必须采用特定的define()函数来定义

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性。

　　define(['myLib'], function(myLib){

　　　　function foo(){

　　　　　　myLib.doSomething();

　　　　}

　　　　return {

　　　　　　foo : foo

　　　　};

　　});

感谢阮一峰的日志：http://www.ruanyifeng.com/blog/2012/11/require_js.html

总结：

我觉得理论知识的学习领悟有必要，理论教会我们一些套路规范，思想的提高改善才是关键，需要继续努力养成实践家的习惯和反思家的习惯。