如何正确使用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的parseInt 取整使用
May 09 Javascript
JavaScript使用HTML5的window.postMessage实现跨域通信例子
Apr 11 Javascript
详解JavaScript中的自定义事件编写
May 10 Javascript
Js 获取、判断浏览器版本信息的简单方法
Aug 08 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
Sep 28 Javascript
微信小程序获取用户信息并保存登录状态详解
May 10 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
解决elementui表格操作列自适应列宽
Dec 28 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
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP培训要多少钱
2017/06/06 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
javascript的事件描述
2006/09/08 Javascript
js 学习笔记(三)
2009/12/29 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
javascript常见操作汇总
2014/09/03 Javascript
理解javascript封装
2016/02/23 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
javascript入门之string对象【新手必看】
2016/11/22 Javascript
详解Angular的双向数据绑定(MV-VM)
2016/12/26 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
2017/02/13 Javascript
JavaScript代码执行的先后顺序问题
2017/10/29 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
vue导出html、word和pdf的实现代码
2018/07/31 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
2018/12/23 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
2019/02/15 jQuery
微信小程序实现张图片合成为一张并下载
2019/07/16 Javascript
vue实现图片上传预览功能
2019/12/23 Javascript
PyTorch学习笔记之回归实战
2018/05/28 Python
通过Python模块filecmp 对文件比较的实现方法
2018/06/29 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
python实现梯度法 python最速下降法
2020/03/24 Python
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
车间主管岗位职责
2013/11/14 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
幼儿园大班家长评语
2014/04/17 职场文书
本科生自荐信
2014/06/18 职场文书
婚前保证书范文
2015/02/28 职场文书
班级班风口号大全
2015/12/25 职场文书
python中mongodb包操作数据库
2022/04/19 Python