技能清单
- 能够根据HTML5标准书写出符合语义化的html代码。如标签<header>、<main>、<section>、<footer> 等。能够使用flex、float+清除浮动布局,能够用多种方式进行水平居中、垂直居中。
- 能够使用Canvas的部分API进行画图,并用Canvas做了《Canvas画板》,并在画板中添加了笔头粗细选择、橡皮檫、撤回、清空、下载和颜色选择等功能。
- 熟练原生JavaScript(ES6),掌握new、DOM操作、闭包、原型链、继承等相关概念的原理和使用方法。
- 了解JSONP、AJAX、Cookie、Session、LocalStorage、SessionStorage、Cache-Control、Etag、同源策略和跨域等HTTP知识。
- 能够使用 jQuery 进行 DOM 操作,使用常见的API完成需求。用jQuery做了苹果风格的无缝轮播等作品。
- 能熟练地使用Vue,能够使用Vue.js完成需求,vue-cli、vue-router、vuex、slot、filters、组件通信、数据绑定等。了解Vue的生命周期及其钩子。
- 了解React框架,并使用该框架完成了待办事项todolist作品的制作,了解setState的机制,了解React的生命周期及其钩子。
- 了解命令行,能够使用命令行进行常用的操作。了解git,能够使用git的命令行进行代码版本的管理,并写了相应博客。
作品集
-
名称:《用Vue重构有赞商城》技术:Vue、Vue-cli、Vue-Router、Vuex、Velocityjs、mint-ui、qs描述:该项目利用Vue框架重构了有赞商城,对商城的首页、目录分类页、商品搜索列表页、商品详情页、购物车页面以及个人中心地址管理页面进行了重构,在重构过程中个,Vue作为项目的基础框架,利用mint-ui实现了商品列表的下拉请求和加载,利用Velocity实现了一些简单的页面动画效果,利用qs库实现了对url查询参数的解析,利用Vue-Router实现了对地址管理页面的组件路由的管理和切换,利用Vuex实现了对地址管理页面的数据状态的管理和组件间数据的通讯。
-
名称:《网易云音乐》技术:MVC、jQuery、Flex布局 、七牛&LeanCloud数据库描述:该项目使用了jQuery和MVC思想制作了一个仿照网易云音乐的音乐播放器以及对应的后台管理页面,音乐播放器支持歌曲的暂停、 切换和播放的功能,并在歌曲播放时自带滚动字幕以及播放动画效果;后台管理页面支持歌曲的上传以及对歌曲内容编辑的功能,并会自动列举出播放量较前的20首热门歌曲。这些功能都是基于jQuery以及LeanCloud和七牛提供的API实现的,并最后通过MVC的代码组织思想而制作出来的一个应用。
-
名称:《苹果风格的无缝轮播》技术:JavaScript、jQuery描述:该项目通过使用jQuery实现了轮播图片的无缝切换、自动切换、前后切换、按图片切换和触摸轮播停止切换的功能。
-
名称:《口袋待办》技术:React、组件化、LeanCloud、媒体查询描述:该项目使用React实现了一个口袋待办的网页应用,用户可以通过该应用注册、登录和登出,在应用中写下自己一天的待办事项并提交上传至LeanCloud数据库中,并保存在个人帐号下,用户可以对自己的待办事项的状态进行切换,或者删除不需要的待办事项,另外,用户在登录一次过后,在同样的设备进入该应用时应用会监测用户的登出状态,若没有登出,则无须重复登录。这是我的第一个用React实现的应用,目前已经发布上线。这个应用是通过LeanCloud提供的API和库实现了数据的上传、保存和下载,通过React组件UserDialog并结合LeanCloud提供的API实现用户的注册、登录和忘记密码等功能,通过React组件TodoInput来监听用户的输入并及时的反馈在输入栏中,通过组件TodoItem来展示待办事项的列表,并监听用户对TodoItem的toggle以及deleted的操作等等,最终实现了该应用的所有功能。
-
名称:《口袋画板》技术:原生JavaScript、Canvas、移动端、SVG、特性检测描述:该项目使用原生JavaScript和Canvas标签实现了一个口袋画板的应用,主要调用 Canvas API,实现了线粗、调色、橡皮擦、撤回、清空和保存的功能。用 context.clearRect()实现了橡皮檫和清空的功能,用className切换实现了颜色切换的功能,通过控制lineWidth的大小来调节线粗,通过设置一个ImgHash来保存每一笔之后的不同图像,通过返回到前一个图像来实现撤销的功能,用meta:vp、特性检测、ontouch事件以及禁止触发默认事件实现了触屏设备与web端兼容。
-
名称:《小猪佩奇》技术:JavaScript、jQuery、Prism.js描述:该项目通过动态向<style>标签和<pre>标签添加文本,绘制出小猪佩奇的过程,用户可以调整小猪佩奇的绘制速度,或者直接跳过绘制过程。本次作品用css3实现动画的效果,用prism.js实现代码高亮的效果。并通过调整添加文本的速度实现了三个动画播放的调速按钮。
-
名称:《键盘导航》技术:原生JavaScript、LocalStorage、JSON数据转换、CSS Gradient Generator描述:该项目通过使用原生JavaScript实现了一个键盘导航,该导航可以通过按下对应的键盘按钮来进入对应的网页,用户可以自己编辑按钮对应的网页,编辑后会自动获取该网页的图标并显示在键盘导航对应的按钮上。另外,该键盘导航用CSS Gradient Generator 实现了键盘颜色的渐变,用LocalStorage实现了用户编辑网页后把数据保存到本地的功能,该功能可以使用用户关闭导航后数据不会消失,待用户下次打开依旧可以获取到上一次编辑的网页。