文章列表
陈映平 于 3个月前发表 1796 3 1
写在前面 作为一个互联网前端老鸟,这么些年下来,做过的项目也不少。从最初的 我的QQ中心 、 QQ圈子 ,到后面的 QQ群项目 、 腾讯课堂 。从几个人的项目,到近百号人的项目都经历过。 这期间,实现了很多的产品需求,也积累了一些经验。这里稍作总结,希望能给新入行的前端小伙伴们一些参考。 做好需求的关键点 要说如何做好一个需求,展开来讲,可以写好几篇文章,这里只挑重点来讲。 最基本的,就是把握好 3W :what、when、how。 * what :做什么? * when :完成时间? * how :如何完成? 需求场景假设 为了下文不至于太过枯燥,这里进行需求场景的模拟,下文主要围绕这个“需求”,从what、when、how 三个点展开来讲。 假设现在有个论坛的项目,产品经理小C提了个需求 “给论坛增加评论功能” 。作为 前端工程师 的小A接到需求后,该如何高质量的完成这个需求。 * 项目名称:兴趣论坛。 * 项目组主要成员:前端工程师小A,后台工程师小B,产品经理小C。 * 产品需求:给论坛增加评论功能。 备注:此时我们脑海里浮现的应该是下面这张图。
3个月前
开发模式
kinkahuang 于 1个月前发表 595 0 0
我们有个内部运营系统,是基于keenthemes的一个主题进行开发的,而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制主题,用于显示各种图表和曲线。所以,这个系统的特点就是,加载了一堆js和css进行堆砌组合,以及内容被一层层的标签和样式包围。长这个样子: 混乱重复的演示 [http://7tszky.com1.z0.glb.clouddn.com/Fp4hlPNcE8G4nKobqt46vaJv6wUS]混乱重复的演示 [http://7tszky.com1.z0.glb.clouddn.com/FotxjNSUG9qMZMMZm7r_GyXob7ZM]混乱重复的演示 [http://7tszky.com1.z0.glb.clouddn.com/FhkJMXtTuF-OX9iguBcEBQb8qfNU] 这种写多了确实就是体力活,一般的开发过程也就是复制粘贴,而且为了不出意外的问题,有用的没用的js script和css link都是直接复制的,反正放内部用一般忽略加载的延迟。
1个月前
开发模式
张颖 ,认真认真 于 7个月前发表 1077 1 0
[http://7tszky.com1.z0.glb.clouddn.com/FsRq5zKw4qalqWAjFl5JrGBmgXlK] 有人说产品开发过程中web前端没有结论,只有随需求不停的修改,但是项目必须要有阶段性的结论,作为一个前端开发,如何避免为了某一个需求而陷入反复更改的困境呢?不要把责任全部推到产品不断的需求更改或者设计不停的视觉调整上,你其实可以做得更好。在不断的追求新技术,打磨技术精益求精之时,拓宽自己的知识面,寻找正确了工作姿势也很重要。 -------------------------------------------------------------------------------- 首先,心态很重要。
7个月前
开发模式
莫卓颖 于 7个月前发表 1371 2 2
{{tags: 工具建设 开发模式}} 序言 相信很多程序员都会经历两件事:第一件事情是没日没夜加班撸代码;第二件事情是写的程序出现bug没有及时发现而被老板骂。不知道大家有木有考虑从工具或者架构的角度出发去解决以上两个问题,木有考虑的同学也木有关系,本系列文章将会将会围绕整个前端的开发流程出发解决这两个问题,帮助大家提高产品质量以及开发效率。 文章导航图 对于前端开发来说大致分为5个阶段:开发、联调、测试、上线、监控维护,本系列文章将会选取每个阶段比较影响效率以及质量的点进行详细描述。这一章我们先来从开发阶段出发考虑有哪些方面可以做效率提升?[http://7tszky.com1.z0.glb.clouddn.com/FjS2kLJ0-Mxs066zwKNYvOyRDl0r] 页面结构继承化
7个月前
开发模式
张颖 ,认真认真 于 8个月前发表 1535 4 0
5月7日,为期1天的匠心 · 打造:腾讯SNG&msup技术开放日圆满结束。本次开放日是腾讯 SNG和 msup 联合举办,通过案例分享的形式展示了社交网络事业群产品(包括 QQ、QQ 音乐等)背后的十几年的技术沉淀与积累,全景解读了拥有亿级用户规模的SNG 的技术实践。 [http://7tszky.com1.z0.glb.clouddn.com/FpvY-_UNTkwiTW6n7AwLpek9LKjq] 稍显粗犷的身材,配上一张娃娃脸,加上温柔细腻的嗓音,IMWeb的又一萌属性 男神莫卓颖 在7日的开放日 前端专场 上给我们带来了一场干货分享:《如何搭建高质量、高效率的前端工程体系》。 [http://7tszky.com1.z0.glb.clouddn.com/Fmscvmsd6xnmMOjTiQNtbPxyktXo] 他介绍了前端如何从开发、链条、测试、上线、监控维护五个阶段是如何做效率提升的,着重介绍了围绕整个前端的自动化如何提升效率。
8个月前
开发模式
黎清龙 于 9个月前发表 2402 2 1
前端需要知道的 依赖注入(DEPENDENCY INJECTION, DI) 1. 前言 XX库实现了依赖注入,哇塞,好牛X呀~~~ 切,依赖注入的实现那么简单,不就一个map + 函数参数解析而已吗? 可是,你真的了解 依赖注入(Dependency Injection, DI) 吗? 本文将详细解释什么是依赖注入,并解释属于前端的依赖注入 注意 1. 本文专门为前端同学解释什么是依赖注入,文中例子也是js,非前端同学可以选择绕道 2. 已经知道依赖注入的同学也可以绕道 2. 什么是 依赖注入 2.1. 它是模式 首先,依赖注入是一个设计模式,因为它解决的是一类问题 2.2. 理解它的作用域 要知道依赖注入是解决什么问题,最好先了解一个原则: 依赖倒转原则(Dependence Inversion Priciple, DIP) 提倡: 1. 高层模块不应该依赖低层模块。两个都应该依赖抽象 2. 抽象不应该依赖细节,细节应该依赖抽象 3. 针对接口编程,不要针对实现编程 在编程时,我们对系统进行模块化,它们之间有依赖,比如模块A依赖模块B
9个月前
开发模式
ousiri 于 10个月前发表 1995 1 0
当我们学习ReactJS的时候, 都会通过官方Tutorial看到下面的写法. import React from'react'; let TodoItem = React.createClass({ render(){ return<div></div> } }) 但是, ES6实现了class. 于是, 出现了新的写法. importReact from 'react'; classTodoItemextendsReact.Component{ constructor(props){ super(props) } render(){ return <div></div> } } 接下来, 就对比一下这两种写法的不同之处. 例子的顺序都是先写React.createClass, 再写extends React.Component 1. PROPTYPES 和 GETDEFAULTPROPS import React from'react';
10个月前
开发模式
邝伟科 于 1年前发表 2868 0 2
总结最近了解的前端测试的相关内容,如有问题,欢迎指出。 TDD VS BDD: TDD(Test Drivin Development)是测试驱动开发,强调的是一种开发方式,以测试来驱动整个项目,即先根据接口完成测试编写,然后在完成功能时要不断通过测试,最终目的是通过所有测试。 BDD(Behavior Drivin Development)行为驱动开发,可以理解为也是TDD的分支,即也是测试驱动,但BDD强调的是写测试的风格,即测试要写得像自然语言,运用一些比如expect、should等跟自然语言相近的断言,让项目的各个成员甚至产品都能看懂测试,甚至编写测试。 前端测试化工具简单汇总和比较 QUNIT [HTTP://QUNITJS.COM] jquery出的自动化测试库,没什么好说的,可以想象其跟jquery UI及jquery animation等库结局一样,逃脱不了各种被后来的库全方位的比较和“超越” MOCHA
1年前
开发模式
邝伟科 于 1年前发表 1433 0 0
PubSub是一种设计模式,中文叫发布订阅模式,简单来说就是消息发布者不直接向订阅者发布消息,而是发布到中介,而中介根据不同主题对消息进行过滤,并通知对该主题感兴趣的订阅者。该模式在前端现在很火的组件化开发十分常用,因为该模式松耦合,易于扩展的优点正式组件化开发所需要的。 一个PubSub模型主要方法有3个,订阅,退订,发布,下面尝试在前端实现一个最简单的PubSub模块。 var PubSub = {}; // 用于储存事件队列 var queue = {}; // 订阅接口 PubSub.on = function(event, cb) {if(!queue[event]) { queue[event] = []; } queue[event].push(cb); }; // 退订接口 PubSub.off = function(event, cb) { var currentEvent = queue[event]; var len = 0; if(currentEvent) { len = currentEvent.length;
1年前
开发模式
coolriver 于 1年前发表 2600 2 0
前言:一个题目 之前在 codewars [http://www.codewars.com/dashboard] 上做在线题目时遇到这样一个问题: 实现一个依赖注入的“注射器” [http://www.codewars.com/kata/dependency-injection] 。当时对依赖注入这一概念还不是很理解,只是根据题目的要求初步认识了依赖注入。题目的要求如下: /** * Constructor DependencyInjector * @param {Object} - object with dependencies */var DI = function (dependency) { this.dependency = dependency; }; // Should return new function with resolved dependencies DI.prototype.inject = function (func) { // Your code goes here }
1年前
开发模式
黎清龙 于 1年前发表 1771 3 1
开放-封闭原则(OCP,OPEN - CLOSED PRICIPLE) 1 前言 害羞地看完了《 单一职责简述 [http://imweb.io/topic/560a50b6c2317a8c3e086201] 》,自然想到了另外一个重要的原则——开放>封闭原则 开放>封闭原则是程序设计的一个重要原则,相比于著名的SPR,这个原则可能不太容易被人们记住,但是这个原则却不容忽视 经典的设计模式都是基于C++/Java的OOP,相信读者都耳熟能详了 本文是基于JavaScript来的,同时也会提到OCP在前端程序中的应用与表现 2 什么是OCP? OCP的核心如下: Open for extension, Closed for modification 翻译过来是:对扩展开放,对修改封闭 需求总是变化的,面对变化,一个优秀的程序(类,组件)应该是通过扩展来适应新的变化,而不是通过修改 另一方面,也就是说,当一个程序(类,组件)写好之后,就不应该再修改它的代码(bug不算) 如果违反了OCP,当你发现自己经常在改一个类/组件的源代码的时候,那这个类/组件应该也违反SPR了 3 如何做到OCP?
1年前
开发模式
梁伟盛 于 1年前发表 1425 5 1
单一职责 前言 谈到单一职责,就肯定会踢到引用了一万次的名言: A class should have only one reason to change。 一个类应该只有一个原因能引起它变化。 -------------------------------------------------------------------------------- 这是什么意思呢,举个例子,男生一般是站着尿尿,所以代码是: functionMale (name, age) { this.name = name; this.age = age; this.sex = 'male'; } Male.prototype = { coustructor: Male, //尿尿的行为 pee: function () { console.log('站着尿尿'); } };
1年前
开发模式