面试

  • 手写一个布局,带header以及左右两栏,左栏宽度固定,高度自适应
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS布局</title>
    </head>
    <body>
        <div id="left"></div>
        <div id="right"></div>
    </body>
    </html>
    

      第一种:

  • *{
    margin:;padding:0;
    }
    html, body{
    height:100%;
    }
    #left{
    width:200px;
    height:100%;
    background-color:pink;
    float:left
    }
    #right{
    height:100%;
    background-color:black;
    margin-left:300px;
    } 
  • 第一种添加margin-left我为了和第一个模块并列 300px为left的宽度
  • 第二种:

  •  

    *{
    margin:;padding:0;
    }
    html, body{
    height:100%;
    }
    #left{
    width:200px;
    height:100%;
    background-color:pink;
    float:left
    }
    #right{
    height:100%;
    background-color:black;
    overflow:hidden;
    }
    

      第二种方法用的BFC(块级格式化上下文)来防止文字环绕的原理来实现的 

  • BFC 是一个相对独立的布局环境,它的内部元素不受外面布局的影响可通过以下方式来创建
  • 1 float值不为none
  • 2 position 不为static relative
  • 3 display 值为 table-cell table-caption inline-block flex inline-flex中其中一个
  • 4 overflow 值不为visible
  • 小结:首先为固定宽度的元素设置(左浮动或者有浮动——根据那边固定来定);接下来为自适应元素设置(margin-left或者margin-right值——根据固定元素设置的左浮动或者右浮动来定)或者为其设置overflow:hidden。
  • this作用域:
  • var name = "Jay Global";
    var person = {
    name: 'Jay Person',
    details: {
    name: 'Jay Details',
    print: function() {
    return this.name;
    }
    },
    print: function() {
    return this.name;
    }
    };
    console.log(person.details.print()); // ?
    console.log(person.print()); // ?
    var name1 = person.print;
    var name2 = person.details;
    console.log(name1()); // ?
    console.log(name2.print()) // ?
    VM95:14 Jay Details
    VM95:15 Jay Person
    VM95:18 Jay Global
    VM95:19 Jay Details

      

  • 要记住,this 关键词是在函数调用时才做绑定的。name1() 前面是什么?什么都没有。因此 this 关键词就将指向全局的 window对象去。    name1中this指向window
  • name2里面的this指向Jay Details',因为 print 是 name2 调起的,而 name2 指向 details
  • http://caibaojian.com/deep-in-javascript-this.html
  • 数组常用的api及应用场景
  • some 其中一个满足条件就返回true
  •   every 所有满足条件返回true 
  • forEach是遍历所有数组 得到的是返回值
  • sort是 排序    var px = arrSort.sort(function(a,b){ // 从小到大 return a - b; // 从大到小 // return b - a;
  • map  var cz = arr.map(function(item,index){ return '<b>'+item+'</b>' }) console.log(cz)//["<b>1</b>", "<b>2</b>", "<b>3</b>"]
  • filter 过滤掉不符合的数组元素 比如要>3的  数组返回的是>3的数
  • slice 是截取数组
  • index 0f 与;last indexof获取的是位置
  • https://blog.csdn.net/Aries406532/article/details/78426151
  • 轮播图
  • https://blog.csdn.net/diligentkong/article/details/55209861
  • 虚拟dom
  • 它是直接用js实现dom树 组件html结构并不会直接生成dom  而是生成虚拟jsdom结构 react通过这些虚拟的dom实现diff算法 找出最小变量 再把这些变量写进实际的dom中,这个虚拟的dom以js结构形式存在 计算性能比较好,而且减少了实际dom的请求次数 性能较大提升。
  • https://blog.csdn.net/jian_xi/article/details/72841891
posted @ 2018-09-06 22:34  asss1  阅读(85)  评论(0编辑  收藏  举报