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>
这样的话,每个人对自己开发的一块非常熟悉,维护上也非常方便
JavaScript模块化开发实例的更多相关文章
- Javascript模块化开发－轻巧自制
Javascript模块化开发-轻巧自制 一.前言现在javascript的流行,前端的代码越来越复杂,所以我们需要软件工程的思想来开发前端.模块化是必不可少的,这样不仅能够提高代码的可维护性.可扩展 ...
- javaScript 面向对象开发实例
javaScript 面向对象开发实例 这个是结合require的模块化开发,首先创建构造函数: //test.js 1 function Test(lists) { var config={ nam ...
- Javascript模块化开发，使用模块化脚本加载工具RequireJS，提高你代码的速度和质量。
随着前端JavaScript代码越来越重,如何组织JavaScript代码变得非常重要,好的组织方式,可以让别人和自己很好的理解代码,也便于维护和测试.模块化是一种非常好的代码组织方式,本文试着对Ja ...
- Javascript 模块化开发上线解决方案
最近又换部门了,好频繁地说...于是把这段时间搞的小工具们简单整理了一下,作了一个小的总结.这次用一个简单业务demo来向大家介绍一下Javascript模块化开发的方式和自动化合并压缩的一些自己的处 ...
- JavaScript模块化开发整理
在网上已经有很多关于模块化开发的文章了,这里还是按照自己的理解来整理一下. 随着项目文件的越来越大和需求的越来越贴近现实(我发现现在客户不如:一个领导说我要审批你们报上来的资料,系统发布以后用的还不错 ...
- Layui 弹出层组件——layer的模块化开发实例应用
Layui 弹出层组件——layer的模块化开发实例应用 1.首先在package.json中引入layer组件依赖 2.在源码中应用这个依赖 3.在源码中编写代码应用此组件 4.效果验证:点击日历上 ...
- JavaScript模块化开发的那些事
模块化开发在编程开发中是一个非常重要的概念,一个优秀的模块化项目的后期维护成本可以大大降低.本文主要介绍了JavaScript模块化开发的那些事,文中通过一个小故事比较直观地阐述了模块化开发的过程. ...
- 详解JavaScript模块化开发
什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来js得到重视,应用也广泛起来了,jQuery,Ajax,Node.Js,MVC,MVVM等 ...
- （转）详解JavaScript模块化开发
https://segmentfault.com/a/1190000000733959 什么是模块化开发? 前端开发中,起初只要在script标签中嵌入几十上百行代码就能实现一些基本的交互效果,后来j ...
随机推荐
- careercup-递归和动态规划 9.6
9.6 实现一种算法,打印n对括号的全部有效组合(即左右括号正确配对). 类似leetcode:Generate Parentheses 解法: 从头开始构造字符串,从而避免出现重复字符串.在这个解法 ...
- xilinx仿真库的作用（原创）
① secureip库:硬核(HARD IP)仿真(功能仿真和时序仿真)模型(hard IP simulation model),比如PowerPC.PCIE.SRIO.DDR等.Simulation ...
- JQuery事件的绑定
关于jQuery事件绑定html: <a href="#" onclick="addBtn()">addBtn</a> <div ...
- synchronized关键字小结（一）
1. synchronized同步方法 1) synchronized修饰方法,表示方法是同步的,当某线程进入并拿到当前整个对象的锁时 a. 其他synchronized方法排队等锁 b. 非sync ...
- Oracle JDBC通过占位符可以查询可变长字段，不可查询固定长度字段
这个问题在半年前,花了我两天的时间才解决,现在刚好想起来,顺便记录一下以防忘了. 通过jdbc,预编译的sql,无法查询到固定长度的字段. 用例子说话: 创建一个表,只有一个字段,长度为固定的char ...
- Nullable类型和HashSet<T>集合
今天接触到两个新的类型,查了一下才发现它们已经出现好久了,特作一下标记 Nullable结构 在System命名空间下,在 .NET Framework 2.0 版中是新增的:用它定义的值类型的对象与 ...
- java编写一个端口扫描器
好久没写java了,学的时候,也没学习网络编程这一块,无意中看到了一本书,于是小小复习一下java,写个端口扫描器,玩玩吧,网上这种小公具有的是,就是自己无聊写着玩玩. 源代码如下: 共两个类,比较简 ...
- Ios 给imageview 添加手势没有反应
道理差不多,简单写写,就是给UIImage所在的UIImageView添加个单击的手势,让用户点击图片时有响应的响应. 有人用个透明的UIButton,感觉有时候不方便. - (void)view ...
- 03_JqueryAjax_异步请求Servlet
[Ajax 简述] jquery对Ajax提供了更方便的代码:$ajax({ops})来发送异步请求. 首先说一个Ajax的特性,它是永安里发送异步请求,请求的是服务器,但不会刷新页面. 例如在注册功 ...
- Codevs 1217 借教室 2012年NOIP全国联赛提高组
1217 借教室 2012年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 在大学期间,经常需要租借教 ...