Javascript 风格向导

简介: Javascript 风格向导

 

  大部分针对Javascript最合理的方法归纳。

 

类型

 

• 原始类型:我们可以直接使用值。

  ο  string

  ο  number

  ο  boolean

  ο  null

  ο  undefine

var foo = 1,

   bar = foo;


bar = 9;


console.log(foo, bar); // => 1, 9

•   复合类型:我们通过`引用`对值进行间接访问。

  ο  object

  ο  array

  ο  function

 

var foo = [1, 2],

   bar = foo;


bar[0] = 9;


console.log(foo[0], bar[0]); // => 9, 9

 

Objects

 

• 使用{}创建对象。

// bad

var item = new Object();


// good

var item = {};

 

• 不要使用保留字作为关键字。

// bad

var superman = {

 class: 'superhero',

 default: { clark: 'kent' },

 private: true

};


// good

var superman = {

 klass: 'superhero',

 defaults: { clark: 'kent' },

 hidden: true

};

 

Arrays

 

• 使用[]创建数组

// bad

var items = new Array();


// good

var items = [];

• 如果你不知道数组长度,使用Array#push。

var someStack = [];


// bad

someStack[someStack.length] = 'abracadabra';


// good

someStack.push('abracadabra');

 

 • 当你需要复制数组的时候,请使用Array#slice。

var len = items.length,

   itemsCopy = [],

   i;


// bad

for (i = 0; i < len; i++) {

 itemsCopy[i] = items[i];

}


// good

itemsCopy = items.slice();

 

Strings

• 对于字符串,我们使用单引号''。

// bad

var name = "Bob Parr";


// good

var name = 'Bob Parr';


// bad

var fullName = "Bob " + this.lastName;


// good

var fullName = 'Bob ' + this.lastName;

• 超过80个字符的字符串,我们使用串联符号(\),让字符串多行显示。

• 注意:如果过度使用带串联符号的字符可能会影响到性能。

// bad

var errorMessage = 'This is a super long error that was thrown because of Batman. When you stop to think about how Batman had anything to do with this, you would get nowhere fast.';


// bad

var errorMessage = 'This is a super long error that \

was thrown because of Batman. \

When you stop to think about \

how Batman had anything to do \

with this, you would get nowhere \

fast.';


// good

var errorMessage = 'This is a super long error that ' +

 'was thrown because of Batman.' +

 'When you stop to think about ' +

 'how Batman had anything to do ' +

 'with this, you would get nowhere ' +

 'fast.';

 


• 当我们在编程的时候,需要拼接出一个字符串,我们可以使用Array#join 代替字符串连接。尤其是对IE浏览器。

var items,

   messages,

   length, i;


messages = [{

   state: 'success',

   message: 'This one worked.'

},{

   state: 'success',

   message: 'This one worked as well.'

},{

   state: 'error',

   message: 'This one did not work.'

}];


length = messages.length;


// bad

function inbox(messages) {

 items = '<ul>';


 for (i = 0; i < length; i++) {

   items += '<li>' + messages[i].message + '</li>';

 }


 return items + '</ul>';

}


// good

function inbox(messages) {

 items = [];


 for (i = 0; i < length; i++) {

   items[i] = messages[i].message;

 }


 return '<ul><li>' + items.join('</li><li>') + '</li></ul>';

}

 

Functions

 • 函数表达式

// anonymous function expression

var anonymous = function() {

 returntrue;

};


// named function expression

var named = function named() {

 returntrue;

};


// immediately-invoked function expression (IIFE)

(function() {

 console.log('Welcome to the Internet. Please follow me.');

})();

• 绝对不要在非函数块(if,while)申明一个函数。我们可以把函数申明变成一个函数表达式。

// bad

if (currentUser) {

 function test() {

   console.log('Nope.');

 }

}


// good

if (currentUser) {

 var test = function test() {

   console.log('Yup.');

 };

}

 

• 绝对不要把一个参数命名为arguments,arguments参数是函数作用域内给出的一个特殊变量,如果你把参数命名为arguments,那么这个参数就会覆盖它原有的特殊变量。

// bad

function nope(name, options, arguments) {

 // ...stuff...

}


// good

function yup(name, options, args) {

 // ...stuff...

}

 

总结

 

  这些很多是大家都比较清楚的,平时经常用,我只是强调一下,让大家再复习一下。

目录
相关文章
|
Web App开发 JavaScript 前端开发
使用 iosOverlay.js 创建 iOS 风格的提示和通知
  iosOverlay.js 用于在 Web 项目中实现 iOS 风格的通知和提示效果。为了防止图标加载的时候闪烁,你需要预加载的图像资源。不兼容 CSS 动画的浏览器需要 jQuery 支持。浏览器兼容:IE7+, Google Chrome, Firefox, Opera, Desktop Safari, Mobile Safari — iPhone & iPad。
932 0
|
28天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2
|
24天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
146 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
87 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
79 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
99 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
89 3