Differences

This shows you the differences between two versions of the page.

--- interview:developer:vue_developer:start [2023/03/28 20:41] – don.lee
+++ interview:developer:vue_developer:start [2025/05/22 10:39] (current) – [第二题] yan.feng
@@ Line 1: / Line 1: @@
 ====== Vue Developer Interview ======
-请用<wrap hi>Vue.js 2.0</wrap>或<wrap hi>Vue.js .0</wrap>以 "SFC 单文件组件" 编码方式完成以下购物车题目。除了<wrap hi>Vue.js 2.0</wrap>, bootstrap 外，请尽量少用第三方库。不可使用Element UI, Mint UI等第三方库。
+==== 时限 ====
+  * 2小时
-^ 时限 | 1小时 |
-^ 提交方法 | 只需要把相关的.js和.vue文件用ZIP（不可用RAR或其他格式）压缩后电邮代码至 joe.mao@gz.questwork.com 和 don.lee@questwork.com。不要把脚手架文件如node_modules和第三方插件压缩在内。 |
-<note warning>电邮內必须寫下你的名字和微信号，另外再附上你的pdf簡历，否则不予处理。</note>
+==== 提交方法 ====
+     * 第一题：请将答案写在 .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>。
+==== 目标 ====
-===== 目标 =====
   * 提供前端端购物车功能
-===== 购物车外观 =====
+==== 购物车外观 ====
 以下只是参考。
@@ Line 20: / Line 151: @@
 {{:interview:developer:vue_developer:screenshot_2019-09-08_at_6.15.55_pm.png?800|}}
-===== 购物车功能 =====
+==== 购物车功能 ====
-  * 自动计算总金额（必须）
+**以下功能必须实现**
+  * 自动计算总金额
   * 能删除已选择产品
   * 能更改数量
@@ Line 28: / Line 161: @@
-===== 数据结构 Data Structure =====
+==== 数据结构 Data Structure ====
 购物车数据为本地数据，不必从网上撷取。
@@ Line 43: / Line 177: @@
 </code>
-===== 评分准则 =====
+==== 评分准则 ====
   * SFC组件设计
@@ Line 49: / Line 183: @@
   * 外覌
-===== 加分项 =====
+==== 加分项 ====
   * 组件化，模块化代码。（e.g List.vue, Button.vue)
   * 使用Vue的API计算商品总价、ES6的新规范新API处理数组等