一、事件冒泡和事件捕获

  • 事件冒泡：当一个元素上的事件被触发时，该事件会沿着 DOM 树向上传播，从触发事件的最内层元素开始，依次触发其祖先元素上的相同事件。例如，在一个包含多个嵌套 <div> 的页面中，如果点击最内层的 <div>，那么这个点击事件会先在该 <div> 上触发，然后依次在其父元素、祖父元素等上触发，直到到达文档根节点。
  • 事件捕获：与事件冒泡相反，事件捕获是从文档根节点开始，沿着 DOM 树向下传播，直到到达目标元素。在事件捕获阶段，事件会先在最外层的祖先元素上触发，然后逐渐向内层元素传播。
  • 应用场景与示例：在实际开发中，可以利用事件冒泡和捕获来实现一些复杂的交互逻辑。例如，在一个列表中，点击每个列表项时，既需要在列表项本身触发一个点击事件，又需要在列表容器上统计点击次数。可以通过在列表容器上添加一个捕获阶段的点击事件监听器来统计点击次数，而在列表项上添加冒泡阶段的点击事件监听器来处理列表项的具体点击操作。

二、项目中用flex实现一个左固定，右自适应的布局

  • 使用 flexbox 布局：

    • 父容器设置 display: flex。
    • 左固定部分设置固定宽度，例如 width: 200px。
    • 右自适应部分设置 flex: 1，表示自动填充剩余空间。

三、flex:1 是什么效果

  • flex: 1 是 flex-grow: 1、flex-shrink: 1 和 flex-basis: 0% 的缩写。
  • flex-grow: 1：表示当父容器有剩余空间时，该元素会按照比例分配剩余空间并增长。如果有多个子元素都设置了 flex-grow，则它们会按照各自的 flex-grow 值比例分配剩余空间。例如，一个父容器内有两个子元素，一个设置 flex: 1，另一个设置 flex: 2，那么剩余空间会按照 1:2 的比例分配给这两个子元素。
  • flex-shrink: 1：当父容器空间不足时，该元素会按照比例缩小。如果所有子元素的 flex-shrink 都为 1，它们会平均缩小；如果值不同，则按照比例缩小。
  • flex-basis: 0%：指定了元素在分配剩余空间或收缩之前的初始大小。设置为 0% 表示元素在分配空间之前不占据任何空间，完全依赖于 flex-grow 来分配空间。

四、js 中的原型链

  • 原型链概念：在 JavaScript 中，每个对象都有一个原型（prototype），而原型本身也是一个对象，它又有自己的原型，这样就形成了一个原型链。当访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，JavaScript 引擎会沿着原型链向上查找，直到找到该属性或方法或者到达原型链的顶端（Object.prototype 的原型为 null）。
  • 示例：
function Person() {
  this.name = 'John';
}

Person.prototype.sayHello = function() {
  console.log('Hello, I am'+ this.name);
};

const person = new Person();
person.sayHello(); // 调用原型上的方法，输出 "Hello, I am John"

// 查看原型链
console.log(person.__proto__ === Person.prototype); // true
console.log(Person.prototype.__proto__ === Object.prototype); // true
console.log(Object.prototype.__proto__); // null

五、同源策略

  • 同源策略定义：同源策略是浏览器的一种安全机制，它限制了一个源（协议、域名、端口）的脚本只能与同来源的资源进行交互。例如，一个页面从 http://example.com 加载，那么该页面中的 JavaScript 脚本只能向 http://example.com 发送请求，不能向其他域名或不同协议、端口的资源发送请求，除非有特殊的跨域设置。
  • 目的：主要目的是防止恶意网站通过脚本获取其他网站的敏感信息，保障用户数据的安全和网站的隐私。例如，防止一个恶意网站读取用户在银行网站的账户信息等。
  • 跨域解决方案：虽然同源策略限制了跨域访问，但在实际开发中，有多种方式可以实现跨域，如 JSONP（利用 <script> 标签不受同源策略限制的特性）、CORS（服务器端设置允许跨域的响应头）、代理服务器（在同源的服务器端代理请求其他域的资源）等。

六、Nodejs 代理服务器

  • 作用：Node.js 代理服务器可以在客户端和目标服务器之间起到中转的作用。它可以用于解决跨域问题，通过在同源的 Node.js 服务器上代理客户端的请求到不同源的目标服务器，然后将目标服务器的响应返回给客户端，从而绕过浏览器的同源策略限制。此外，还可以用于请求过滤、缓存、日志记录等功能。

七、echarts 传值方式、及多个echarts更新单个

  • 数据更新：可以直接通过修改 echarts 实例的 option 对象中的数据来更新图表。例如，如果有一个柱状图，要更新柱子的高度数据，可以这样操作：
  • 事件传值：echarts 提供了丰富的事件，如 click、legendselectchanged 等。在事件回调函数中，可以获取到相关的数据信息并进行传值操作。
  • 单独更新：在子组件中使用watch监听进行数值更新操作。

八、微信小程序提高响应速度

  • 优化代码结构：合理划分页面和组件，避免代码过于臃肿。将公共的逻辑提取到独立的模块或组件中，减少页面加载时的代码量。
  • 数据请求优化：减少不必要的数据请求，对数据进行缓存。例如，可以使用 wx.getStorage 和 wx.setStorage 对经常使用的数据进行本地缓存，减少重复请求服务器的次数。同时，优化数据请求的时机，避免在页面加载时同时发起过多请求，可以采用延迟加载或合并请求的方式。
  • 图片和资源优化：对图片进行压缩处理，选择合适的图片格式（如 webp 格式在某些情况下比 jpg、png 更具优势）。对于一些较大的资源文件，可以考虑使用分包加载，将不常用的资源放在分包中，在需要时再加载。
  • 使用骨架屏或加载提示：在页面数据加载过程中，显示骨架屏或加载提示，让用户有等待的预期，避免页面长时间空白或无响应给用户带来的不良体验。

九、前端身份验证

  • 基于 Token 的身份验证：

    • 流程：用户登录成功后，服务器生成一个包含用户身份信息的 Token（通常是一个加密的字符串）并返回给前端。前端将 Token 存储起来，通常存储在 localStorage 或 sessionStorage 中。在后续的请求中，前端将 Token 添加到请求头（如 Authorization 字段）中发送给服务器。服务器收到请求后，验证 Token 的有效性，如果有效则允许访问相应资源，否则返回错误信息。

  • 基于 Cookie 的身份验证：

    • 流程：用户登录成功后，服务器在响应中设置一个包含用户身份信息的 Cookie。浏览器会自动在后续的同源请求中携带该 Cookie。服务器根据 Cookie 中的信息进行身份验证。不过，由于 Cookie 存在一些安全风险（如跨站请求伪造 CSRF），需要采取相应的防范措施，如设置 SameSite 属性等。

标签: none

添加新评论