优雅的js

比如我们要写一个幻灯片。思路我们有了，先初始化，然后需要一个变换函数，可能我们还需要一些渐变的效果，所以还需要一个渐变的函数，最后我们还需要自动轮播。有了思路，我们的代码可能大概会这样：

        function init() { //初始化
            ...
            pos();
        }
        function pos () { // 每张图片轮换函数
            ...
            window.timer = setInterval(function(){anim()}, 20);
        }
        function anim () { // 渐变的函数
            ...
            if(finish) { //变换结束
                clearInter(timer);
                auto();
            }
        }
        function auto () {
            setInterval(function(){pos()}, 4000);
        }
        
        /* init */
        init();

　　这样的方式我们大概可以理解为一种过程式编码。当然这样的风险有很多，比如，变量名污染，模块化管理，多实例重用等等都是问题。所以它显然不够优雅。我自己常用的方式：

        var slider = function () {
            var init = function () {
                ...
                this.pos();
            }
            init.protorype = {
                pos : function () {
                    //TODO
                },
                anim : function () {
                    //TODO
                }
                auto : function () {
                    //TODO
                }
            }
            return init;
        }();
        /* init */
        new slider();

　　至于为什么会推荐这种构造函数/原型 的混合方式来构建，可以参考之前的“我所了解的类构造方式”以及“动态原型”扩展的文章。另外还有种抽象构造类的方式也是我挺喜欢的：

    var Class = {
        create: function () {
            return function () {
                return this.init.apply(this, arguments);
            }
        }
    };
    
    var slider = Class.create();
    slider.prototype = {
        init: function () {
            //TODO
        }
    }
    /* init */
    new slider();