前端面试--1--以萨技术

1.JQ事件委托

jq事件委托是指将事件处理程序绑定到文档上的一个元素，然后利用事件冒泡机制使其能够处理其子元素上的事件。这种技术可以提高性能并简化代码，特别是在处理动态生成的元素时非常有用。

使用jQuery实现事件委托可以通过以下代码实现：

$(document).on('click', '.my-class', function() {
  // 处理事件的代码
});

这里，我们将事件处理程序绑定到document对象上，并使用第二个参数指定我们希望处理的元素选择器。因此，当单击文档上任何具有’my-class’类的元素时，事件处理程序将被触发。

这种方法的优点是，它不会将事件处理程序直接绑定到元素上，而是将其绑定到整个文档上。这意味着，即使在事件绑定之后，新元素被添加到文档中，它们也可以受到事件的处理。此外，由于事件处理程序只需要绑定到一个元素上，因此性能也会得到提高。

2.window.onload用jq的等同形式

在jQuery中，可以使用$(document).ready()方法来实现window.onload的等效操作。这个方法会在DOM完全加载完成后执行指定的函数。以下是使用jQuery实现的window.onload的等效代码：

$(document).ready(function() {
  // 在这里编写需要在DOM加载完成后执行的代码
});

或者使用更简单的语法形式：

$(function() {
  // 在这里编写需要在DOM加载完成后执行的代码
});

这个方法会在页面加载完成时执行指定的函数。与window.onload不同的是，它不需要等待所有资源（例如图片和样式表）都加载完成才执行。这也是它被广泛使用的原因之一，因为它可以更快地让页面准备就绪。

3.小程序的像素单位

小程序的像素单位是 “rpx”，即 “responsive pixels” 的缩写，它是微信小程序框架中用来实现屏幕自适应布局的一种单位。

与传统的像素单位不同，rpx 能够根据设备的屏幕宽度自适应地缩放。在不同的设备上，1rpx 会自动对应不同的物理像素数量。例如，在 iPhone 6 上，屏幕宽度为375px，如果将一个元素的宽度设置为 375rpx，它将占据屏幕宽度的100%。在 iPhone X 上，屏幕宽度为375px，但屏幕像素密度更高，1rpx 实际上对应了更多的物理像素。

使用 rpx 单位可以使小程序在不同的设备上具有更好的屏幕适配性，从而提高用户体验。

4.小程序开发过程中遇到的问题

发布后跳转不了网页
音频传输

5.小程序获取用户身份id

微信小程序可以通过调用 wx.login() 接口获取用户登录凭证 code，然后将 code 发送给开发者服务器，开发者服务器可以使用 code 和 AppSecret 调用微信服务器的接口换取用户的 openid。
以下是示例代码：

// 在小程序中调用 wx.login() 获取用户登录凭证 code
wx.login({
  success: function(res) {
    if (res.code) {
      // 发送 code 到开发者服务器
      wx.request({
        url: 'https://yourserver.com/getOpenid',
        data: {
          code: res.code
        },
        success: function(res) {
          var openid = res.data.openid; // 用户的 openid
          console.log(openid);
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

在开发者服务器中，可以使用 code 调用微信服务器的接口换取用户的 openid。以下是示例代码：

// Node.js 示例代码
const request = require('request');
const querystring = require('querystring');

const APPID = 'your_appid'; // 小程序的 APPID
const SECRET = 'your_secret'; // 小程序的 AppSecret

// 获取 openid
function getOpenid(code) {
  return new Promise(function(resolve, reject) {
    const params = querystring.stringify({
      appid: APPID,
      secret: SECRET,
      js_code: code,
      grant_type: 'authorization_code'
    });
    const url = `https://api.weixin.qq.com/sns/jscode2session?${params}`;
    request(url, function(error, response, body) {
      if (!error && response.statusCode == 200) {
        const data = JSON.parse(body);
        resolve(data);
      } else {
        reject(error);
      }
    });
  });
}

// 接收小程序的请求，获取用户的 openid
app.get('/getOpenid', function(req, res) {
  const code = req.query.code;
  getOpenid(code)
    .then(function(data) {
      const openid = data.openid;
      res.json({ openid: openid });
    })
    .catch(function(error) {
      console.log(error);
      res.status(500).send('获取 openid 失败');
    });
});

6.vue的生命周期

Vue.js 中的生命周期钩子是一组在组件实例化、渲染和销毁时自动执行的函数。这些钩子函数可以用来进行各种任务，比如初始化数据、监视变化、操作DOM等等。在 Vue.js 中，组件的生命周期分为四个阶段：创建、挂载、更新和销毁。下面是每个阶段中的生命周期钩子函数：

1. 创建阶段（Initialization）
   beforeCreate: 在实例被创建之前执行，此时组件实例的数据观测和事件系统都尚未初始化。
   created: 在实例被创建之后执行，此时组件实例已经完成了数据观测和初始化，但还没有开始挂载到DOM上。
2. 挂载阶段（Mounting）
   beforeMount: 在挂载开始之前执行，此时组件的模板编译已经完成，但尚未将组件挂载到页面中。
   mounted: 在挂载完成之后执行，此时组件已经被挂载到页面中，可以访问到DOM元素。
3. 更新阶段（Updating）
   beforeUpdate: 在数据更新之前执行，此时数据还没有更新，但是DOM已经重新渲染，因此可以在这里进行一些操作。
   updated: 在数据更新之后执行，此时组件已经更新完毕，DOM也已经重新渲染，可以在这里进行一些操作。
4. 销毁阶段（Destroying）
   beforeDestroy: 在实例销毁之前执行，此时组件实例仍然完全可用。
   destroyed: 在实例销毁之后执行，此时组件实例已经被完全清除，所有的事件监听器和观察者都已被解绑，不能再访问任何数据和方法。

除了上述的生命周期钩子函数，Vue.js 还提供了一些其他的钩子函数，例如 activated、deactivated、errorCaptured 等等，可以用来处理一些特殊情况。

7.v-if与v-show

1. 在Vue中，v-if是一个指令，用于根据条件显示或隐藏元素。当表达式为真时，元素被渲染，否则元素不被渲染。

例如，假设我们有以下代码片段：

<div v-if="showMessage">
  {{ message }}
</div>

在这个例子中，只有当showMessage为真时，才会渲染包含message的div元素。如果showMessage为假，则div元素不会被渲染。

v-if指令可以与v-else和v-else-if指令一起使用，用于根据不同的条件渲染不同的元素。例如：

<div v-if="status === 'success'">
  Success message
</div>
<div v-else-if="status === 'error'">
  Error message
</div>
<div v-else>
  Default message
</div>

在这个例子中，根据status的值，渲染不同的元素。如果status等于’success’，则渲染第一个div，否则如果status等于’error’，则渲染第二个div，否则渲染第三个div。

2. 在Vue中，v-show是一个指令，用于根据条件显示或隐藏元素。与v-if不同的是，v-show不是在DOM中添加或删除元素，而是使用CSS样式（display）控制元素的显示或隐藏。

当表达式为真时，元素显示，否则元素隐藏。例如：

<div v-show="showMessage">
  {{ message }}
</div>

在这个例子中，只有当showMessage为真时，div元素会显示，否则div元素会隐藏，但是该元素一直存在于DOM中。

与v-if不同，v-show不会在切换时重新渲染元素，并且在初始渲染时不会有性能开销。但是，它可能会导致更多的DOM操作，因为元素一直存在于DOM中，所以对于频繁切换的元素，最好使用v-if。

需要注意的是，由于v-show只是简单地切换CSS样式，因此它无法在根元素上使用。

8.vue中的数据绑定

在Vue中，数据绑定是指将Vue实例中的数据与DOM元素中的内容或属性进行绑定，从而实现数据的自动更新。Vue中数据绑定主要包括以下几种方式：

1. 插值表达式：使用双大括号语法（{{}}）将Vue实例中的数据绑定到DOM元素中。例如：

<div>{{ message }}</div>

在上面的例子中，message是Vue实例中的一个属性，它将被绑定到div元素中。

2. v-bind指令：用于将Vue实例中的数据绑定到DOM元素的属性中。例如：

<img v-bind:src="imageUrl">

在上面的例子中，imageUrl是Vue实例中的一个属性，它将被绑定到img元素的src属性中。

3. v-model指令：用于实现表单元素与Vue实例中数据的双向绑定。例如：

<input v-model="message">

在上面的例子中，当用户输入文本时，message属性将被自动更新；当message属性更新时，文本框中的内容也会自动更新。

4. 计算属性：用于根据Vue实例中的数据计算出一个新的属性值，从而实现数据的转换。例如：

computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

在上面的例子中，reversedMessage是一个计算属性，它根据message属性计算出一个新的属性值，即message属性的反转字符串。

以上是Vue中数据绑定的几种方式，它们可以组合使用，从而实现复杂的数据绑定逻辑。

9.Vue中组件之间的数据传递

1. 父组件-》子组件 props
2. 子组件-》父组件 子组件用$emit()派发事件 父组件v-on监听事件 用函数的参数传递数据
3. $bus全局事件总线
4. pubsub消息发布与订阅
5. Vuex状态管理仓库