深圳某做海外加速器公司

1. DIV+CSS布局的好处

  • 代码精简，且结构与样式分离，易于维护
  • 代码量减少了，减少了大量的带宽，页面加载的也更快，提升了用户的体验
  • 对SEO搜索引擎更加友好，且H5又新增了许多语义化标签更是如此
  • 允许更多炫酷的页面效果，丰富了页面
  • 符合W3C标准，保证网站不会因为网络应用的升级而被淘汰

缺点:

不同浏览器对web标准默认值不同，所以更容易出现对浏览器的兼容性问题。

2. 如何解决a标点击后hover事件失效的问题?

  • 改变a标签css属性的排列顺序
  • 只需要记住LoVe HAte原则就可以了：
    link→visited→hover→active

比如下面错误的代码顺序：

    a:hover{
      color: green;
      text-decoration: none;
    }
    a:visited{ /* visited在hover后面，这样的话hover事件就失效了 */
      color: red;
      text-decoration: none;
    }

正确的做法是将两个事件的位置调整一下。

注意⚠️各个阶段的含义：

a:link：未访问时的样式，一般省略成a a:visited：已经访问后的样式 a:hover：鼠标移上去时的样式 a:active：鼠标按下时的样式

3. 点击一个input依次触发的事件

    const text = document.getElementById('text');
    text.onclick = function (e) {
      console.log('onclick')
    }
    text.onfocus = function (e) {
      console.log('onfocus')
    }
    text.onmousedown = function (e) {
      console.log('onmousedown')
    }
    text.onmouseenter = function (e) {
      console.log('onmouseenter')
    }

答案：

    'onmouseenter'
    'onmousedown'
    'onfocus'
    'onclick'

4. 响应式的好处

对某些数据的修改就能自动更新视图，让开发者不用再去操作DOM，有更多的时间去思考业务逻辑。

5. Vue的优点及缺点

  • 首先Vue最核心的两个特点，响应式和组件化。
  • 响应式：这也就是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，通过虚拟DOM让我们可以用数据来操作DOM，而不必去操作真实的DOM，提升了性能。且让开发者有更多的时间去思考业务逻辑。
  • 组件化：把一个单页应用中的各个模块拆分到一个个组件当中，或者把一些公共的部分抽离出来做成一个可复用的组件。所以组件化带来的好处就是，提高了开发效率，方便重复使用，使项目的可维护性更强。
  • 虚拟DOM，当然，这个不是vue中独有的。
  • 缺点：基于对象配置文件的写法，也就是options写法，开发时不利于对一个属性的查找。另外一些缺点，在小项目中感觉不太出什么，vuex的魔法字符串，对ts的支持。兼容性上存在一些问题

6. Vue中hash模式和history模式的区别

  • 最明显的是在显示上，hash模式的URL中会夹杂着#号，而history没有。
  • Vue底层对它们的实现方式不同。hash模式是依靠onhashchange事件(监听location.hash的改变)，而history模式是主要是依靠的HTML5 history中新增的两个方法，pushState()可以改变url地址且不会发送请求，replaceState()可以读取历史记录栈,还可以对浏览器记录进行修改。
  • 当真正需要通过URL向后端发送HTTP请求的时候，比如常见的用户手动输入URL后回车，或者是刷新(重启)浏览器，这时候history模式需要后端的支持。因为history模式下，前端的URL必须和实际向后端发送请求的URL一致，例如有一个URL是带有- 路径path的(例如www.lindaidai.wang/blogs/id)，如果后端没有对这个路径做处理的话，就会返回404错误。所以需要后端增加一个覆盖所有情况的候选资源，一般会配合前端给出的一个404页面

hash:

    window.onhashchange = function(event){
      // location.hash获取到的是包括#号的，如"#heading-3"
      // 所以可以截取一下
      let hash = location.hash.slice(1);
    }
  1. react的实现原理？有什么优缺点？
  2. react的控制组件和非控制组件
Last Updated:
Contributors: leeguooooo