如何正确使用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 相关文章推荐
javascript下判断一个对象是否具有指定名称的属性的的代码
Jan 11 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
May 08 Javascript
使用jQuery简单实现模拟浏览器搜索功能
Dec 21 Javascript
JavaScript中DOM详解
Apr 13 Javascript
bootstrap table小案例
Oct 21 Javascript
防止重复发送 Ajax 请求
Feb 15 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
JS基于正则表达式的替换操作(replace)用法示例
Apr 28 Javascript
纯JS实现可用于页码更换的飞页特效示例
May 21 Javascript
webpack4 升级迁移的实现
Sep 12 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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
zend api扩展的php对象的autoload工具
2011/04/18 PHP
深入理解:XML与对象的序列化与反序列化
2013/06/08 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
JS正则表达式验证数字代码
2014/01/28 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
基于jquery编写的放大镜插件
2016/03/23 Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
2016/08/29 Javascript
基于angular2 的 http服务封装的实例代码
2017/06/29 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
axios对请求各种异常情况处理的封装方法
2018/09/25 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
详解python中的模块及包导入
2019/08/30 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
python3.7.3版本和django2.2.3版本是否可以兼容
2020/09/01 Python
容易被忽略的Python内置类型
2020/09/03 Python
Aquatalia官网:意大利著名鞋履品牌
2019/09/26 全球购物
说一下Linux下有关用户和组管理的命令
2016/01/04 面试题
期末总结的个人自我评价
2013/11/02 职场文书
募捐倡议书
2014/04/14 职场文书
安全在我心中演讲稿
2014/09/01 职场文书
未婚证明范本
2015/06/15 职场文书
React配置子路由的实现
2021/06/03 Javascript
Redis过期数据是否会被立马删除
2022/07/23 Redis