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>

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

时间: 2024-10-13 23:45:22

JavaScript模块化开发实例的相关文章

javaScript 面向对象开发实例

javaScript 面向对象开发实例 这个是结合require的模块化开发,首先创建构造函数: //test.js 1 function Test(lists) { 2 var config={ 3 name:lists.name, 4 sex:lists.sex 5 }; 6 this.init(config) 7 } 8 Radio.prototype = { 9 init: function(config) { 10 var self=this; 11 self.initContent(

Javascript模块化开发-轻巧自制

Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展性以及鲁棒性,更大的好处就是能够提升整个团队的开发效率,也能够让新进的程序员更快的接手工作.今天晚上根据前辈们的经验,写啦一个简单的模块定义的封装组件,当是练手吧.不过感觉还是蛮好用的.二.学习模块化前我们应该先了解点什么呢?其实突然就学习模块化的javascript开发,那还是比较丈二和尚,摸不着

Javascript模块化开发 – AMD规范

通行的Javascript模块规范共有两种:CommonJS和AMD. 2009年,美国程序员Ryan Dahl创造了node.js项目,将javascript语言用于服务器端编程.这标志"Javascript模块化编程"正式诞生.因为老实说,在浏览器环境下,没有模块也不是特别大的问题,毕竟网页程序的复杂性有限:但是在服务器端,一定要有模块,与操作系统和其他应用程序互动,否则根本没法编程. node.js的模块系统,就是参照CommonJS规范实现的.在CommonJS中,有一个全局性

JavaScript模块化开发小谈

在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错,可能是有那个新鲜感,等领导烦了说:每个文件我都这么操作太累了,能不能一次报,到最后说能不能自动判断对不对……),以后的需求估计要让做个人工智能出来……借着上面继续,需求的内容越来越复杂,一个人开发时间长,多个人开发这样那样的问题一堆等等这时候Javascript模块化开发诞生了. 先说说发展历程

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

最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处理. 模块化开发已经有一些标准(AMD/CMD)而且现在也算比较普及了,其为开发人员提供了很大的方便.模块化开发可以按结构整理代码,将一些功能分小颗粒来实现,这样的代码维护起来会方便很多,也更灵活,更容易在一定程度上去满足各种需求的变更. 比如这是demo中的代码结构: 先说page目录,这里的每一

JavaScript模块化开发的那些事

模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. 小A是某个创业团队的前端工程师,负责编写项目的Javascript程序. 全局变量冲突 根据自己的经验,小A先把一些常用的功能抽出来,写成函数放到一个公用文件base.js中: var _ = { $: function(id) { return document.getElementById(id

2.精通前端系列技术之JavaScript模块化开发

在使用seajs模块化开发之前,直接在页面引用js会容易出现冲突及依赖相关的问题,具体问题如下 问题1:多人开发脚本的时候容易产生冲突(比如全局参数冲突,方法名冲突),可以使用命名空间降低冲突,不能完全避免冲突 // JavaScript Document /*var a = 10; function tab(){} function drag(){} function dialog(){}*/ var miaov = {}; //名字比较长 , 只能降低冲突,不能完全避免 miaov.a =

javascript模块化开发编程

随着网站的不断迭代更新,js代码越来越多,那么问题来了 代码比较乱 命名出现冲突 文件依赖比较繁杂 为了解决以上问题,模块化开发出现了 1.一个简单的demo,维护和扩展模块 模块的维护和扩展一定要遵守一个约定:开闭原则 对添加开放,对修改封闭 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>扩展和维护模块</

Javascript模块化开发之初恋例子 ( 弹窗 )

今天是2014年9月30日了,明天就是国庆节了,首先祝咱们伟大的祖国生日快乐. 还有几分钟就要下班了,研究了几天关于require这个库的模块化开发的相关文章, 终于写出了初恋的模块化例子:弹出一个登陆框: 第一:首先在静态页面引入require库文件,并在该引入标签中引入主脚本文件( main.js ) 1 <script data-main='main' src='./require.js'></script> 2:首先在写程序之前需要分清楚需要加载的模块文件和模块文件的依赖关