什么样的代码是最优秀的的?我总结的大概分为三点:性能好,简单优雅,通俗易懂,这篇文章就将围绕这这3点来说明,当然也会讲解一些小技巧。
1.避免全局查找,变量搜索顺序为:先局部,后全局;先解析,后赋值
var num=1;
;((w)=>{//添加分号,主要为了防止匿名函数调用上一行定义的函数
console.log(num);//输出nudefined
console.log(w.num);//输出1
var num=10;
console.log(num);//输出10,代表先搜索局部变量
})(window)
2.条件判断,按可能性从高到低,减少条件执行次数
function getStr(){
var num=Math.floor(Math.random()*10+1);//1到10的随机数
switch(true){//注意:如果改为num,case里不能写为范围,只能是变量
case num<8:
return '1-7之间数字'+num;
case num===8 || num===9:
return '8-9之间的数字:'+num;
case 10:
return num;
default:
return 'default'
}
}
console.log(getStr());
3.各种类型转换,通过js特殊方式
//将数字转换成字符串
var num=1,
num_str=""+num;
console.log(num_str+'类型是'+(typeof num_str));//1类型是string
//将字符串转换为其他类型
var str="13.14",
str_int = ~ ~str,
str_float = 1 * str,
str_bool = !!str,
str_array = [str];
console.log(str_int+'类型是'+(typeof str_int));//13类型是number
console.log(str_float+'类型是'+(typeof str_float));//13.14类型是number
console.log(str_bool+'类型是'+(typeof str_bool));//true类型是boolean
console.log(str_array+'类型是'+(typeof str_array));//13.14类型是object
虽然看上去有点丑,但效率却要比parseInt(),parseFloat()等高些,当然使用toString()方法来进行类型转换的也是值得推荐的。
4.优化js的加载
比如通过使用defer,async属性实现js的延迟加载,使用document.createElement ("script")的方式动态加载js等,合并压缩js文件来减少http请求等等
5.其它
能不使用with语句的时候尽量不要使用with语句。
尽量少使用eval ,每次使用eval需要消耗大量时间。
少使用document.write来给页面生成内容,多用innerhtml来添加。
删除dom节点之前,一定要删除注册在该节点上的事件。
通过javascript创建的dom对象,必须append到页面中。
......
1.使用三目运算
var a=1,b=2;num;
if (a>b){
num = a;
}else{
num=b;
}
//可以替换为:
var num = a > b ? a : b;
2.变量递增/递减/乘/除
var num=10
num =num + 1;
num =num - 1;
//改下为
++num;
--num;
/*其它加减乘除*/
num += 2;
num -= 2;
num *= 2;
num /= 2;
3.数组和遍历
var a=new Array();
a[0]="ab"
a[1]="ac"
a[2]="ad"
for(var x=0;x<a.length;x++)
{
console.log(a[x]);
}
//简洁的写法是
var a=['ab','ac','ad'];
for(var x in a)
{
console.log(a[x]);
}
4.一个function就做一件事,拥有统一的属性通过继承实现
function person(name){//定义一个公用类代表:人
this.name = name || 'default';//属性-名称
this.eat= function(){//方法-吃饭
console.log(this.name + '在吃饭!');
};
this.sleep=function(){//方法-睡觉,不同的方法分开写,只用于处理一件事
console.log(this.name+'在睡觉');
};
}
function man(name){//男人
person.call(this);//拥有人类的特征
if(name!=undefined){
this.name = name;
}
}
(function(){
var Super = function(){};
Super.prototype = person.prototype;
man.prototype = new Super();
})();
var m = new man('tony');
console.log(m.name);//tony
console.log(m.eat());//tony在吃饭
console.log(m instanceof person); // true
console.log(m instanceof man); //true
1.命名规范
const RUNTIME_PATH= "./Runtime/";//常量定义不要使用var,名称用大写“_”隔开。
_fn: function () {} //对象内提供给内部调用的接口,通过“_”作为开头。
let num=0;//作用域被限制在块级中的变量的定义。
function fnGetName(){};//方面命名尽量使用驼峰式。
原则是:
变量名区分大小写,允许包含字母、数字、美元符号($)和下划线,但第一个字符不允许是数字,不允许包含空格和其他标点符号
变量命名长度应该尽可能的短,并抓住要点,尽量在变量名中体现出值的类型
尽量避免使用没有意义的命名
禁止使用JavaScript关键词、保留字全名
变量名命名方法常见的有匈牙利命名法、驼峰命名法和帕斯卡命名法
2.变量定义始终在前
无论使用let,var来定义变量,我们尽量把它们写在最前面,多个变量可以用过逗号隔开
3.多使用try catch语句
try {
//语句
}catch (e) {
//出错怎么办
}finally{
//无论结果都会执行的
}
这样能很好的让我们捕获错误。当错误发生时JavaScript 会停止执行,并生成一个错误信息。如果你将 throw 和 try 、 catch一起使用,就可以控制程序输出的错误信息。
我不是个伟大的程序员,我只是个有着一些优秀习惯的程序员而已。与君共勉,愿君写的代码就像阅读优美的文章一样让人流连忘返。还有更多的建议请留言,分享您的知识和经验。
我个人吧,一直认为学习前端技术是比较简单的事情,只要你真的是一步一个脚印的在前进,那你自然会有相应的结果可以收获。这里面包含二个关键点,一,脚踏实地;二,不断努力。
热更新:浏览器的网页通过websocket协议与服务器建立起一个长连接,当服务器的css/js/html进行了修改的时候,服务器会向前端发送一个更新的消息,如果是css或者html发生了改变,网页执行js直接操作dom,局部刷新,如果是js发生了改变,只好刷新整个页面。
作为一个SDK,我们的目标是让使用者能够减少查看文档的时间,所以我们需要提供一些类型的检查和智能提示,一般我们的做法是提供JsDoc,大部分编辑器可以提供快捷生成JsDoc的方式,另一种做法是使用Flow或者TypeScript
Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。
这里我是基于典型的MVC模型,那么为了将现有代码重构为理想的模型,我需要做以下几步:拆分组件,逻辑处理,抽象、聚合数据
前端基础-什么是前端:一、 web1.0时代的网页制作,二、 web2.0时代的前端开发,三、 Web前端能做什么?四、 为什么要学习前端开发,五、 前端开发都有哪些内容,六、 开发环境
web前端HTML篇冷知识点——这是一篇关于前端的技巧使用,或许你做前端很多年了,但是下面的这些你可能闻所未闻。现在这里给大家整理出来,分享给前端的小伙伴们。
CSS篇整理:关于CSS的恶作剧、简单的文字模糊效果、垂直居中、多重边框、实时编辑CSS、创建长宽比固定的元素、CSS中也可以做简单运算
Js篇整理:生成随机字符串、整数的操作、重写原生浏览器方法以实现新功能、关于console的恶作剧、万物皆对象、If语句的变形、禁止别人以iframe加载你的页面、console.table
作为前端小白,经常遇到同样小白的后端,常常不得不三番五次科普一些前端的基础知识,特此做些总结,前后端分离后,后端需要知道的基本前端知识:什么是ajax?跨域、OPTIONS请求、重定向等
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!