📘
技术积累
  • 简介
  • 学习方法
    • 如何提高编程技能
  • 基础知识
    • Linux
      • Linux常用指令
      • rsync
      • VIM
      • tmate命令行分享
      • 命令别名存储
      • 项目服务器重启
    • 设计模式
    • 自动化接口使用
    • 项目经理培训
    • 报价策略
    • 培训材料撰写
  • 工具
    • Ajax
    • AutV
    • axios
    • Babel
    • bower
    • codecov
    • crypto
    • CSS3D
    • Docker
    • Echarts
    • Git
      • 如何删除项目
      • 多个ssh_key的生成与使用
      • 常用命令清单
    • Gitbook
      • Gitbook 更多配置
      • Markdown 标记示例
    • gulp
    • Istanbul
    • JEST
    • jMeter
    • js-md5
    • Kama
    • LESS Sass 编译工具Koala介绍
    • Lodash
    • Markdown
    • Maven
    • Moment
    • Nginx
    • NPM
    • NVM
    • particles.js粒子效果
    • PM2
    • Qs
    • Swagger
    • Webpack
    • Webpack
    • Yarn
    • Yeoman使用
  • 平台
    • 代码托管平台 GitLab
    • 代码安全平台 sonarqube
  • 语言和框架
    • 工作流
    • Angular
      • FUSE-Angular前端框架项目初始化
      • AngularJs-toaster-Angular提示弹框插件
      • ng-file-upload-Angular上传图片插件
      • ngclipboard-Angular复制到剪贴板插件
    • Vue
      • ElementUI-Vue前端框架项目初始化
      • clipboard使用
      • mobileSelect.js使用
      • vue-cookies使用
      • vue-fullpage使用
      • vue-router使用
      • Vue的Ref属性
      • Vuex使用
      • Vux使用
      • vux-uploader使用
      • Vue生命周期图例
      • iview-loader使用
    • cycleJs
    • ES6
      • async/await
    • react
      • react生命周期
      • create-react-app
      • Rematch
      • react-router
      • react-router-dom
      • css-in-js
    • TypeScript
      • VueAndTypeScript
    • 微信小程序
    • Hexo博客框架
      • Hexo博客框架-图片问题处理
      • Hexo博客框架-切换主题
    • SmartClient
    • HybridApp混合开发
      • uniapp
  • 代码审查
    • 代码命名规范
    • 页面代码结构
    • JavaScript标准编码风格
    • AirbnbJavaScript风格指南
  • 其他
    • 收藏|激发灵感的33套网页配色方案(附色值)
    • KPI&OKR
    • 测试自动化
    • view
    • 前端面试
      • 项目方面
      • html+css
      • JavaScript方面
      • JavaScript面试
      • 框架方面
      • 前端面试3+1
        • 20190420
        • 20190419
        • 20190418
        • 20190417
    • Linux面试题
    • JAVA面试
    • 测试面试
    • 钉钉使用
    • sd360
  • 前端知识积累
    • css3单位汇总
    • CSS解决loading效果
    • 深度克隆的方法
    • 加密技术
    • 解决ios下的微信页面背景音乐无法自动播放问题
    • 一套绝佳的图标字体库和CSS框架:Font Awesome
    • 关于ico图标不显示解决办法
    • 提升页面响应速度
    • innerHTML引入的script如何使用
    • JavaMap转Json
    • JS开发工具大全
    • 移动端插件
    • 移动端页面通过前端方法禁止ios页面横屏方法
    • 图片资源网站
    • 排序方式
    • 图片预览上传
    • Windows部署时脚本报错
Powered by GitBook
On this page
  • 作者:高天阳
  • 邮箱:13683265113@163.com
  • 最近的项目是什么,用到了什么技术,有哪些功能点:
  • 重构项目前后技术的差异有什么:
  • 其中登录模块如何实现的,为什么这么实现:
  • 项目当中印象最深的地方是什么:
  • 为什么选择了此技术及框架:
  • 开发中遇到了什么问题:
  • vue和jquery同时使用的弊端,在操作DOM上,谁先谁后:
  • PC端为什么需要兼容IE:
  • 项目中有封装哪些组件和接口:
  • 下图的功能实现思路是什么(注意性能的问题,比如回收机制,扩散问题):
  • git push和git fetch的区别
  • 项目管理经验
  • 微信项目使用微信的sdk会有什么问题

Was this helpful?

  1. 其他
  2. 前端面试

项目方面

作者:高天阳

邮箱:13683265113@163.com

更改历史

* 2019-08-09        高天阳     初始化文档

最近的项目是什么,用到了什么技术,有哪些功能点:

最近做的2个项目,分别是微信、PC端网站重构,使用的vue,UI框架分别是Vux和iView。功能点包括首页,平台介绍,项目列表,活动宣传,个人中心。

重构项目前后技术的差异有什么:

原项目使用的是JSP+jQuery

其中登录模块如何实现的,为什么这么实现:

微信端登录模块分为两部分,前端通过Vuex的store存储登录状态,后端通过token存储登录状态。在每一次调用接口的时候,向后端传token参数。 此token通过axios的header传送。在请求到未登录状态时,同步前端Vuex中的登录状态。使用中的小坑是页面刷新时,axios的header会被清空, 需要重新存储一份在header中。没有使用cookie直接传送的原因是,cookie中存储的数据比较多,后台在每一次获取时,需要遍历一次全部数据, 才能找到这个token,如果使用header会更加方便操作。

项目当中印象最深的地方是什么:

在开发中,进行了路由的配置,有hash配置到history。考虑原因是history模式的URL就像正常的URL,例如http://yoursite.com/user/id, 需要前后台共同配置,遇到的坑是页面资源的获取位置修改,项目地址为非根目录时的重定向,安卓版微信浏览器的404挟持。

为什么选择了此技术及框架:

主要原因如下:

  1. 之前项目中有用到过

  2. UI基于WeUi 符合微信端的整体感觉

  3. 有较多的组件及较好的文档做支持

  4. 在项目初时 查询过主流的UI框架 对比之后 既符合项目需求又有较多的star数 因此选择了vux

开发中遇到了什么问题:

  1. vue-router配置从hash到history

    1. webpack配置文件默认获取的为根目录/需要修改为相对路径./

    2. 配置服务器xml文件,将文件重定向至对应的项目入口

    3. 安卓版微信浏览器404劫持

vue和jquery同时使用的弊端,在操作DOM上,谁先谁后:

项目中使用axios的原因是部分接口牵扯到跨域请求,原有项目是使用getJson实现的,在后端没修改接口的前提下,使用axios未成功调通,故而共用了。

Vue的官方是不建议直接操作 DOM 的,其优势在于视图和数据的双向绑定,而且所有DOM操作都可以用Vue实现,反而使用jQuery来操作DOM的话, 会造成不必要的麻烦,DOM未渲染完成之前事件绑定不上,当然也有解决办法,比如setTimeOut。

按照官方文档this.$nextTick可以在dom渲染完成之后执行操作,然而实际使用可能会由于资源是网络请求,存在延时的情况,导致获取失败。

PC端为什么需要兼容IE:

公司原有的支付逻辑及对接的第三方支付通道,要求使用IE浏览器,故而需要兼容。

项目中有封装哪些组件和接口:

在PC端封装了公共头部、底部以及菜单栏。公共方法封装过数据表的增删改查通用接口,通过是否有id字段,表id字段来判断是调用哪个接口。

下图的功能实现思路是什么(注意性能的问题,比如回收机制,扩散问题):

  • 标记清除

    • 变量进去执行环境 标记为进去入环境 使用完毕标记为离开环境 当离开环境后 仍存在的变量就是需要被删除的 会被加上标记

  • 引用计数

    • 声明加一 使用减一 为零删除

git push和git fetch的区别

git fetch用来查看其他协作者的进程

项目管理经验

  1. 项目整体的把控

  2. 沟通是第一位(晨会、晚回)

  3. 事情的紧急、重要层级

  4. 标准的制订 前端代码的风格统一 标准统一

微信项目使用微信的sdk会有什么问题

如果项目使用的是hash模式url中含有"#",需要去掉url"#"号后面的字符location.href.split('#')[0]

Previous前端面试Nexthtml+css

Last updated 4 years ago

Was this helpful?

vue-router最佳实践
vue常见前端UI库
JavaScript垃圾回收机制