陈映平 于 3个月前发表 1797 3 1
写在前面 作为一个互联网前端老鸟,这么些年下来,做过的项目也不少。从最初的 我的QQ中心 、 QQ圈子 ,到后面的 QQ群项目 、 腾讯课堂 。从几个人的项目,到近百号人的项目都经历过。 这期间,实现了很多的产品需求,也积累了一些经验。这里稍作总结,希望能给新入行的前端小伙伴们一些参考。 做好需求的关键点 要说如何做好一个需求,展开来讲,可以写好几篇文章,这里只挑重点来讲。 最基本的,就是把握好 3W :what、when、how。 * what :做什么? * when :完成时间? * how :如何完成? 需求场景假设 为了下文不至于太过枯燥,这里进行需求场景的模拟,下文主要围绕这个“需求”,从what、when、how 三个点展开来讲。 假设现在有个论坛的项目,产品经理小C提了个需求 “给论坛增加评论功能” 。作为 前端工程师 的小A接到需求后,该如何高质量的完成这个需求。 * 项目名称:兴趣论坛。 * 项目组主要成员:前端工程师小A,后台工程师小B,产品经理小C。 * 产品需求:给论坛增加评论功能。 备注:此时我们脑海里浮现的应该是下面这张图。
3个月前
开发模式
结一 于 4个月前发表 2352 0 0
一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。 活动宣传页面分析 以imweb conf的第一屏为例,如下图: imweb conf [http://7tszky.com1.z0.glb.clouddn.com/FkJN6E_oX78eQ80tFFcIFqvD9u4Z] 现在对里面的元素布局进行一个分析: * 一个全屏的背景图 * ”往届回顾“定位在左上(left, top),IMWeb.io 文字及向上箭头定位为中下(center bottom) * 发光的地球水平铺满,垂直方向定位为bottom * 中间的其他内容定位参考就是中间了 * 内容一屏显示,不论手机的宽高如何变化
4个月前
移动开发
江源 ,非常让人头疼…… 于 4个月前发表 2996 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 ,上镇楼图!
4个月前
工具建设
zzbozheng 于 16天前发表 279 3 0
前几天在群里看到小杜分享一篇文章,《html写法对gzip压缩率的影响》,为此我也对这点分析了一下。 不知道大家有没有看过这文章,作者是来自微博懒懒交流会,其内容我这里先简述一下。 Gzip算法主要由哈费曼和LZ77算法组成。 如果文件中有两块内容相同的话,那么只要知道前一块内容的位置和大小,通过特定的压缩标识符, 我们就可以确定后一块的内容。所以我们可以用位置长度这样一对信息,来替换后一块内容。 举例
16天前
HTML&HTML5
结一 于 17天前发表 338 0 0
在DOM操作时代,tabs的结构一般如下: div.tabs ul.tabs-hd li.hd-tt*n div.tabs-bd div.bd-con*n 然后通过判断 li.hd-tt 的索引值来控制对应的 div.bd-con 的显示隐藏,由此封装成一个非常高效率的组件。 到了以React为代表的数据变化引起UI更新的时代,基于上面方式实现的tabs组件还是非常多的,以Ant Design,IMUI为例,都是这种实现方式。 那么现在我的问题是:在React中,tabs组件是否真的还需要按照这种显示隐藏多个 div.bd-con 的方式? 关于这个问题,这里抛出两个支撑观点: * 在使用tabs组件的时候,需要维护一个state来控制各个tab的切换 * 一般来说各个tab的内容结构多半相似甚至相同,只是数据不同而已 基于这两点,简化版本的tabs其实只需要 ul.tabs-hd 部分,对于内容部分,根本不需要放到tabs里面去封装成组件
17天前
javascript技术
吴浩麟 于 18天前发表 1554 2 0
[http://7tszky.com1.z0.glb.clouddn.com/FnewH1hoBQjJKWzMazCkmSrPxOSb] webpack是当下最流行的js打包工具,这得益于网页应用日益复杂和js模块化的流行。 webpack2 [https://webpack.js.org] 增加了一些新特性也到了预发布阶段,是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 优化输出 打包结果更小可以让网页打开速度更快以及简约宽带。可以通过这以下几点做到 压缩CSS css-loader 在webpack2里默认是没有开启压缩的,最后生成的css文件里有很多空格和tab,通过配置 css-loader?minimize 参数可以开启压缩输出最小的css。css的压缩实际是是通过 cssnano [http://cssnano.co] 实现的。 TREE-SHAKING
18天前
构建工具
coverguo 于 19天前发表 408 3 0
背景: 最近AR的话题很火,如前段时间pokemon Go游戏,和支付宝的AR红包,加上最近看到了一些关于前端运用webRTC技术实现WebAR的文章,这边就尝试结合下,实现一个简单版的pokeMon Go的游戏。由于有兼容性问题,目前demo只是跑在android的手Q中,具体效果如下: [http://7tszky.com1.z0.glb.clouddn.com/Fh_4pdBh52iGZWV2GCv82JgVL6WQ] 元旦后提供demo链接 WEBAR WebAR说白了就是通过web端的技术能力去实现AR的效果! 我们知道,AR最基础要实现的功能其实就是实时视频效果,然而帮助我们实现这种实时视频效果的技术基础是 WebRTC ; WEBRTC是什么? 那么,WebRTC是什么? 对前端来说,我们可以通过HTML5的新特性WebRTC(网页实时通信,Web Real-Time Communication 一个支持网页浏览器进行实时语音对话或视频对话的API),通过WebRTC,可以通过网页呼起用户的摄像头,并且实时获取用户摄像头的图像数据的。 WEBRTC API
19天前
HTML&HTML5
刘志龙 于 19天前发表 300 0 0
最近折腾脚手架相关的一些事情。说到脚手架,不得不谈的就是 yeoman 了。 是什么 yeoman 是一个脚手架生成工具。 yeoman generator 则是 yeoman 的精髓所在。 从我的理解来看。 yeoman 就是一个工具外壳,它定制了如何调用 generator ,给 generator 提供了运行环境。 yeoman generator 则是解耦出来的核心部分,负责完成一个脚手架应该做的事。 线上已经有很多 generator ,可以满足我们一大波需求。不过要做到真正灵活,完全符合自己的需求、业务中的需要就要自己自定义 generator 了。 怎么做 yeoman 的强大之处在于它提供了一套非常强大的编写自定义 generator 的 API ,而且上手非常容易。只要按照特定的约束,很快就可以定制一套自己的 generator 。话不多说,马上一起来看看怎么做。 目录结构 |- app |- index.js |- template |- 模板文件 |- package.json (主入口为app/index.js)
19天前
工具建设
jerytang 于 20天前发表 363 1 1
代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当中。显然,这是很不合理的。 unneed_deps [http://pub.idqqimg.com/pc/misc/files/20161230/31607a2f657c4086adbf1bfd98063934.png] $webpack--profile--json--configwebpack/config.common.js > stats.json$#将stats.json上传到http://alexkuz.github.io/webpack-chart/可视化entry的依赖 随着 es6 的普及使用,由于 es6 的 模块是语言层面支持的,方便做静态分析,让进一步的代码优化成为可能,也就是我们今天要讨论的 tree-shaking。
20天前
构建工具
json 于 20天前发表 229 1 0
WHISTLE介绍 whistle是一款用Node实现的跨平台的Web调试代理工具,支持查看修改http(s)、Websocket连接的请求和响应内容。IMWEB团队avenwu作品。github地址: https://github.com/avwo/whistle [https://github.com/avwo/whistle] WHISTLE安装启动 1、安装whistle npm install -g whistle 2、 启动whistle w2 start // 启动whistle w2 restart // 重启whsitle w2 run // 调试模式启动whistle 3、 在浏览器中访问 (1)域名访问 http://local.whistlejs.com/ [http://local.whistlejs.com/] (2)通过ip+端口来访问,例如: http://127.0.0.1:8899 [http://127.0.0.1:8899] WHISTLE插件开发
20天前
工具建设
张颖 ,认真认真 于 21天前发表 402 1 0
CSS MODULES CSS 模块化 不管是用jquery还是react开发,都会遇到的一系列 CSS 的问题: 1. 全局污染 2. 命名混乱 3. 依赖引入复杂 4. 无法共享变量 5. 代码冗余 通过 JS 来管理 CSS 就很好解决上述列举的问题。CSS 模块化的解决方案有很多,但主要有两类。 一类是彻底抛弃 CSS,使用 JS 或 JSON 来写样式。Radium, jsxstyle ,react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力;缺点是不能利用成熟的 CSS 预处理器(或后处理器) Sass/Less/PostCSS, :hover 和 :active 伪类处理起来复杂。 另一类是依旧使用 CSS,但使用 JS 来管理样式依赖,代表是CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React,只要你使用 Webpack,可以在 Vue/Angular/jQuery 中使用。 启用 CSS MODULES
21天前
CSS/重构
ouven ,https://ouvens.github.io/ 于 23天前发表 702 0 0
2016年结束了,前端技术的发展也将进入到一个新的阶段,那么未来又会给我们带来什么呢?这里就个人发表下意见,欢迎点评。 就前端主流技术框架的发展而言,过去的几年里发展极快,在填补原有技术框架空白和不足的同时也渐渐趋于成熟。未来前端在已经趋向成熟的技术方向上面将会慢慢稳定下来,并进入技术迭代优化阶段,例如语言标准、前端框架等。但这并不代表前端领域技术就此稳定了,因为新的技术方向已经出现,并在等待着下一个风口的到来。那么什么是下一个风口?虚拟现实?人工智能?或者其它的?不管未来如何,就前端应用开发方向来讲,MVVM、Virtual DOM和同构的技术解决方案依然会延续发展一段时间。而且这段时间内前端框架技术的变化将不会像原来一样具有颠覆性。 当 MVVM、Virtual DOM或同构等技术实践都有很成熟高效的框架和方案去实现了。那么对于移动端应用,前端要重点发展的下一步可能就是MNV 的原生NativeView开发,例如使用通用的MNV
23天前
javascript技术