html5中文学习网

您的位置: 首页 > 网站及特效实例 > javascript特效 » 正文

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

[ ] 已经帮助:人解决问题

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

Types (类型)wDYHTML5中文学习网 - HTML5先行者学习网
原始类型: 当访问一个原始类型的时候,其实直接访问该原始类型的内容.wDYHTML5中文学习网 - HTML5先行者学习网
stringwDYHTML5中文学习网 - HTML5先行者学习网
numberwDYHTML5中文学习网 - HTML5先行者学习网
booleanwDYHTML5中文学习网 - HTML5先行者学习网
nullwDYHTML5中文学习网 - HTML5先行者学习网
undefinedwDYHTML5中文学习网 - HTML5先行者学习网
var foo = 1,wDYHTML5中文学习网 - HTML5先行者学习网
bar = foo;wDYHTML5中文学习网 - HTML5先行者学习网
bar = 9;wDYHTML5中文学习网 - HTML5先行者学习网
console.log(foo,bar); //=> 1,9wDYHTML5中文学习网 - HTML5先行者学习网

复杂类型: 当你访问一个复杂类型数据类型的时候,其实是通过引用访问该变量的值.wDYHTML5中文学习网 - HTML5先行者学习网
objectwDYHTML5中文学习网 - HTML5先行者学习网
arraywDYHTML5中文学习网 - HTML5先行者学习网
functionwDYHTML5中文学习网 - HTML5先行者学习网

wDYHTML5中文学习网 - HTML5先行者学习网

var foo = [1,2];bar = foo;bar[0] = 9;console.log(foo[0],bar[0]); // => 9,9

object(对象)wDYHTML5中文学习网 - HTML5先行者学习网
使用对象字面量来创建对象 (literal)wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

//badvar item = new Object();//goodvar item = {};

不要使用保留关键字作为对象的属性名.这在IE8下无法工作.wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

//badvar superman = {default: {clark: 'kent'},private: true};//goodvar superman = {defaults: {clark: 'kent'},hidden: true};

array(数组)wDYHTML5中文学习网 - HTML5先行者学习网
同样使用 字面量方法来创建数组wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

//badvar items = new Array();//goodvar items = [];

如果你不知道数组的长度,那么使用Array的内置方法push进行插入操作wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

var someStack = [];//badsomeStack[someStack.length] = 'vein';//goodsomeStack.push('vein');

当你想要拷贝一个数组的时候,使用array.slicewDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

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

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

//badvar name = "Bob Parr";//goodvar name = 'Bob Parr';//badvar fullName = "Bob " + this.lastName;//goodvar fullName = 'Bob ' + this.lastName;

字符串长于80个字符的时候需要使用字符串连接在多行进行编写..注意,如果过度使用,连接字符串将会影响性能(performance)wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

// badvar 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.';// badvar 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.';// goodvar 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 效果会更好..wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

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;//badfunction inbox(messages){items = '<ul>';for (i = 0; i < length; i++) {items += '<li>' + messages[i].message + '</li>';}return items + '</ul>';}//goodfunction inbox(messages){items = [];for( i = 0; i < length ; i++){items[i] = messages[i].message;}return '<ul><li>' + items.join('</li><li>') + '</li></ul>';}

函数(Functions)wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

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

永远不要在非函数的块代码(if,while)中定义函数.相应的,在代码块中间函数赋值给外部的变量名..wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

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

Properties (属性)wDYHTML5中文学习网 - HTML5先行者学习网
使用点语法来访问属性.wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

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

当使用变量访问对象属性时,使用 [] 方括号来访问wDYHTML5中文学习网 - HTML5先行者学习网
wDYHTML5中文学习网 - HTML5先行者学习网

var luke = {jedi: true,age: 28};function getProp(prop) {return luke[prop];}var isJedi = getProp('jedi');
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助