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,一经查实,立即删除!

相关文章

java重要基础知识点_java基础知识点整理

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼java基础知识点整理1.&和&&的区别?&:逻辑与(and),运算符两边的表达式均为true时,整个结果才为true。&&:短路与,如果第一个表达式为false时&#…

网易云音乐的算法有什么特点_当算法设计音乐厅时会发生什么?

网易云音乐的算法有什么特点Here are three links worth your time:这是三个值得您花费时间的链接: What happens when algorithms design a concert hall? (3 minute read) 当算法设计音乐厅时会发生什么? ( 阅读3分钟 ) How to land a top-notch tec…

开机发现超级管理员账户不见了

今天出现了一个怪现象,连接打印机的电脑上没有超级管理员账户,只有一个刚建立的新账户,这是怎们回事来?嗳,原来啊,安装Windows XP时,如果又设置了一个管理员账户,那么系统内置没有密…

vs自带iis局域网调试

http://www.cnblogs.com/liluping860122/p/4685564.html转载于:https://www.cnblogs.com/wcLT/p/5594252.html

java.util.set cannot be assigned from null_Java中有关Null的9件事

对于Java程序员来说,null是令人头痛的东西。时常会受到空指针异常(NPE)的骚扰。连Java的发明者都承认这是他的一项巨大失误。Java为什么要保留null呢?null出现有一段时间了,并且我认为Java发明者知道null与它解决的问题相比带来了更多的麻烦&…

node.js事件驱动_了解Node.js事件驱动架构

node.js事件驱动by Samer Buna通过Samer Buna 了解Node.js事件驱动架构 (Understanding Node.js Event-Driven Architecture) Update: This article is now part of my book “Node.js Beyond The Basics”.更新:这篇文章现在是我的书《超越基础的Node.js》的一部分…

如何基于 Notadd 构建 API (Laravel 写 API)

如何基于 Notadd 构建 API Notadd 底层实现了 passport 机制,有统一的授权管理,主要支持两种方式进行 API 授权,一个是 client,领一个是 passport,这个在其他文档中有做详细的说明。 这里主要说的是,如何基…

mysql 基于集_一种基于记录集查找特定行的方法_MySQL

问:我的一个表中包含了名为IdValue的单列主键。对于给定的IdValue值,我希望找到紧邻目标值之前和之后的表行(假定结果按IdValue排序)。怎样才能不使用游标而通过一个基于集合的方法得到需要的结果?答:Transact-SQL是一个基于集合的…

react 交互_如何在React中建立动画微交互

react 交互Microinteractions guide a user through your application. They reinforce your user experience and provide delight.微交互引导用户完成您的应用程序。 它们可以增强您的用户体验并带来愉悦感。 You may have seen some of the slick examples of microinterac…

HTTPS与MITM

HTTPS:基于SSL/TSL的HTTP协议 MITM:Man-In-The-Middle中间人攻击 Https下中间人攻击的思路: 1 去https化 2 向CA申请相似域名的证书 防范: 睁大双眼转载于:https://www.cnblogs.com/the-owl/p/5596254.html

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 的嵌入式操作系统&#…

java 03_Java基础03—流程控制

流程控制参考资料:《Java从入门到精通》/明日科技编著. 4版. 北京:清华大学出版社,2016一、复合语句Java的复合语句由“{”开始,“}”结束,又称为块语句。复合语句都是由上至下被执行;复合语句中可以嵌套复…

这三种策略可以帮助女性在科技领域蓬勃发展

by Shubhi Asthana通过Shubhi Asthana 这三种策略可以帮助女性在科技领域蓬勃发展 (These 3 strategies can help women thrive in tech) As someone early on in her career, I’ve attended a few tech talks, conferences, and meetups. One thing I noticed is not many w…

手机卫士09_应用程序四种查看_ListView小标题_进程管理

手机卫士09_应用程序四种查看_ListView小标题_进程管理 1.悬浮窗体的功能实现: 1.1.应用程序的卸载: 包安装器 packageInstall,包卸载packageruninstall intent.setData(Uri.pare(“package:” 应用程序包名)) 卸载完之后记得更新list集合,更新适配器. 但是不确定用户是否点了…

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

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

Flask学习 一 基本结构

-from flask import Flaskfrom flask import Flask,render_template-from flask import request-from flask import make_response-from flask import abort-from flask import redirect-# __name__参数决定程序的根目录app Flask (__name__)-# app.route (/)-# def hello_wor…

java8的路径_什么是路径?

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

为什么toString方法可以用来区分数组和对象?

首先大家都应该知道在javascript中只有是对象都存在toString方法,将调用该方法的值转换为字符串返回,如下: var arr [1, 2, 3];console.log(arr.toString()); //1,2,3 但对象的toString方法和其他优点不同,其返回的是类似 [objec…

平安 开源 数据库 实践_刻意的实践-成为开源

平安 开源 数据库 实践by Anthony Ng由Anthony Ng 刻意的实践-成为开源 (Deliberate Practice — Becoming an Open Sourcerer) I recently finished reading Cal Newport’s book, So Good They Can’t Ignore You. It’s a quick read, and it introduced me to the concept…