美文网首页Web前端之路
我的前端入门笔记(7)

我的前端入门笔记(7)

作者: 叫我徐小星 | 来源:发表于2015-08-30 17:10 被阅读122次

学习的过程中,免不了碰到各种各样的问题,收集、整理、熟悉,如此甚好。

1.defer、async的区别。

都是提前加载延后执行;
使用方式如下所示:

<script src="myAsyncScript.js" onload="myInit()" async></script>  
<script src="myDeferScript.js" onload="myInit()" defer></script>

defer:js执行完后,加defer的再从头开始;
async: js执行完后,剩下的随机执行,不保证顺序;

2.javascript常见事件的触发情况

onBlur:当失去输入焦点后产生该事件
onFocus:当输入获得焦点后,产生该文件 onchange:当文字值改变时,产生该事件 onselect:当文字加亮后,产生该事件
onClick:当组件被点击时产生的事件

3. Onload事件DOMContentLoaded事件的区别

onload事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了;
domContentLoaded事件触发时,仅DOM加载完成,不包括样式表,图片,flash。目前已在HTML5中被标准化。
即onload事件在domcontentloaded事件之后触发。

4.以下贴几段代码,供自己闲暇时看看

1.倒计时

 function countDowm(newDate){
     var nDate = new Date(newDate),
     oDate = new Date(),
     during = (nDate - oDate)/1000;

     var day = Math.floor(during/(24*60*60)),
       t1 = during - (day*24*60*60),
       hours = Math.floor(t1/(60*60)),
       t2 = t1 - (hours*60*60),
       min = Math.floor(t2/60),
       sec = Math.floor(t2%60);

    return '还剩' + day + '天 ' + hours + '小时 ' + min + '分 ' + sec + '秒 ';
}

     setInterval(function(){
        var str = countDowm(newDate);
        console.log(str);
     },1000);

var newDate = "2016-1-1";

2.获取n天前的日期

function getNewDay(n){
    var d = new Date(), 
    time1 = d.getTime(),    
    during = n*24*60*60*1000,
    time2 = time1-during;
    var time = {
         "0": "日",
         "1": "一",
         "2": "二",
         "3": "三",
         "4": "四",
         "5": "五",
         "6": "六",
    }
    var od= new Date(time2),
     year = od.getFullYear(),
    month = (((od.getMonth()+1)/100)+"").substr(2),
     date = (((od.getDay()+1)/100)+"").substr(2),
    hours = od.getHours(),
      min = od.getMinutes(),
      sec = od.getSeconds();
      day = time[od.getDay()];

 var arr1 = [year,month,date],
     arr2 = [hours,min,sec];

    console.log(arr1.join("-") + "   星期" + day);
    console.log(arr2.join(":"));
    return ;    
 }
 getNewDay(30);

3.以json对象和数组为例做一个浅拷贝和深拷贝
浅拷贝:拷贝的是地址,即将a对象拷贝到b,当a发生变化时,b也发生相应的变化

  function shadowCopy(obj){
     var obj1;
     if(obj instanceof Array){   // 如果是数组
        obj1 = [];
        for(var i=0; i < obj.length; i++){
            obj1[i] = obj[i];           
        }return obj1;
     }
    if(typeof obj === "object" && obj + "" ==="[object Object]"){   //如果是json对象
       obj1 = {};
       for(var k in obj){
           obj1[k] = obj[k];            
       }return obj1;
    } 
     else{
       return obj;
          }
    }
    var arr = [1, 2, 3],
    obj2 = shadowCopy(arr);
    var person = {
       "name" : "hello",
       "age" : 20
     },
    obj3 = shadowCopy(person);
    console.log(obj2);
    console.log(obj3);

深拷贝:拷贝的是内容,即将a对象拷贝到b,当a发生变化时,b的变化

function deepCopy(o){
    if(isArray(o)){   //判断是否是数组
       var arr = [];
       for(var i = 0; i < o.length; i++ ){  
           if(isArray(o[i]) || isJson(o[i])){ //如果数组里面有元素是json对象或数组
              arr[i] = deepCopy( o[i] );//递归调用自身函数
           }else{
              arr[i] = o[i];
             }          
         }return arr;
     }
     if(isJson(o)){  //判断是否是json对象
        var obj = {};
        for(var k in o){
            if(isArray(o[k]) || isJson(o[k])){  //如果json对象中存在数组或json对象
                 obj[k] = deepCopy(o[k]);//递归调用自身函数
             }else{
                 obj[k] = o[k];
                }
            }return obj;
      }
      else{
         return o;
      }
  }

function isArray(data){
     return (data instanceof Array);
}//判断是否是数组
function isJson(data){
     return (typeof data === "object")&&( data + "" ==="[object Object]");
}//判断是否是json对象

var person = {
     "name":"Tom",
     "age":24,
     "hobby":["sleep", "read", "music"]    
  },
   p = deepCopy(person);

 var newArr=["hello", 2, {
      "name":"abc",
      "sex":"male",}],
   n = deepCopy(newArr);
 var a = 1,
   b = deepCopy(a);
 console.log(p);
 console.log(n);
 console.log(b);

5.call()和apply()的区别

call():它的第一个参数用作 this 的对象,其他参数都直接传递给函数自身
apply():有两个参数,用作 this 的对象和要传递给函数的参数的数组;

function sayColor(sPrefix,sSuffix) {
   alert(sPrefix + this.color + sSuffix);
};

var obj = new Object();
obj.color = "blue";

sayColor.apply(obj, ["The color is ", "a very nice color indeed."]);
sayColor.call(obj, "The color is ", "a very nice color indeed.");//输出结果都为: "The color is blue, a very nice color indeed."

析:函数sayColor中的关键字this指向obj,call()方法以两个字符串分别与参数sPrefix和sSuffix匹配,apply()方法以数组形式与参数sPrefix和sSuffix匹配。

6.setTimeout、setInterval的区别

setTimeout:延时指定的毫秒数再执行指定代码,只执行一次
setInterval("javascript 函数",毫秒数);若毫秒数为0,即把该函数放到最后执行

var clock;
clock = setTimeout(function(){
    console.log('延时3s开始执行')
}, 3000);
clearTimeout(clock);//停止执行setTimeout()

setInterval:间隔指定的毫秒数不停地执行指定的代码,执行很多次

var clock;
clock = setInterval(function(){
   console.log('每隔3s执行一次')
}, 3000);
clearInterval(clock);

相关文章

  • 我的前端入门笔记(7)

    学习的过程中,免不了碰到各种各样的问题,收集、整理、熟悉,如此甚好。 1.defer、async的区别。 都是提前...

  • 我的前端入门笔记--this

    this是Javascript语言的一个关键字。 随着函数使用场合的不同,this的值会发生变化。但是有一个总的原...

  • MapServer 笔记一:简单入门

    MapServer 笔记一:简单入门 ArcGIS Server 深度入门 Geoserver 深度入门 版本为7...

  • 我的前端入门笔记(4)

    总结几个常见的问题,贯穿前端学习的始末。 1.浏览器本地存储 在较高版本的浏览器中,js提供了sessionSto...

  • webpack入门学习笔记

    title: webpack入门学习笔记date: 2017-11-12 15:20:08tags: 前端构建 w...

  • My Toolkit of Node.js

    前言 倘若从去年7月份算起,我入门Nodejs也有半年有余了。这半年,从自学入门Nodejs到后来以前端实习生的身...

  • 前端入门系列

    前端HTML & CSS 基础入门(1)初识 前端HTML & CSS 基础入门(2)段落及文本 前端HTML &...

  • 学习web前端怎样入门?初学者赶紧看过来!

    web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门、初...

  • web前端怎么样才能入门

    web前端怎么样才能入门,首先我们要从什么是初级web前端工程师说起: 按照我的想法,我把前端工程师分为了入门、初...

  • 我的前端入门笔记(12)--ajax

    1.AJAX:异步的javascript和xml; 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异...

网友评论

    本文标题:我的前端入门笔记(7)

    本文链接:https://www.haomeiwen.com/subject/pcokcttx.html