javascript编写(javascript构造函数)
很多朋友对于javascript编写和javascript构造函数不太懂,今天就由小编来为大家分享,希望可以帮助到大家,下面一起来看看吧!
javascript用什么软件编写
可以编写JavaScript的软件众多,以下是一些常用且功能强大的工具:
WebStorm
作为最智能化的JavaScript集成开发环境(IDE),WebStorm功能全面,支持复杂的客户端和服务器端开发。它提供代码补全、语法高亮、错误检测、重构工具以及调试功能,尤其适合大型项目开发。其内置的Node.js支持、版本控制集成(如Git)和丰富的插件生态进一步提升了开发效率。
Visual Studio Code(VS Code)
由微软开发的免费开源编辑器,支持JavaScript、TypeScript等多种语言。VS Code以轻量级、高扩展性著称,通过安装插件可实现代码补全、语法高亮、Git命令集成、调试工具等功能。其丰富的插件市场(如ESLint、Prettier)和跨平台支持(Windows/macOS/Linux)使其成为开发者首选工具之一。
Atom
由GitHub团队开发,强调可定制性。Atom自带包管理工具,支持代码补全、文件系统浏览、多平台使用,并允许用户通过插件扩展功能。其简洁的界面和灵活的配置适合追求个性化的开发者。
Sublime Text
轻量级但功能强大的跨平台编辑器,支持JavaScript语法高亮、代码折叠、宏录制和多重选择(Multi-Selection)。其强大的快捷键系统和Vim模式支持提升了编辑效率,适合快速编写和修改代码。
Notepad++
免费开源的纯文本编辑器,支持多语言编写(包括JavaScript)。它提供语法高亮、语法折叠、宏录制和插件扩展功能,比Windows记事本更强大,适合轻量级脚本编写或简单项目。
Eclipse
跨平台集成开发环境,最初以Java开发为主,但通过插件可支持JavaScript、C++等语言。其强大的调试工具和项目管理功能适合企业级应用开发。
HBuilder
专为HTML5和Web开发设计的IDE,基于Eclipse但优化了速度。它提供完整的语法提示、代码块和输入法,显著提升HTML、JavaScript和CSS的开发效率,尤其适合前端开发者。
Komodo Edit
免费开源的代码编辑器,支持JavaScript及其他多种语言。它提供代码补全、语法高亮和调试工具,适合多语言项目开发。
Brackets
轻量级开源编辑器,专注于Web开发。其核心功能包括实时预览(修改代码后立即查看效果)和行内编辑,适合前端开发者快速迭代设计。
Spket
功能强大的工具包,支持JavaScript、XUL/XBL和Yahoo! Widget开发。它提供代码补全、语法高亮和内容概要功能,适合特定领域(如XML交互)的JavaScript开发。
IxEdit
基于JavaScript的交互设计工具,允许设计师通过可视化界面操作DOM元素,无需手动编写代码,适合非技术背景的设计师快速实现动态效果。
CodeMirror
基于JavaScript的在线代码编辑器库,支持多种语言模式和高级编辑功能。它是许多在线IDE(如CodePen)的基础组件,适合需要嵌入代码编辑功能的Web应用。
KineticWing
免费轻量级IDE,支持HTML5、CSS3、Sass/Less和CoffeeScript。其现代界面和智能文本编辑功能适合前端开发初学者。
EpicEditor
可嵌入的JavaScript Markdown编辑器,支持分体式全屏编辑、实时预览和自动保存草稿,适合需要Markdown支持的项目。
Scripted
基于浏览器的JavaScript编辑器,通过本地Node.js服务器提供服务,适合快速编辑和测试JavaScript代码。
NetBeans
跨平台IDE,支持JavaScript及其他多种语言。其强大的项目管理工具和调试功能适合企业级应用开发。
ACe
可嵌入的代码编辑器,模拟Sublime、Vim等本地编辑器的功能和性能,适合需要轻量级嵌入方案的Web应用。
CodePress
基于Web的源代码编辑器,实时语法高亮显示,适合需要在线编辑代码的场景。
开发者可根据项目需求(如规模、复杂度、团队协作)和个人偏好(如界面风格、快捷键习惯)选择合适的工具。例如,大型项目推荐WebStorm或VS Code,轻量级开发可选择Sublime Text或Atom,前端设计可尝试Brackets或IxEdit。
如何编写高质量的Javascript代码
1、避免全局变量,因为全局变量容易发生名称上的冲突,可维护性不好。
a,使用命名空间
b,使用闭包
c,在函数内部使用var声明
2、编写可维护的代码
a.可读性
b.连续性
c.预见性
d.看起来是一个人写的
e.有文档
3、不要扩展内建的原型
扩展原型的构造函数,可以提供一些很强大的功能,但是有时候他太强大了。
有时候你会去扩展Object(),Array(),Fucntion()的原型方法,这样会导致可维护性的问题,因为这会让你的代码的移植性变差。其他的开发人员使用你的代码的时候,可能只需要原生的方法,并不需要额外的功能。
另外,你添加进去的方法,如果在循环的时候没有使用hasOwnProperty方法就会被遍历出来,这会让人很迷惑。
所以,最好还是不要扩展基本的对象。除非是下面的情况:
a.你确定在将来根据ECMAScript规范,浏览器会添加相应的原型方法,那么是可以的,你只不过是提前实现了这个功能。
b.你确定的你要实现的方法不存在–或许有时候在代码的其他的地方实现了,或者有的浏览器支持,这都是不行的。
c.有非常清晰的文档,并且与团队成员沟通过
4、避免隐藏的类型转换
Javascript在你比较两个变量的时候会进行类型的转换,这就是为什么 false== 0或者”"== 0会返回true。
为了避免这种隐藏的类型转换带来的迷惑,最好使用===或者!==操作符来比较:
5、避免使用eval()
如果在你的代码中使用eval(),那么要记住”eval() is evil”。这个方法会将传入的字符串当做js代码来执行。如果代码是在运行前就确定的,那么没有必要使用eval()。如果代码是在运行时动态确定的,那么也有其他更安全的办法。例如使用方括号形式访问元素的属性:
// antipattern
var property="name";
alert(eval("obj."+ property));
// preferred
var property="name";
alert(obj[property]);
使用eval()还有安全问题,比如运行网络上的一段代码,而这段代码又被别人篡改了。在处理Ajax请求返回的JSON数据的时候,最好还是使用浏览器内建的处理方法,如果对于低端的浏览器不支持的,可以从JSON.org上下载对应的处理库。
6、使用parseInt()转换处理数字
使用parseInt()你可以将字符串转为数字。这个方法支持第二个表示进制的参数,常常被忽略。问题常常在处理一段以0开始的字符串的时候。在ECMAS3标准中,以0开始表示八进制,但是在ES5中又改了,所以为了避免麻烦,最好还是标明第二个参数。
7、编码规范
编码的时候遵循一定的规范,可以让代码增强可移植性,并且更加便于阅读和理解。加入团队的新人,在阅读了代码规范之后,可以更加快速的溶入团队,并理解其他人员开发的代码。
8、缩进
代码如果没有缩进,那基本上没法阅读了。比这更糟的是不规范的缩进,看着好像缩进了,但是乱七八糟摸不着头脑。所以缩进的使用必须规范。团队遵循统一的规范
9、大括号
应该使用大括号,尤其在那些可用可不用的地方,如果你的if语句或者for循环只有一句话,那么大括号不是必须的,但是这种时候最好用大括号。这可以让代码保持一致,并且便于升级。
10、命名规范
可以提高代码移植性和可维护性的一个方面是命名规范。也就是说,在取变量名的时候总是采取一贯的做法。
11、写注释
必须给代码写注释,就算它看起来不会被别人接手。有时候,研究完一个问题,然后你看着代码觉得那是显而易见的,但是过一两周之后回头再看,你也会摸不着头脑的。
如何写好JavaScript
前言
在实际工作中,我们应该经常会看到一些功能上没有问题,但编码风格和规范却十分糟糕的代码,这往往会让人不敢再往下阅读,甚至会影响阅读者一天的心情。这些代码不仅不易阅读,而且难以维护,它们一般会出自刚入门的编程新手,也会出自工作了好几年的老程序员手下。因此本文的目的在于帮助那些没有养成良好的编码风格,缺乏相应编码规范意识的JavaScript学习者们改善他们的编码形象。
编码形象
以上我提出了编码形象的概念,我个人认为:
编码形象=编码风格+编码规范
一个良好的编码形象就等于一个穿着得体的青年,对于程序员来说这是同行了解你优秀能力的最直接最简单的方式。
我们来看一下一段糟糕的编码形象:
//打个招呼
function func(){
var age=18,sex='man';
var greeting='hello';
if(age<=18&&sex=='man'){
console.log(greeting+'little boy')
}
...
}
func()
上方代码整体缩在了一起,缺乏规范意识,阅读体验很差,不忍直视。
再来看一段良好的代码形象:
//打个招呼
function greetFn(){
var age= 18,
sex='man',
greeting='hello';
if(age<= 18&& sex==='man'){
console.log(greeting+'little boy');
}
...
};
greetFn();
上方的代码是不是感觉舒服多了?
由此可见养成一个良好的编码形象是至关重要的,而本文主要讲解的是基于JavaScript的编码形象,即基于JavaScript的编码风格和编码规范。
那么什么是编码风格,什么是编码规范,两者的区别又是什么?
编码风格
首先编码风格既然是风格,就没有对错之分。就好比每个人的穿着打扮不同,有的人穿的比较得体,有的人穿的比较随意而已。
而在JavaScript编码风格中,也有一套比较得体的风格,尤其在团队开发中,我们不能随意的书写属于自己的风格。
下面就列举几种随意的编码风格,并将其与良好的编码风格进行对比。
1.合理注释//不推荐的写法
var name='劳卜';//代码和注释之间没有间隔
if(name){
/*
*注释之前无空行
*星号后面无空格
*/
}//推荐的写法
var name='劳卜';//代码和注释之间有间隔
if(name){
/*
*注释之前有空行
*星号后面有空格
*/
}
2.合理间隔//不推荐的写法
var name='劳卜';//等号和两侧之间没有间隔
// if块级语句间没有间隔
if(name){
console.log('hello');
}//推荐的写法
var name='劳卜';//等号和两侧之间有间隔
// if块级语句间有间隔
if(name){
console.log('hello');
}
3.合理缩进//不推荐的写法:没有合理缩进
function getName(){
console.log('劳卜');
}//推荐的写法:合理缩进
function getName(){
console.log('劳卜');
}
4.合理空行//不推荐的写法:代码功能块之间没有空行
function getName(){
var name='劳卜';
if(name){
console.log('hello');
}
}//推荐的写法:代码功能块之间有空行
function getName(){
var name='劳卜';
if(name){
console.log('hello');
}
}
5.合理命名//不推荐的写法
var getName='劳卜';//变量命名前缀为动词
//函数命名前缀为名词
function name(){
console.log('hello');
}//推荐的写法
var name='劳卜';//变量命名前缀为名词
//函数命名前缀为动词
function getName(){
console.log('hello');
}
6.合理声明//不推荐的写法:函数在声明之前使用
getName();
function getName(){
console.log('hello');
}//推荐的写法:函数在声明之后使用
function getName(){
console.log('hello');
}
getName();
7.合理结尾//不推荐的写法:没有使用分号结尾
var name='劳卜'
var getName= function(){
console.log('hello')
}//推荐的写法:使用分号结尾
var name='劳卜';
var getName= function(){
console.log('hello');
};
以上主要列举了7个比较常见的编码风格的例子进行了比较,在推荐的写法和不推荐的写法中两者并没有对错之分,只是推荐的写法相比较而言更容易阅读和维护,更适用于团队开发,也是良好编码形象的体现。
编码规范
对于编码规范,既然是规范,那我们就应该按照一定的规则来编写。随意编写违反编码规范的代码,可能会导致程序的出错和潜在的bug,因此其相对于编码风格来说应该更加严谨,也有人会把编码风格包含在编码规范之中。
下面就列举几个常见的实例代码:
1.比较参数//不推荐的写法:==和!=比较时会进行类型转换,应尽量避免使用
var num= 123;
if(num=='123'){
console.log(num);
} else if(num!='321'){
console.log('321');
}//推荐的写法:使用===和!==来进行比较
var num= 123;
if(num==='123'){
console.log(num);
} else if(num!=='321'){
console.log('321');
}
2.包裹if语句//不推荐的写法:if语句不用大话号包裹会出现潜在bug
var num= 123;
if(num==='123')
console.log(num);//推荐的写法:if语句用大话号包裹
var num= 123;
if(num==='123'){
console.log(num);
}
3.慎用eval//不推荐的写法:应避免使用eval,不安全,非常耗性能(一次解析成js语句,一次执行)
var json='{"name":"劳卜","func": alert("hello")}';
eval('('+ json+')');//弹出“hello”//推荐的写法
var json='{"name":"劳卜","func": alert("hello")}';
JSON.parse(json);//校验报错
4.判断类型//不推荐的写法:用typeof来判断构造函数创建的对象
var str= new String('劳卜');
console.log(typeof str);//'object'//推荐的写法:用instanceof来判断构造函数创建的对象
var str= new String('劳卜');
console.log(str instanceof String);// true
5.检测属性//不推荐的写法:使用undefined和null来检测一个属性是否存在
if(obj['name']!== undefined){
console.log('name属性存在');//若obj.name为undefined时则会导致判断出错
}
if(obj['name']!== null){
console.log('name属性存在');//若obj.name为null时则会导致判断出错
}//推荐的写法:使用in运算符来检测对象属性是否存在,使用hasOwnProperty方法来检测不包含原型链上的对象属性是否存在
if('name' in obj){
console.log('name属性存在');
}
if(obj.hasOwnProperty('name')){
console.log('name属性存在');
}
以上主要列举了5个常见的编码规范的例子,合理地规范自己的代码能够很大程度上减少不必要的维护成本和潜在的bug风险,对于JavaScript学习者来说应该铭记于心。
结语
“程序是写给人读的,只是偶尔让计算机执行一下。”我们不能为了贪图一时的方便而亲手毁了自己的代码形象,这会给他人和整个项目带来不必要的麻烦。
本文内容参考自《编写可维护的JavaScript》一书。
OK,本文到此结束,希望对大家有所帮助。