javascript - 一个页面的js应该怎么构思？

Question

假如一个交互比较多的页面，有导航切换，点击下拉等事件，有些事件需要初始化，样式和动作。那在一个js文件里面要怎么写呢？

像下面这个要怎么构思？是不是因为我对js还不够了解所以构思不出来？那要如何改变呢？

"use strict";
(function (root) {
    //code here

    function XX(options) {
        if (!(this instanceof XX)) {
            return new XX(options);
        }
        this.initialize();
    }

    /**
     * 绑定事件
     */
    XX.prototype.bindEvents = function () {
    };
    /**
     * top news slider
     */
    XX.prototype.newsSlider = function () {
    };

    XX.prototype.initialize = function () {
        var self = this;
        $(function () {
            self.bindEvents();
        })
    };

    root.Page = XX;

}(window));

//初始化(为什么要初始化?)
new Page();

我之前写js是这样的：

$(function() {
    index.init();
});

var index = {
    //初始化
    init: function() {
        var self = this;
        self.getDesk(0);
        self.tabClick();
    },
    //标签点击事件
    tabClick: function() {

    },
    //获取餐台数据
    getDesk: function(rsid) {

    },
    //获取图表数据
    getChart: function() {

    }
},
//选取餐台
selectedDesk = function(current, dodid, ddid) {

},
//确认重新结账
confirmAfresh = function() {

}

Answer 1

这个看个人的爱好，有人喜欢面向对象的写法

有些喜欢面向过程的写法。

至于那种写法好，我个人偏向OO风格。

Answer 2

原先也想过要面向对象来组织，后来还是作罢。
因为就没有这个必要啊。
建议一个功能，单独一个模块。

// 下拉菜单
(function(){

})();
// 浮层
(function(){

})();

若有些模块需要通信，类似require那样，抽取模块，暴露接口，然后调用。
当然，对于组件来说，面向对象则是有必要的。
页面的一些功能，本身独立的，八竿子打不着，非要用面向对象来组织到一起，岂不是很坑？

Answer 3

改编一句名言：
“抛开剂量谈毒性的都是耍流氓”
－》》
“抛开需求谈设计的都是耍流氓”

－－－－－－－－－

就lz给的例子来说，完全就是个人习惯问题。因为在这个例子中oo完全没有任何优势，只是为了oo而oo。

当然lz的代码得考虑考虑全局变量问题，想想人家为什么用闭包。

当然回到最上面的话，“抛开需求谈设计的都是耍流氓”啊，如果你的页面只需要一个alert('抛开需求谈设计的都是耍流氓')的话，你写在dom里都行的啊，逃。。。。

Answer 4

可说的太多，只挑一点：

当我们开始设计对象，那么有很多原则都是值得考量的，比如说单一责任原则。

在你的例子，你能说清楚 XX 到底代表什么么？根据你的代码：root.Page = XX;，XX 代表的是页面对吗？你是否考虑过，站在一个很高的层面上统观全局，对你的应用而言“一个页面意味着什么？”

比方说你有 XX.prototype.newsSlider，这是不是意味着所有的页面都会有 Slider？

若否，那为什么关于 Slider 的逻辑要属于抽象级别更高的 Page？
若是，那如果一个 Page 会有多个 Slider 怎么办？再 new Page()？那 Page 就不是 Page，而是一个自带 bindEvent 方法（以及其他更多……）的 Slider 而已。

这个例子说明：Slider 和 Page 至少是不同抽象层面上的两个独立的实体，你的想法先不说是否使用，仅这一点就违反了之前说的单一责任原则。如果你这么写仅仅是因为在当前页面上有幻灯，所以 Page 要有 Slider，那就成了“为 OO 而 OO” 了，等到了下一个页面功能不同的时候，你又能写出一个完全不同的 Page 来。

Page，你知道的太多啦！不可重用，无理抽象，过度耦合……这样的 OO 有什么用处？

Answer 5

对 OO 理论方面的概念不太熟, 只说下个人的经验.

如果页面上都是 DOM 操作, 我倾向于认为这些仅仅是脚本,
而脚本很可能写起来就是胶水一样做这个做那个, 仅仅是组织得好一点而已.

对于前端大的应用, MVC 是个好的选择,
比如 Backbone 里对 Model, Collection, Router, View 进行了区分.
其他 MV* 框架也类似, 写代码的时候都考虑怎么设计数据结构, 怎么嵌套 View 等等.
我想题主如果按照 MVC 的套路对应用进行规划, 整理可以清晰很多.

菜单 jQuery 组件主要就是 View 当中的 component, 作为组件独立运行.