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

时间: 2024-10-23 00:57:49

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

团队开发前端VUE项目代码规范

团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致的代码 二.开发SRC目录: 1.Vuex目录 (状态树配置) 2.Router目录(路由配置) 3.Pages目录 (放置主路由组件 注意命名规范) 4.Common目录 (放置静态文件) 5.Config目录 (全局配置项,路由拦截,报错信息,等枚举信息) 6.Api目录 ( 相关全局请求调用配置.

前端项目文件组织与组件命名

前端项目文件组织与组件命名 2019年04月02日 19:25:06 w18478272407 阅读数:14 缘由 在开发项目的过程中,大家多多少少会对自己项目的目录结构产生疑惑,如何合理地划分模块以及如何合理的命名,这些如果在项目前期的时候没有好好规范好的话,那么后面新进来的人便会按照自己的逻辑又重新在划分自己的目录,这样日复一日项目体积不但会增加而且目录结构会越来越混乱,因此非常有必要聚焦项目的文件目录,本文也是出于这样的一个出发点来写的,先来看看几个优秀项目的目录. crate-react

前端开发规范文档(html,css,js)

首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的规范都不一样..仅供参考 前端开发规范文档 Html规范 1 代码风格 1.1 缩进 **[强制]**使用 4 个空格作为一个缩进层级,不允许使用 2 个空格或 tab 字符: 2 属性 2.1 属性引号 **[强制]**对于属性的定义使用双引号,不允许使用单引号,不允许不使用引号: 示例: <!-

网易前端规范

自己写项目的时候,就会发现很多问题,小到文件夹的层次以及一个变量的命名,大到各个模块的配合或者框架的采用,都充满了技术.好的习惯会让前端工作提高很多,特别是在团队合作的时候. 网易前端规范是老师要求我们学习的,特意在此记录一下. 穿越网址:http://nec.netease.com/standard

JavaEE——Intellij Idea 创建JavaWeb项目

原文:JavaEE--Intellij Idea 创建JavaWeb项目 折腾Tomcat折腾了两个晚上,第一个晚上怎么都进不了Tomcat的首页,第二个晚上进去了,但是新建的Web项目,在浏览器中运行,总是 Error on Apache Tomcat: The requested resource is not available  坑爹!!!!. 首先我要说一点,在IntelliJ IDEA里面“new Project”就相当于我们eclipse的“workspace”,而“new Mod

学习JavaWeb项目开发需要掌握的技术

武汉java培训学习JavaWeb项目开发需要掌握的技术,国内外信息化建设已经进入基于Web应用为核心的阶段, java作为应用于网络的最好语言,前景无限看好.然而,就算用Java建造一个不是很烦琐的web应用,也不是件轻松的事情.概括一下,实施Java的WEB项目需要掌握的技术如下:Java语言面向对象分析设计思想设计模式和框架结构XML语言网页脚本语言数据库应用服务器集成开发环境下面我们具体地看每个技术.1.Java语言Java语言体系比较庞大,包括多个模块.从WEB项目应用角度讲有JSP.

如何在开发时部署和运行前后端分离的JavaWeb项目

在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少.这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项目,然后使用dubbo+zookeeper或者springCloud来构建微服务,前端则会是一个单独的项目,前台的请求通过微服务来调用.但是,不同与传统的web项目,这类前后端分离的项目如何在开发中部署和运行呢? 当前后端分离时,后端项目一定会被加载到tomcat的webapp目录下面,但是前端的资

javaweb项目-医者天下 (Spring+SpringMVC+MyBatis)

项目下载地址:http://download.csdn.net/detail/qq_33599520/9826683 项目完整结构图: 项目简介: 医者天下项目是一个基于Spring+SpringMVC+MyBatis的javaweb项目,采用的是Mysql作为数据库,内部结构主要为注解方式,代码详细配有注释,项目完整度百分之95以上,有些小瑕疵未能处理,所以,此代码仅供参考使用,产生的任何漏洞和我无关. 项目代码贴出的顺序严格按照我搭建项目的顺序贴出代码,以保证代码的完整性和可用性. 项目结构

github开源项目目录规范(简介)

此为前端开发团队遵循和约定的开源项目目录规范,意在实现开源项目目录结构的一致性. 说明 文档中使用的关键字「MUST」,「MUST NOT」,「REQUIRED」,「SHALL」,「SHALL NOT」,「SHOULD」,「SHOULD NOT」,「RECOMMENDED」,「MAY」和「OPTIONAL」在RFC2119中被说明. 还未定稿,对规范中提及的点有不赞同的欢迎提出 issues(请添加目录规范标签)讨论. 目录规范 参加的目录结构为: . ├── .editorconfig ├──