面试的基本原则

面试从本质上来说，是劳资双方相互选择的一个过程，双方是处于一个平等的关系。你不能因为自己是求职者，就把自己置于一种有求于人，弱势的地位。

自我介绍

我叫沈君鸿,目前在魅族科技深圳分公司就任前端工程师岗位,主要负责的项目是游戏管理后台(这个项目:技术栈是在原有采用 原生 js 和 jquery 的基础上,采用了微前端架构 qiankun,接入了 React 和 vue )和活动模板(Vue + Electron)还有游戏会员俱乐部，公司主要的技术栈是 vue 为主， 部分项目中使用 react, 拥有自己的博客和掘金账号,同时也积极关注行业动态.喜欢看一些业界的最佳实践, 并看能否着手在自己工作上使用,积极推动部门效率方面的提升.

游戏管理后台

首先项目最开始是老项目，jquery 和原生的方式 前后端不分离，接着的是采用老技术的方式，内嵌了 vue 这个项目。

这个管理后台有的业务有： 公会渠道 喵币管理 游戏数据 会员俱乐部 sdk 福利活动 资源投放 游戏投放

为什么采用微前端呢，首先就是项目，打包出来的 main.bundle 太大了， 项目上面最直观的反馈就是，首屏渲染白屏的时间太长了， 接着就是部署发版本的时间太长了， 交由服务端在 jenkins 平台上面打包的时间太久了， 然后我们引入微前端之后， 就是在各个子系统拆分开， 进行单独的打包上线。

我们是从样式上面的话 是采用 bem 方式， 在每个项目前面 添加单独的后缀 以区分开来。

js 方面 如果是 公共组件的话，我们以 npm 包形式构建， 然后在配合 cdn 的形式。在主基站 拥有 component 文件夹， 然后在开发过程中 子应用 只要分别启动相关的项目即可。在以 npm link 软连的方式， 导入主基站的 component 文件夹。

因为我们后面接入的各子应用的从业务方面没有互相嵌套的， 所以没有历史包袱， 我们只要解决主基站跟子应用的通信即可， 通信这块运用到了 qiankun 官方提供的 initProps，initState。进行状态的管理。

前端 在开发阶段 会自己根据环境 process.env == 'development'， webpack.config.js 配置， isMock 启动 我们的 mock 数据， 以代理的方式 /api 的方式进行 进行我们的数据 mock。

游戏活动模板

这个项目主要是让运营自己配置， 以拖拽组件的方式生成 .vue 文件。整体的开发流程就是 分为 组件、中间是组件排列栏，右边是展示的视图，在新建的时候先生成空的 template 模板， 然后我们通过运用到 h5 的 drag 属性， 将组件拖拽到组件排列行，动态插入组件。

动态加载组件

  <div id="app">
    <button @click="add('a-component', 'test')">Add A</button>
    <button @click="add('b-component', 'test')">Add B</button>
    <ul>
      <li :is="item.component" :text="item.text" v-for="item in items"></li>
    </ul>
  </div>


var AComponent = Vue.extend({
  props: ['text'],
  template: '<li>A Component: {{ text }}</li>'
})

var BComponent = Vue.extend({
  props: ['text'],
  template: '<li>B Component: {{ text }}</li>'
})


new Vue({
  el: '#app',
  components: {
    'a-component': AComponent,
    'b-component': BComponent,
  },
  data: {
    items: []
  },
  methods: {
    add(component, text) {
      this.items.push({
        'component': component,
        'text': text,
      })
    }
  }
})

动态加载全局弹窗

import Vue from "vue";
// 弹窗组件单文件
import Message from "./message.vue";

const createMessage = (options) => {
  // 获取body并且创建一个新的div节点
  let body = document.body,
    bindPhone = document.createElement("div");

  // 给创建的div设置id=message，并且添加到body后
  bindPhone.setAttribute("id", "message");
  body.appendChild(bindPhone);

  // 这里我们return一个新的Vue实例并且将实例挂载到我们刚创建的DOM节点上
  return new Vue({
    render: (h) => {
      return h(Message, {
        props: {
          text: options.props.text,
        },
      });
    },
  }).$mount("#message");
};

export default createMessage;

生成我们想要的页面之后，我们点击发布 进行打包， 生成 main.bundle.js ，上传到线上。scp 的方式 将文件上传上去服务器。 在到游戏管理后台中， 在交由运营去配置相关的活动地址，进行绑定映射。

const request = require("request");

request(
  {
    url: `https://my.oschina.net/action/user/save_portrait_new`,
    method: "POST",
    formData: {
      img: imgData,
      user_code: userCode,
    },
    headers: {
      cookie: cookieStr,
    },
  },
  function (err, response, body) {
    console.log(err, response, body);

    const { error } = JSON.parse(body);
    if (!error) {
      window.location.reload();
    }
  }
);
var formData = new FormData();

formData.append("username", "Groucho");
formData.append("accountnum", 123456); // number 123456 is immediately converted to a string "123456"

// HTML file input, chosen by user
formData.append("userfile", fileInputElement.files[0]);

// JavaScript file-like object
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});

formData.append("webmasterfile", blob);

var request = new XMLHttpRequest();
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);

我曾经处理过一个 XML 文件解析的需求.当时搜了各种 Node 库,都没太好使的,后来我是直接在 render process 中,直接用 html 的 dom 接口去读取和解析的 xml 文件! -- 当时,被自己的机智惊呆了! 讲真, 使用 Electron 来开发桌面 App,你真正需要考虑的不是如何实现某个需求,而是如何以一种更优雅的方式来实现需求! 没有做不到,只有不敢想啊!!!

为什么使用 electron 呢 我也问过老员工 得到的消息 大概是这样， 桌面应用的启动运行可以处理网络环境比较差的情况， 桌面应用启动速度包括稳定性会比 web 端来的好。

游戏会员俱乐部

这个项目也是接手的项目， 这个项目是采用 ssr 的方式， 作为 flyme 系统的外发渠道游戏入口与 app 游戏中心追求用户体验一致，所以采用了 ssr 直出的方式。 讲一下 ssr 的原理， 包括用到图片懒加载技术 有个服务端渲染页面配置 需要精准匹配 // 控制是否开启用户校验服务端渲染，开启 用户登录走前端渲染，未登录走服务端渲染

PM2 配置

PM2

对未来有什么规划吗

未来的 3-5 年, 希望能带团队. 未来 2-3 年，在公司的平台上面继续深入学习，提升自己的专业技能，持续成长。同时也能不断地接受新的挑战。在做好现在这个工作的基础上，我当然希望未来有能机会进一步承担更多的管理任务，并且可以参与公司的策略.

你为什么从上家公司离职

从这家公司离职主要有两方面的原因， 一方面公司深圳这边准备搬回珠海了，而我觉得待在深圳更有发展的空间。另一方面，公司层面来说的话，就是因为公司还是一家传统的硬件手机厂商，想去纯互联网的。我个人的还是想去互联网类型的公司。

你做过的项目内容对你来说有难度

项目排期

  • 制定项目计划

  • 跟进项目进度

  • 把控项目质量

  1. 对需求进行尽量细的功能点拆分, 有助于准确评估排期(精确到 2 天)

  2. 根据实际项目情况,预留适当的 buffer 时间(大约为项目总时长的 5% ~ 10%)

  3. 排期一旦确定, 视为对所有成员的承诺,非极端情况不可更改

目前遇到最困难的事或是挫折是什么

在原来的单位主要做什么工作的

主要负责游戏管理后台和活动模板与游戏活动开发.

在原来工作上有哪些创新

推动了团队微前端的架构,在自身进度正常的情况下 help 别的组,并成功上线.

原来工作上遭遇了哪些挫折

在原来工作上遇到项目排期问题,产品需求提的太多频繁并且需求不明确的问题,导致开发无法正常理解需求,没有对功能点进行严格评审,没有真正产于需求评审并对产品进行相应的建议和看法

在这个新平台上你如何面对新的挑战

我首先会了解我的工作职责，看我的职责范围内我需要承担什么样的责任或者 KPI，明确职责范围之后制定相应的实施计划来逐步完成工作目标。

你原来的单位有没有相应的奖惩

有，如果项目延期会对相应负责人进行处罚，比如扣相应的金额作为活动基金，如果项目完成效果好，则会进行绩效评优，工资会有相应的奖金。

你对这个行业未来的发展持什么态度

贵公司与 xxx 竞争对手在未来的发展策略上会有什么不同

上一页微前端接入笔记

最后更新于

这有帮助吗？