zoukankan      html  css  js  c++  java
  • 让你的javascript代码高大上

    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();   //可以直接调用该方法
    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     constructor:A,
    4     fn1:function(){},
    5     fn2:function(){}
    6  };

    还可以这么写:

    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的参数必须是数组,此处正是利用了这一点!

    11,没有库时,应该做简易的封装

    你可以这么写:

    1 var  dom1 = document.getElementById("id1");
    2 var  dom2 = document.getElementById("id2");

    也可以这么写:

    1 function D(id){
    2    return document.getElementById(id);
    3 }
    4 
    5 var dom1=D("id1");
    6 var dom2=D("id2");

     12,善于使用正则:

    你可以这么写:

    1 if(document.readyState==="loaded" || document.readyState==="complete"){}

    也可以这么写:

    1 if (/loaded|complete/.test(document.readyState)){}

    13,利用js内部的自我转换

    你要将number和string转换,可以这么做:

    1 //number转化成string
    2 var num=123;
    3 var str=num.toString(); //"123"
    4 
    5 //string转化成number
    6 var str="123";
    7 var num = parseInt(str,10);  //123

    也可以这么写:

    1 //number转化成string
    2 var num=123;
    3 var str=num+""; //"123"
    4 
    5 //string转化成number
    6 var str="123";
    7 var num = str-"";  //123

     14,使用原型进行批量复制:

    你可以这么写:

    1 function f(x){
    2    x!=null && this.x=x;  
    3 };
    4 var a = [];
    5 for(var i = 0; i<100; i++){
    6    a[i]=new f(10);     //把实例分别存入数组
    7 };

    也可以这么写:

    function f(x){
       x!=null && this.x=x;  
    };
    var a = [];
    function temp = {};
    temp.prototype=new f(10);
    for(var i = 0; i<100; i++){
       a[i]=new temp();     //把实例分别存入数组
    };

    假如你想修改数组的值,只需要修改类f的原型即可。

    开心一刻:

  • 相关阅读:
    空中楼阁 ( House )最短路
    [hdu4333]Revolving Digits
    vue element-ui el-table 选择框单选修改
    css 中间文字 两边横线
    uni-app计算scroll-view高度
    Swift Playgrounds Mac 编程学习入门
    vuecli vue.config.js 通用配置
    vuecli3 分环境打包的方案
    mysql 插入更新
    关闭进程
  • 原文地址:https://www.cnblogs.com/wenber/p/3630373.html
Copyright © 2011-2022 走看看