原文出处:http://www.cnblogs.com/wenber/p/3630373.html

1,创造简短的写法

你可以这么写:

1 var slice = Array.prototype.slice;
2 slice.call(arguments); //转化成数组

也可以这么写:(ie9+)

1 var unboundSlice = Array.prototype.slice;
2 var slice = Function.prototype.call.bind(unboundSlice);
3 slice(arguments);//转化成数组

还可以这么写:

1 (function(slice){
2 slice(arguments);
3 })(Array.prototype.slice);

2,原型方法扩展:

你可以这么写:

1 function   A(){};
2 A.prototype.fn1=function(){};
3 A.prototype.fn2=function(){};

也可以这么写:

1 function A(){};
2 A.prototype={
3 fn1:function(){},
4 fn2:function(){}
5 };

还可以这么写:

1 function A(){};
2 $.extend(A.prototype,{
3 fn1:function(){},
4 fn2:function(0{}
5 });

3,返回一个由数组拼合成的字符串

你可以这么写:

1 function A(){
2 var a=[];
3
4 a.push("str1");
5 a.push("str2");
6 a.push("str3");
7
8 return a.join("");
9 };

也可以这么写:

1 function A(){
2 return [
3 "str1",
4 "str2",
5 "str3"
6 ].join("");
7 };

4,逗号表达式

你可以这么写:

1 var   a;
2 var b;
3 var c;

也可以这么写:

1 var  a,b,c;

5,巧用&&

你可以这么写:

1 if(a){
2 b();
3 };//如果a为真,则执行函数b

也可以这么写:

1 a && b();

6,巧用||

你可以这么写:

1 if(!a){
2 c();
3 };//如果a为假,则执行函数c

也可以这么写:

1 !a || c();

7,巧用三元表达式

你可以这么写:

1 if(a){
2 b();
3 }else{
4 c();
5 }//如果a为真,则执行函数b,否则执行函数c;

也可以这么写:

1 a ? b():c();

8,同一个对象上绑定多个事件

你可以这么写:

1 1 $(obj).click(function (){});
2 2 $(obj).focus(function (){});
3 3 $(obj).blur(function (){});

也可以这么写:

1 $(obj).bind({
2 click:function(){},
3 foucus:function(){},
4 blur:function:(){}
5 });

9,缓存对象属性,防止每次都去读取属性

你可以这么写:

1 for(var i =0 ;i < obj.length; i++){};

也可以这么写:

for(var i=0, len=obj.length;  i < len; i++){};

10,数组拼合

你可以这么写:

1 var a=[1,2,3];
2 var b=[4,5,6];
3 var a=a.concat(b);//a=[1,2,3,4,5,6]

也可以这么写:

1 var a=[1,2,3];
2 var b=[4,5,6];
3 a.push.apply(a,b);//a=[1,2,3,4,5,6]

这个地方不能不call哦,apply的参数必须是数组,此处正是利用了这一点!

[JavaScript]转--如何让JS代码高大上的更多相关文章

  1. IOS-网络(网页开发-UIWebView,HTML,CSS,JavaScript,OC和JS代码互调)

    一.网页基础 // // ViewController.m // IOS_0218_网页开发1 // // Created by ma c on 16/2/18. // Copyright © 201 ...

  2. JavaScript入门:002—JS代码放置的位置

    JavaScript在页面中使用,那么这些JS代码应该放在什么位置呢?以下来看一下. 一般来说有两种方式.写在界面上和使用.js文件.1.1界面上的Head部分能够直接放在head标签内,例如以下代码 ...

  3. javascript 全选 反选 js代码

    <script type="text/javascript"> //全选function checkAll() { var objs = window.document ...

  4. Javascript DOM编程艺术JS代码

    //com function addLoadEvent (func) { var oldonload = window.onload; if (typeof window.onload != 'fun ...

  5. (转)高性能JavaScript:加载和运行(动态加载JS代码)

    浏览器是如何加载JS的 当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面.如果需要 ...

  6. 最新的JavaScript核心语言标准——ES6,彻底改变你编写JS代码的方式!【转载+整理】

    原文地址 本文内容 ECMAScript 发生了什么变化? 新标准 版本号6 兑现承诺 迭代器和for-of循环 生成器 Generators 模板字符串 不定参数和默认参数 解构 Destructu ...

  7. JavaScript手札:《编写高质量JS代码的68个有效方法》(一)(1~5)

    编写高质量JS代码的68个有效方法(一) *:first-child { margin-top: 0 !important; } body>*:last-child { margin-botto ...

  8. javascript基础之javascript的存在形式和js代码块在页面中的存放位置

    1.存在形式 文件 如: <script src='js/jc.js'></script> 前页面 <script type='text/javascript'>a ...

  9. JavaScript必备:Google发布的JS代码规范(转)

    [翻译]关于Google发布的JS代码规范,你需要了解什么? 翻译 | WhiteYin 译文 | https://github.com/WhiteYin/translation/issues/10 ...

随机推荐

  1. SGU 326 Perspective ★(网络流经典构图の竞赛问题)

    [题意]有n(<=20)只队伍比赛, 队伍i初始得分w[i], 剩余比赛场数r[i](包括与这n只队伍以外的队伍比赛), remain[i][j]表示队伍i与队伍j剩余比赛场数, 没有平局, 问 ...

  2. What is Cross Linux From Scratch?

    /**************************************************************************** * What is Cross Linux ...

  3. ♫【jQuery插件】图片放大镜

    JQZoom

  4. BingWallpaper

    桌面壁纸更换成Bing.com的每日图片 项目地址:https://github.com/atskyline/BingWallpaper 其实就只是一个脚本,只是觉得二进制文件使用比较方便,所以采用C ...

  5. 【转】读取android根目录下的文件或文件夹

    原文网址:http://my.oschina.net/Ccx371161810/blog/287823 读取android根目录下的文件或文件夹 SDK的操作 读取android根目录下的文件或文件夹 ...

  6. HDU 2196-Computer(树形dp)

    题意: 给出电脑网络连接树,求每个节点的为起点的最长距离 分析: 这道题开始状态想不出来,放了一段时间,后来注意到例题上有这道题,每个节点的最长距离可由父节点的最长距离,次长距离,和子节点的最长距离( ...

  7. HTTP协议 概述

    本文主要说明一些 Http 相关的基本概念和基本知识,主要针对像我一样的初学者,知识主要来自于<Http 权威指南> 除了分享这些基本知识之外,笔者也是为将来找工作复习之用.(协议就是协议 ...

  8. javascript设计模式8

    桥接模式(将抽象与其实现隔离开来,以便二者独立变化) function sendInfo(element){ var id=element.id; ajax("GET"," ...

  9. Bzoj4556: [Tjoi2016&Heoi2016]字符串 后缀数组

    4556: [Tjoi2016&Heoi2016]字符串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 169  Solved: 87[Sub ...

  10. java@ What are C++ features missing in Java

    Following features of C++ are not there in Java. No pointers No sizeof operator No scope resolution ...