你的位置:首页 > Java教程

[Java教程]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     console.log(Cloud.PageStringHelper.StringCut("asdasdasd", 5, "..."));    console.log(Cloud.PageStringSplitHelper.stringSplit("1,2,3",","));  </script></body></html>

这样的话,每个人对自己开发的一块非常熟悉,维护上也非常方便