如何正确使用javascript 来进行我们的程序开发


Posted in Javascript onJune 23, 2014

今天在github 上面找到了一个关于如何正确使用javascript 来进行我们的程序开发.我就恬不知耻的来了个原创啊..坑爹啊.拿来和大家分享一下吧.
A mostly reasonable approach to Javascript.
Types //类型
Objects //对象
Arrays //数组
Strings //字符串
Functions //函数
Properties //属性
Variables //变量
Hoisting //变量提升
Conditional Expressions & Equality //条件表达式和等式.
Blocks //块代码
Comments //注释
Whitespace //空格
Commas //逗号
Semicolons //分号
Type Casting & Coercion //类型转换
Naming Conventions //命名规则
Accessors //访问
Constructors //构造器
Events //时间
Modules //模型
jQuery //
ECMAScript 5 Compatibility //ECMA 5 兼容
Testing //测试
Performance //性能
Resources //资源
In the Wild
Translation
The JavaScript Style Guide Guide
Contributors
License

Types (类型)
原始类型: 当访问一个原始类型的时候,其实直接访问该原始类型的内容.
string
number
boolean
null
undefined
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

object(对象)
使用对象字面量来创建对象 (literal)

//bad
var item = new Object();
//good
var item = {};

不要使用保留关键字作为对象的属性名.这在IE8下无法工作.

//bad
var superman = {
default: {clark: 'kent'},
private: true
};
//good
var superman = {
defaults: {clark: 'kent'},
hidden: true
};

array(数组)
同样使用 字面量方法来创建数组

//bad
var items = new Array();
//good
var items = [];

如果你不知道数组的长度,那么使用Array的内置方法push进行插入操作

var someStack = [];
//bad
someStack[someStack.length] = 'vein';
//good
someStack.push('vein');

当你想要拷贝一个数组的时候,使用array.slice

var len = items.length, //指的就是上面的内容...
itemCopy = [],
i;
//bad
for(i = 0; i < len ; ++i){
itemCopy[i] = items[i];
}
//good
itemCopy = items.slice(); //这里要注意了.这个我还真不知道...

Strings 字符串
使用单引号 (single quotes ) 来包围字符串...//这里我没有找到合适的关于性能方面的解释,我个人也喜欢这么用,(穿的少总比穿得多好看点吧..你懂得..)

//bad
var name = "Bob Parr";
//good
var name = 'Bob Parr';
//bad
var fullName = "Bob " + this.lastName;
//good
var fullName = 'Bob ' + this.lastName;

字符串长于80个字符的时候需要使用字符串连接在多行进行编写..注意,如果过度使用,连接字符串将会影响性能(performance)

// 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 效果会更好..

var items,
messages,
length,
i;
messages = [{
stat: 'success',
message: ' This one worked'
},{
stat: 'success',
message: ' This one worked'
},{
stat: 'success',
message: ' This one worked'
}
];
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)

//匿名函数表达式..
var anonymous = function(){
return true;
};
// 命名函数表达式.
var named = function named(){
return true;
};
//即时引用函数
(function(){
console.log('Welcome to the Internet. Please follow me.');
})();

永远不要在非函数的块代码(if,while)中定义函数.相应的,在代码块中间函数赋值给外部的变量名..

//bad
if(currentUser){
function test(){
console.log('Nope.');
}
}
//good
var test;
if(currentUser){
test = function(){
console.log('Yup'); 
}; //be careful with the semi-colon.
}

Properties (属性)
使用点语法来访问属性.

var luke = {
jedi: true,
age: 28
};
//bad
var isJedi = luke['jedi'];
//good
var isJedi = luck.jedi;

当使用变量访问对象属性时,使用 [] 方括号来访问

var luke = {
jedi: true,
age: 28
};
function getProp(prop) {
return luke[prop];
}
var isJedi = getProp('jedi');
Javascript 相关文章推荐
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
你所未知的3种Node.js代码优化方式
Feb 25 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
详解如何使用Vue2做服务端渲染
Mar 29 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
详解Angular模板引用变量及其作用域
Nov 23 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
Jul 19 Javascript
利用d3.js实现蜂巢图表带动画效果
Sep 03 Javascript
解决Vue中使用keepAlive不缓存问题
Aug 04 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
Jun 23 #Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 #Javascript
jquery中map函数与each函数的区别实例介绍
Jun 23 #Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 #Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
Jun 23 #Javascript
jquery让返回的内容显示在特定div里(代码少而精悍)
Jun 23 #Javascript
yepnope.js使用详解及示例分享
Jun 23 #Javascript
You might like
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
用php实现的下载css文件中的图片的代码
2010/02/08 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
ThinkPHP3.1新特性之Action参数绑定
2014/06/19 PHP
php实现根据字符串生成对应数组的方法
2014/09/22 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
php 输入输出流详解及示例代码
2016/08/25 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
php 使用html5 XHR2实现上传文件与进度显示功能示例
2020/03/03 PHP
PHP 对象继承原理与简单用法示例
2020/04/21 PHP
jQuery代码优化 遍历篇
2011/11/01 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
2017/05/08 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
Vue组件间的通信pubsub-js实现步骤解析
2020/03/11 Javascript
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
python实现倒计时小工具
2019/07/29 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
利用python实现平稳时间序列的建模方式
2020/06/03 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
CSS3实现的炫酷菜单代码分享
2015/03/12 HTML / CSS
HTML5 中新的全局属性(整理)
2013/07/31 HTML / CSS
html5 canvas移动浏览器上实现图片压缩上传
2016/03/11 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
什么是servlet
2012/05/08 面试题
保安员岗位职责
2013/11/17 职场文书
党的群众路线调研报告
2014/11/03 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
小程序实现文字循环滚动动画
2021/06/14 Javascript
JavaScript 数组去重详解
2021/09/15 Javascript