Javascript类的写法问题

Question

var Mi = function () {
    /**
     * Loader
     * @param $mode show|hidden
     * @returns {boolean}
     */
    var loader = function ($mode) {
        var $loading = jQuery('#loading');
        $mode = $mode || 'show';        if ($mode === 'show') {
            if ($loading.length) {
                $loading.fadeIn(250);
            } else {
                jQuery('body').prepend('<div id="loading"><div class="loading-box"><i class="fa fa-2x fa-cog fa-spin"></i> <span class="loding-text">请稍等...</span></div></div>');
            }
        } else if ($mode === 'hide') {
            if ($loading.length) {
                $loading.fadeOut(250);
            }
        }        return false;
    };
    /**
     * Reloader
     */
    var reloader = function () {
        $('.reloader').click(function () {
            location.reload();
        });
    };
};
Mi.loader()调用时出错Mi.loader is not a function
提示Mi.loader不是函数

Answer 1

你的定义方式不对，应该是var Mi = new function () {
    /**
     * Loader
     * @param $mode show|hidden
     * @returns {boolean}
     */
    this.loader = function ($mode) {    };
    /**
     * Reloader
     */
    this.reloader = function () {    };
};或者
var Mi = (function (obj) {
    /**
     * Loader
     * @param $mode show|hidden
     * @returns {boolean}
     */
    obj.loader = function ($mode) {    };
    /**
     * Reloader
     */
    obj.reloader = function () {    };
    return obj;
})({});

Answer 2

首先你需要了解JavaScript的对象。
JS创建对象的两种形式：　　1：对象字面量var o = {name : 'Jack', age : 18};
console.log(o.name);
console.log(o.age);　　这一种形式就像是构建一个JSON，这种形式创建出来的对象相当于通过Object这个构造函数new出来的对象　　2:构造函数function Person(name, age) {
    this.name = name;
    this.age = age;
}
var p = new Person('Lucy', 18);
console.log(p.name);
console.log(p.age);       这种形式创建对象跟很多其他语言都有点相似，它是通过new关键字创建出来的对象，new 关键字后面紧跟着的是构造函数，这很像Java，不过Javanew对象是通过类的构造函数创建的，但是JS没有类。而在你的写法里面，只是定义了一个变量，给其赋值了一个函数，函数里面有两个方法loader，reloader，如果你想调用这两个方法，只能在这 
个函数内部调用。而你想要通过Mi.loader,Mi.reloader的形式调用是没用的，你需要讲Mi定义成一个对象，或者通过构造器new一个对象赋值给Mi。
如//1、
var Mi = {
   loader  : function(){
   ....
   },
   reloader : function(){
   ....
   }
}
Mi.loader();
Mi.reloader();
//2、
function Mi(){
   //添加两个属性，属性值是函数 
   this.loader = function(){
    ....
    }
    this.reloader= function(){
    ....
    }
    //如果你使用var来定义，那么你定义的东西就相当于是私有的，只能函数内部使用。如：
    var  fn = function(){
    ....
   }
}
var mi = new Mi();
mi.loader ();
mi.reloader();你可以去看看这个文章：JavaScript创建对象

Answer 3

var Mi = function () {
    /**
     * Loader
     * @param $mode show|hidden
     * @returns {boolean}
     */
    var loader = function ($mode) {
        var $loading = jQuery('#loading');
        $mode = $mode || 'show';
 
        if ($mode === 'show') {
            if ($loading.length) {
                $loading.fadeIn(250);
            } else {
                jQuery('body').prepend('<div id="loading"><div class="loading-box"><i class="fa fa-2x fa-cog fa-spin"></i> <span class="loding-text">请稍等...</span></div></div>');
            }
        } else if ($mode === 'hide') {
            if ($loading.length) {
                $loading.fadeOut(250);
            }
        }
 
        return false;
    };
    /**
     * Reloader
     */
    var reloader = function () {
        $('.reloader').click(function () {
            location.reload();
        });
    };
    return {
        loader:loader
    }
};(new Mi()).loader();

Answer 4

class Mi {
     //...
}