Java Web项目前端规范(采用命名空间使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.对于区域中一些重要的方法，或者想区分一下，划定小区间的，采用星横线

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

如果有好的意见大家可以一起讨论，如果感觉文章写得对自己没什么帮助，权当一笑了之。

赞 (0)

相关推荐

  • C#实现根据指定容器和控件名字获得控件的方法

    本文所述为C#实现根据指定容器和控件名字获得控件的方法,在进行C#应用程序设计时有一定的借鉴价值.分享给大家供大家参考借鉴.具体实现方法如下: 功能代码如下: /// <summary> /// 根据指定容器和控件名字,获得控件 /// </summary> /// <param name="obj">容器</param> /// <param name="strControlName">控件名字</

  • 深入线程安全容器的实现方法

    最近写了个小程序用到了C#4.0中的线程安全集合.想起很久以前用C#2.0开发的时候写后台windows服务,为了利用多线程实现生产者和消费者模型,经常要封装一些线程安全的容器,比如泛型队列和字典等等.下面就结合部分MS的源码和自己的开发经验浅显地分析一下如何实现线程安全容器以及实现线程安全容器容易产生的问题. 一.ArrayList 在C#早期版本中已经实现了线程安全的ArrayList,可以通过下面的方式构造线程安全的数组列表: var array = ArrayList.Synchroni

  • C++中的哈希容器unordered_map使用示例

    随着C++0x标准的确立,C++的标准库中也终于有了hash table这个东西. 很久以来,STL中都只提供<map>作为存放对应关系的容器,内部通常用红黑树实现,据说原因是二叉平衡树(如红黑树)的各种操作,插入.删除.查找等,都是稳定的时间复杂度,即O(log n):但是对于hash表来说,由于无法避免re-hash所带来的性能问题,即使大多数情况下hash表的性能非常好,但是re-hash所带来的不稳定性在当时是不能容忍的. 不过由于hash表的性能优势,它的使用面还是很广的,于是第三方

  • 多浏览器支持CSS 容器内容超出(溢出)支持自动换行

    .linebr { clear: both; /* 清除左右浮动 */ width: 100px; /* 必须定义宽度 */ word-break: break-word; /* 文本行的任意字内断开 */ word-wrap: break-word; /* IE */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP printers */ white-space: -o-pre-wrap; /

  • C#键值对容器的介绍

    StringDictionary:默认key不区分大小写 NameValueCollection:默认key区分大小写 KeyedCollection:不是键值对容器,但是比键值对容器更好用,强烈推荐 命名空间using System.Collections.Specialized System.Collections 命名空间包含接口和类,这些接口和类定义各种对象(如列表.队列.位数组.哈希表和字典)的集合. System.Collections.Generic 命名空间包含定义泛型集合的接口

  • 关于STL中set容器的一些总结

    关于STL中set容器的一些总结

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构操作.vector封装数组,list封装了链表,map和set封装了二叉树等,在封装这些数据结构的时候,STL按照程序员的使用习惯,以成员函数方式提供的常用操作,如:插入.排序.删除.查找等.让用户在STL使用过程中,并不会感到陌生. 关于set,必须说明的是set关联式容器.set作为一个容器也是

  • 剖析Go编写的Socket服务器模块解耦及基础模块的设计

    剖析Go编写的Socket服务器模块解耦及基础模块的设计

    Server的解耦-通过Router+Controller实现逻辑分发 在实际的系统项目工程中中,我们在写代码的时候要尽量避免不必要的耦合,否则你以后在更新和维护代码的时候会发现如同深陷泥潭,随便改点东西整个系统都要变动的酸爽会让你深切后悔自己当初为什么非要把东西都写到一块去(我不会说我刚实习的时候就是这么干的...) 所以这一篇主要说说如何设计Sever的内部逻辑,将Server处理Client发送信息的这部分逻辑与Sevrer处理Socket连接的逻辑进行解耦- 这一块的实现灵感主要是在读一

  • PHP解耦的三重境界（浅谈服务容器）

    阅读本文之前你需要掌握:PHP语法,面向对象 在完成整个软件项目开发的过程中,有时需要多人合作,有时也可以自己独立完成,不管是哪一种,随着代码量上升,写着写着就"失控"了,渐渐"丑陋接口,肮脏实现",项目维护成本和难度上升,到了难以维持的程度,只有重构或者重新开发. 第一重境界 假设场景:我们需要写一个处理类,能够同时操作会话,数据库和文件系统.我们或许会这么写. 境界特征:可以运行,但是严重耦合 class DB{ public function DB($arg1

  • 关于STL中的map容器的一些总结

    关于STL中的map容器的一些总结

    一.关于map的介绍 map是STL的一个容器,和set一样,map也是一种关联式容器.它提供一对一(其中第一个可以称为关键字,每个关键字只能在map中出现一次,第二个可能称为该关键字的值)的数据处理能力,由于这个特性,有助于我们处理一对一数据.这里说下map内部数据的组织,map内部是自建一颗红黑树(一种非严格意义上的平衡二叉树),这颗树具有对数据自动排序的功能,所以在map内部所有的数据都是有序的.学习map我们一定要理解什么是一对一的数据映射?比如:一个班级中,每个学生的学号跟他的姓名就存

  • Java容器类的深入理解

    Java容器类的深入理解

    Java容器类包含List.ArrayList.Vector及map.HashTable.HashMap ArrayList和HashMap是异步的,Vector和HashTable是同步的,所以Vector和HashTable是线程安全的,而ArrayList和HashMap并不是线程安全的.因为同步需要花费机器时间,所以Vector和HashTable的执行效率要低于ArrayList和HashMap.Collection├List       接口│├LinkedList       链表

随机推荐