我的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