JavaScript模块化开发实例

时间 2020-08-10

原文原文链接

最近接触了一些JavaScript开发的例子,在这里与你们一块儿分享一下:javascript

例子:当咱们一个团队在写Js文件的时候,你一我的写的JS代码本身能够看懂也能够维护,可是别人想对你的JS进行扩展的话,若是都在同一个JS文件上写的话,那样可能会很乱,形成维护上极其不方便,这时咱们能够经过JS模块化开发html

1.假如这是 JsHelperOne.js java

//沙箱模式  防止污染外部变量
; (function (window) {
    //定义一个对象 假如这个对象已存在与window下,那么咱们就能够直接使用
    var Cloud = window.Cloud || {};
    //在这个对象上定义属性,而这个属性是一个对象
    Cloud.PageStringHelper = {
        StringCut: function (value,maxLength,sign) {
            if (value.length <= maxLength)
                return value;
            else
                return value.substr(0, maxLength) + sign;
        }        
    };
    //使外部只有Cloud能够被访问
    window.Cloud = Cloud;
})(window);

2.假如B同窗想对这个JS进行扩展的话,那么他就能够模块化

;(function (window) {
    var Cloud = window.Cloud || {};
    Cloud.PageStringSplitHelper = {
        stringSplit: function (value,sign) {
            return value.split(sign);
        }
    };
    window.Cloud = Cloud;
})(window);

在前台页面进行调用 ui

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <script src="JsHelperTwo.js"></script>
    <script src="JsHelperOne.js"></script>

    <script type="text/javascript">
        console.log(Cloud.PageStringHelper.StringCut("asdasdasd", 5, "..."));
        console.log(Cloud.PageStringSplitHelper.stringSplit("1,2,3",","));
    </script>
</body>
</html>

这样的话,每一个人对本身开发的一块很是熟悉,维护上也很是方便spa