无论是多人直接团队合作,还是个人间接团队合作,程序都需要良好的好维护性。为了使程序具备更好的可维护性,让Js不产生冲突,需要避免全局变量的泛滥、合理使用命名空间、添加必要的注释。
1.工程师甲为了实现功能A写了一段代码,定义了全局变量a、b。工程师乙为了实现功能B写了一段代码,并在不知情的情况下也定义了同名变量a,他们都是直接定义在Window作用域下,同名变量间发生冲突。为了避免这种冲突,我们用匿名函数将脚本包起来,并且立即执行‘她’。
<div> xxxxxxx </div> <script type="text/JavaScript"> //功能A (function(){ var a=123, b = "Hello world"; })(); </script> <div> xxxxxxx </div> <script type="text/JavaScript"> //功能B (function(){ var a, c = "abc"; })(); </script> <div> xxxxxxx </div>
2.如果要在网页中添加功能C,而且功能C需要用到系功能A的变量b,简单的办法是将功能C的脚本写到功能A里,但是如果功能C由工程师丙实现,丙则需要花费大量精力去理解工程师甲写的脚本,带来时间资源的浪费,有人就会说了,我们可以通过添加全局变量实现不同功能块间的’通信‘,但是这样就背道而驰了,我们本来的目的是严格控制全局变量的数量。其实我们可以使用一个{}对象类型的变量作为全局变量,匿名函数间用来通信的变量可以作为全局变量的属性,这样既可以控制全局变量的数量,又可以保证扩展性。为了防止全局变量间的冲突,我们可以使用命名空间,如果程序非常复杂,变量名很多,可以进一步扩展命名空间生成二级命名空间,每个匿名函数的属性挂在命名空间下即可。(因为生成命名空间非常常用,我们可以进一步将生成命名空间功能定义成一个函数,方便调用)
<div> xxxxxxx </div> <script type="text/JavaScript"> var GLOBAL={}; GLOBAL.namespace=function(str) { var arr =str.split('.'), o = GLOBAL; for(i=(arr[0]='GLOBAL') ? 1 : 0;I < arr.length; i++) { o[arr[i]] = o[arr[i]] || {}; o = o[arr[i]]; } } </script> <script type="text/JavaScript"> //功能A----------------------- (function(){ var a=123, b = "Hello world"; })(); </script> <div> xxxxxxx </div> <script type="text/JavaScript"> //效果B------------------- (function(){ var a, c = "abc"; })(); <div> xxxxxxx </div> //功能C----------------- <script type="text/JavaScript"> (function(){ var d='adang is very handsome!'; d =b +',' + d; })() </script>
3.添加必要的注释,可以大大提高代码可维护性,对于团队合作了来说,更是十分必要的。工程师应在自己脚本处添加注释,注释信息包括:功能说明、工程师姓名及联系方式、最后修改时间。
相关推荐
Web前端必备35中前端高档代码,熟透这35种前端编码技术,你离web高级前端就不远了,有时你与高级前端的差距这是这35条秘籍代码;代码段中已包含浏览器兼容性处理,内核分辨,js图片处理,页面处理,页面字体控制,...
5.1.1 团队合作——如何避免JS冲突 5.1.2 给程序一个统一的入口——window.onload和DOMReady 5.1.3 CSS放在页头,JavaScript放在页尾 5.1.4 引入编译的概念——文件压缩 5.2 JavaScript的分层概念和JavaScript...
除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。 提高可维护性。模块化可以让每个文件的职责...
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
《编写可维护的JavaScript》向开发人员阐述了如何在团队开发中编写具备高可维护性的JavaScript代码,书中详细说明了作为团队一分子,应该怎么写JavaScript。本书内容涵盖了编码风格、编程技巧、自动化、测试等几方面...
除了解决命名冲突和依赖管理,使用 Sea.js 进行模块化开发还可以带来很多好处: 模块的版本管理。通过别名等配置,配合构建工具,可以比较轻松地实现模块的版本管理。 提高可维护性。模块化可以让每个文件的职责...
-Ember.js是基于模型-视图-控制器(MVC)软件架构模型的客户端侧JavaScript Web应用程序框架。它允许开发人员在一个框架中通过常用的习惯用语和最佳实践来创建可伸缩的单页面应用程序。该框架提供丰富的对象模型、...
管理有关商店合作的信息 :red_apple: 安排一次和重复的食物领取 :tear-off_calendar: 收集有关皮卡的反馈 :magnifying_glass_tilted_left: 在成为组成员之前与用户交谈 :heavy_plus_sign: 让新来者表示信任并...
开发生命周期 - 11 - 连接到java调试器 - 12 - 类增强Enhancement - 13 - 02.HTTP路由 - 13 - 关于REST - 14 - routes文件语法 - 14 - HTTP方法 - 15 - URI范示 Pattern - 15 - Java调用定义 - 17 - 把404当作action...
开发生命周期 - 11 - 连接到java调试器 - 12 - 类增强Enhancement - 13 - 02.HTTP路由 - 13 - 关于REST - 14 - routes文件语法 - 14 - HTTP方法 - 15 - URI范示 Pattern - 15 - Java调用定义 - 17 - 把404当作action...
本仓库包含 JieLabs 的 Web 后端和前端部分。 后端和前端的构建方法请具体查看 和 目录中的具体说明。 作者 JieLabs 由陈嘉杰、高一川、刘晓义进行开发和维护。 开放源代码协议 本项目源代码使用 AGPL 3.0 协议进行...
安装套件npm install 自动运行重新加载的开发服务器(postgres,redis等服务会自动在docker容器中运行,但您可能会遇到端口冲突问题。) npm run dev测验尽管我们并非每次都能遵循,但我们还是着重于测试代码。 做出...
这些概念对于任何前端web 开发工作都非常重要。本书将这些概念贯穿在书中的所有代码示例中,以便呈现用来创建图片库页面的脚本、用来创建动画效果的脚本和用来丰富页面元素呈现效果的脚本,最后结合所讲述的内容创建...
借助创建一个简单,干净,清晰的前端架构,这是一个构建过程,而不是一种工具或语言,它使用javascript在本地范围内定义组件样式并创建唯一的类名,因此样式不会与其他开发人员发生冲突样式,甚至一千名开发人员都...
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统标签的文件上传模式。 [编辑本段]SWFUpload的主要特点 * 可以...
资产在twitter / bootstrap中进行命名空间以避免资产冲突。 顶层要求获取所有样式表或javascript。 能够导入或需要单独命名空间的样式表或javascript。 安装 LESS需要JavaScript运行时才能运行。 您使用哪一个取...
3.npm start或node app.js //注意:如果80端口冲突,请打开app.js文件修改监听端口号basis.run(80)。新版本的Node-basis已经替换basis.start(端口号) 4.localhost / index.html 5.此应用示例是手机端适应,...
《锋利的jQuery》适合所有对jQuery技术感兴趣的Web设计者和前端开发人员阅读和参考。 目录 第1章 认识jQuery 1 1.1 JavaScript和JavaScript库 1 1.1.1 JavaScript简介 1 1.1.2 JavaScript库作用及对比 1 1.2 ...
jQuery以其轻巧的体积、强大的选择器、出色的DOM封装、丰富的插件支持使得广大的Web前端开发者得心应手,极大地提高了他们的开发效率;此外,jQuery中完善的Ajax功能、行为与结构层的分离、可靠的事件处理机制也同样...
是一个可帮助您轻松构建Web界面的库。 一组常见的css / js实用程序,并具有一个flexbox网格。 维基 为什么 很轻 这很简单 与其他框架没有冲突,因为所有类均以v-前缀开头 没有预设的图形样式 可以在重要或不重要的...