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>这样的话,每个人对自己开发的一块非常熟悉,维护上也非常方便
- 上一篇 »webpack务虚扫盲
- 下一篇 »从零开始写JavaScript框架（一）
相关推荐
*JavaScript标准参考教程 - 阮一峰
页向对象编程的模式（继承&模块化）
时间：2024-04-27 02:32
