interview:developer:vue_developer:start [Questwork's Wiki]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Vue Developer Interview ======

==== 时限 ====
  * 2小时


==== 提交方法 ====

     * 第一题：请将答案写在 .txt 文件内。
     * 第二题：请将相关的 .js 和 .vue 文件放在一个文件夹内，不要包含脚手架文件（如 node_modules）和第三方插件。
     * 提交要求：所有题目答案统一放在一个文件夹内，并用 ZIP 格式压缩（不可用 RAR 或其他格式）。



=====  第一题 =====

阅读代码并回答以下问题：

  -  button.update({ active: true, disabled: false })的结果是什么？为什么？

<code>


class Button {
  constructor(opt = {}) {
    opt = opt || {}
    this.status = {
      active: typeof opt.active === 'boolean' ? opt.active : true,
      disabled: typeof opt.disabled === 'boolean' ? opt.disabled : true
    }
    this.rules = opt.rules || []
  }

  static init(layout) {
    const instance = new this(layout)
    return instance.isValid ? instance : null
  }

  get isValid() {
    return !!this
  }

  getValidation({ data }) {
    Object.keys(this.status).forEach((k) => {
      const rule = this.rules.find((r) => r.key === k)?.value
      this.status[k] = getValidation({ rule, data }) ? data[k] : this.status[k]
    })
    return this
  }

  update(data = {}) {
    try {
      this.getValidation({ data })
      return this
    } catch (err) {
      throw err
    }
  }

}

function getValidation({ rule, data }) {
  if (!rule) {
    return false
  }
  const { key = '', value } = rule
  const [valueAttribute] = Object.keys(value || {})
  const rowValue = data[key]

  switch (valueAttribute) {
    case '$and': {
      const arr = value['$and']
      return arr.reduce((acc, item) => (acc && getValidation({ rule: item, data })), true)
    }
    case '$or': {
      const arr = value['$or']
      return arr.reduce((acc, item) => (acc || getValidation({ rule: item, data })), false)
    }
    case '$empty': {
      return !rowValue === !!value['$empty']
    }
    case '$eq': {
      return rowValue === value['$eq']
    }
    
    default:
      return false
  }
}


const button = Button.init({
  active: false,
  disabled: true,
  rules: [
    {
      key: 'active',
      value: {
        key: '',
        value: {
          $and: [
            {
              key: 'errors',
              value: {
                $empty: true
              }
            },
            {
              key: 'disabled',
              value: {
                $eq: false
              }
            }
          ]
        }
      }
    }
  ]
})

/**
* 1. button.update({ active: true, disabled: false })会输出？为什么？
*/
 
</code>




===== 第二题 =====







请用<wrap hi>Vue.js 2.0</wrap>或<wrap hi>Vue.js 3.0</wrap>以 "SFC 单文件组件" 编码方式完成以下购物车题目。除了<wrap hi>Vue.js 2.0</wrap>, <wrap hi>Vue.js 3.0</wrap>, bootstrap 外，请尽量少用第三方库。不可使用Element UI, Mint UI等第三方库。<wrap hi>**请勿使DeepSeek等工具**</wrap>。


==== 目标 ====


  * 提供前端端购物车功能


==== 购物车外观 ====

以下只是参考。

{{:interview:developer:vue_developer:screenshot_2019-09-08_at_6.15.55_pm.png?800|}}

==== 购物车功能 ====

**以下功能必须实现**

  * 自动计算总金额
  * 能删除已选择产品
  * 能更改数量
  * 能按產品名稱排序



==== 数据结构 Data Structure ====

购物车数据为本地数据，不必从网上撷取。

<code>
[
{ id: 1, name: "Chicken Wing", category: "Food", qty: 3, price: 10 },
{ id: 2, name: "Pizza", category: "Food", qty: 1, price: 50 },
{ id: 3, name: "Hamburger", category: "Food", qty: 1, price: 12 },
{ id: 4, name: "Coca Cola", category: "Drink", qty: 2, price: 5 },
{ id: 5, name: "Orange Juice", category: "Drink", qty: 1, price: 15 },
{ id: 6, name: "Potato Chips", category: "Snack", qty: 1, price: 8 },
]
</code>

==== 评分准则 ====

  * SFC组件设计
  * 编码整洁
  * 外覌

==== 加分项 ====

  * 组件化，模块化代码。（e.g List.vue, Button.vue)
  * 使用Vue的API计算商品总价、ES6的新规范新API处理数组等