我的JavaScript设计模式

前言

JavaScript的设计模式有很多，比较常用的是单例模式、模块模式和观察者模式。这里不一一介绍这些模式的用法和场景。记住，设计模式没有好坏，只有适合不适合。下面简单介绍一下我研究出来的一种JavaScript编码模式，这个模式牛逼谈不上，但是用来管理你的前端项目还是挺方便，感兴趣的同学往下看。

针对单页应用

单页应用实现的原理是通过JavaScript控制页面的显示和隐藏，好看点的话再加点转场效果。
这里我还是以单例模式为入口，因为单例模式的性能还是挺不错的，而且容易看懂。

    var index={
        /*下面定义单例模式下需要‘全局’调用的变量*/
        APIURL: 'http://.....com',
        sStorage:window.sessionStorage,
        lStorage:window.localStrorage,
        pageCode: 0,
        pageStack: [],
        /**
         * [页面容器]
         * @type {Object}
         */
        pageContainer: {
            home: {
                selector: '#page-index',
                sub: false,
                code: 0
            },
            activity:{
                selector:'#page-activity',
                sub:false,
                code:18
            }
        }
    };
    /*下面开始定义整个应用里独立的模块,注意一下：单页应用通常是以页面分模块，通用的功能写在util模块里*/
    /**
        * [工具模块]
        * @param {[type]} $    [jQuery对象（加快jQuery选择器速度）]
        * @param {[type]} self [单例上下文]
    */
    index.Module_util=function($,self){
        /*封装模块下的私有变量*/
        var _wraper=$('.ui-page');
        /*封装私有的方法*/
        function doSomething(){
            //.....
        }
        /*可供外部调用的公共方法*/
        return{
            /**
                * [过滤空对象]
                * @param  {[type]} obj [要过滤的对象]
                * @return {[type]}     [对象自身或空字符串]
            */
            filterNull: function(obj) {
                if (obj) {
                    if(obj=="undefined"){
                        return '';
                    }else{
                        return obj; 
                    }
                } else {
                    return '';
                }
            }
            //.......
        };
    };
    /**
        * [首页模块]
        * @param {[type]} $    [jQuery对象]
        * @param {[type]} self [单例上下文]
    */
    index.Module_home=function($,self){
        var _trigger=$('.icon_home');
        return{
            /*初始化模块*/
            init:function(){
                //......
            }
        }
    };

    /**
        * [页面事件入口]
        * @return {[type]} [description]
    */
    index.eventPage=function($,self) {
        /*先把模块实例化*/
        var util=new self.Module_util($,self),
            home=new self.Module_home($,self);
        /*为了方便区分页面，下面用闭包封装*/
        var page_home=(function(){
            home.init();
        })()
    };
    /**
        * [页面返回跳转]
        * @return {[type]} [description]
    */
    index.pageRuturn=function() {
        var self = this;
        $('#art-content').quickOn('click', '.icon-back', function() {
            var _self = $(this);
            /*根据页面状态码进行相应返回跳转*/
            switch (self.pageCode) {
                case 0:
                    //.....
                    break;
                case 1:
                    //......
                    break;
                default:
                    break;
            }
        });
    };

    /**
        * [首屏模板数据渲染,如果你用模板引擎的话]
        * @return {[type]} [description]
    */
    index.fGetData=function() {
        var self = this, //缓存this，上下文指向单例IndxModule
            util=new self.Module_util($,self);
        $.ajax({
            type: "get",
            async: false, //注意，因为是首屏渲染，这里必须同步请求
            url: self.APIURL + '/index/index.json',
            data: {},
            success: function(res) {
                if(res){
                    var data=res.data;
                    //这里我用了artTemplate
                    var art = template('art-main', data);
                    $('#art-content').html(art);
                }
            }
        });
    };
    /**
        * [单例初始化入口]
        * @return {[type]} [description]
    */
    index.init=(function(){
        /*缓存单例的上下对象和jQuery对象*/
        var self=this,
            $=jQuery;
        /*调用单例需要执行的模块*/
        self.fGetData();
        self.eventPage($,self);
        self.pageRuturn();
    })();

针对单个页面

和上面差不多，删除pageRuturn，而且模块不是按照页面来分而是按照页面结构，分得更细一点而已，同样的，通用的功能写在util模块里面。当然这也不是千篇一律，你可以根据实际情况添加或删除些模块。
希望对你有点帮助 ^_^。

缺点

很明显，这样的编码模式虽然层次感和维护性好，但是代码容易出现冗余，尤其是针对单页应用会让代码变得很长（惭愧啊，我上次的webApp项目，单例模式里的代码已经快到5000行了）。嘿嘿，不过这也是慢慢提升的过程，接下去我要好好研究下 require.js和sea.js，把模块异步加载的功能加进去，创造一个牛逼的JavaScript编码模式 ^_^ 。

众人拾柴火焰高，感兴趣的同学快来加入这个创造过程吧！
@我微信 Jafeney