如何正确使用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中的prototype和constructor简明总结
Apr 05 Javascript
js中iframe调用父页面的方法
Oct 30 Javascript
javascript限制文本框输入值类型的方法
May 07 Javascript
js跨域请求的5中解决方式
Jul 02 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 Javascript
AngularJs篇:使用AngularJs打造一个简易权限系统的实现代码
Dec 26 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
解决angularjs中同步执行http请求的方法
Aug 13 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 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
介绍php设计模式中的工厂模式
2008/06/12 PHP
PHP获取photoshop写入图片文字信息的方法
2015/03/31 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
php常用数组array函数实例总结【赋值,拆分,合并,计算,添加,删除,查询,判断,排序】
2016/12/07 PHP
JavaScript 入门基础知识 想学习js的朋友可以参考下
2009/12/26 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
JavaScript实现twitter puddles算法实例
2014/12/06 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
jQuery获取cookie值及删除cookie用法实例
2016/04/15 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
2017/07/05 Javascript
select标签设置默认选中的选项方法
2018/03/02 Javascript
javascript原型链学习记录之继承实现方式分析
2019/05/01 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
vue路由传参三种基本方式详解
2019/12/09 Javascript
vue 将多个过滤器封装到一个文件中的代码详解
2020/09/05 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
详解Python验证码识别
2016/01/25 Python
python实现学生管理系统
2018/01/11 Python
python实现控制台打印的方法
2019/01/12 Python
python根据时间获取周数代码实例
2019/09/30 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
阿拉伯世界最大的电子卖场:Souq埃及
2016/08/01 全球购物
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
三星加拿大官方网上商店:Samsung CA
2020/12/18 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
《童年的发现》教学反思
2014/02/14 职场文书
三方合作协议书范本
2014/04/18 职场文书
厂区绿化方案
2014/05/08 职场文书
司机工作自我鉴定
2014/09/19 职场文书
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
SQL Server中T-SQL标识符介绍与无排序生成序号的方法
2022/05/25 SQL Server
VMware虚拟机安装 Windows Server 2022的详细图文教程
2022/09/23 Servers