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
JavaWeb项目前端规范(采用命名空间使js深度解耦合)的更多相关文章
- 团队开发前端VUE项目代码规范
团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...
- 我的前端规范——JavaScript篇
相关文章 简书原文:https://www.jianshu.com/p/5918c283cdc3 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...
- 我的前端规范——HTML篇
相关文章 简书原文:https://www.jianshu.com/p/a46ff0504982 我的前端规范——开篇:http://www.cnblogs.com/shcrk/p/9271561.h ...
- 前端规范之JS代码规范(ESLint + Prettier)
代码规范是软件开发领域经久不衰的话题,几乎所有工程师在开发过程中都会遇到或思考过这一问题.而随着前端应用的大型化和复杂化,越来越多的前端团队也开始重视代码规范.同样,前段时间,笔者所在的团队也开展了一 ...
- JavaEE——Intellij Idea 创建JavaWeb项目
原文:JavaEE--Intellij Idea 创建JavaWeb项目 折腾Tomcat折腾了两个晚上,第一个晚上怎么都进不了Tomcat的首页,第二个晚上进去了,但是新建的Web项目,在浏览器中运 ...
- javaweb项目-医者天下 (Spring+SpringMVC+MyBatis)
项目下载地址:http://download.csdn.net/detail/qq_33599520/9826683 项目完整结构图: 项目简介: 医者天下项目是一个基于Spring+SpringMV ...
- 《从零玩转JavaWeb+项目实战》-系列课堂录制计划
点击试听课程 前言 很多自学编程的同学经常和我说想学一门语言自己到网上找一些教程看到一半就像背单词背到ambulance一样坚持不下去了....究其原因基本上都是:内容太多,太枯燥,专业术语听不懂,学 ...
- 如何在开发时部署和运行前后端分离的JavaWeb项目
在开发中大型的JavaEE项目时,前后端分离的框架逐渐成为业界的主流,传统的单机部署前后端在同一个项目中的工程项目越来越少.这类JavaWeb项目的后端通常都采用微服务的架构,后端会被分解为诸多个小项 ...
- 转:Java项目开发规范参考
Java项目开发规范参考 - KevinLee的博客 - 博客频道 - CSDN.NEThttp://blog.csdn.net/u011383131/article/details/51227860 ...
随机推荐
- 边工作边刷题:70天一遍leetcode: day 74
Binary Tree Upside Down 要点: recursion反转如何做?两个要点,一是在递归之后反转link(因为先要通过原来的link到下一层),二是要一层层把最底层的root返回来. ...
- .Net Framework 4.0 内部排序探索
简介 一时好奇心起,想一窥.Net Framework 4.0内部究竟是使用何种算法排序.以前听人说Framework内部是使用的快速排序,但究竟耳听为虚,眼见为实.主要通过JetBrains dot ...
- java 为啥变量名前要加个m?
用m_开头表示类的成员变量,member的意思如果是全局变量,则由g_开头还有常量c_开头 静态变量s_开头
- WPF RadioButton 转换
模型 public class people { public string name{get;set;} public bool? sex{get;set;} } 转换器 namespace Hel ...
- Gruntjs: task之文件映射
由于大多数的任务执行文件操作,Grunt提供了一个强大的抽象声明说明任务应该操作哪些文件.这里总结了几种src-dest(源文件-目标文件)文件映射的方式,提供了不同程度的描述和控制操作方式. 1. ...
- Volly框架的使用基础版及使用中的一些坑 Ace 网络篇(三)
直接把注释粘过来: * Volley使用讲解: * 要实现网络数据请求主要要记住下面三步骤: * 1.创建RequestQueue对象 * 2.创建XXRequest对象(XX代表String,JSO ...
- 20135202闫佳歆--week 8 课本第4章学习笔记
第四章 进程调度 一.多任务 多任务操作系统就是能同时并发的交互执行多个进程的操作系统. 多任务操作系统使多个进程处于堵塞或者睡眠状态,实际不被投入执行,这些任务尽管位于内存,但是并不处于可运行状态. ...
- Core Data 概述
Core Data是一个模型层的技术.Core Data帮助你建立代表程序状态的模型层.Core Data也是一种持久化技术,它能将模型对象的状态持久化到磁盘,但它最重要的特点是:Core Data不 ...
- DLL中调用约定和名称修饰(一)
DLL中调用约定和名称修饰(一) 调用约定(Calling Convention)是指在程序设计语言中为了实现函数调用而建立的一种协议.这种协议规定了该语言的函数中的参数传送方式.参数是否可变和由谁来 ...
- scrollview中套listView的问题,记录一下。
开发一个订单详情界面,详情界面上面要显示收货地址.订单总金额等,中间部分要一个listView,下面还有一些东西 但是一个界面显示不全,肯定要scrollview,然后发现listView竟然只显示第 ...