习题集锦1.0

第1题

业务场景：在公共JS文件里有可能有（是可能）一个对象Obj；该对象有一个getType返回数据类型的方法；
要求实现：// 和trim方法相似；没有的时候本地实现他
1).如果对象不存在；那么本地建这么一个对象Obj并实现getType方法；
2).如果传入的数据为null时返回null;

var Obj = Obj || function () { };

    if(!Obj.prototype.getType){
        Obj.prototype.getType = function (obj) {
            var class2type = {};    //用来保存js数据类型
            var customArr = "Boolean Number String Function Array Date RegExp Object Error".split(" ");
            customArr.forEach( function( name, index) {
                //构造class2type存储常用类型的映射关系，遍历基本类型并赋值，键值为 [object 类型]
                class2type[ "[object " + name + "]" ] = name.toLowerCase();
            });

            if ( obj == null ) {//首先如果是null则返回null字符串
                return obj + "";
            }
            //接着判断给定参数类型是否为object或者function，是的话在映射表中寻找 toString后的键值名称并返回，不是的话利用typeof就可以得到正确类型。
            return typeof obj === "object" || typeof obj === "function" ?
                class2type[ toString.call(obj) ] || "object" :
                typeof obj;
        }
    }

    // 方法检测：
    var myObj = new Obj();
    var result0 = myObj.getType('454'); // string
    var result1 = myObj.getType(454);   // number
    var result2 = myObj.getType(null);  // null

    console.log('result0', result0)
    console.log('result1', result1)
    console.log('result2', result2)

第2题

2.Cookie, LocalStorage 与 SessionStorage区别； // 口述题

1.存储大小：
存储大小 不超过4K，LocalStorage，SessionStorage可以达到5M

2.数据有效期不同
sessionStorage 仅在当前浏览器窗口关闭之前有效
localStorage：始终有效，窗口或浏览器关闭也一直保存，
cookie：只在设置的cookie过期时间之前有效

3.传递
cookie在浏览器和服务器间来回传递
localStorage，sessionStorage 不会自动把数据发送给服务器

4.作用域不同
sessionStorage不在不同的浏览器窗口中共享
localstorage在所有同源窗口中都是共享的；
cookie也是在所有同源窗口中都是共享的

第3题

3.业务场景：活动页面有秒杀模块也有团购模块，需要同步服务器时间来显示倒计时；写一个可供其他同事调用方法；// 同事调用该方法时得到的是已同步好后的时间
要求实现：
1) . 定义你所要求后端接口返回的数据格式；
2). 实现同步服务器时间的方法供其他同事调用;
3). 注意性能的优化

// 接口数据
{
     status:true, // 状态
     msg:'获取时间成功', //文字描述
     currentTime:'11:21:55', // 服务器时间
 }
     
// 方法 
function getTime(url,fn) {
    $.getAjax(url, function (data) {
        fn(data)
    })
}
// 调用
getTime('http://abc.com/getServerDate', function (value) {
    console.warn( 'value',value);
})

第4题

业务场景：如图有距离秒杀结束倒计时功能

要求实现：
1) . 写出你的html页面结构；
2) . 调用上面实现的方法实现倒计时功能；（本地时间随意定比服务器时间小就好）；
3).  当倒计时结束三个方框显示：00;

// html

    

        

            

                
海抢货
                
限时限量汇全网好货
                
00:00:10
            
            

                
有好货
                
好品味从挑剔开始
                
品质生活指南
            
        
    

var tid = setInterval(function () {

    getTime('http://abc.com/getServerDate', function (syTime) {
        var totalSec = getLeaveSecond(syTime) - 1; // 获取剩余时间
        if (totalSec >= 0) {
            oTimebox.innerHTML = getNewSyTime(totalSec); // 显示时间
        } else {
            clearInterval(tid);
        }
    })
}, 1000);

    function getLeaveSecond () {}
    function getNewSyTime () {}
    

第5题

5.业务场景：下图为首屏的抽奖界面   //抽奖转动时会顺时针高亮显示产品
1) . 写出你的html页面结构；
2). 写出你css类结构不用具体实现;
3). 抛出你设计思路和性能优化方案