JS | js简单模块化开发

作者的话

前端大神，请忽略本篇。。。哈哈哈！

前段时间部门内部进行了关于js模块化开发培训，作为主讲人简单的结合在近期接触到的项目，进行了一个时长为一个小时的讲解，也是本人第一次做类似的培训，经验确实不足，许多地方可能在当时讲解得到时候不够清楚，所以后续又进行了整理，归纳了整个培训的最核心内容。其实整理下来内容也不是很多，往细讲也不便大家去理解，实际项目中也是用不到，后续想深入了解也可以自行去学习。

本篇主要讲 js中如何书写一个类，利用prototype属性扩展类，结合jquery来理解一些简单的扩展类方法和静态方法等，深入的朋友，可以去了解jq插件机制。

直接看代码里面的注释吧！确实最近挺冷（懒）的！

/** 
 * js 模块化开发示例介绍
 * @author 彭思文/[email protected]
 * 
 */

/**********************************************prototype**************************************************/
// 定义一个Person类 
var Person = function() {
    // 通过this. 来给这个类增加内部属性
    this.a = "属性"
    // 内部通过this调用内部方法
    this.method1()
}
// 通过prototype去增加它内部属性或者方法
// this只想本身
Person.prototype = {
    // 通过prototype增加方法必须重写构造方法，并且传入本身对象
    constructor: Person,

    method1: function() {

    },

    method2: function() {

    }
}
// 通过new来获取这个对象的实例
var person1 = new Person();
// 通过实例来调用对象的方法
person1.method1();



/**********************************************jQuery extends**************************************************/

jQuery.extend()
// 等价于
$.extend();

// 有以下三个用法
// 1. 给jQuery添加静态方法
jQuery.extend({
    min: function(a, b) {
        return a < b ? a : b;
    },
    max: function(a, b) {
        return a > b ? a : b;
    }
});
jQuery.min(2, 3); // 2 
jQuery.max(4, 5); // 5


// 2. 扩展某个类
// 比如上面的增加类方法就可以像下面那样写

var Person = function() {
    // 通过this. 来给这个类增加内部属性
    this.a = "属性"
    // 内部通过this调用内部方法
    this.method1()
}

// 确实你会发现这样 就可以免去再写构造器那个方法
$.extend(Person.prototype, {
    method1: function() {

    },
    method2: function() {

    }
})


// 3. 合并两个对象
var object1 = {
    apple: 0,
    banana: { weight: 52, price: 100 },
    cherry: 97
};
var object2 = {
    banana: { price: 200 },
    durian: 100
};
/* object2 合并到 object1 中 */
$.extend(object1, object2);


/**********************************************jQuery fn extends**************************************************/
// jq的这个方法其实就是给jq的实例对象添加方法
// jq的实例获取通常是通过 $("#input1") 来 获取
$.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
});       
$("#input1").alertWhileClick(); // 页面上为：    

看到这确实应该没有问题，基本用法大概懂了，如何结合这些，利用面向对象的思想去编写更加利于维护的前端代码，就需要自己多去思考和实践了，大家加油！

关注我