javascript 模块化编程-面向对象的应用

发表于   |   分类于   |     |   阅读次数

JS面向对象编程的写法习惯，给JS功能模块化的管理带来非凡好处。明确清晰的代码分块分类，使得在日常使用修改、团队合作开发中更加得心应手，实在美妙。

通常，一个较大的JS功能模块，我们可以独立出一个js文件；在需要使用的时候，通过JS模块化工具require.js来进行管理加载。详情请参考之前写过的一篇学习文章 require.js 实例入门 ，这里就不重复了。

函数封装

然而，在一个较长的JS文件中，通常也存在着很多小小的功能模块，以往一般的做法是：不断地定义了许许多多的 function fun1(){} ，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//标签获取
function tag(tag){
    return document.getElementsByTagName(tag);
}
//id获取
function id(oId){
    return document.getElementById(oId);
}
//class获取
function getByclass(sClass){
    var aResult=[];
    var aEle=document.getElementsByTagName('*');
    for(var i=0;i<aEle.length;i++){
        if(aEle[i].className==sClass){
            aResult.push(aEle[i]);
        }
    }
    return aResult;
}
//字符串截取
function getSubstr(str,len){
    var str=(str.length > len) ? str.substr(0,len)+'...' : str;
    return str;
}

面向对象

接下来，通过一个小小实例，来说明JS面向对象的的写法习惯。

实例 object_pro 简介

首先，新建 demo 的目录文件夹 object_pro，并在其下新建以下文件：

1
2
3
4
5
6
7
|-object_pro
    |-css
        index.css
    |-js
        index.js
        jquery-1.12.2.min.js
    index.html

在本实例中，我们将通过面向对象的写法、把各个JS功能块进行模块化。主要JS功能模块有：

  1. 通过标签tag获取元素对象
  2. 通过id获取元素对象
  3. 通过class获取元素对象
  4. 按指定长度截取字符串并省略号
  5. 实现弹窗功能

index.css 主要是弹窗的样式设置；
index.html 的html结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>面向对象编程</title>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</head>
<body>
    <h4>JS面向对象编程</h4>
    <h5>1、test :  Tool的tag</h5>
    <label>当前Data.data3值：</label><span>01</span>
    <h5>2、test :  Tool的id</h5>
    <label>当前Data.data1值：</label><span id="spa">02</span>
    <h5>3、test :  Tool的getByclass</h5>
    <label>当前Data.data2值：</label><span class="spa">03</span>
    <h5>4、test :  Tool的getSubstr</h5>
    <p id="str">字符串初始化截取字符串初始化截取字符串初始化截取</p>
    <h5>5、test :  Func的弹窗popShow</h5>
    <a id="pop-click" href="javascript:void(0);">点击弹窗</a>
    <!-- 弹窗结构 -->
    <div id="pop-back"></div>
    <div id="pop-content">
        <div class="pop-head">
            <h4>头部头部</h4>
        </div>
        <div class="pop-body">
            <p>内容内容内容内容内容内容内容</p>
        </div>
        <div class="pop-foot">
            <button id="pop-close">关闭</button>
        </div>
    </div>
    <!-- 弹窗结构 -->
</body>
</html>

index.js的面向对象写法

在 index.js 文件中，主要分成三大块，分别是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//一、定义全局变量
var Data={
    //...
};
//二、首页JS功能
var Index={
    init:function(){
        //页面载入初始化的JS操作
    }
    //...
}
//三、功能模块
var Func={
    //实现弹窗等功能模块
}
//四、工具模块
var Tool={
    //实现通过tag/id/class获取元素对象，字符串截取等工具小模块
}
//五、执行入口
window.onload=function(){
    Index.init();
};

index.js 完整代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
//一、定义全局变量
var Data={
    data1:11,
    data2:12,
    data3:13
};
//二、首页JS功能
var Index={
    //init初始化
    init:function(){
        //显示Data的初始值
        Tool.tag('span')[0].innerText=Data.data1;
        Tool.id('spa').innerText=Data.data2;
        Tool.getByclass('spa')[0].innerText=Data.data3;
        //字符串超出截取
        Tool.id('str').innerText=Tool.getSubstr(Tool.id('str').innerText,20);
        //点击出现弹窗
        Tool.id('pop-click').onclick=function(){
            var txt1='1这是自定义的头部',
                txt2='这是自定义的内容自定义的内容自定义的内容';
            Func.popShow(txt1,txt2);
        };
    }
};
//三、功能模块
var Func={
    popShow:function(headTxt,bodyTxt){
        //弹窗的出现，样式
        $('#pop-back').css({display:'block'});
        $('html').css({overflow:'hidden'});
        $('#pop-content').animate({top: 35, opacity: 'show'}, 150);
        //弹窗内容修改
        $('.pop-head').text(headTxt);
        $('.pop-body').text(bodyTxt);
        //弹窗的关闭，样式
        $('#pop-close,#pop-back').on('click',function(){
            $('#pop-content').animate({top: -35, opacity: 'hide'}, 150,function(){
                $('#pop-back').css({display:'none'});
                $('html').css({overflow:'auto'});
            });
        });
    },
    func1:function(){},
    func2:function(){}
};
//四、工具模块
var Tool={
    //自定义获取获取tag
    tag:function(tag){
        return document.getElementsByTagName(tag);
    },
    //自定义获取id
    id:function(oId){
        return document.getElementById(oId);
    },
    //自定义获取class
    getByclass:function(sClass){
        var aResult=[];
        var aEle=document.getElementsByTagName('*');
        for(var i=0;i<aEle.length;i++){
            if(aEle[i].className==sClass){
                aResult.push(aEle[i]);
            }
        }
        return aResult;
    },
    //字符串截取省略
    getSubstr:function(str,len){
        var str=(str.length > len) ? str.substr(0,len)+'...' : str;
        return str;
    }
};
//五、执行入口
window.onload=function(){
    Index.init();
};

javascript面向对象基础，请参考之前的一篇：JS面向对象之对象的创建

淘宝镜像官网：淘宝 NPM 镜像