JavaScript结构三层——思想快速介绍

本文版权归博客园和作者吴双本人所有，转载和爬虫请注明原文地址 http://www.cnblogs.com/tdws/,我是博客园蜗牛，我们共同进步。

今天讨论的是什么

如果你的工作中需要写JavaScript，而你的JavaScript代码又与业务相关。我想无非就是一下三类功能：

1.请求后台数据

2.渲染后台数据，拼接Html

3.事件操作

当然你如果封装JS底层的控件，不在我们今天的讨论范围。你也许写过单文件上千行的JS,你也许维护过几千行的JS，每次重新看起来，或者增删改功能吃力吗，如果你说不吃力，那这篇文章不适合你，如果有些吃力，我们一起来探讨今天的话题。今天要讨论的是，当你需要写如上三种JS代码时，你如何处理他们之间的关系？

提醒：如果你还不懂JS对象或者简单的封装，请移步我的这两篇分享：

1.JavaScript 闭包   http://www.cnblogs.com/tdws/p/5944254.html

2. JavaScript OOP http://www.cnblogs.com/tdws/p/5947693.html

代码整洁之道

仅仅是整洁的代码真的有用吗？

我想说整洁的代码只是一部分。这个整洁所包含的，我认为是:

1.一个方法只做一件事情，一个方法的行数一定要对自己做严格要求，多余的事情，另起一个方法，并配有合适的命名。

举个例子来说，我在ajax请求都数据，回调方法可能需要对返回结果做一定的逻辑处理，拼接处理。在这个时候，我是很反对直接在回调方法中写一长串处理逻辑的，一定要用一个新的function来处理。

2.坚决杜绝全局变量。

有的人可能认为，如果我注意点，全局变量并不会带来什么坏的影响。这样说没毛病，但是全局变量带来的难以阅读和难以维护性是不可估量的。

3.绝不在页面底部或者$(function(){});或者onload中直接以$(xxx).click(function(){});这种形式来注册事件。也绝不在html拼接成功后的方法中以上述方式注册事件。

个人推崇的方式是，一定要将事件注册封装成方法。然后再去调用方法。

其余的整洁规范不做赘述，代码整洁这种东西，要在不断的实践中，用心去思考和体会，并且亲手优化和修改，只有一套理论摆着这里，收获是0。

JavaScript代码分"层"

下面要讨论的这种方式，一定是基于上述代码整洁之道的基础之上。开篇的三个常用JS代码情形，你想到办法如何将他们分离解耦，如何处理好他们之间的关系了吗?

比方说，你在做一个互联网新闻网站。

对于这样的一个新闻列表，你可能需要Ajax对数据做增删改查操作，你也需要从后台读取数据并且渲染到页面，你也需要为页面上的一系列按钮或者什么控件注册一系列的操作事件。

这简单啊，这有什么难的！但是当你页面中新闻数据仅仅是一个小模块的时候，其他模块可能还有用户信息模块，评论模块，点赞模块，各种分类模块，广告招商模块，各种热门模块。如果想象不到复杂性，可以去网易新闻官网看看。

当然在这样的情况下，你可能说，分离js呀，js模块化，js合并压缩。是的，这些都是不错的解决方案。但是，你如何保证一个单独的JS或者模块化后的JS依然保持慢条斯理，结构清晰？或者说如果这些代码真的要写在一个JS里，如何写，如何维护。

有的老司机可能说，你不会是随便来谈谈MVVM吧？不是。在数据请求，数据渲染，事件注册这三种情形，在复杂的业务逻辑之下，我们要做的就是解耦分离。下面是我个人的解决方案，是我在不断的实践和尝试过程当中，感到受用，好用，一直在用的一种方案：

将上述三种代码分层，一个JS对象就是一“层”。每个业务点基本都分为这三层。

//操作
var newsOption = {
    //详情按钮
    detailBtnClick: function () {

    },
    //移除按钮
    removeBtnClick: function () {

    },
    //发布按钮
    publishBtnClick: function () {

    },
    //滑动加载更多
    scollLoadMore: function () {
        this.loadMore();
    },
    //点击加载更多
    btnLoadMore: function () {
        this.loadMore();
    },
    //加载更多
    loadMore: function () {

    }
}

//数据
var newsData = {
    //变量
    currentPageIndex: 1,
    currentPageSize: 10,
    //获取新闻列表
    getNewsList: function () {

    },
    //获取单个新闻
    getSigleNews: function () {

    },
    //移除新闻
    removeNews: function () {

    }
}

//渲染
var newsRander = {
    //渲染新闻列表
    renderNewsList: function () {

    },
    //渲染新闻详情
    renderNewsDetail: function () {

    }
}

最后的阐述

上面就算是伪代码吧。你可以看到我将js分为三层，操作，数据，渲染。你也可以看到，我们可以告别全局变量，和数据相关的全局变量，你将其存在相应的Data层下。业务相关的全局变量，你将它存在操作层下。渲染拼接工作就交给render来做，我通常渲染工作为了达到再度分离js html,我使用jquery.tmpl.js。你所有新闻相关的数据操作都应该放在newData层下，你所有操作事件应该写在newsOption层下。当你来了第二个业务点时，比如评论模块，那你就需要一套新的分层：commentOption,commentData,commentRender.

可能看完你想打我，我看了这么半天你就分享这点东西？但是相信我，这样的分层，对你自己而言赏心悦目，维护方便，开发快捷，调试容易。对他人而言，别人不会在背后骂你的代码咯。

如果我的分享对你有点点滴帮助，欢迎点赞支持，也欢迎点击下方红色关注，我将持续分享。为你自己点赞，为你整洁的代码点赞。