笔记&讨论：什么是模块化开发以及最基本的应用

最新推荐文章于 2024-01-12 10:20:05 发布

cK_round

最新推荐文章于 2024-01-12 10:20:05 发布

阅读量281

点赞数 1

分类专栏：笔记文章标签：模块化 seajs

本文链接：https://blog.csdn.net/qq_38712750/article/details/72084462

版权

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

相信大家在合作开发的时候会遇到一个问题，就是设置参数的局限性。比如说成员1用了var a，而忘了说，成员2页用了var a。这时如果是局部变量还好说，会被释放，但是如果是全局变量的话就会导致全局变量被影响。

合作开发容易发生冲突‘。

那么有的人就想利用块级作用域来解决问题，但是这样子就又共用不了模块。

又有的人会想，用命名空间来解决办法，虽然能决绝问题，但是难免某些人记错导致小机率会产生冲突。

这些问题对于企业来说问题是极其严重的！

这时，脑子灵光的人都会想到，用块级作用域以及命名空间互相结合来解决问题。

因此就诞生了模块化开发！比如说requirejs,seajs,commonjs...

就拿SEAJS来说吧

seajs的使用
。定义模块

define(function( require, exports, module ){
function name(){

}
//通过exports把name方法提供给外部使用
exports.name = name;
});

。引用模块
seajs.use('模块的路径', function(ex){});

这样就可以做到在内部创建的变量名字不会影响到全局变量，又可以通过调用的方式引入。

我们通过一个例子来说明。

实现拖放div、改变div的大小、限定拖放范围。

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1 {
            position: absolute;
            width: 200px;
            height: 200px;
            background: red;
            display: none;
        }

        #box1 div {
            width: 40px;
            height: 40px;
            background: green;
            position: absolute;
            right: 0;
            bottom: 0;
        }

        #box3 {
            position: absolute;
            right: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: green;
        }
    </style>
    <script src="sea.js"></script>
    <script>
        seajs.use("main.js");
    </script>
</head>
<body>
<input type="button" value="缩放" id="btn">
<div id="box1">
    <div id="box2"></div>
</div>
<div id="box3"></div>
</body>
</html>

然后是控制id为box3的div拖动方法文件：

/***********box3***************/

define(function (require, exports, module) {
    function drag(obj) {
        var disX = 0;
        var disY = 0;
        obj.onmousedown = function (ev) {
            var oEvent = ev || event;
            disX = oEvent.clientX - obj.offsetLeft;
            disY = oEvent.clientY - obj.offsetTop;
            document.onmousemove = function (ev) {
                var oEvent = ev || event;
                var l=oEvent.clientX - disX;
                var t=oEvent.clientY - disY;
                var maxL=document.documentElement.clientWidth-obj.offsetWidth;
                var maxX=document.documentElement.clientHeight-obj.offsetHeight;
                var border = require("./border.js").border;
                var x=border(l,0,maxL);
                var y=border(t,0,maxX);
                obj.style.left = x + "px";
                obj.style.top =  y + "px";
            };
            document.onmouseup = function (ev) {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        }
    }
    exports.drag = drag;
});

控制id为box1以及id为box2的div拖动缩放效果文件：

/*********box1&box2*************/
define(function (require, exports, module) {
    function scale(obj1, obj2) {
        var disX = 0;
        var disY = 0;
        var disW = 0;
        var disH = 0;
        obj2.onmousedown = function (ev) {
            var oEvent = ev || event;
            disX = oEvent.clientX;
            disY = oEvent.clientY;
            disW = obj1.offsetWidth;
            disH = obj1.offsetHeight;
            document.onmousemove = function (ev) {
                var oEvent = ev || event;
                var l = oEvent.clientX - disX + disW;
                var t = oEvent.clientY - disY + disH;
                var minL=obj2.offsetWidth-obj1.offsetLeft;
                var minT=obj2.offsetHeight-obj1.offsetTop;
                var maxL=document.documentElement.clientWidth-obj1.offsetLeft;
                var maxX=document.documentElement.clientHeight-obj1.offsetTop;
                var border = require("./border.js").border;
                var x=border(l,minL,maxL);
                var y=border(t,minT,maxX);
                obj1.style.width = x + "px";
                obj1.style.height = y + "px";
            };
            document.onmouseup = function () {
                document.onmousemove = null;
                document.onmouseup = null;
            };
            return false;
        }
    }
    exports.scale = scale;
});

限定拖放范围的公用模块文件：

/***************公用模块*****************/
define(function (require, exports, module) {
    function border(p,min,max) {
        if (p < min) {
            p = min;
        } else if (p >max){
            p =max;
        }
        return p
    }
    exports.border = border;
});

最后我们把分开的模块整合到一起：

/***************整合文件*********************/
define(function (require, exports, module) {
    var drag = require("./drag.js").drag;
    var oBox3 = document.getElementById("box3");
    drag( oBox3 );
    var oBtn1 = document.getElementById("btn");
    var oBox1 = document.getElementById("box1");
    var oBox2 = document.getElementById("box2");
    var scale = require("./scale.js").scale;
    oBtn1.onclick = function(){
        oBox1.style.display = "block";
        scale( oBox1, oBox2 );
    }
});

通过以上例子我们可以发现，在过程中能够存在着一些相同变量定义名称，但是最后实现效果却互不影响。着就是模块化的魅力之处。

欢迎有想法的你给我留言，我们互相交流分享彼此的学习心得以及体会，促进成长。

cK_round

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
笔记&讨论：什么是模块化开发以及最基本的应用

相信大家在合作开发的时候会遇到一个问题，就是设置参数的局限性。比如说成员1用了var a，而忘了说，成员2页用了var a。这时如果是局部变量还好说，会被释放，但是如果是全局变量的话就会导致全局变量被影响。合作开发容易发生冲突‘。那么有的人就想利用块级作用域来解决问题，但是这样子就又共用不了模块。又有的人会想，用命名空间来解决办法，虽然能决绝问题，但是难免某些人记错导致小机率会
复制链接

扫一扫