变量命名:
前缀规范:
每个局部变量都需要有一个类型前缀, 按照类型可以分为:
s: 表示字符串. 例如: sName,shtml;
n: 表示数字. 例如: nPage,nTotal;
b: 表示逻辑. 例如: bChecked,bHasLogin;
a: 表示数组. 例如: aList,aGroup;
r: 表示正则表达式. 例如: rDomain,rEmail;
f: 表示函数. 例如: fGetHtml,fInit;
o: 表示以上未涉及到的其他对象, 例如: oButton,oDate;
g: 表示全局变量, 例如: gUserName,gLoginTime;
当然, 也可以根据团队及项目需要增加前缀规范, 例如我们团队会用到:
$: 表示 Jquery 对象. 例如:$Content,$Module;
一种比较广泛的 Jquery 对象变量命名规范.
j: 表示 Jquery 对象. 例如: jContent, jModule;
另一种 Jquery 对象变量命名方式.
fn: 表示函数. 例如: fnGetName,fnSetAge;
和上面函数的前缀略有不同, 改用 fn 来代替, 个人认为 fn 能够更好的区分普通变量和函数变量.
dom: 表示 Dom 对象, 例如: domForm,domInput;
项目中很多地方会用到原生的 Dom 方法及属性, 可以根据团队需要适当修改.
这里可以根据项目及团队需要, 设计出针对项目需要的前缀规范, 从而达到团队开发协作便利的目的.
例外情况:
[list=1]
[] 作用域不大临时变量可以简写, 比如: str,num,bol,obj,fun,arr.
[] 循环变量可以简写, 比如: i,j,k 等.
[*] 某些作为不允许修改值的变量认为是常量, 全部字母都大写. 例如: COPYRIGHT,PI. 常量可以存在于函数中, 也可以存在于全局.
- [/list]
- // 普通代码
- var checked = false;
- var check = function() {
- return true;
- }
- /
- some code
- /
- if(check) {// 已经无法很确切知道这里是要用 checked 还是 check() 从而导致逻辑错误
- //do some thing
- }
- // 规范后代码
- var bChecked = false;
- var fnCheck = function() {
- return true;
- }
- /
- some code
- /
- if(bChecked) {
- // do some thing
- }
- if(fnCheck()) {
- // do other thing
- }
函数命名:
[p] 统一使用动词或者动词 + 名词形式, 例如: fnGetVersion(),fnSubmitForm(),fnInit(); 涉及返回逻辑值的函数可以使用 is,has,contains 等表示逻辑的词语代替动词, 例如: fnIsObject(),fnHasClass(),fnContainsElment().
如果有内部函数, 使用_fn + 动词 + 名词形式, 内部函数必需在函数最后定义. 例如:[/p]
- function fnGetNumber(nTotal) {
- if (nTotal < 100) {
- nTotal = 100;
- }
- return _fnAdd(nTotal);
- function _fnAdd(nNumber) {
- nNumber++;
- return nNumber;
- }
- }
- alert(fGetNumber(10)); //alert 101[/code]
对象方法与事件响应函数:
补充一些函数方法常用的动词:
get 获取 / set 设置, add 增加 / remove 删除
create 创建 / destory 移除 start 启动 / stop 停止
open 打开 / close 关闭, read 读取 / write 写入
load 载入 / save 保存, create 创建 / destroy 销毁
begin 开始 / end 结束, backup 备份 / restore 恢复
import 导入 / export 导出, split 分割 / merge 合并
inject 注入 / extract 提取, attach 附着 / detach 脱离
bind 绑定 / separate 分离, view 查看 / browse 浏览
edit 编辑 / modify 修改, select 选取 / mark 标记
copy 复制 / paste 粘贴, undo 撤销 / redo 重做
insert 插入 / delete 移除, add 加入 / append 添加
clean 清理 / clear 清除, index 索引 / sort 排序
find 查找 / search 搜索, increase 增加 / decrease 减少
play 播放 / pause 暂停, launch 启动 / run 运行
compile 编译 / execute 执行, debug 调试 / trace 跟踪
observe 观察 / listen 监听, build 构建 / publish 发布
input 输入 / output 输出, encode 编码 / decode 解码
encrypt 加密 / decrypt 解密, compress 压缩 / decompress 解压缩
pack 打包 / unpack 解包, parse 解析 / emit 生成
connect 连接 / disconnect 断开, send 发送 / receive 接收
download 下载 / upload 上传, refresh 刷新 / synchronize 同步
update 更新 / revert 复原, lock 锁定 / unlock 解锁
check out 签出 / check in 签入, submit 提交 / commit 交付
push 推 / pull 拉, expand 展开 / collapse 折叠
begin 起始 / end 结束, start 开始 / finish 完成
enter 进入 / exit 退出, abort 放弃 / quit 离开
obsolete 废弃 / depreciate 废旧, collect 收集 / aggregate 聚集
面向对象书写 Javascript
第一类:
- (function(){
- function Circle(nRadius){
- this.nR = nRadius;
- }
- Circle.prototype = {
- PI : 3.14,
- fnGetArea : function(){
- return this.PI this.nR this.nR;
- }
- }
- var c1 = new Circle(5);
- alert(c1.fnGetArea()); //78.5
- })();
- (function(){
- function Circle(nRadius, sMessage){
- this.init.apply(this, arguments);
- }
- Circle.prototype = {
- init : function(nRadius, sMessage){
- this.nR = nRadius;
- this.sMessage = sMessage;
- },
- PI : 3.14,
- fnGetArea : function(){
- return this.sMessage + ":" + this.PI this.nR this.nR;
- }
- }
- var c = new Circle(5, "构造初始化 面积");
- alert(c.fnGetArea()); // 构造初始化 面积: 78.5
- })();
第二类:
- (function(){
- function Circle(){
- }
- Circle.prototype = {
- init : function(nRadius, sMessage){
- this.nR = nRadius;
- this.sMessage = sMessage;
- },
- PI : 3.14,
- fnGetArea : function(){
- return this.sMessage + ":" + this.PI this.nR this.nR;
- }
- }
- var c = new Circle();
- c.init(5, "手动构造初始化 面积");
- alert(c.fnGetArea()); // 手动构造初始化 面积: 78.5
- })();
- (function(){
- var Circle = {
- init : function(nRadius, sMessage){
- this.nR = nRadius;
- this.sMessage = sMessage;
- },
- PI : 3.14,
- fnGetArea : function(){
- return this.sMessage + ":" + this.PI this.nR this.nR;
- }
- }
- Circle.init(5, "封装型 面积");
- alert(Circle.fnGetArea()); // 封装型 面积: 78.5
- })();
[p] 上面介绍了 2 类 4 种面向对象的写法, 一般面向对象书写格式基本都在上面了, 熟悉面向对象书写可以有效的增加你对 JS 的理解. 熟练使用上面 4 中写法也能够很好的在工作中给代码维护修改带来便利. 最后我们再来谈一个技巧, 让你的 Javascript 代码在技巧上进化.
用对象字面量构造对象 [/p]
- (function(){
- function Person(sName, nAge, nWeight, bSingle){
- this.sName = sName;
- this.nAge = nAge;
- this.nWeight = nWeight;
- this.bSingle = bSingle;
- }
- Person.prototype.showInfo = function(){
- return this.sName + "" + this.nAge +" "+ this.nWeight +" " + this.bSingle;
- }
- var p = new Person("海玉", 25, 75, true);
- alert(p.showInfo()); // 海玉 25 75 true
- })();
- (function(){
- function Person(){
- }
- Person.prototype = {
- init : function(option){
- if(typeof option == "undefined"){
- option = {};
- }
- this.sName = option.sName || "海玉";
- this.nAge = option.nAge || 25;
- this.nWeight = option.nWeight || 75;
- this.bSingle = (typeof option.bSingle != "undefined") ? option.bSingle : true;
- },
- showInfo : function(){
- return this.sName + "" + this.nAge +" "+ this.nWeight +" " + this.bSingle;
- }
- }
- var p = new Person();
- p.init({
- nWeight : 80,
- sName : "Hank"
- })
- alert(p.showInfo()); //Hank 25 80 true
- })();
注 1: 这里形参命名为 option, 没有遵守上面的变量命名规范是为了方便书写与阅读, 具体情况具体分析.
注 2: 由于 || 运算符对于布尔值默认赋值会出现赋值问题, 所以要先进行判断是否为 undefined, 再利用三元运算符可以很好的完成布尔值的默认值赋值.
来源: http://www.qdfuns.com/article/15286/6c305463439e77af2915164993367389.html