JavaScriptモジュール化開発例

3066 ワード

JavaScript

最近はJavaScriptの開発例に触れました.ここで皆さんと共有してみます.
例:私達のチームがJsファイルを書いている時、あなた一人で書いたJSコードは自分で分かります.メンテナンスもできますが、他の人があなたのJSを拡張したいなら、同じJSファイルに書いたら、混乱してしまうかもしれません.メンテナンス上、極めて不便です.JSモジュール化によって開発できます.
1.もしこれが JsHelperOne.js

//              

; (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);

フロントページで呼び出しを行います.

<!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>

このようにすれば、一人一人が自分で開発したものにとても詳しくて、メンテナンスにもとても便利です.

javascriptの中のcallを詳しく説明します.