JavaWeb项目前端规范(采用命名空间使js深度解耦合)

没有规矩不成方圆,一个优秀的代码架构不仅易于开发和维护,而且是一门管理与执行的艺术。

这几年来经历了很多项目,对代码之间的强耦合及书写不规范,维护性差等问题深恶痛绝。在这里,通过仔细分析后,结合自己的编码习惯总结了一套适用于javaweb项目的前端书写规范,与大家分享一下。

ps:感谢阿海的创意,后期整理如下(附文件下载):

一、项目结构

这里和其他项目区别不大,我将模板抽离出来,更容易分析和理解:

解释一下:js主要包括extends(引入第三方的js)、module(项目模块自己的js)、lib(引用包,这里也可以继续拆分),module中包含具体的模块中的js。common.js是核心命名空间的js.

二、common.js

解释一下,Globals作为全局命名空间,各个模块均可以在此命名空间里定义域(如果有不明白的可以自学下命名空间,这个文件写死就行,也不用具体理解)。

三、task.js

这个文件是模块中我的项目中任务模块的js(例子),模块级别的js一般是将页面中相对独立重要的方法抽离出来的方法,不建议所有页面js都拿进来。

解释一下:模块级别的js 主要包括自己的私有属性和方法,及对外暴露的js属性和方法。这里我们默认凡是内部私有的前面都加“_”,最后决定哪些方法和属性暴露出来,是通过构造方法constructor来对外暴露。

四、页面index.jsp

现在看一下jsp中如何对页面js和模块js是怎么引用的吧,见证解耦和的时候到了。

解释一下:页面需要将common.js与task.js引入,然后初始化,这样就可以访问task模块中对外暴露的方法和属性了。

页面js建议所有的变量发在一个变量组中,这样便于维护。

页面中控件的onclick等方法建议在js中统一绑定。

 

总结:通过上面的配置,最大的好处是对于项目中频繁引入js文件,消除了之间的耦合性,而且对于不同模块间的同名方法和属性也不会互相影响,当然最主要的便于持续的开发和维护,同时也是艺术上的享受。

本文采用了我习惯的注释风格,当然可以因人而异,我的原则是:

1.模块介绍代码主要关注:模块描述,负责人,相关备注,采用双星注释

/**

 *

 */

2.对于模块下,大区域的划分,习惯采用双横线注释:

//==================================================

//描述:

3.对于区域中,方法注释,通过以往的经验,不是每个人都愿意详细去写的,所以我认为简单明了最好,采用普通注释:

//代码描述

//作者备注等信息(不限)

4.对于区域中一些重要的方法,或者想区分一下,划定小区间的,采用星横线

/****************************描述*****************************/

 

原链接:http://blog.csdn.net/hongshan50/article/details/21538639

转载于:https://www.cnblogs.com/panie2015/p/5590562.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395744.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PCB genesis自制孔点 Font字体实现方法

一.先看genesis原有Font字体 在PCB工程CAM加孔点字体要求时,通常我们直接用Geneis软件给我们提供了2种孔点字体canned_57与canned_67,但此字体可能不能满足各个工厂个性化需求,比如:孔密度,孔间距,孔形状分布,如果有一…

Google 最新的 Fuchsia OS【科技讯息摘要】

转自:http://www.cnblogs.com/pied/p/5771782.html 就是看到篇报道,有点好奇,就去FQ挖了点东西回来。 我似乎已开始就抓到了重点,没错,就是 LK 。 LK 是 Travis Geiselbrecht 写的一个针对 ARM 的嵌入式操作系统&#…

pandas:根据行间差值进行数据合并

1. 问题描述 在处理用户上网数据时,用户的上网行为数据之间存在时间间隔,按照实际情况,若时间间隔小于阈值(next_access_time_app),则可把这几条上网行为合并为一条行为数据;若时间间隔大于阈值…

java8的路径_什么是路径?

# 什么是路径?文件系统以某种形式的媒体(通常为一个或多个硬盘驱动器)存储和组织文件,使得它们可以容易地被检索。目前使用的大多数文件系统将文件存储在树形(或分层)结构中。在树的顶部是一个(或多个)根节点。在根节点下,有文件和目录(Micro…

解析su,su -,sudo的区别

2019独角兽企业重金招聘Python工程师标准>>> 本人以前一直习惯直接使用root,很少使用su,前几天才发现su与su -命令是有着本质区别的! 大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令&#xff…

java maven 操作 收集的一些命令

maven打包: mvn clean package -Dmaven.test.skiptrue 运行jar: java -jar target/spring-boot-scheduler-1.0.0.jar 这种方式关掉控制台就不可以访问,现在要后台运行的方式启动 nohup java -jar target/spring-boot-scheduler-1.0.0.jar & 清理并…

java犯的小错误_[Java教程]十个JavaScript中易犯的小错误,你中了几枪?

[Java教程]十个JavaScript中易犯的小错误,你中了几枪?0 2015-06-01 12:00:19序言在今天,JavaScript已经成为了网页编辑的核心。尤其是过去的几年,互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。如果初次打交道&…

Kali渗透测试——利用metasploit攻击靶机WinXP SP1

搭建渗透测试环境 Kali攻击机 WinXP SP1 靶机 启动metasploit 跟windows RPC相关的漏洞 内部提供的漏洞攻击 靶机winxp sp1网络配置 查看虚拟机的NAT网段 配置WinXP SP1靶机的IP地址 执行漏洞利用 后漏洞利用:meterpreter> 靶机的信息 进程情况 查看到explorer.e…

创建响应式布局的优秀网格工具集锦《系列五》

在这篇文章中,我们为您呈现了一组优秀的网格工具清单。如果网页设计和开人员采用了正确的工具集,并基于一个灵活的网格架构,以及能够把响应图像应用到到设计之中,那么创建一个具备响应式的网站并不一定是一项艰巨的任务。enjoy! 您…

java 无侵入监控_MyPerf4J 一个高性能、无侵入的Java性能监控和统计工具

MyPerf4J一个针对高并发、低延迟应用设计的高性能且无侵入的实时Java性能监控和统计工具。 受 perf4j 和 TProfiler启发而来。MyPerf4J具有以下几个特性:无侵入: 采用JavaAgent方式,对应用程序完全无侵入,无需修改应用代码高性能: 性能消耗非…

javascript 减少回流

减少回流(REFLOWS) 当浏览器重新渲染文档中的元素时需要 重新计算它们的位置和几何形状,我们称之为回流。回流会阻塞用户在浏览器中的操作,因此理解提升回流时间是非常有帮助的。 回流时间图表 你应该批量地触发回流或重绘&#x…

转: 关于 ssl的建立链接的过程

转自: http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html SSL/TLS协议运行机制的概述 作者: 阮一峰 日期: 2014年2月 5日 互联网的通信安全,建立在SSL/TLS协议之上。 本文简要介绍SSL/TLS协议的运行机制。文章的重点是设计思…

PHP 文件加密Zend Guard Loader 学习和使用(如何安装ioncube扩展对PHP代码加密)

一、大体流程图 二、PHP 项目文件加密 下表列出了Zend产品中的PHP版本及其内部API版本和Zend产品版本。 如何加密请往后看 三、如何使用 第一步:确认当前环境 Amai Phalcon 前,请确认您具备以下两个条件,如果您的环境不满足此条件&#xff0c…

php寻找文本,PHP文本数据库的搜索方法_php

//php文本数据库的搜索方法searchstr("/".preg_quote($searchstr)."/");//$searchstr是查找的关键字$recordsfile($file);//获取所有的记录数http://www.gaodaima.com/45906.htmlPHP文本数据库的搜索方法_php//$file是查找的数据文件$search_reocrdspreg_g…

bzoj 2178 圆的面积并 —— 辛普森积分

题目:https://www.lydsy.com/JudgeOnline/problem.php?id2178 先看到这篇博客:https://www.cnblogs.com/heisenberg-/p/6740654.html 好像本应算弓形面积、三角形面积之类的,但不会...于是用辛普森积分硬做... 参考了这篇博客:ht…

Charles抓包工具的使用

2019独角兽企业重金招聘Python工程师标准>>> 感谢唐巧分享的文章,受益匪浅 文章目录 1. 目录及更新说明2. Charles 限时优惠3. 简介4. 安装 Charles5. 将 Charles 设置成系统代理6. Charles 主界面介绍7. 过滤网络请求8. 截取 iPhone 上的网络封包 8.1. …

iOS开发——处理1000张图片的内存优化

一、项目需求 在实际项目中,用户在上传图片时,有时会一次性上传大量的图片。在上传图片前,我们要进行一系列操作,比如:旋转图片为正确方向,压缩图片等,这些操作需要将图片加载到内存中&#xff…

jquery ui php,php – 打开带有动态内容的jQuery UI对话框

我有一个关于jQuery UI对话框的问题,并显示数据库中的动态内容.所以我得到了一个web应用程序,我还需要创建一个管理模块来管理所有用户和其他信息.我创建了一个页面,显示列表中的所有用户,在每一行中我也创建了一个编辑按钮.我想这样做,当你按下用户的编辑按钮时,会打开一个对话…

MapReduce Input Split 输入分/切片

MapReduce Input Split(输入分/切片)详解 public static long getMaxSplitSize(JobContext context) { return context.getConfiguration().getLong(SPLIT_MAXSIZE, Long.MAX_VALUE); } 如果没有设置这maxsize默认是Long.MAX_VALUE public static long …

WPF自定义空心文字

WPF自定义空心文字 原文:WPF自定义空心文字首先创建一个自定义控件,继承自FrameworkElement,“Generic.xaml”中可以不添加样式。 要自定义空心文字,要用到绘制格式化文本FormattedText类。FormattedText对象提供的文本格式设置功能比WPF提供…