关闭

10个初学者必知的JavaScript 实用技巧

时间: 2020-08-04阅读: 641标签: 技巧

今天我要来介绍几个我觉得是一般新手都应该要知道的一些写JavaScript的技巧,让你再学习写JavaScript的时候可以提升写code的品质,更可以解决一些后续的问题。  


top1. 宣告变数的时候给预设型别

JavaScript宣告变数的时候应该要给它预设的类型!
这样做可以让接手你的程式的人或是未来的自己再观看程式码上面可以清楚的知道这个变数预设给他定义的类型是什么。

# Bad 
var name;
var userData;
var isOpen;
# Good
var name = "";
var userData = [];
var isOpen = false;


top2. 使用=== 来进行判断

写判断式的时候不要再用==来判断,应该全部都改成===!
我们都知道JavaScript是一个弱型别语言,使用==来判断就会出现像是"1" == 1是true的奇怪现象,为了避免判断上面出现这种我要Number但是你给我String的情况,我们判断都应该使用===

# Good 
if(val === 1){
console.log('ok')
}


top3. 使用return 代替if else

if else没有不好,只是某些情形使用return会让你的code更直观!
我们应该让看code的人像是再读code,而不是读逻辑,这样可以加快别人理解我们code,也可以避免过于复杂的逻辑。

# Bad 
if(value === ""){
alert("栏位不得为空")
}else{
//后续其他动作
}
# Good
if(value === ""){
alert("栏位不得为空");
return;
}
//后续其他动作
# Good
if(value === "") return alert("栏位不得为空");
//后续其他动作


top4. 不要直接修改DOM的css

再改变DOM元素的style的时候,应该尽量避免直接用JavaScript操作css !
直接操作会让接手你专案的人不会知道你用JavaScript去改变style,会增加数倍维护成本,建议是使用add或remove的class方法来取代,当遇到修改style的时候就可以很方便的改CSS就好。

# Bad 
document.getElementById("dom").style.color = '#f00';
# Good
//css
.textRed{
color: #f00;
}
//javascript
document.getElementById("dom").classList.add('textRed');
document.getElementById("dom").classList.remove('textRed ');


top5. 简单的动画不要用JavaScript 函式库

请善用css3的transition,动态也比较顺畅
初学者学习到一些像是jquery 的javascript函式库时候就会喜欢把所有的动态交给函式库来做,例如hover一个按钮改变颜色或是选单跑出来等等,但是这样在行动装式上面会很卡不流畅,所以像是简单的动态都其实可以交给css3 的transition来处理,会顺畅很多。

# Bad 
// js (jquery)
$("#btn").on('hover', function (){
$(this).animate({top: "200"}, 300);
})
# Good
// CSS
#btn{
top : 0px;
transition : top 0.3s;
}
#btn:hover{
top : 200px;
}


top6. 筛选资料你应该用filter

善加利用filter来筛选资料可以提高code的可读性
蛮多人喜欢筛选资料的时候透过for迴圈在里面用if来筛选资料,不能说是错,但是code看起来很冗长,不漂亮,我们应该使用filter来做资料的筛选。

# Bad 
var arr = [];
for( var i = 0; i < data.length; i++){
if(data[i].money > 300){
arr.push(data[i]);
}
}
# Good
var arr = data.filter( function (obj){
return obj.money > 300;
})


top7.妥善利用 console.log 来debug

用console.log来确认程式的运行流程,避免程式执行跟自己想的不一样!
我们都是用console.log来确认变数的内容,却很少利用console.log来判断程式的执行顺序,尤其是遇到跟非同步执行有关的问题更应该先确保程式流程没错,不过记得上线要把测试的console.log给拿掉,毕竟log是会消耗效能的,这个方法只有在debug阶段适用。

# Bad//这是一个错误的例子
//非同步,因为资料还没有回来所以return的资料是空阵列
function getData(){
var data = [];
axios.get("/api/userData").then( function (response) {
data = response.data;
})
.catch(function (error) {
console.error(error);
})
return data;
}
var res = getData(); // ----> []//虽然是错误的例子,但是在每个执行接console.log()
//透过这样的console.log()方式可以清楚知道程式运行流程
function getData(){
console.log(1);
var data = [];
console.log(2);
axios.get("/api/userData").then(function (response) {
console.log(3);
data = response.data;
console.log(4);
})
.catch(function (error) {
console.error(error);
})
console.log(5);
return data;
}
var res = getData(); // ----> []// log : 1 -> 2 -> 5 -> 3 -> 4
//从这边可以清楚知道程式不是照自己想的1 -> 2 -> 3 -> 4 -> 5这样执行的
//方便我们debug

top8. 整合<script> 载入的进入点

不要依照设计稿的区块来分档写js,应该要将主程式集中,尤其是在做区块的非同步处理然后要跨区块做资料沟通时,分档撰写只会给自己找麻烦。

# Bad 
<script src="./js/jquery.min.js"></script>
//以下都是主程式
<script src="./js/slidshow.js"></script>
<script src ="./js/banner.js"></script>
<script src="./js/tab.js"></script>
<script src="./js/login.js"></script >
<script src="./js/index.js"></script>
# Good
<script src="./js/jquery.min.js"></script>
<script src="./js/index.js"></script>


top9. 不要操作原始阵列

当传入array进去函式里面进行操作的时候,我们应该先拷贝一份阵列!
传入函式的array因为记忆体指向都是同一个,所以如果我们把传入的array直接操作会修改到原始资料,为了避免这种情况我们应该要用slice(0)先复制一份阵列再来操作。

# Bad 
function Num(list){
list.push("9");
}
var arr = [1,2,3];
Num(arr);
console.log(arr) // ---> [1, 2, 3, "9"]
# Good
function Num(list){
var newArr = list.slice(0)
newArr.push("9");
}
var arr = [1,2,3];
Num(arr);
console.log(arr) // ---> [1, 2, 3]


top10. 不要bind this

this的指向一直都是JavaScript中最令人头疼的问题,尤其是为了用function来模拟class的使用上面,常常需要让绑定事件内this指向到function ( class )的实体上,所以常会使用到bind,使用bind会造成函式的记忆体增加,我们应该使用变数来储存this来调用,而不是bind。

# Bad 
function Apple(){
this.name = "mike";
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
alert(this.name);
}.bind( this));
}
new Apple();
# Good
function Apple(){
this.name = "mike";
var self = this;
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
alert(self.name) ;
});
}
new Apple();

来自:https://medium.com/i-am-mike

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9565

关闭

9个强大的Js小技巧

以下是 9 个功能强大的 JavaScript hack 技巧。全部替换我们知道 string.replace() 函数仅替换第一次出现的情况。你可以通过在正则表达式的末尾添加 /g 来替换所有出现的内容。

网站性能延迟加载图像的五种技巧

即使经过适当的优化,图像也会有相当大的重量。这可能会对访问者在访问网站内容之前等待的时间产生负面影响。很有可能,它们会失去耐心,转向其他地方,除非你能想出一个不影响速度感知的图像加载解决方案。在本文中,您将学习有关延迟加载图像的五种方法

如何能提高CSS编写技巧?提高Web前端开发效率

如何能提高CSS编写技巧?怎么学好Web前端开发?很多人在学习Web前端时,刚开始都会学习HTML和CSS,HTML用于文本内容,CSS用于样式设计,掌握这两部分知识就可以进行简单的页面制作。不过如果耗时过长作品一般未免有些得不偿失

超实用的JQuery小技巧

JQuery是一个 JavaScript 库,她极大的简化了我们对 JavaScript 的编程。今天我们总结了下平常项目中用到的一些小技巧,仅供参考。

10条提高开发效率的JS技巧

总结一些能够提高开发效率的JS技巧,这些技巧很实用,觉得挺好,想推荐给大家,所以有了这篇文章。生成随机UID;无loop生成指定长度的数组;一行代码去重数组;RGB色值生成16进制色值

12 个 CSS 高级技巧汇总

使用 :not() 在菜单上应用/取消应用边框;给body添加行高;所有一切都垂直居中;逗号分隔的列表;使用负的 nth-child 选择项目;对图标使用SVG;优化显示文本;对纯CSS滑块使用 max-height;继承 box-sizing

编写更好的 JavaScript 条件式和匹配条件的技巧

如果你像我一样乐于见到整洁的代码,那么你会尽可能地减少代码中的条件语句。通常情况下,面向对象编程让我们得以避免条件式,并代之以继承和多