精华内容
下载资源
问答
  • 7.setTimeout()和setInterval()的使用以及区别 导读:一些常见的前端面试官会让求职者写的编程题 1.数组排序。 sort() 方法以字母顺序对数组进行排序 var fruits = ["Banana", "Orange", "Apple", "Mango"]; ...

    目录

     

    1.数组排序。

    2.数组元素的去重;

    3.用递归的方法求数组的求和;

    4.防抖节流的思路。

    5.深拷贝、浅拷贝;

    6.做一个10秒的倒计时;

    7.setTimeout()和setInterval()的使用以及区别


    导读:一些常见的前端面试官会让求职者写的编程题

     

    1.数组排序。

    sort() 方法以字母顺序对数组进行排序

    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits.sort();

    使用相同的技巧对数组进行降序排序:

    var points = [40, 100, 1, 5, 25, 10];
    points.sort(function(a, b){return b - a});


    2.数组元素的去重;

    利用ES6 Set去重(ES6中最常用)

    function unique (arr) {
      return Array.from(new Set(arr))
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
     //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

    利用for嵌套for,然后splice去重

    function unique(arr){            
            for(var i=0; i<arr.length; i++){
                for(var j=i+1; j<arr.length; j++){
                    if(arr[i]==arr[j]){         //第一个等同于第二个,splice方法删除第二个
                        arr.splice(j,1);
                        j--;
                    }
                }
            }
    return arr;
    }
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
        //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重,两个null直接消失了

    更多数组去重:https://segmentfault.com/a/1190000016418021?utm_source=tag-newest

     

    3.用递归的方法求数组的求和;

    递归

    var arr = [1,2,3];
    function sum(arr) {
      if(arr.length == 0){
        return 0;
      } else if (arr.length == 1){
        return arr[0];
      } else {
        return arr[0] + sum(arr.slice(1));
      }
    }
    console.log(sum(arr));//6
    

    for循环

    var arr = [1,2,3];
    function sum(arr) {
      var s = 0;
      for (var i = 0;i<arr.length;i++) {
        s += arr[i];
      }
      return s;
    }
    console.log(sum(arr));//6
    


    4.防抖节流的思路。

    防抖

    函数防抖(debounce),就是指触发事件后,在 n 秒内函数只能执行一次,如果触发事件后在 n 秒内又触发了事件,则会重新计算函数延执行时间。

    比如:坐电梯的时候,如果电梯检测到有人进来(触发事件),就会多等待 10 秒,此时如果又有人进来(10秒之内重复触发事件),那么电梯就会再多等待 10 秒。在上述例子中,电梯在检测到有人进入 10 秒钟之后,才会关闭电梯门开始运行,因此,“函数防抖”的关键在于,在 一个事件 发生 一定时间 之后,才执行 特定动作

    函数防抖的要点,是需要一个 setTimeout 来辅助实现,延迟运行需要执行的代码。如果方法多次触发,则把上次记录的延迟执行代码用 clearTimeout 清掉,重新开始计时。若计时期间事件没有被重新触发,等延迟时间计时完毕,则执行目标代码。

    function debounce(fn,wait){
        var timer = null;
        return function(){
            if(timer !== null){
                clearTimeout(timer);
            }
            timer = setTimeout(fn,wait);
        }
    }
        
    function handle(){
        console.log(Math.random());
    }
        
    window.addEventListener("resize",debounce(handle,1000));

    节流

    函数节流(throttle):当持续触发事件时,保证一定时间段内只调用一次事件处理函数。节流通俗解释就比如我们水龙头放水,阀门一打开,水哗哗的往下流,秉着勤俭节约的优良传统美德,我们要把水龙头关小点,最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴。

    函数节流主要有两种实现方法:时间戳和定时器。

    时间戳

    var throttle = function(func, delay) {            
      var prev = Date.now();            
      return function() {                
        var context = this;                
        var args = arguments;                
        var now = Date.now();                
        if (now - prev >= delay) {                    
          func.apply(context, args);                    
          prev = Date.now();                
        }            
      }        
    }        
    function handle() {            
      console.log(Math.random());        
    }        
    window.addEventListener('scroll', throttle(handle, 1000));

    定时器

    var throttle = function(func, delay) {            
        var timer = null;            
        return function() {                
            var context = this;               
            var args = arguments;                
            if (!timer) {                    
                timer = setTimeout(function() {                        
                    func.apply(context, args);                        
                    timer = null;                    
                }, delay);                
            }            
        }        
    }        
    function handle() {            
        console.log(Math.random());        
    }        
    window.addEventListener('scroll', throttle(handle, 1000));

    函数防抖:将几次操作合并为一此操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

    函数节流:使得一定时间内只触发一次函数。原理是通过判断是否到达一定时间来触发函数。

    区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。


    5.深拷贝、浅拷贝;

    深复制和浅复制只针对像 Object, Array 这样的复杂对象的。简单来说,浅复制只复制一层对象的属性,而深复制则递归复制了所有层级。

    浅复制

    var obj = { a:1, arr: [2,3] };
    var shallowObj = shallowCopy(obj);
    
    function shallowCopy(src) {
      var dst = {};
      for (var prop in src) {
        if (src.hasOwnProperty(prop)) {
          dst[prop] = src[prop];
        }
      }
      return dst;
    }
    

    因为浅复制只会将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致 obj.arr 和 shallowObj.arr 指向同一块内存地址。

    shallowObj.arr[1] = 5;
    obj.arr[1]   // = 5

    而深复制则不同,它不仅将原对象的各个属性逐个复制出去,而且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。

    需要注意的是,如果对象比较大,层级也比较多,深复制会带来性能上的问题。在遇到需要采用深复制的场景时,可以考虑有没有其他替代的方案。在实际的应用场景中,也是浅复制更为常用。

    6.做一个10秒的倒计时;

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script type="text/javascript">
        function daojishi()
        {
            var starttime=document.getElementById("id2").innerText;
            if(starttime==0)
            {
                return ;
            }
            setTimeout("daojishi()",1000);
            starttime--;
            document.getElementById("id2").innerText=starttime;
        }
    </script>
     
     
    <body>
    <h5 id="id2">10</h5>
    <button id="id1" onclick="daojishi()">开始倒计时</button>
     
    </body>
    </html>

    7.setTimeout()和setInterval()的使用以及区别

    1、setTimeout()方法

          这个方法所有浏览器都支持,setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层物件名称, 这是用来

    设定一个时间, 时间到了, 就会执行一个指定的 method。

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <script>
            var x = 0;
            function countSecond()
            {
                x = x+1;
                document.haorooms.haoroomsinput.value = x;
                setTimeout("countSecond()", 1000)
            }
        </script>
    </head>
    <html>
    <body>
     
    <form name="haorooms">
        <input type="text" name="haoroomsinput" value="0" size=4 >
    </form>
     
    <script>
        countSecond();
    </script>
     
    </body>
    </html>

    setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。setInterval() 方法会不停地调用函数,直到 

    clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
     
    </body>
    <script>
        function test(){
            this.name = "setInternal";
            this.waitMes = function(){
                var that = this;
                setInterval(function(){
                    alert(that.name);
                },3000);
            }
        }
        var te = new test();
        te.waitMes();
    </script>
    </html>

    通过上面可以看出,setTimeout和setinterval的最主要区别是:

        1)setTimeout只运行一次,也就是说设定的时间到后就触发运行指定代码,运行完后即结束。如果运行的代码中再次运行同样

    的setTimeout命令,则可循环运行。(即 要循环运行,需函数自身再次调用 setTimeout());而 setinterval是循环运行的,即每

    到设定时间间隔就触发指定代码。这是真正的定时器。

        2)setinterval使用简单,而setTimeout则比较灵活,可以随时退出循环,而且可以设置为按不固定的时间间隔来运行,比如第一次1秒,第二次2秒,第三次3秒。
     

    展开全文
  • Web前端面试 面试官常问问题

    万次阅读 2017-08-07 15:07:03
    面试官喜欢问题以下会列出一些我们面试官问题,请提前做好准备。 需要注意的是,校招和社招的是不一样的,校招会更加关注基础知识,而社招会更加关注之前做过的项目情况。项目相关面试其实说白了就是根据一个...

    面试官喜欢问的问题

    以下会列出一些我们面试官的问题,请提前做好准备。
    需要注意的是,校招和社招的是不一样的,校招会更加关注基础知识,而社招会更加关注之前做过的项目情况。

    项目相关

    面试其实说白了就是根据一个人之前的经历,来判断出后续这人会做得怎样,如果你之前从没做成过一件事情,凭什么让别人相信你之后能做成呢?因此无论哪里的面试都会问你之前做过的项目

    项目可以是多人协助开发一个产品,也可以是自己个人做过的业余应用,只需介绍 1、2 个就够了,需要注意的是 1 + 1 != 2,做了两个平庸的项目不如做了一个好项目

    一般来说会问如下几方面的问题:
    ● 做过最满意的项目是什么?
    ● 项目背景
    - ○ 为什么要做这件事情?
    - ○ 最终达到什么效果?
    ● 你处于什么样的角色,起到了什么方面的作用?
    ● 在项目中遇到什么技术问题?具体是如何解决的?
    ● 如果再做这个项目,你会在哪些方面进行改善?

    技术相关 - 1 面

    技术一面主要判断对基础知识的掌握
    ● 描述一个你遇到过的技术问题,你是如何解决的?
    - ○ 这个问题很常见,有没有遇到过很不常见的问题?比如在网上根本搜不到解决方法的?

    ● 是否有设计过通用的组件?
    - ○ 请设计一个 Dialog(弹出层) / Suggestion(自动完成) / Slider(图片轮播) 等组件
    - ○ 你会提供什么接口?
    - ○ 调用过程是怎样的?可能会遇到什么细节问题?
    ● 更细节的问题推荐参考 https://github.com/darcyclarke/Front-end-Developer-Interview-Questions/

    技术相关 - 2 面

    技术二面主要判断技术深度及广度
    ● 你最擅长的技术是什么?
    - ○ 你觉得你在这个技术上的水平到什么程度了?你觉得最高级别应该是怎样的?

    ● 浏览器及性能
    - ○ 一个页面从输入 URL 到页面加载完的过程中都发生了什么事情?越详细越好
    (这个问既考察技术深度又考察技术广度,其实要答好是相当难的,注意越详细越好)
    - ○ 谈一下你所知道的页面性能优化方法?
    这些优化方法背后的原理是什么?
    除了这些常规的,你还了解什么最新的方法么?
    如何分析页面性能?

    ● 其它
    - ○ 除了前端以外还了解什么其它技术么?
    - ○ 对计算机基础的了解情况,比如常见数据结构、编译原理等

    兴趣相关

    ● 最近在学什么?接下来半年你打算学习什么?
    ● 做什么方面的事情最让你有成就感?需求设计?规划?具体开发?
    ● 后续想做什么?3 年后你希望自己是什么水平?

    主动性相关

    ● 在之前做过的项目中,有没有什么功能或改进点是由你提出来的?
    ● 是否有参与和改进其它开源项目

    面试过程

    我们一般会有 3 轮面试,对于高级别的工程师可能会有 4-5 轮面试。

    可能会采用哪些方法来面试

    一般会有 3 轮面试,对于高级别的工程师可能会有 4-5 轮面试。
    ● 代码编写笔试
    ● 问答式
    过程遵循 STAR 面试法

    面试官喜欢什么样的面试者

    ● 基础扎实
    - ○ 从多年的经验看,那些发展好的同学都具备扎实的基础知识
    - ○ 比如只懂 jQuery 不懂 JavaScript 是不行的哦
    - ○ 如果了解计算机基础会更好,因为我们将面临很多非前端技术的问题

    ● 主动思考
    - ○ 被动完成任务的同学在这里进步会很慢
    - ○ 你需要有自己的想法,而不是仅仅完成任务

    ● 爱学习
    - ○ 前端领域知识淘汰速度很快,所以最好能经常学习和接触新东西

    ● 有深度
    - ○ 遇到问题时多研究背后深层次的原因,而不是想办法先绕过去
    - ○ 比如追踪某个 Bug 一直了解它本质的原因

    ● 有视野
    - ○ 创新往往来自于不同学科的交集,如果你了解的领域越多,就越有可能有新想法


    ● 公开面试题不怕面试者精心准备么?
    - ○ 面试题大多是开放性问题,是无法准备的
    - ○ 如果真的精心准备,在各方面都能答好,那说明做事态度认真且努力,这正是我们需要的品质,因为我们相信一个人不是一成不变的,可以不断学习和进步,只要 ta 肯努力

    ● 我只会 CSS/HTML,或只会 JavaScript,可以么?
    - ○ 不行,而且很多内部项目还需要用 PHP


    - ○ 首先,你确定简历提交到的是「Web 前端研发部」,而且我们正在招聘
    - ○ 如果符合前面的条件,很遗憾,或许是我们招满了,或许是你暂时不适合我们部门,但这不意味着你不能改进,请继续努力

    参考

    Front-end Job Interview Questions

    展开全文
  • 面试官常问的web前端问题

    千次阅读 2020-01-06 11:58:49
     JQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。 6.不污染顶级变量  JQuery只建立一...

    1. 标签上 alt与 title属性的区别是什么?


    alt :搜索引擎识别,在图像无法显示时的替代文本;
    title :元素注释信息,主要给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。

    (因为 IE 不标准)在 IE 浏览器中 alt 起到了 title 的作用,变成文字提示。
    在定义 img 对象时,将 alt 和 title 属性写全,可以保证在各种浏览器中都能正常使用。

     

    2. DIV+CSS 布局较 table 有什么优势?


    DIV+CSS 布局:速率快,页面体积小,浏览速度快;便于被搜索引擎收录;样式丰富,页面更灵活;便于修改,效率高;

    1、速率更快,页面体积变小,浏览速度变快,这就使得对于某些控制主机流量的网站来说是最大的优势了;
    2、更好地被搜索引擎收录,大部分 html 页面的样式写入了 CSS 文件中,便于被搜索引擎采集收录;
    3、对浏览者和浏览器更具优势,由于 CSS 富含丰富的样式,使页面更加灵活性,它可以根据不同的浏览器,而达到显示效果的统 一和不变形;
    4、修改更有效率,由于使用了 DIV+CSS 制作方法,在修改页面的时候更加容易省时,提高工作效率;

    (table在企业中极少用!!!)

     

    3. 介绍一下标准的 CSS 的盒子模型?与低版本 IE 的盒子模型有什么不同的?


    有两种, IE 盒子模型、W3C 盒子模型;
    CSS盒模型常用的属性: 内容(content)、填充(padding)、边界(margin)、 边框(border);
    区 别: IE 的 content 部分把 border 和 padding 计算了进去;

    1.网页设计中常用的属性名:内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
    2.这些属性我们可以用日常生活中的常见事物——盒子作一个比喻来理解,所以叫它盒子模式。
    3.CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
    想象一个盒子,它有:外边距(margin)、边框(border)、内边距(padding)、内容(content)四个属性;
    让我们俯视这个盒子,它有上下左右四条边,所以每个属性除了内容(content),都包括四个部分:上下左右;这四部分可同时设置,也可分别设置;内边距可以理解为盒子里装的东西和边框的距离,而边框有厚薄和颜色之分,内容就是盒子中间装的东西,外边距就是边框外面自动留出的一段空白。

     

    4. CSS 选择符有哪些?


    id选择器、类选择器、标签选择器、属性选择器、通配符选择器、子选择器

    1.id 选择器( #myid)
    2.类选择器(.myclassname)
    3.标签选择器(div,h1,p) ,用逗号分割,可多个
    4.相邻选择器(h1+p) ,兄弟节点
    5.子选择器(ul>li) ,
    6.后代选择器(lia)
    7.通配符选择器( * )
    8.属性选择器(a[rel=“external”]) ,jQuery常用
    9.伪类选择器(a:hover,li:nth-child)

     

    5. JS 的数据类型有哪些?


    数据类型主要包括两部分:
    基本数据类型:Undefined、Null、Boolean、Number 和 String
    引用数据类型:Array 、Object

     

    6. null,undefined 的区别?


    null 表示一个对象被定义了,值为“空值”;
    undefined 表示不存在这个值。

     

    7. 描述下 JSON 对象的两个很重要的方法


    JSON.parse() //JSON 字符串转换为 JSON 对象
    JSON.stringify() //JSON 对象转化为字符串

     

    8. eval 是做什么的?


    把对应的字符串解析成js代码并运行(不建议使用,不安全,耗性能);
    把 json字符串 转换成 json对象 时可用 eval,var obj = eval(’(’+str+’)’)

    它的功能是把对应的字符串解析成 JS 代码并运行;
    应该避免使用 eval,不安全,非常耗性能(2 次,一次解析成 js 语句,一次执行)。
    由 JSON 字符串转换为 JSON 对象的时候可以用 eval,var obj = eval(’(’+str+’)’);

     

    9. 简述下为何通过 ajax 发送的请求会出现乱码问题,如何解决?


    编码格式冲突,直接在传输中文数据前加 encodURL() 编码

    乱码的问题就是编码格式冲突,我们需要传输中文数据前面加一个 encodeURI()编码,
    例如:encodeURI($("#fk_info").val());在接受参数的页面对传过来的编码过后的内容用后端语言进行解码

     

    10.HTML5、CSS3 里面都新增了那些新特性?


    新的语义标签
    本地存储
    离线存储 Websocket 2d,3d 变换 Transition,animation 媒体查询新的单位(rem,vw,vh 等)

     

    11.什么是响应式设计?


    响应式设计:是关于网站的制作或网页制作的工作,不同的设备有不同的尺寸和不同的功能。
    响应式设计让所有的人能在这些设备上让网站运行正常。
    一部分是媒体查询和不同的视觉效果。一部分是不同的资源(如不同的 Javascript 来处理触摸与点击自动适应屏幕的对比) 。

     

    12.为什么我们要弃用 table 标签


    table的缺点 :只有等 table标签 里的内容全部加载完才能显示网页。

    table:服务器把代码加载到本地服务器的过程中,本来是加载一行执行一行,但是 table 标签是里面的东西全都下载完之后才会显示出来,那么如果图片很多的话就会导致网页一直加载不出来,除非所有的图片和内容都加载完。如果要等到所有的图片全部加载完之后才显示出来会影响网页的性能,所以 table 标签现在我们基本放弃使用了。

     

    13.iframe 有哪些缺点


    iframe的缺点:阻塞主页面 onload 事件;影响页面并行加载(浏览器限制相同域的链接);

    搜索引擎的检索程序无法解读这种页面,不利于 SEO iframe 和主页面共享连接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载。

    使用 iframe 之前需要考虑这两个缺点,如果需要使用 iframe,最好是通过 JavaScript 动态给 iframe 添加 src 属性值,这样可以绕开以上两个问题。

    iframe常用属性:
     

    1.frameborder:	是否显示边框,1(yes),0(no)
    2.height:		框架作为一个普通元素的高度,建议在使用css设置。
    3.width:		框架作为一个普通元素的宽度,建议使用css设置。
    4.name:			框架的名称,window.frames[name]时专用的属性。
    5.scrolling:	框架的是否滚动。yes,no,auto。
    6.src:			内框架的地址,可以使页面地址,也可以是图片的地址。
    7.srcdoc: 		用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
    8.sandbox: 		对iframe进行一些列限制,IE10+支持
    

     

    14.meta viewport 是做什么用的,怎么写?

    控制页面在移动端不要缩小显示。

    <metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    

    这个标签内的内容表示啥意思呢?

    name			为viewport表示供移动设备使用. content定义了viewport的属性.
    width			表示移动设设备下显示的宽度为设备宽度(device-width)
    height			表示移动设设备下显示的宽度为设备宽度.
    user-scalable	表示用户缩放能力, no表示不允许.
    initial-scale	表示设备与视口的缩放比率
    maximum和minimum	分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
    
    这个meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.
    

     

    15.json 和 xml 数据的区别


    json:轻量级,传递速度快;占带宽小,易压缩;更方便与JavaScript交互,易解析,能更好的数据交互,项目交互中多用于数据交互;对数据的描述性比xml较差;
    xml:重量级;占带宽大;项目交互中多用于配置文件;

    1,数据体积方面:xml 是重量级的,json 是轻量级的,传递的速度更快些。
    2,数据传输方面:xml 在传输过程中比较占带宽,json 占带宽少,易于压缩。
    3,数据交互方面:json 与 javascript 的交互更加方便,更容易解析处理,更好的进行数据交互
    4,数据描述方面:json 对数据的描述性比 xml 较差
    5,xml 和 json 都用在项目交互下,xml 多用于做配置文件,json 用于数据交互。

     

    16.document.write 和 innerHTML 的区别


    document.write :直接写入页面的内容流,导致页面被重写。
    innerHTML :写入某个 DOM 节点,不会导致页面全部重绘;

    document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。

    innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。

    innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。

     

    17.jQuery 库中的 $ 是什么?


    $就是jQuery的别称,是jQuery库提供的一个函数。
    可以获取元素
     

    $('#submit').attr('disabled', true);
    
    可以写为:
    
    jquery('#submit').attr('disabled', true);
    

     

    18.$(document).ready()方法和 window.onload 的区别?


    $(document).ready() 方法:可在 DOM 载入就绪时就执行,并调用执行绑定的函数;可多次使用不同事件处理程序;
    window.onload 方法:网页中所有的元素(包括元素的所有关联文件)完全加载后才执行;一次只能保存对一个函数的应用;

    window.onload 和 $(document).ready()主要有两点区别:

    1、执行时机

    window.onload:在网页中所有元素(包括元素的所有关联文件)都完全加载到浏览器之后才执行。
    $(document).ready():只要在DOM完全就绪时,就可以调用了,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等。

    从二者的英文字母可以大概理解上面的话,onload即加载完成,ready即DOM准备就绪。

    2、注册事件

    $(document).ready():可以多次使用不同的事件处理程序,

    window.onload:一次只能保存对一个函数的引用,多次绑定函数只会覆盖前面的函数。

    两个window.onload在同一个页面上可能效果会展示不了。

     

    19.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?


    行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
    块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
    空元素:即系没有内容的 HTML元素,例如:br、meta、hr、link、input、img

     

    20.你为什么要使用 jQuery?


    jQuery的优点:轻量级框架;选择器强大;DOM操作封装丰富;事件处理机制可靠;Ajax完善;浏览器兼容;支持链式操作、隐式迭代;行为层与结构层分离;支持的插件丰富;jQuery文档丰富。

    jquery的优点:

    1.轻量级
        JQuery非常轻巧,采用Dean Edwards编写的Packer压缩后,大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB。

    2.强大的选择器
        JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而且复杂的选择器,另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。

    3.出色的DOM操作的封装
        JQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作,让JavaScript新手也能写出出色的程序。

    4.可靠的事件处理机制
        JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华,是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面,JQuery也做得非常不错。

    5.完善的Ajax
        JQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

    6.不污染顶级变量
        JQuery只建立一个名为JQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存,在项目中放心地引用而不需要考虑到后期的冲突。

    7.出色的浏览器兼容性
        作为一个流行的JavaScript库,浏览器的兼容性是必须具备的条件之一。JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异,使开发者不必在开展项目前建立浏览器兼容库。

    8.链式操作方式
        JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。

    9.隐式迭代
        当用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。相反,JQuery里的方法都被设计成自动操作的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅度地减少代码量。

    10.行为层与结构层的分离
        开发者可以使用选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使JQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要在HTML代码中寻找某些函数和重复修改HTML代码。

    11.丰富的插件支持
        JQuery的易扩展性,吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持,而且还不断有新插件面试。

    12.完善的文档
        JQuery的文档非常丰富,现阶段多位英文文档,中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档,例如JQuery的中文API。

    13.开源
        JQuery是一个开源的产品,任何人都可以自由地使用并提出修改意见。

     

    21.jQuery 中的选择器 和 css 中的选择器有区别吗?


    jQuery 选择器支持 CSS 里的选择器,jQuery 选择器可用来添加样式和添加相应的行为;
    CSS 中的选择器是只能添加相应的样式

    有一定的区别:
    1、首先说两者是属于不同的两门语言,jQuery是属于js的一个框架,jQuery选择器是js里面的选择器,css是另一门不同于js的语言,CSS选择器是css选择器,则两者在根本上是不同的。
    2、但是两者是有交集的,都是作为网页或者浏览器解析的语言,而js可以通过修改浏览器的dom对象来实现对css修改或者是控制。
    3、可以简单的这样区分两者,css选择器用语css当中,js选择器应用于js当中,只不过有时两者使用相同的id标识来选择对象。

    jQuery选择器和CSS选择器的写法十分类似,都具有隐式迭代的特点,无需循环遍历符合选择器要求的每个元素,使用起来相对方便,通常,把css选择器用 $("")包起来就成了一个jQuery选择器

     

    22.web 前端开发,如何提高页面性能优化?


    内容方面:
    1.减少 HTTP 请求 (MakeFewerHTTPRequests)
    2.减少 DOM 元素数量 (ReducetheNumberofDOMElements)
    3.使得 Ajax 可缓存 (MakeAjaxCacheable)

    针对 CSS:
    1.把 CSS 放到代码页上端 (PutStylesheetsattheTop)
    2.从页面中剥离 JavaScript 与 CSS(MakeJavaScriptandCSSExternal)
    3.精简 JavaScript 与 CSS(MinifyJavaScriptandCSS)
    4.避免 CSS 表达式 (AvoidCSSExpressions)

    针对 JavaScript :
    1.脚本放到 HTML 代码页底部 (PutScriptsattheBottom)
    2. 从页面中剥离 JavaScript 与 CSS(MakeJavaScriptandCSSExternal)
    3. 精简 JavaScript 与 CSS(MinifyJavaScriptandCSS)
    4. 移除重复脚本 (RemoveDuplicateScripts)

    面向图片(Image):
    1.优化图片
    2 不要在 HTML 中使用缩放图片
    3 使用恰当的图片格式
    4 使用 CSSSprites 技巧对图片优化

    前端性能优化
    思路:分析一个页面从输入 URL 到页面加载显示完成的所有步骤,采用 分治法 逐步优化。

    1 优化DNS查询
    减少域名:尽量把所有的资源放在一个域名下。
    一个域名同时可以发4(IE8)或 8个请求(Chrome),请求文件少,用1个域名,文件多用多个域名。与3权衡。

    2 优化TCP协议
    TCP连接复用,使用keep-alive:连接回复加上请求头:keep-alive。
    第一次请求不断开,第二次请求复用。
    使用http 2.0版本:多路复用,连接复用率会更高

    3 优化发送HTTP请求
    合并JS或CSS文件
    inline image:使用data:url scheme来内连图片
    减小cookie体积,每个请求都会附带cookie,所以不要滥用cookie。
    合理使用CasheControl代替发送HTTP请求
    同时发送多个请求(浏览器自带)IE8可以同时请求下载4个的css文件,Chrome可以同时请求下载8个 。

    4 优化接受响应
    设置Etags:浏览器重复与请求服务器一样的文件,ETag响应304。
    Gzip压缩大文件 使用macos gzip,npm server gzip gzip 文件名
    其响应头为Content-Encodinging:gzip,先压缩接收到再解压缩。缺点:耗费浏览器CPU,权衡

    5 优化DOCTYPE
    不能不写,不能写错

    6 优化CSS、JS请求
    使用CDN:用CDN请求静态资源同时可以增大同时下载数量,内容分发网络(CDN)可以使请求总时间降低,也可以减少cookie
    CSS放在head里:使其尽早下载,因为chrome需要下载完所有的css后才渲染页面
    JS放在body里的最后:尽早显示整个页面,获取节点。

    7 使用懒加载
    组件懒加载

    const xxx =()=>import('./components/xxx.vue')


    路由懒加载

    8 优化用户体验
    用户看到哪些内容就请求哪些内容
    加一个loading动画用户会感觉时间变快

    9 减少监听器,使用事件委托

        <body>
            <ul>
                <li>1</li><li>2</li><li>3</li><li>4</li>
            </ul>
            <script>
                let liList = document.querySelectorAll('li')
    
                // liList[0].onclick = ()=>console.log(1)
                // liList[1].onclick = ()=>console.log(2)
                // liList[2].onclick = ()=>console.log(3)
                // liList[3].onclick = ()=>console.log(4)
                //监听太多
    
                let ul = document.querySelector('ul')
    
                ul.onclick = (e) => {
                    if (e.target.tagName === 'LI') {
                        console.log(e.target.innerText)
    
                    }
                }//减少监听,采用事件委托
            </script>
        </body>
    

    23.什么是 Bootstrap?为什么要使用 Bootstrap?


    Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
    Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap 具有移动设备优先、浏览器支持良好、容易上手、响应式设计等优点,所以 Bootstrap 被广泛应用。

     

    24.对于各类尺寸的设备,Bootstrap 设置的 class 前缀分别是什么?


    超小设备手机(<768px):.col-xs;
    小型设备平板电脑(>=768px):.col-sm;
    中型设备台式电脑(>=992px):.col-md;
    大型设备台式电脑(>=1200px):.col-lg;

     

    25.什么是 Bootstrap 网格系统(Grid System)?


    Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。 响应式网格系统随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多 12 列。

     

    26.Bootstrap 网格系统列与列之间的间隙宽度是多少?


    间隙宽度为 30px(一个列的每边分别是 15px)。

     

    27.介绍一下 easyui 的布局


    easyui:分为上,中,下,左,
    右面板 一般在工作中使用上(企业 logo,登录,退出);
    左(菜单);
    中(展示数据);

     

    28.Easyui 如何实现表单验证


    提供了一个 validatebox 插件来验证一个表单, input 表单根据 validType 属性来应用验证;
    validType="email"邮箱验证; required=“true” 必填项 ;
     

    <input class="easyui-validatebox" type="text" name="name" validType="email" required="true"></input>
    

    29.Easyui 常用的组件有哪些?


    datagrid:数据表格 ;
    window:窗口 ;
    form:表单 ;
    layout:布局 ;
    tabs:选项卡 ;
    according:折叠面板 ;
    combobox:下拉列表;

     

    30.Vue.js 介绍


    Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。
    Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和 组合的视图组件。核心是一个响应的数据绑定系统。

    Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库,同时拥有非常容易上手的 API; Vue.js 是一个构建数据驱动的 Web 界面的库。 Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关 注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和 Vue 生态系统 支持的库开发的复杂单页应用。数据驱动+组件化的前端开发。

     

    31.使用 Vue 的好处


    vue 两大特点:响应式编程、组件化 ;
    vue 的优势:轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟 DOM、运行速度快

     

    32.MVVM 定义


    MVVM 是 Model-View-ViewModel 的简写,模型-视图-视图模型。
    【模型】指的是后端传递的数据(数据:json)。
    【视图】指的是所看到的页面。
    【视图模型】mvvm 模式的核心,它是连接 view 和 model 的桥梁。
    有两个方向:
    将【模型】转化成【视图】:即将后端传递的数据转化成所看到的页面(将后端Ajax数据 渲染 到前端视图)。实现的方式是:数据绑定。
    将【视图】转化成【模型】:即将所看到的页面转化成后端的数据。 实现的方式是:DOM 事件监听。

    这两个方向都实现的,我们称之为数据的双向绑定。

    总结:在 MVVM 的框架下视图和模型是不能直接通信的。
    它们通过 ViewModel 来通信,ViewModel 通常要实现一个 observer 观察者,当数据发生变化,ViewModel 能够监听到数据 的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel 也能监听到视图的变化,然后通知数据做改动,这 实际上就实现了数据的双向绑定。并且 MVVM 中的 View 和 ViewModel 可以互相通信

     

    33.Vue 的生命周期(重点)


    beforeCreate(创建前) 在数据观测和初始化事件还未开始;

    created(创建后) 完成数据观测,属性和方法的运算,初始化事件,$el 属性还没有显示出来 ;

    beforeMount(载入前) 在挂载开始之前被调用,相关的 render 函数首次被调用。实例已完成以下的配置:编译模板,把 data 里 面的数据和模板生成 html。注意此时还没有挂载 html 到页面上。

    mounted(载入后) 在 el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的 html 内容替换 el 属性指向的 DOM 对象。完成模板中的 html 渲染到 html 页面中。此过程中进行 ajax 交互。

    beforeUpdate(更新前) 在数据更新之前调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中进一步地更改状态, 不会触发附加的重渲染过程。

    updated(更新后):在由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。调用时,组件 DOM 已经更新,所以可以执行 依赖于 DOM 的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期 间不被调用。

    beforeDestroy(销毁前) 在实例销毁之前调用。实例仍然完全可用。

    destroyed(销毁后) 在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端 渲染期间不被调用。


    34.Vue 的响应式原理


    当一个 Vue 实例创建时,vue 会遍历 data 选项的属性,用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖,在属性被访问和修改时通知变化。
    每个组件实例都有相应的 watcher 程序实例,它会在组件渲染的过程中把属性记录为依赖, 之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

     

    35.第一次页面加载会触发哪几个钩子?


    触发这几个 beforeCreate、created、beforeMount、mounted ,并在 mounted 的时候 DOM 渲染完成

     

    36.为什么vue 中 data 必须是一个函数?


    对象为引用类型,当重用组件时,由于数据对象都指向同一个 data 对象,当在一个组件中修改 data 时,其他重用的组件中的 data 会同时被修改;而使用返回对象的函数,由于每次返回的都是一个新对象(Object 的实例),引用地址不同,则不会出现这个问题。

     

    37.vue 中做数据渲染的时候如何保证将数据原样输出?


    v-text:将数据输出到元素内部,如果输出的数据有 HTML代码,会作为普通文本输出;
    v-html:将数据输出到元素内部,如果输出的数据有 HTML 代码,会被渲染
    {{}}:插值表达式,可以直接获取 Vue 实例中定义的数据或函数,使用插值表达式的时候,值可能闪烁;而使用 v-html、v-text 不 会闪烁,有值就显示,没值就隐藏

     

    38.active-class 是哪个组件的属性?


    vue-router 模块的 router-link 组件。

     

    39.vue-router 有哪几种导航钩子?


    三种;
    全局导航钩子:router.beforeEach(to,from,next),作用:跳转前进行判断拦截;
    组件内的钩子;
    单独路由独享组件;

    40. $route 和 $router 的区别


    $route 是“路由信息对象”,包括 path,params,hash,query,fullPath,matched,name 等路由信息参数;
    $router 是“路由实例” 对象包括了路由的跳转方法,钩子函数等

    41.vue 几种常用的指令


    v-for 、 v-if 、v-else、v-bind(绑定属性,简写 :)、v-on(事件绑定)、v-show、

     

    42.v-if 和 v-show 区别


    v-if 按照条件是否渲染,v-show 是 display 的 block(满足) 或 none(不满足)

     

    43.vue 常用的修饰符?


    .prevent : 提交事件不再重载页面;
    .stop : 阻止单击事件冒泡;
    .self : 当事件发生在该元素本身而不是子元素的时候会触发;
    .capture : 事件侦听,事件发生的时候会调用;

     

    44.vue-loader 是什么?使用它的用途有哪些?


    vue-loader:解析**.vue** 文件的一个加载器,跟 template/js/style 转换成 js 模块。
    用途:js 可以写 es6、style 样式可以 scss 或 less、template 可以加 jade 等

     

    45.computed、watch、methods 的区别


    computed 计算属性:用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。

    watch 监听的是你定义的变量,当你定义的变量的值发生变化时,调用对应的方法。就好在 div 写一个表达式 name, data 里写入 num 和 lastname、firstname,在 watch 里当 num 的值发生变化时,就会调用 num 的方法,方法里面的形参对应的是 num 的新值和旧值,计算属性计算的是 Name 依赖的值,它不能计算在 data 中已经定义过的变量。

    methods 方法,函数,绑定事件调用;不会使用缓存

     

    46.什么是 js 的冒泡?Vue 中如何阻止冒泡事件?


    js 冒泡:当父元素内多级子元素绑定了同一个事件,js 会依次从内往外或者从外往内,执行每个元素的该事件,从而引 发冒泡 ;
    js 解决冒泡:event.stopPropagation()
    vue 解决冒泡: 事件.stop,例如:@click.stop="",@mouseover.stop=""

     

    47.vue 组件通信


    1.父组件与子组件传值 ,父组件传给子组件:子组件通过 props 方法接受数据;子组件传给父组件:$emit 方法传递参数 ;
    2.非父子组件间的数据传递,兄弟组件传值 eventBus,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件;
    3.也可使用 vuex;

     

    48.<keep-alive></keep-alive>的作用是什么?


    <keep-alive></keep-alive>包裹动态组件时,会缓存不活动的组件实例,主要用于保留组件状态或避免重新渲染。

    大白话: 比如有一个列表和一个详情,那么用户就会经常执行打开详情=>返回列表=>打开详情…这样的话列表和详情都是一个频率很高的页面,那么就 可以对列表组件使用 <keep-alive></keep-alive> 进行缓存,这样用户每次返回列表的时候,都能从缓存中快速渲染,而不是重新渲染。

     

    49.$nextTick 是什么?


    vue 实现响应式并不是数据发生变化后 dom 立即变化,而是按照一定的策略来进行 dom 更新。
    $nextTick是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM

     

    50.Vue 子组件调用父组件的方法


    直接在子组件中通过 this.$parent.event 来调用父组件的方法 ;
    在子组件里用 $emit 向父组件触发一个事件,父组件监听这个事件就行了。

     

    51.Promise 对象是什么?


    1.Promise 是异步编程的一种解决方案,它是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从 语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。promise 对象是一个构造函数,用来生成 Promise 实例;
    2.promise 的两个特点 对象状态不受外界影响 && 一旦状态改变,就不会再变,任何时候都可以得到结果
    (pending 状态–>fulfilled ||pending–>rejected)

     

    52.axios 的特点有哪些?


    1、axios 是一个基于 promise 的 HTTP 库,支持 promise 的所有 API;
    2、它可以拦截请求和响应;
    3、它可以转换请求数据和响应数据,并对响应回来的内容自动转换为 json 类型的数据;
    4、它安全性更高,客户端支持防御 XSRF;

     

    53.vue 中的 ref 是什么?


    ref 被用来给元素或子组件注册引用信息。
    引用信息将会注册在父组件的 $refs 对象上。
    如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。

     

    54.vue 如何兼容 ie


    babel-polyfill 插件

     

    55.页面刷新 vuex 被清空解决办法?


    1.localStorage 存储到本地再回去
    2.重新获取接口获取数据

     

    56.Vue 与 Angular 以及 React 的区别?


    1、 Vue与 AngularJS 的区别:
    相同点:
    都支持指令:内置指令和自定义指令;
    都支持过滤器:内置过滤器和自定义过滤器;都支持双向数据绑定;都不支持低端浏览器。
    不同点:
    AngularJS 的学习成本高,比如增加了 DependencyInjection 特性;Vue.js 本身提供的 API 都比较简单、直观;
    AngularJS 依赖对数据做脏检查,所以 Watcher 越多越慢;Vue.js 基于依赖追踪观察,使用异步队列更新,所有数据独立触发。

    2、 Vue与 React 的区别:
    相同点:
    React 采用特殊的 JSX 语法,Vue.js 在组件开发中也推崇编写.vue 特殊文件格式,两者都需要编译后使用;
    都是组件,组件实例之间可以嵌套;都提供合理的钩子函数,可让开发者定制化地去处理需求;
    都不内置列数 AJAX、Route 等功能到核心包;以插件的方式加载;在组件开发中都支持 mixins 的特性。
    不同点:
    React 采用的 VirtualDOM 会对渲染出来的结果做脏检查;Vue.js 在提供了指令,过滤器等,可方便、快捷地操作 Virtual DOM。

     

    57.localstorage 和 sessionstorage 是什么?区别是什么?


    localstorage 和 sessionstorage 一样都用来存储客户端临时信息的对象,都只能存储字符串类型。
    区别:
    localstorage 生命周期永久,除非用户在浏览器提供的 UI 上清除 localstorage 信息,否则这些信息将永远存在。
    sessionstorage 生命周期为当前窗口或标签,当窗口或标签被永久关闭,所有通过 sessionstorage 存储的数据也被清空。

    不同浏览器无法共享 localstorage 或 sessionstorage 中的信息。
    相同浏览器的不同页面可以共享相同的 localstorage(页面属于相同 的域名和端口),但是不同页面或标签间无法共享 sessionstorage。
    这里需要注意的是,页面及标签仅指顶级窗口,如果一个标签页包含多个 iframe 标签他们属于同源页面,那么他们之间是可以共享 sessionstorage 的。

     

    58.为什么要进行前后端分离?前后端分离的优缺点?


    前后端分离的优点:
    前端:专门负责前端页面和特效的编写;追求页面美观、页面流畅、页面兼容;
    后端:专门负责后端业务逻辑的处理;追求高并发、高可用、高性能,各自负责各自的领域,提高开发效率;

    前后端分离的缺点:
    1 、当接口发生改变的时候,前后端都需要改变 ;
    2、 当发生异常的时候,前后端需要联调;(联调非常浪费时间!)

     

    59.ElementUI 的计数器组件怎么使用?


    首先引入 ui 框架,然后放的 vue 里面写 <el-input-num></el-input-num>

     

    60.ElementUI 的表单组件怎么使用?它有哪些属性?


    先写 el-form 组件,里面写 el-form-item 用来放输入框,

    例如用户名和密码那些。

    属性:
    el-from 属性: ref、rules,绑定:model
    el-form-item 属性: prop 用来定义一个该输入框对应的验证规则

    直接查官网就行!

     

    61.ElementUI 的表单验证怎么实现?


    表单验证:
    一、在一开始 el-form 中绑定:model=“a”,遵守一个规则:rules=“规则名 b”,然后:ref 跟之前的 a 一样值,要遵守规则的数据名。 二、在 data 中定义 a,里面放表单的所有数据。
    三、在 data 属性中定义 rules 规则,例如:必须填写就是 required:true,最小最大就是 min 和 max。
    四、里面放 el-form-item,上面定义 prop 取一个名字等于什么,rules 中用这个 prop 里面定义的名字作为规则属性。
    五、若要自定义规则,首先在 rules 的规则中定义 validata 属性,它的值就是自定义规则的名称,然后在 data 里写 var 自定义规 则名称 =(rule,value,callback)=> 如果校验正确就返回 callback(),校验错误就返回 callback(neError(’***有误!’))

    直接查官网就行!

     

    62.ElementUI 的表格组件怎么使用?它有哪些属性?


    用一个 <el-table></el-table> 这个是最外面的上面,里面用 <el-table-row></el-table-row> 。
    属性:
    el-table 组件的 data 用来获取数据;
    每一行 el-table-row 的数据通过 prop 属性。
     

    展开全文
  • 面试官常问的 web前端 问题(二)

    千次阅读 2020-01-02 20:18:53
    面试官常问的 web前端 问题 11-20 11.什么是响应式设计?12.为什么我们要弃用 table 标签13.iframe 有哪些缺点14.meta viewport 是做什么用的,怎么写?15.json 和 xml 数据的区别16.document.write 和 innerHTML 的...

    11.什么是响应式设计?

    响应式设计:是关于网站的制作或网页制作的工作,不同的设备有不同的尺寸和不同的功能。
    响应式设计让所有的人能在这些设备上让网站运行正常。
    一部分是媒体查询和不同的视觉效果。一部分是不同的资源(如不同的 Javascript 来处理触摸与点击自动适应屏幕的对比) 。

    12.为什么我们要弃用 table 标签

    table的缺点 :只有等 table标签 里的内容全部加载完才能显示网页。

    table:服务器把代码加载到本地服务器的过程中,本来是加载一行执行一行,但是 table 标签是里面的东西全都下载完之后才会显示出来,那么如果图片很多的话就会导致网页一直加载不出来,除非所有的图片和内容都加载完。如果要等到所有的图片全部加载完之后才显示出来会影响网页的性能,所以 table 标签现在我们基本放弃使用了。

    13.iframe 有哪些缺点

    iframe的缺点:阻塞主页面 onload 事件;影响页面并行加载(浏览器限制相同域的链接);

    搜索引擎的检索程序无法解读这种页面,不利于 SEO iframe 和主页面共享连接池,而浏览器对相同域的链接有限制,所以会影响页面的并行加载。

    使用 iframe 之前需要考虑这两个缺点,如果需要使用 iframe,最好是通过 JavaScript 动态给 iframe 添加 src 属性值,这样可以绕开以上两个问题。

    iframe常用属性:

    1.frameborder:	是否显示边框,1(yes),0(no)
    2.height:		框架作为一个普通元素的高度,建议在使用css设置。
    3.width:		框架作为一个普通元素的宽度,建议使用css设置。
    4.name:			框架的名称,window.frames[name]时专用的属性。
    5.scrolling:	框架的是否滚动。yes,no,auto。
    6.src:			内框架的地址,可以使页面地址,也可以是图片的地址。
    7.srcdoc: 		用来替代原来HTML body里面的内容。但是IE不支持, 不过也没什么卵用
    8.sandbox: 		对iframe进行一些列限制,IE10+支持
    

    14.meta viewport 是做什么用的,怎么写?

    控制页面在移动端不要缩小显示。
    <metaname="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    

    这个标签内的内容表示啥意思呢?

    name			为viewport表示供移动设备使用. content定义了viewport的属性.
    width			表示移动设设备下显示的宽度为设备宽度(device-width)
    height			表示移动设设备下显示的宽度为设备宽度.
    user-scalable	表示用户缩放能力, no表示不允许.
    initial-scale	表示设备与视口的缩放比率
    maximum和minimum	分别表示缩放的最大最小值, 要注意的是, maximum必须必minimum大.
    
    这个meta标签就是告诉浏览器, 不要在移动端显示的时候缩放.
    

    在这里插入图片描述

    15.json 和 xml 数据的区别

    json:轻量级,传递速度快;占带宽小,易压缩;更方便与JavaScript交互,易解析,能更好的数据交互,项目交互中多用于数据交互;对数据的描述性比xml较差;
    xml:重量级;占带宽大;项目交互中多用于配置文件;

    1,数据体积方面:xml 是重量级的,json 是轻量级的,传递的速度更快些。
    2,数据传输方面:xml 在传输过程中比较占带宽,json 占带宽少,易于压缩。
    3,数据交互方面:json 与 javascript 的交互更加方便,更容易解析处理,更好的进行数据交互
    4,数据描述方面:json 对数据的描述性比 xml 较差
    5,xml 和 json 都用在项目交互下,xml 多用于做配置文件,json 用于数据交互。

    16.document.write 和 innerHTML 的区别

    document.write :直接写入页面的内容流,导致页面被重写。
    innerHTML :写入某个 DOM 节点,不会导致页面全部重绘;

    document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。

    innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。

    innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。

    17.jQuery 库中的 $ 是什么?

    $就是jQuery的别称,是jQuery库提供的一个函数。
    可以获取元素

    $('#submit').attr('disabled', true);
    
    可以写为:
    
    jquery('#submit').attr('disabled', true);
    

    1、可以通过 $() 里的参数进行查找和选择html文档中的元素

    如:

    	$('#tmp');//这是查找dom的id等于tmp的元素
    

    2、访问 $ 中定义的函数
    如:

    	$.ajax(options)
    

    18.$(document).ready()方法和 window.onload 的区别?

    $(document).ready() 方法:可在 DOM 载入就绪时就执行,并调用执行绑定的函数;可多次使用不同事件处理程序;
    window.onload 方法:网页中所有的元素(包括元素的所有关联文件)完全加载后才执行;一次只能保存对一个函数的应用;

    window.onload 和 $(document).ready()主要有两点区别:

    • 1、执行时机

      window.onload:在网页中所有元素(包括元素的所有关联文件)都完全加载到浏览器之后才执行。
      $(document).ready():只要在DOM完全就绪时,就可以调用了,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等。

      从二者的英文字母可以大概理解上面的话,onload即加载完成,ready即DOM准备就绪。

    • 2、注册事件

      $(document).ready():可以多次使用不同的事件处理程序,

      window.onload:一次只能保存对一个函数的引用,多次绑定函数只会覆盖前面的函数。

    两个window.onload在同一个页面上可能效果会展示不了。

    19.行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

    行内元素:a、b、span、img、input、strong、select、label、em、button、textarea
    块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote
    空元素:即系没有内容的 HTML元素,例如:br、meta、hr、link、input、img

    20.你为什么要使用 jQuery?

    jQuery的优点:轻量级框架;选择器强大;DOM操作封装丰富;事件处理机制可靠;Ajax完善;浏览器兼容;支持链式操作、隐式迭代;行为层与结构层分离;支持的插件丰富;jQuery文档丰富。

    jquery的优点:

    • 轻量级
          JQuery非常轻巧,采用Dean Edwards编写的Packer压缩后,大小不到30KB,如果使用Min版并且在服务器端启用Gzip压缩后,大小只有18KB。

    • 强大的选择器
          JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而且复杂的选择器,另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。由于JQuery支持选择器这一特性,因此有一定CSS经验的开发人员可以很容易的切入到JQuery的学习中来。

    • 出色的DOM操作的封装
          JQuery封装了大量常用的DOM操作,使开发者在编写DOM操作相关程序的时候能够得心应手。JQuery轻松地完成各种原本非常复杂的操作,让JavaScript新手也能写出出色的程序。

    • 可靠的事件处理机制
          JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华,是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面,JQuery也做得非常不错。

    • 完善的Ajax
          JQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。

    • 不污染顶级变量
          JQuery只建立一个名为JQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存,在项目中放心地引用而不需要考虑到后期的冲突。

    • 出色的浏览器兼容性
          作为一个流行的JavaScript库,浏览器的兼容性是必须具备的条件之一。JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异,使开发者不必在开展项目前建立浏览器兼容库。

    • 链式操作方式
          JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。

    • 隐式迭代
          当用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。相反,JQuery里的方法都被设计成自动操作的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅度地减少代码量。

    • 行为层与结构层的分离
          开发者可以使用选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使JQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要在HTML代码中寻找某些函数和重复修改HTML代码。

    • 丰富的插件支持
          JQuery的易扩展性,吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持,而且还不断有新插件面试。

    • 完善的文档
          JQuery的文档非常丰富,现阶段多位英文文档,中文文档相对较少。很多热爱JQuery的团队都在努力完善JQuery中文文档,例如JQuery的中文API。

    • 开源
          JQuery是一个开源的产品,任何人都可以自由地使用并提出修改意见。

    展开全文
  • 面试官常问的 web前端 问题(一)

    万次阅读 多人点赞 2020-01-02 19:58:14
    面试官常问的 web前端 问题 1-101. 标签上 alt与 title属性的区别是什么?2. DIV+CSS 布局较 table 有什么优势?3. 介绍一下标准的 CSS 的盒子模型?与低版本 IE 的盒子模型有什么不同的?4. CSS 选择符有哪些?5. ...
  • 面试官常问的 web前端 问题(五)

    千次阅读 2020-01-02 21:32:55
    面试官常问的 web前端 问题 41-5041.vue 几种常用的指令42.v-if 和 v-show 区别43.vue 常用的修饰符?44.vue-loader 是什么?使用它的用途有哪些?45.computed、watch、methods 的区别46.什么是 js 的冒泡?Vue 中...
  • 面试官常问的 web前端 问题(四)

    千次阅读 2020-01-02 21:23:02
    面试官常问的 web前端 问题 31-40 31.使用 Vue 的好处32.MVVM 定义33.Vue 的生命周期(重点)34.Vue 的响应式原理35.第一次页面加载会触发哪几个钩子?36.vue 中 data 必须是一个函数37.vue 中做数据渲染的时候如何...
  • 当声明的变量还未被初始化时,能量的默认值为undefined (2)Null用来表示尚未存在的对象,用来表示函数企图返回一个不存在的对象 (3)Undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。...
  • 面试官常问的 web前端 问题 51-62 51.Promise 对象是什么? 52.axios 的特点有哪些? 53.vue 中的 ref 是什么? 54.vue 如何兼容 ie 55.页面刷新 vuex 被清空解决办法? 56.Vue 与 Angular 以及 React 的区别? 57....
  • 避免这类问题出现的办法是,始终将页面中的元素绑定到对象的属性(data.x)而不是直接绑定到基本变量(x)上。 6.ng-repeat迭代数组的时候,如果数组中有相同值,会有什么问题,如何解决? 会提示  Duplicates ...
  • web前端人事面试常问问题

    千次阅读 2020-04-08 20:06:20
    web前端人事面试常问问题 一、你做了这么多项目,让你感受最深,印象最深的是哪个项目?你从中学到了什么?为什么会感受最深? 二、做前端开发这么多年来?说下你的感受吧! 三、简单自我介绍一下自己。 1.面试官在...
  • 面试官:谈谈你对this的理解求职者:this表示当前对象,this的指向是根据调用的上下文来决定的,默认指向window对象,指向window对象时可以省略不写。例如: this.alert() <=> window.alert()<=> ...
  • 1.HTML和网络基础 http于https以及他们的区别(必)。 https://blog.csdn.net/qq_38289815/article/details/80969419 HTTP与TCP三次握手四次分手,状态码,cookie和webstorage ...输入Ur...
  • 因为每次读取都会扫描一遍页面上的选择器相关元素,速度大大降低 (3)forEach 无法遍历对象,IE不支持 4、vue和原生js开发的区别 JS是运行在浏览器端的脚本语言,JS主要解决的是前端与用户交互的问题,JS是浏览器...
  • 浅谈vue前端面试中的常见问题

    千次阅读 2020-03-23 09:53:01
    -- Array (需要使用 v-bind,被包含的都会被缓存) --> ['a', 'b']"> <component></component> </keep-alive> 十二、一句话就能回答的面试题 css只在当前组件起作用 答:在style标签中写入scoped即可 例如: v-if 和...
  • 像 css这一部分,面试,但是它的东西很杂很多,我不知道有多少人和我感觉一样:学习前端最难的是css,而不是js。 css这一部分,布局、实现一个什么样的形状、一些属性的使用等的会多一些~ javascript部分 ...
  • 前端面试官经验总结 | 前端面试小技巧

    千次阅读 多人点赞 2018-11-17 15:51:21
    历时2个多月,前后也面试了上百余人,个人能力并没有多强大,但出于公司需要也就厚着脸皮去面各种前端大佬(啊哈哈终于轮到劳资当家做主了!)。好景不长,从第一份电话面试的小紧张,到线下面试的小期待,再到后来...
  • 最全软件开发面试、笔试考题目及分析解答,基于java,C++等语言
  • 面试官常问的 web后台 问题(一)

    千次阅读 多人点赞 2020-01-02 15:26:37
    面试官常问的 web后台 问题 1-101、HTTP 请求的 GET 与 POST 方式的区别2、解释一下什么是 servlet3、说一说 Servlet 的生命周期?4、Servlet 的基本架构5、什么情况下调用 doGet()和 doPost()?6、Request 对象的...
  • 虽然说在前端很少有机会接触到算法,大多都交互性的操作,然而从各大公司面试来看,算法依旧是考察的一...下面这篇文章就给大家总结了在前端JS面试中常见的算法问题,有需要的朋友们可以参考借鉴,下面来一起看看吧。
  • var存在因变量提升而导致的泄漏、覆盖等一些列问题,而let拥有自己的块级作用域而且修复了声明带来的变量提升问题 19.说明原生ajax的实现步骤? //1.创建ajax对象 try{ var ajax = new XMLHttpRequest(); //IE8...
  • 2021前端面试经常被到的题(附答案)

    万次阅读 多人点赞 2020-12-11 15:58:32
    1.50道 CSS 基础面试题(附答案) 50道 CSS 基础面试题(附答案) 2.如何居中div? CSS水平居中+垂直居中+水平/垂直居中的方法总结 3. CSS3新特性 深入了解 CSS3 新特性 4.清除浮动 清除浮动的四种方式及其原理理解 ...
  • (基本必) 21、JS和Json数据交互 21.1 Json 数据转字符串 21.2 Json字符串转Json对象 22、浏览器渲染页面的流程 23、重绘和重排 24、Tcp三次握手 1、css盒子模型 1.1 标准盒子模型 元素的宽度等于 style 中的...
  • 本文会列举一些平时面试时到的问题和答案,并说明面试官在当时到这个问题时所期望对方的回答: vue生命周期(钩子函数)问题 请说一下vue的生命周期函数(钩子函数)。问题描述 首先关于生命周期函数,...
  • 2.平时是如何学习前端开发的 3.未来三到五年的规划是怎样的 4.说一下web产品开发的流程 HTML合集 问题:说一说你对Doctype的理解 问题:HTML新特性 问题:说一下webworker(html5新特性) 问题:HTML5 Canvas...
  • 前端页面有哪三层构成,分别是什么?作用是什么? ① 网页的结构层(structural layer)由 HTML 或 XHTML 之类的标记语言负责创建。标签,也就是那些出现在尖括号里的单词,对网页内容的语义含义做出...
  • 面试完之后,赶紧总结了一波,前端这个岗位,这两家大厂的面试思路和面试问题其实都差不多: 1. JS底层: 说一说js的原型与继承。 分析一下优秀的前端框架源码,这么写的优缺点在哪。 this指向问题,this...
  • 前端面试大全(Ajax篇)
  • 作为国内应用最广的两个框架,Vue 和 React 是前端必须掌握的内容,也是面试的重点。但大多数读者都只擅长其中一个框架,当面试涉及到另一个框架的内容时,就答不好了。比如虚拟dom,两个...
  • 前端面试常考代码题

    2021-06-23 18:43:39
    然后splice去重(ES5中最常用)indexOfsort()利用对象的属性不能相同的特点进行去重(这种数组去重的方法有问题,不建议用)includeshasOwnPropertyfilter递归去重Mapreduce+includes[...new Set(arr)]数组扁平化new...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,694
精华内容 2,277
关键字:

前端面试官常问的问题