最近接触了一些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. [Angular 2] ROUTING IN ANGULAR 2 REVISITED

    Let's say we have a list of contacts, click each contact, we can render a new route to get the detai ...

  2. MySQL【第三篇】数据类型

    一.整型 整型的每一种都有无符号(unsigned)和有符号(signed)两种类型. MySQL数据类型 含义 tinyint(m) 1个字节表示:signed(-128~127):unsigned ...

  3. AFNetworking源码分析

    来源:zongmumask 链接:http://www.jianshu.com/p/8eac5b1975de 简述 在iOS开发中,与直接使用苹果框架中提供的NSURLConnection或NSURL ...

  4. 有关Color和Drawable你所不知道的那些内容

    Android开发中,我们经常会用到Color或Drawable,有时他们是可以混用的,有时却有严格的区别. Drawable 体系结构 Drawable是可绘制物件的一般抽象.与View不同,Dra ...

  5. struts2拦截器的实现原理

    拦截器(interceptor)是Struts2最强大的特性之一,也可以说是struts2的核心,拦截器可以让你在Action和result被执行之前或之后进行一些处理.同时,拦截器也可以让你将通用的 ...

  6. mark jquery 链式调用的js原理

    我们在使用jquery的时候会用到类似$("#id").css('color','red').show(200); 这样写有点减少代码量,减少了逐步查询DOM的性能损耗: js 原 ...

  7. OC - 7.Foundation框架的简单介绍

    OC语言-07-OC语言-Foundation框架   结构体 NSRange/CGRange 用来表示一个元素在另一个元素中的范围,NSRange等价于CGRange 包含两个属性: NSUInte ...

  8. [C#][转][string 字符串截取

    C#几个经常用到的字符串截取 一. 1.取字符串的前i个字符 (1)string str1=str.Substring(0,i); (2)string str1=str.Remove(i,str.Le ...

  9. 【制作镜像】安装VMwareTool

    vmware tools是虚拟机VMware Workstation自带的一款工具,它的作用就是使用户可以从物理主机直接往虚拟机里面拖文件. 启动虚拟机,切换到xwindows 在VMware Wor ...

  10. 「Windows MFC 」「Edit Control」 控件

    「Windows MFC 」「Edit Control」 控件