陈映平 于 4个月前发表 2616 3 2
写在前面 作为一个互联网前端老鸟,这么些年下来,做过的项目也不少。从最初的 我的QQ中心 、 QQ圈子 ,到后面的 QQ群项目 、 腾讯课堂 。从几个人的项目,到近百号人的项目都经历过。 这期间,实现了很多的产品需求,也积累了一些经验。这里稍作总结,希望能给新入行的前端小伙伴们一些参考。 做好需求的关键点 要说如何做好一个需求,展开来讲,可以写好几篇文章,这里只挑重点来讲。 最基本的,就是把握好 3W :what、when、how。 * what :做什么? * when :完成时间? * how :如何完成? 需求场景假设 为了下文不至于太过枯燥,这里进行需求场景的模拟,下文主要围绕这个“需求”,从what、when、how 三个点展开来讲。 假设现在有个论坛的项目,产品经理小C提了个需求 “给论坛增加评论功能” 。作为 前端工程师 的小A接到需求后,该如何高质量的完成这个需求。 * 项目名称:兴趣论坛。 * 项目组主要成员:前端工程师小A,后台工程师小B,产品经理小C。 * 产品需求:给论坛增加评论功能。 备注:此时我们脑海里浮现的应该是下面这张图。
4个月前
开发模式
结一 于 5个月前发表 3088 0 0
一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。 活动宣传页面分析 以imweb conf的第一屏为例,如下图: imweb conf [http://7tszky.com1.z0.glb.clouddn.com/FkJN6E_oX78eQ80tFFcIFqvD9u4Z] 现在对里面的元素布局进行一个分析: * 一个全屏的背景图 * ”往届回顾“定位在左上(left, top),IMWeb.io 文字及向上箭头定位为中下(center bottom) * 发光的地球水平铺满,垂直方向定位为bottom * 中间的其他内容定位参考就是中间了 * 内容一屏显示,不论手机的宽高如何变化
5个月前
移动开发
江源 ,非常让人头疼…… 于 5个月前发表 3675 2 1
原文 [http://jiangyuan.me/blog/2016/09/24/vscode/] 这是《小江品评编辑器》系列的开篇,当然想开个好头。 我 2012 年开始接触前端,从最开始的记事本,到 Dreamweaver ,到 notepad++ ,到风头一时无两的 Sublime Text ,到现在社区庞大的 Atom ,都使用过很长一段时间。 期间也抽空玩耍过 Vim 、 Emac 和 Brackets 等等,觉得智商不够浅尝辄止。 当然也不会放过 IDE , Eclispe 、 NetBeans 、 Aptana 都试过,现在专注 jetbrains 三十年、 Webstorm 脑残粉……别胡思乱想了,我买了 license 。 扯这么多就是为了证明, 品评编辑器 ,我还真有这个资格。 今天要说的编辑器不是 Sublime ,她很棒,但更新太缓慢,在这个各种技术井喷的时代,再不奋起直追,只会被淘汰。 也不是 Atom ,他一样棒,意外的是启动时间要一个世纪。 Webstorm 当然是压轴登场。 今天聊聊 VS Code ,上镇楼图!
5个月前
工具建设
林鑫 于 3天前发表 85 4 0
本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp。不定期更新。可以到github上面下载DEMO。 github地址: https://github.com/lin-xin/gulp-plugins [https://github.com/lin-xin/gulp-plugins] 匹配符 *、**、!、{} gulp.src('./js/*.js')// * 匹配js文件夹下所有.js格式的文件 gulp.src('./js/**/*.js')// ** 匹配js文件夹的0个或多个子文件夹 gulp.src(['./js/*.js','!./js/index.js'])// ! 匹配除了index.js之外的所有js文件 gulp.src('./js/**/{omui,common}.js')// {} 匹配{}里的文件名 文件操作 DEL (替代GULP-CLEAN) var del = require('del'); del('./dist'); // 删除整个dist文件夹 GULP-RENAME
3天前
构建工具
林鑫 于 3天前发表 150 0 0
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。在线预览地址: DEMO [http://test.omwteam.com/] 功能说明 * 支持回车添加事件 * 支持事件状态切换 * 添加事件 -> 进入未完成列表 * 未完成 -> 已完成(勾选checkbox) * 未完成 -> 已取消(点击取消按钮) * 已完成 -> 未完成(取消勾选checkbox) * 已取消 -> 未完成(点击恢复按钮) * 支持控制台打印所有事件数据 * 支持筛选事件 * 支持编辑事件 * 支持删除事件 * 支持清空所有事件 * 支持本地化存储 * 支持折叠面板 项目笔记 本项目是使用vue-cli脚手架生成的项目,项目代码可以到我的github上clone下来。clone下来之后可进入文件目录 // 执行 npm install // 安装依赖完成之后再执行 npm run dev
3天前
javascript技术
赛冷思 ,爱编程,更爱前端。 于 6天前发表 249 0 0
这个项目不是一个框架,没有很多的页面。 此项目本意是为了创造一个可维护性可拓展性的强的后台基础项目,在这个项目的基础上开发后台,可以很快很方便的写自己的逻辑。 项目包含,静态演示,也包含完整的与后台交互演示。 github地址: https://github.com/sailengsi/sls-admin [https://github.com/sailengsi/sls-admin] 此项目重点突出在架构上模式,这个架构模式,可以让我们在开发中,很方便的拓展与维护,并且可以保持结构清晰的状态 建议先看下GITHUB上的文档说明 演示地址: https://vue2.slsadmin.sailengsi.com/#/login [https://vue2.slsadmin.sailengsi.com/#/login] 测试账号: * sls-1/123456 * sls-2/123456 * sls-3/123456
6天前
开发模式
邝伟科 于 16天前发表 450 2 0
[http://7tszky.com1.z0.glb.clouddn.com/FvFyBgbKKtoA35jNxOjVLHwR0RRc] 整个2016年前端圈还是一如既往的长江后浪推前浪,其中测试框架也不例外,mocha跟jasmine已经不是当前前端最火的测试框架了,而是一个面向未来的测试框架: AVA [https://github.com/avajs/ava] 看一个框架首先看这个框架介绍文档的第一句话,从中可以看出作者对这个这个框架的定位:[http://7tszky.com1.z0.glb.clouddn.com/FmJ5264J9NL9NdhaDbsWeP1zLX8W] 从AVA github 的 README 第一句看出,AVA自己定义跟其他测试框架的最大区别多线程,包括 1. 同步跑测试 2. 不同文件多线程同时跑 3. 每个测试在单独的线程单独跑要求每个测试必须是单独的,不依赖外部变量的 另外,介绍文档中还给出了AVA的其他优势,其中有几点我觉得比较好:
16天前
调试
吴浩麟 于 16天前发表 239 0 0
graphql [http://graphql.org] 用一种高效清晰的规范来替代目前正流行的RESTful架构。通过灵活的结构化查询语言让查询更高效,静态类型和规范提升前后端联调效率。作为一名前端我非常喜欢graphql,梦想有一天以前所有零散又没有文档的接口都被graphql所代替,这将极大提升我的开发效率和开发体验。等待不如自己动手,下面将介绍如何编写一个基于 hackernews [https://news.ycombinator.com] API [https://github.com/HackerNews/API] 的graphql服务。 在编写前先体验已经做好的 graphql服务demo [http://graphql.online/#X6CdVkXuC4tQ7WDC]
16天前
HTTP网络
zzbozheng 于 16天前发表 380 0 0
PM2 模块 PM2模块是通过PM2来安装和管理,代码可以托管在NPM中。任何人都可以创建和发布一个PM2模块,可以是日志模块、http代理模块、负载均衡模块、DNS服务器模块或任何类型的实用程序。 管理模块 管理PM2模块是非常简单的: # Install $ pm2 install <module-name> # Update a module $ pm2 install <module-name> # Install a module from GitHub (username/repository) $ pm2 install pm2-hive/pm2-docker # Force module restart $ pm2 restart <module-name> # Get more informations $ pm2 describe <module-name> # Install a module in dev mode from local folder $ pm2 install . # Generate a module boilerplate
16天前
nodeJS全栈
刘志龙 于 16天前发表 398 0 0
是什么 代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。 生活是一切东西的起源,在生活中也到处能看到代理模式的影子。 明星有经纪人作为代理,要联系明星的档期其实是和经纪人联系,经纪人联系好之后,再有明星负责签约、演出。 想想平时工作中也有这种例子,每个小组都要发周报,组长负责周报的收集, 总监通过周报查看每个成员的工作情况,而不是每个成员都直接向总监汇报。 甚至古代也能找到类似的例子,挟天子以令诸侯,曹操和汉献帝的关系,也有代理模式的影子。 为什么 大概对代理模式有个模糊的概念了,那为什么要存在代理模式? 单一职责原则 想一想,明星为什么要有经纪人。经纪人可以负责帮助明星安排各种工作,对明星包装炒作等等。而明星自己只专注于演出。如果所有工作都交给明星自己完成,一个再高效再厉害的人估计也得忙疯了。 相应的,在面向对象设计原则中有单一职责原则,它规定一个类应该只有一个发生变化的原因。如果一个类承担了太多职责,这个类就会变得越来越庞大,难以维护。 对象无法被直接操作
16天前
开发模式
jaychen 于 16天前发表 347 0 0
[http://7tszky.com1.z0.glb.clouddn.com/FrmeYH8QpSzTaDCZkd_77dWsucBJ] 一、变量 * 使用语义化的变量名称 Bad const yyyymmdstr = moment().format('YYYY/MM/DD'); Good const currentDate = moment().format('YYYY/MM/DD'); -------------------------------------------------------------------------------- * 使用可搜索的名称 通常我们读代码比写得多,所以代码都可读性以及可搜索性非常重要。如果对变量不负于语义化、易理解的名字,代码的阅读者将非常痛苦。buddy.js以及ESLint能够帮助我们定位未命名的常量。 Bad // 86400000 是什么鬼? setTimeout(blastOff, 86400000); Good
16天前
javascript技术
moonye 于 17天前发表 292 0 0
WEBPACK热更新配置 热更新,可以使开发的人在修改代码后,不用刷新浏览器即可以看到修改后的效果。而它的另一个好处则是可以只替换修改部分相关的代码,大大的缩短了构建的时间。 热更新一般会涉及到两种场景下面的使用,一个是项目属于纯前端资源的,另一种是node工程项目。 纯前端资源配置 完整工程项目可参考github上面 demo [https://github.com/moonye6/webpack-hot-test1] 配置或者 官方示例 [https://webpack.js.org/guides/hmr-react/] 配置过程内容比较多,这里大致描述下实现热更新能力需要做些什么。 首先安装相关的包,会发现热更新的能力主要是 webpack-dev-server 实现,它提供一个本地服务器,并且在内容发生变化时更新浏览器内容。而 react-hot-loader 主要作用是重刷react组件,非react项目中不要,这样配置又简化了。 然后在构建的配置文件中需要做一些配置,该配置作用是将热更新所需要的代码注入到入口js文件中
17天前
构建工具