陈映平 于 6个月前发表 4273 3 4
写在前面 作为一个互联网前端老鸟,这么些年下来,做过的项目也不少。从最初的 我的QQ中心 、 QQ圈子 ,到后面的 QQ群项目 、 腾讯课堂 。从几个人的项目,到近百号人的项目都经历过。 这期间,实现了很多的产品需求,也积累了一些经验。这里稍作总结,希望能给新入行的前端小伙伴们一些参考。 做好需求的关键点 要说如何做好一个需求,展开来讲,可以写好几篇文章,这里只挑重点来讲。 最基本的,就是把握好 3W :what、when、how。 * what :做什么? * when :完成时间? * how :如何完成? 需求场景假设 为了下文不至于太过枯燥,这里进行需求场景的模拟,下文主要围绕这个“需求”,从what、when、how 三个点展开来讲。 假设现在有个论坛的项目,产品经理小C提了个需求 “给论坛增加评论功能” 。作为 前端工程师 的小A接到需求后,该如何高质量的完成这个需求。 * 项目名称:兴趣论坛。 * 项目组主要成员:前端工程师小A,后台工程师小B,产品经理小C。 * 产品需求:给论坛增加评论功能。 备注:此时我们脑海里浮现的应该是下面这张图。
6个月前
开发模式
结一 于 7个月前发表 4833 0 0
一般来说,活动宣传页都是全屏的滑动,而移动端的视窗大小确实是有点零碎化,于是将内容在不同的手机上良好展示出现就显得有点挑战了。本文旨在通过对一个个疑难点进行攻克而形成一种通用解决方案。 活动宣传页面分析 以imweb conf的第一屏为例,如下图: imweb conf [http://7tszky.com1.z0.glb.clouddn.com/FkJN6E_oX78eQ80tFFcIFqvD9u4Z] 现在对里面的元素布局进行一个分析: * 一个全屏的背景图 * ”往届回顾“定位在左上(left, top),IMWeb.io 文字及向上箭头定位为中下(center bottom) * 发光的地球水平铺满,垂直方向定位为bottom * 中间的其他内容定位参考就是中间了 * 内容一屏显示,不论手机的宽高如何变化
7个月前
移动开发
江源 ,非常让人头疼…… 于 7个月前发表 5494 3 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 ,上镇楼图!
7个月前
工具建设
黄龙 于 2小时前发表 11 0 0
方法一: TRY CATCH const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; const _ = require('lodash'); let outArr = []; try { arr.forEach(obj => { console.log(obj); if (obj < 3) { outArr.push(obj); } else { thrownewError('brack'); } }); } catch (err) { } 方法二:污染FOREACH 代码偷自 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every
2小时前
javascript技术
陈映平 于 4天前发表 78 0 0
本文摘录自《Nodejs学习笔记》,更多章节及更新,请访问 github主页地址 [https://github.com/chyingp/nodejs-learning-guide] 。欢迎加群交流,群号 197339705 [http://shang.qq.com/wpa/qunwpa?idkey=7e4f670e1cd9278f30003965a1cc068a4f30d8c73aa071c8da189f4842dbbee6] 。 简介 MD5(Message-Digest Algorithm)是计算机安全领域广泛使用的散列函数(又称哈希算法、摘要算法),主要用来确保消息的完整和一致性。常见的应用场景有密码保护、下载文件校验等。 本文先对MD5的特点与应用进行简要概述,接着重点介绍MD5在密码保护场景下的应用,最后通过例子对MD5碰撞进行简单介绍。 特点 1. 运算速度快:对 jquery.js 求md5值,57254个字符,耗时1.907ms 2. 输出长度固定:输入长度不固定,输出长度固定(128位)。
4天前
nodeJS全栈
黄龙 于 20天前发表 401 0 0
CLOVER 官方网址:http://cn.ejie.me/ [http://cn.ejie.me/] * 方便的 Tab 页功能 要掌握功能强大,操作简单的标签页,只需记住Ctrl+T新开页面,Ctrl+W关闭页面,Ctrl+Tab切换页面,工作效率提高何止一倍! * 操作系统无缝集成 Clover 通过插件的形式集成到 Windows Explorer,保留您通常的使用习惯,无需学习新的文件管理操作,马上就可以使用啦。 * 快如闪电的书签栏 按Ctrl+D添加当前路径,或者直接将文件夹拖入书签栏。再也不用到处寻找要访问的文件夹了,瞬间到达,何等痛快![http://7tszky.com1.z0.glb.clouddn.com/FhfcqVKAV2uCciuJADxSnnx8ZM5I] LISTARY 官方地址:http://www.listary.com/ [http://www.listary.com/] Listary 是一款实用的搜索工具, 也可以把它当做启动器来用非常方便。
20天前
工具建设
kinkahuang 于 22天前发表 239 0 1
最近在一个使用fis构建的react.js项目里遇到个问题,render函数里如果发生了运行时错误,比如说某个对象没有判断就直接去访问其属性,那我所知道的就是,页面不正常了,特别是有嵌套子组件的时候,我可得一个个一层层去排查判断,去加try-catch。。。 好像react的开发体验不应该是这样子的。 通常来说,使用react的时候都配合以webpack构建,再加个webpack-dev-client,不仅有js live reload还能hot module reload,不离开编辑器的情况下就能一直调试下去。而且当出现运行时错误时,会有明确的error stack打印在页面上。为什么使用fis构建的就不行呢? 先就自己遇到的这个问题来说,我通过多次手动try-catch的方式,找到了render失败的原因,那么这个“手动”的方式是不是可以自动?通常就是monkeypatch,在当前类定义之后,借助于js这种动态修改类定义的特性,可以这样子: var unsafeCreateClass = React.createClass;
22天前
构建工具
何璇 于 22天前发表 271 0 0
版本号 作为一名前端工程师,相信大家对npm等包管理工具都比较熟悉,这里抛出一个先前碰到的问题: 冲突 假设我们存在一个多个项目共用的构建环境runtime,构建工具所依赖的包都安装在此runtime中,然后各个项目的负责人或者开发人员一起来维护这个公用runtime的package.json。那么非常有可能,包之间的依赖会出现冲突,特别是当包存在 Peer Dependencies [https://nodejs.org/en/blog/npm/peer-dependencies/] 的情况(之前的低版本npm安装会导致NPM ERR报错): [http://7tszky.com1.z0.glb.clouddn.com/Fk4Dbxegl-f62Fttc-u3q6UwDkWv] 后续 在了解了什么是平等依赖以及为什么安装失败后,解决这个问题的办法有很多,比如: * 根据项目拆分runtime * 升级依赖包(防止breaking changes) * 更换构建实现方式 * 等等 尽管如此,我们还是非常有必要了解一下Npm包管理工具是怎么做的? 版本比较
22天前
工具建设
coverguo 于 22天前发表 362 1 1
在生活中,浏览器和我们的工作和生活息息相关。做为前端开发,我们代码的应用场景往往是在浏览器上。浏览器对前端的重要性不可一日而语。那么我们对浏览器是否有比较清晰的了解呢?什么是多进程架构浏览器?为什么浏览器内核是多线程?Javascript是单线程又是什么鬼?进程和线程是否分得清楚呢? 进程(PROCESS)和线程(THREAD) 进程和线程是操作系统的基本概念,许多人会有所了解,但不能较为清晰的分辨。 这里我们需要了解下面几个点。 [http://7tszky.com1.z0.glb.clouddn.com/FkYQbo01k9nmBTtv7Ghmtf2U4ZAV] CPU CPU是计算机的核心,其负责承担计算机的计算任务。这里我们比喻为一个工厂 进程 学术上说,进程是一个具有一定独立功能的程序在一个数据集上的一次动态执行的过程,是操作系统进行资源分配和调度的一个独立单位,是应用程序运行的载体。我们这里将进程比喻为工厂的车间,它代表CPU所能处理的单个任务。任一时刻,CPU总是运行一个进程,其他进程处于非运行状态。 线程
22天前
浏览器
林鑫 于 1个月前发表 563 0 1
前言 随着 Vue.js 越来越火,Vue.js 的相关插件也在不断的被贡献出来,数不胜数。比如官方推荐的 vue-router、vuex 等,都是非常优秀的插件。但是我们更多的人还只停留在使用的阶段,比较少自己开发。所以接下来会通过一个简单的 vue-toast 插件,来了解掌握插件的开发和使用。 认识插件 想要开发插件,先要认识一个插件是什么样子的。 Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象: MyPlugin.install = function(Vue, options){ Vue.myGlobalMethod = function(){ // 1. 添加全局方法或属性,如: vue-custom-element// 逻辑... } Vue.directive('my-directive', { // 2. 添加全局资源:指令/过滤器/过渡等,如 vue-touch bind (el, binding, vnode, oldVnode) {
1个月前
javascript技术
苍都 于 1个月前发表 615 0 1
学习一个框架有两个阶段最难,一个是初期的入门,一个是后期的源码阅读。 虽然vue的官方文档非常棒,在我读完文档之后还是会有一种感觉,知识点我都懂,然后呢?似乎大体知道该怎么利用vue全家桶去搭建一个项目,但具体下笔又有点模糊。vue官方的脚手架并没有将vue-router和vuex包括进去,所以我们需要自己去配置它们。虽然找了一堆的demo,但是都没有达到我想要的效果。正好趁着自己接了一个小项目,拿来练手。 这个项目主要的作用是熟悉 vue vue-router vuex 在初期搭建项目的时候该怎么配置,以及怎么去互相配合,xx.vue文件该怎么写,如何创建和使用组件,vuex的state,mutations,actions,getters怎么配合,形成一个完整的流程。 项目并不复杂,所以拿出来分享,希望对大家有帮助 源码地址: https://github.com/bailicangdu/vue2-happyfri [https://github.com/bailicangdu/vue2-happyfri] 路由配置 import App from'../App'
1个月前
前端库
黄龙 于 1个月前发表 267 0 0
故事是这样开始的 * 产品K: 为什么我们的网站不能显示火星文? * 开发L: 什么样的火星文? * 产品K: ྊ你̆ូ们̆ូ城̆ូ里̆ូ人̆ូ真̆ូ会̆ូ玩̆ូ 类似这样的 * 开发L: 这是啥,看不清啊。 * 产品K: 我给你截图 [http://7tszky.com1.z0.glb.clouddn.com/FliL8ZoMB51VPZqheUpU-BNx4Aac] * 产品K: 你看知乎上是显示正常的 * 开发L: 哦,那我看看 作为一个技术很一般的前端很快发现这个和知乎的 font-family 的设置有关系,因为它设置了 PingFang SC 字体。作为一个喜欢问问题的前端那就要问 问题一:为什么其它字体显示就不正常PingFang SC字体就可以呢? 这̀是̀什̀么̀鬼̀(这是什么鬼?) uinicode里面叫结合附加符号 https://unicode-table.com/cn/blocks/combining-diacritical-marks/
1个月前
javascript技术