web开发中，前端javascript代码的组织结构

网页包含三个层次：

• 结构（HTML）
• 表现（CSS）
• 行为（javascript）

web标准中，三者要分离，网页源代码由三部分组成：.html文件、.css文件和.js文件。就是说html文件中不应该含有CSS样式和javascript代码。

这里讨论一下javascript的一种组织结构。

//fw.js
var fw = {
    page: {
        index:{},
        user:{}
    },
    common: {
        dialog: {},
        table:{}
    },
}

首先定义一个顶级的变量fw，fw是一个hash变量。page中存放的是单个页面的javascript代码，比如index页面和user页面。common中存放的是通用的方法，用于dialog相关的和table相关的。他们目前都是空对象，这边仅仅只是定义一个结构。

 

//dialog.js
fw.common.dialog = function () {
    return {
        initDialog: function () {
            //这里是具体的方法细节
        },

        destroyDialog: function () {
            //这里是具体的方法细节
        }
    }
}()；

接着要实现一个初始化dialog的通用方法 fw.common.dialog 的初始值是{}，这里将它的值修改。定义一个匿名方法，并立即执行它，返回值是一个hash对象，hash对象中的key是initDialog，值是一个匿名方法。可以这么调用这个方法，

fw.common.dialog.initDialog();

这么组织javascript代码结构有以下好处：

1. 见名知意，通过前缀可以知道这是一个公共方法。
2. initDialog和destroyDialog方法在一个hash中，没有顺序关系。
3. initDialog和destroyDialog方法在闭包之中，定义的变量不会影响到其他的代码。
4. 方便调用，只要加载该文件即可调用。