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