最近接觸了一些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>
這樣的話,每個人對自己開發的一塊非常熟悉,維護上也非常方便