用面向对象的编程思想去写js

有时候，还会看到一些搞前端的朋友或者苦逼被迫兼职写前端的后端朋友，去写js的时候，还是一个方法一个方法的去罗列。

就像下面这样：

function click1(){
    alert("1");
}
function click2(){
    alert("2");
}
function click3(){
    alert("3");
}

或者高级一点的就这么写：

var MyClass;

MyClass.prototype.add = function () {
    alert("this is add");
};

MyClass.prototype.reduce = function () {
    alert("this is reduce");
};

其实这种方法已经很不错了，就是用面向对象的编程思想去写的，但是感觉还是罗列，不够完美，后期维护找起来也比较麻烦。

在这里，推荐一种更直观更系统的写法以供大家参考。

var MyClass = {
    //定义属性
    //定义私有属性
    _flag : true,
    _arr : [],

    //定义公有属性（在外部可调用）
    tips : "hello world",

    //定义私有方法
    _init : function () {
        this._flag = false;
    },

    //定义公有方法（在外部可调用）
    myAdd : function () {
        this._init();
        if (!this._flag){
            alert(this.tips);
        }
    }
};

$(function () {
    MyClass.myAdd();
});

以一个类封装所有的属性和方法，如果只允许在类内部调用的属性和方法用“_”来加以区分。

需要注意的问题是，一定要注意this的作用域~~~

怎么样，这样写是不是感觉立马高大上棒棒哒啦~~

---

欢迎大家加入我的QQ群：484805249 来一起讨论前端技术，互相学习。写的不到位的地方，还请指教。