1.性能好效率高,浏览器中运行效率高的代码。
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到页面中。
......
2.简洁优雅,用最少的字符写出同样的功能。
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
3.通俗易懂,除了自己他人很快能读懂你的思想。
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一起使用,就可以控制程序输出的错误信息。
相关推荐
本课题利用Vue.js框架开发了一款前端开发工具,该工具可以辅助UI设计师和前端工程师进行页面设计工作,提髙前端开发的效率,减少前端工程师的工作量。 本文论述了该工具的设计和实现过程,该工具提供了页面...
jQuery是一个快速、简洁的JavaScript框架,是一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,...
因此,一些具有开拓创新精神的开发者们便开发出了各种丰富的第三方框架,通过第三方的支持代码实现浏览器兼容性的统一、代码的简化以及功能的增强。 本书作者便是在此背景下,以国外最优秀的JavaScript框架之一...
1、负责系统PC端和移动端页面的前端设计开发工作,为系统的前端开发提供专业的技术解决方案; 2、负责前端功能开发和重构,保持高效的前端性能,优秀的代码可维护性,良好的浏览器兼容性; 3、设计开发高效可复用的UI...
从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对web前端工程师遇到的疑难问题给出了经验性的解决方案,为web前端工程师如何编写更高质量的javascript代码提供了188条极为宝贵的建议。对于每一个问题...
jquery.min.js 前端开发工具 一款优秀的js原生代码库
同时,一款能够真正应用于生产的大型Hybrid App显然需要优秀的逻辑组织框架才能支撑,Ionic考虑到了这一点,它集成了目前前端领域最强大的Angular作为代码组织框架,这为团队协作、代码测试和维护提供了相当强力的...
+无任何的Javascript效果代码参与到框架开发中,极大程度方便您自己扩展js组件和插件 +384个常用web矢量图标,icon大小和颜色灵活变更 +丰富的组合样式,按钮控件样式轻松变 模块: 基础框架 (Base) *必须* 样式...
从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对Web前端工程师遇到的疑难问题给出了经验性的解决方案,为Web前端工程师如何编写更高质量的JavaScript代码提供了188条极为宝贵的建议。对于每一个问题...
产品发布之后,我们会投入更多全职的工程师来专心打磨这个产品,同时也呼吁更多的前端开发爱好者共同来完善这个框架。Amaze UI的目标帮助开发者提高开发效率,提升网页效果,即用最短的时间做出最赞的网页,使更多的...
开发者通过编写 Vue.js 代码,uni-app 将其编译到 iOS、Android、微信小程序、H5等多个平台,保证其正确运行并达到优秀体验。
Vue的组件化开发方式,使得前端代码更加模块化,易于复用与扩展。同时,Vue的数据驱动视图模式,也极大地简化了前端与后端的交互过程,提高了开发效率。 该系统还具备良好的可定制性,用户可以根据实际需求进行二次...
为了方便用户在WEB端使用YOLOv5进行目标检测,本项目将使用VUE框架开发前端界面,并部署YOLOv5模型。 项目目标: 使用VUE框架开发一个简洁易用的WEB端目标检测应用。 部署YOLOv5模型,实现实时目标检测功能。 优化...
uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。官网地址:https://uniapp.dcloud.io开发者使用 Vue 语法编写代码,uni-app 框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ/快手/钉钉/小红书...
其次,我们采用了前端开发的最新技术和工具,如HTML5、CSS3和JavaScript。我们使用了响应式设计来确保我们的应用程序在不同设备上都能提供最佳的用户体验。我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery...
其次,我们采用了前端开发的最新技术和工具,如HTML5、CSS3和JavaScript。我们使用了响应式设计来确保我们的应用程序在不同设备上都能提供最佳的用户体验。我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery...
其次,我们采用了前端开发的最新技术和工具,如HTML5、CSS3和JavaScript。我们使用了响应式设计来确保我们的应用程序在不同设备上都能提供最佳的用户体验。我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery...
H+ 后台主题UI框架4.1.0(牛B的收费 的框架) H+是一个完全响应式,基于Bootstrap3.3.6最新版本开发的扁平化主题,她采用了主流的左右两栏式布局,使用了Html5+CSS3等现代技术,她提供了诸多的...10.拥有良好的代码结构
通过学习和研究该项目的源代码,开发者可以深入了解Spring Boot和Vue.js的实际应用,掌握前后端分离的开发方式,以及如何利用这些技术构建出一个功能完善、性能优良的美食分享网站。同时,也可以根据自己的需求对该...
uni-app 是一个使用 Vue.js 开发小程序、H5、App的统一前端框架。开发者使用 Vue 语法编写代码,uni-app 框架将其编译到 小程序(微信/支付宝/百度/字节跳动/QQ/快手/钉钉/小红书)、App(iOS/Android)、H5等多个...