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

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

今天我要来介绍几个我觉得是一般新手都应该要知道的一些写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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

9个强大的Js小技巧

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

几个优雅的JavaScript运算符使用技巧

ECMAScript发展进程中,会有很多功能的更新,比如销毁,箭头功能,模块,它们极大的改变JavaScript编写方式,可能有些人喜欢,有些人不喜欢,但像每个新功能一样,我们最终会习惯它们

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

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

《CSS世界》中提到的实用技巧

清除浮动主要用于子元素浮动(float)之后,父元素无法撑起高度和宽度。文字少时居中,多时靠左因为div嵌套着p,所以p的尺寸并不会超过div。但是要注意,当p的内容为英文单词组成的时候

CSS-in-JS 库 styled-class

为什么要在JavaScript里写CSS?避免命名全局污染,条件和动态样式(比如选择主题色之类的),在框架层面进行限制或补充(比如补全供应商前缀),避免业务人员使用奇技淫巧

总结移动端H5开发常用技巧

安卓上会对符合邮箱格式的字符串进行识别,我们可以通过如下的 meta 来管别邮箱的自动识别:移动端 H5 项目越来越多,设计师对于 UI 的要求也越来越高,比如 1px 的边框。在高清屏下,移动端的 1px 会很粗。

移动端开发必须知道的小技巧

最近在公司写一个混合 app 项目,页面基本全部都是用 H5 完成,嵌入到原生 webview 下。发现一个问题,在 iPhone 6 下 苹果手机的状态栏会挡住页面,导致页面下移,样式错乱,最后网上查找了些解决办法,加了一条 meta 标签解决了问题

编写更快、更好的JavaScript的13个技巧

10年前,亚马逊分享一个例子,每100毫秒的延迟都会是他们损失1%的销售收入,即在全年中,每增加1秒钟的加载时间将使该公司损失约16亿美元。同样,谷歌发现搜索页面的生成时间增加500毫秒,访问量将减少20%,潜在的广告收入也将减少五分之一

JavaScript常用编码小技巧

这篇文章适合任何一位基于JavaScript开发的开发者。我写这篇文章主要涉及JavaScript中一些简写的代码,帮助大家更好理解一些JavaScript的基础。希望这些代码能从不同的角度帮助你更好的理解JavaScript。

编程技巧:重构if...else if...else

新入职的公司,前人留下来一个项目,里面充斥着大量的if...else...,则倒是其次,主要连注释写的都很少。面对这样的已经上线的代码,我并没有想去重构他因为成本太高,只好鞭策自己不要写出这种代码

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!