如何正确使用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 相关文章推荐
推荐4个原生javascript常用的函数
Jan 12 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
JavaScript内存管理介绍
Mar 13 Javascript
基于javascript实现样式清新图片轮播特效
Mar 30 Javascript
jQuery实现的导航下拉菜单效果
Jul 04 Javascript
JavaScript  event对象整理及详细介绍
Oct 10 Javascript
Vue中添加过渡效果的方法
Mar 16 Javascript
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
JavaScript创建对象的四种常用模式实例分析
Jan 11 Javascript
vue addRoutes路由动态加载操作
Aug 04 Javascript
详解React的回调渲染模式
Sep 10 Javascript
JS + HTML 罗盘式时钟的实现
May 21 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并发对MYSQL造成压力的解决方法
2013/02/21 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
JS实现打开本地文件或文件夹
2021/03/09 Javascript
JavaScript中的Window窗口对象
2008/01/16 Javascript
js form action动态修改方法
2008/11/04 Javascript
jquery 学习之二 属性 文本与值(text,val)
2010/11/25 Javascript
js控制页面控件隐藏显示的两种方法介绍
2013/10/09 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
Vue.js仿Metronic高级表格(一)静态设计
2017/04/17 Javascript
详解vue.js移动端导航navigationbar的封装
2017/07/05 Javascript
nodejs基于WS模块实现WebSocket聊天功能的方法
2018/01/12 NodeJs
详解React中共享组件逻辑的三种方式
2021/02/02 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
从零学Python之入门(二)基本数据类型
2014/05/25 Python
使用简单工厂模式来进行Python的设计模式编程
2016/03/01 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
python3爬取数据至mysql的方法
2018/06/26 Python
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
Python的条件表达式和lambda表达式实例
2019/01/31 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
Python3批量创建Crowd用户并分配组
2020/05/20 Python
python爬虫基础之urllib的使用
2020/12/31 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
活动总结报告范文
2014/05/04 职场文书
环保宣传标语
2014/06/12 职场文书
鼓舞士气的口号
2014/06/16 职场文书
教师党员自我评价范文
2015/03/04 职场文书
投诉书范文
2015/07/02 职场文书
2016新年问候语大全
2015/11/11 职场文书
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js