最近接触了一些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模块化开发实例的更多相关文章

  1. Javascript模块化开发－轻巧自制

    Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...

  2. javaScript 面向对象开发实例

    javaScript 面向对象开发实例 这个是结合require的模块化开发,首先创建构造函数: //test.js 1 function Test(lists) { var config={ nam ...

  3. Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。

    随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...

  4. Javascript 模块化开发上线解决方案

    最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...

  5. JavaScript模块化开发整理

    在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...

  6. Layui 弹出层组件——layer的模块化开发实例应用

    Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...

  7. JavaScript模块化开发的那些事

    模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...

  8. 详解JavaScript模块化开发

    什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...

  9. （转）详解JavaScript模块化开发

    https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...

随机推荐

  1. 教你用笔记本破解无线路由器password

    近期非常多人问我怎么破解WiFipassword…看来大家都对免费的东西比較有兴趣.要么也可能是我太招摇了…囧… 好吧,我就写篇小小的教程,看完后,你应该可以破解大部分无线路由器password了,写 ...

  2. 深入理解jQuery插件开发(转)

    如果你看到这篇文章,我确信你毫无疑问会认为jQuery是一个使用简便的库.jQuery可能使用起来很简单,但是它仍然有一些奇怪的地方,对它基本功能和概念不熟悉的人可能会难以掌握.但是不用担心,我下面已 ...

  3. 【转】获取Sprite的实际Rect

    判断点击是否点击在了一个精灵上, 其实就是判断一个点是否在一个矩形内. cocos2d-x的2.0.2版本可以使用CCRect的函数 bool CCRect::containsPoint(const ...

  4. C#异常之（已有打开的与此 Command 相关联，已有打开的与此命令相关联的 DataReader，必须首先将它关闭。）

    异常提示:“System.InvalidOperationException”类型的异常在 System.Data.dll 中发生,但未在用户代码中进行处理  其他信息: 已有打开的与此 Comman ...

  5. Oracle常用查询命令

    Oracle查询完整格式如下: Select  *  from XX where XX group by YY having XX order by YY Select count(*), XX fr ...

  6. Android 设置ListView不可滚动 及在ScrollView中不可滚动的设置

    http://m.blog.csdn.net/blog/yusewuhen/43706169 转载请注明出处: http://blog.csdn.net/androiddevelop/article/ ...

  7. flexpaper 开源轻量级的在浏览器上显示各种文档的组件

    FlexPaper是一个开源轻量级的在浏览器上显示各种文档的组件,被设计用来与PDF2SWF一起使用, 使在Flex中显示PDF成为可能,而这个过程并无需PDF软件环境的支持.它可以被当做Flex的库 ...

  8. html-----016---HTTP 状态消息

    HTTP 状态消息 当浏览器从 web 服务器请求服务时,可能会发生错误. 从而有可能会返回下面的一系列状态消息: 1xx: 信息 消息: 描述: 100 Continue 服务器仅接收到部分请求,但 ...

  9. html-----009

    </head> <!-- 通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面. <p> 垂直框架</p> 本例演示:如何使用三份不同的文档制作一个垂直框 ...

  10. ios专题 - 委托模式实现

    在ios中,委托模式非常常见,那委托模式是什么? 委托模式是把一个对象把请求给另一个对象处理. 下面见例子: #import <UIKit/UIKit.h> @protocol LQIPe ...