提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

JavaScript基本编码模式小结

JavaScript编码模式 基本 小结
2023-06-13 09:14:33 时间
无论编写任何程序都会接触到编码风格，设计模式等概念，编码风格一般侧重于书写规范，而设计模式则偏向于程序架构设计。本文中笔者整理的这些“模式”包含了编写JavaScript代码时一些常用的方法或者小技巧，可以帮助初学JavaScript的同学迅速提升代码质量。当然，在此之前首先要保证规范的书写习惯，在此之上可以再将本文介绍的知识点运用到代码编写中，则可以大大提升代码质量。
下面是笔者整理的一些点，没有什么逻辑顺序，想到哪儿写到哪儿了，不足之处欢迎大家补充指正。
1.变量定义
复制代码代码如下:

//一般写法
vara=0;
varb=1;
varc="xxx";
//推荐写法
vara=0,
b=1,
c="xxx";

2.尽量使用字面量
复制代码代码如下:

//一般写法
varobj=newObject();
obj.a="aa";
obj.b="bb";
obj.c="cc";
vararr=newArray();
//推荐写法
varobj={
a:"aa",
b:"bb"
};
vararr=[];
functiongetXX(index){
return["aa","bb","xx",55,"xxb"](index);
}
functiongetMessage(code){
return{
404:"xxx",
500:"xxx"
}[code];
}

3.正则字面量
复制代码代码如下:
varregex=newRegExp("someting");
//当正则表达式可能变化时才使用构造函数
varcls="someclass",
regex=newRegExp(cls+"\\s*","ig");//onlyfordynamicregexs
//其他情况均使用字面量
varregex=/someting/ig;

4.设置默认值
复制代码代码如下:
//Defaultvalues
vararg=arg||"default";//fallback
document.getElementById("test").onclick=function(event){
varevent=event||window.event;
};
functiongetX(a){
returna+1||"default";
}

5.条件判断
复制代码代码如下:
//Conditions
answer=obj&&obj.xx&&obj.xx.xxx;
//连续判断
if(obj&&obj.xx&&obj.xx.xxx){
//dosomething
}
if(obj.xx){
//dosomething
}
if(!obj){
//dosomething
}
//使用全等判断
if(a===b){
//dosomething
}
//尽量不检测浏览器，仅检测要使用的特性是否支持
if(document.getElementById){
//abilitydetect
}

6.三元操作符
复制代码代码如下:
//Ternary
check?value1:value2;
//三元操作符更简洁
varfoo=(condition)?value1:value2;
functionxx(){
if(condition){
returnvalue1;
}else{
returnvalue2;
}
}
functionxx(){
return(condition)?value1:value2;
}
//格式化三元操作符
foo=predicate?"one":
predicate?"two":
"default";//format

7.插入迭代值
复制代码代码如下:
//Insertiteration
varname=value[i];
i++;
//直接将迭代值插入
varname=value[i++];

8.DOM操作
复制代码代码如下:
//DOMOperation
el.style.display="none";//offline
//operation
el.style.display="block";
//使用文档碎片操作更好
varfragment=document.createDocumentFragment();//better
el.innerHTML="";//fastremoveallchildren,butmayleaksmemory
el.innerHTML="xxx";//ok,useit!
//小心处理NodeList
varimages=document.getElementsByTagName("img");//becareful!dynamiclist

9.事件代理
复制代码代码如下:
//使用事件代理，在更外层的元素上监听事件
document.getElementById("list").onclick=function(evt){
varevt=evt||window.event,
target=evt.target||evt.srcElement;
if(target.id==="btn1"){
//dosomething
}
}

10.命名空间
复制代码代码如下:
//AnObjectasaNamespace
varMYAPP={};
MYAPP.dom.get=function(id){};
MYAPP.style.css=function(el,style){};
MYAPP.namespace("event");

11.链式操作
复制代码代码如下:
//Chainingoperation:returnthis
functionsetValue(el,value){
el.value=value;
returnthis;
}
varobj=newMYAPP.dom.Element("span");
obj.setText("hello")
.setStyle("color","red")
.setStyle("font","Verdana");

12.私有作用域
复制代码代码如下:
//Function
(function(){
var_private="cantseeme";
})();
(function($){
$("#xxb").click(function(){});
})(jQuery);

13.配置对象
复制代码代码如下:
//ConfigureObject
functionfoo(id,conf,null,null){
//dosomethin
}
foo("bar",{
key1:1,
key2:2
});

14.类型转换
复制代码代码如下:
//TypeConversion
+"010"===10;
Number("010")===10;
parseInt("010",10)===10;
10+""==="10";
+newDate()//timestamp
+newDate;

15.扩展原型
复制代码代码如下:
//仅在需要向前兼容时才使用，其他情况不建议扩展原型对象
Array.prototype.forEach=function(){
//onlyforforwardcompatible
};

16.循环优化
复制代码代码如下:
//缓存
for(vari=0,j=document.getElementsByTagName("a").length;i0;i--){
//maybefaster
}
//据说是最快的
while(i--){
//maybefastest
}

17.尽量使用新特新
复制代码代码如下:
Array.forEach();
getElementsByClassName();
querySlectorAll();
//首先检测是否支持新特性，能用就用
if(document.getElementsByClassName){
//use
}else{
//yourimplementations
}

18.惰性载入
复制代码代码如下:
//只判断一次，再次调用该函数则无需判断
functionlazyDef(){
if(condition1){
lazyDef=function(){};
}elseif(condition2){
lazyDef=function(){};
}
returnlazyDef();
}

19.私有函数与公共方法
复制代码代码如下:
varMYAPP={};
MYAPP.dom=(function(){
var_setStyle=function(el,prop,value){
console.log("setStyle");
};
return{
setStyle:_setStyle
};
})();
//当MYAPP.dom.setStyle不慎被覆写时，_setStyle在内部仍然可用

20.调试
复制代码代码如下:
//尽量使用，可以传入多个参数，最后输出拼接后的字符串
console.log("xx","xx","...");
console.dir(someObj);
console.dirxml(someDom);
console.time("timer");
console.warn("xxx");
//封装可以保证不小心发布出去也不会导致问题，但报错时行号可能有问题
functionmsg(msg){
if(console&&console.log){
console.log(msg);//wronglinenumber
}
}

基本上目前想到的只有这些，欢迎大家补充讨论：）

相关文章