使你的Javascript代码进化_网站前端开发_前端开发者

网站前端开发_前端开发者丨JavaScript

https://www.rokub.com

变量命名:

前缀规范:

每个局部变量都需要有一个类型前缀,按照类型可以分为:

[code]s:表示字符串。例如:sName,sHtml;
n:表示数字。例如:nPage,nTotal;
b:表示逻辑。例如:bChecked,bHasLogin;
a:表示数组。例如:aList,aGroup;
r:表示正则表达式。例如:rDomain,rEmail;
f:表示函数。例如:fGetHtml,fInit;
o:表示以上未涉及到的其他对象,例如:oButton,oDate;
g:表示全局变量,例如:gUserName,gLoginTime;[/code]
当然,也可以根据团队及项目需要增加前缀规范,例如我们团队会用到:
$:表示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]

[code]//普通代码
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
}[/code]

函数命名:

[p]统一使用动词或者动词+名词形式,例如:fnGetVersion(),fnSubmitForm(),fnInit();涉及返回逻辑值的函数可以使用is,has,contains等表示逻辑的词语代替动词,例如:fnIsObject(),fnHasClass(),fnContainsElment()。
如果有内部函数,使用_fn+动词+名词形式,内部函数必需在函数最后定义。例如:[/p][code]function fnGetNumber(nTotal) {
if (nTotal < 100) {
nTotal = 100;
}
return _fnAdd(nTotal);

function _fnAdd(nNumber) {
    nNumber++;
    return nNumber;
}

}
alert(fGetNumber(10)); //alert 101[/code]

对象方法与事件响应函数:
补充一些函数方法常用的动词:

[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 聚集[/code]

面向对象书写Javascript

第一类:

[code](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

})();[/code]

[code](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

})();[/code]

第二类:

[code](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

})();[/code]

[code](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

})();[/code]

[p]上面介绍了2类4种面向对象的写法,一般面向对象书写格式基本都在上面了,熟悉面向对象书写可以有效的增加你对js的理解。熟练使用上面4中写法也能够很好的在工作中给代码维护修改带来便利。最后我们再来谈一个技巧,让你的Javascript代码在技巧上进化。
用对象字面量构造对象[/p]

[code](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
})();[/code]

[code](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
})();[/code]

注1:这里形参命名为option,没有遵守上面的变量命名规范是为了方便书写与阅读,具体情况具体分析。
注2:由于||运算符对于布尔值默认赋值会出现赋值问题,所以要先进行判断是否为undefined,再利用三元运算符可以很好的完成布尔值的默认值赋值。

网站前端开发_前端开发者丨前端资源

https://www.rokub.com

» 本文来自:前端开发者 » 《使你的Javascript代码进化_网站前端开发_前端开发者》
» 本文链接地址:https://www.rokub.com/2561.html
» 您也可以订阅本站:https://www.rokub.com
赞(2)
64K

评论 抢沙发

评论前必须登录!