文章列表
陈映平 于 6个月前发表 4258 3 4
写在前面 作为一个互联网前端老鸟,这么些年下来,做过的项目也不少。从最初的 我的QQ中心 、 QQ圈子 ,到后面的 QQ群项目 、 腾讯课堂 。从几个人的项目,到近百号人的项目都经历过。 这期间,实现了很多的产品需求,也积累了一些经验。这里稍作总结,希望能给新入行的前端小伙伴们一些参考。 做好需求的关键点 要说如何做好一个需求,展开来讲,可以写好几篇文章,这里只挑重点来讲。 最基本的,就是把握好 3W :what、when、how。 * what :做什么? * when :完成时间? * how :如何完成? 需求场景假设 为了下文不至于太过枯燥,这里进行需求场景的模拟,下文主要围绕这个“需求”,从what、when、how 三个点展开来讲。 假设现在有个论坛的项目,产品经理小C提了个需求 “给论坛增加评论功能” 。作为 前端工程师 的小A接到需求后,该如何高质量的完成这个需求。 * 项目名称:兴趣论坛。 * 项目组主要成员:前端工程师小A,后台工程师小B,产品经理小C。 * 产品需求:给论坛增加评论功能。 备注:此时我们脑海里浮现的应该是下面这张图。
6个月前
开发模式
赛冷思 ,爱编程,更爱前端。 于 2个月前发表 1076 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
2个月前
开发模式
刘志龙 于 3个月前发表 777 0 0
是什么 代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。 生活是一切东西的起源,在生活中也到处能看到代理模式的影子。 明星有经纪人作为代理,要联系明星的档期其实是和经纪人联系,经纪人联系好之后,再有明星负责签约、演出。 想想平时工作中也有这种例子,每个小组都要发周报,组长负责周报的收集, 总监通过周报查看每个成员的工作情况,而不是每个成员都直接向总监汇报。 甚至古代也能找到类似的例子,挟天子以令诸侯,曹操和汉献帝的关系,也有代理模式的影子。 为什么 大概对代理模式有个模糊的概念了,那为什么要存在代理模式? 单一职责原则 想一想,明星为什么要有经纪人。经纪人可以负责帮助明星安排各种工作,对明星包装炒作等等。而明星自己只专注于演出。如果所有工作都交给明星自己完成,一个再高效再厉害的人估计也得忙疯了。 相应的,在面向对象设计原则中有单一职责原则,它规定一个类应该只有一个发生变化的原因。如果一个类承担了太多职责,这个类就会变得越来越庞大,难以维护。 对象无法被直接操作
3个月前
开发模式
kinkahuang 于 5个月前发表 1160 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都是直接复制的,反正放内部用一般忽略加载的延迟。
5个月前
开发模式
张颖 ,认真认真 于 10个月前发表 1817 1 0
[http://7tszky.com1.z0.glb.clouddn.com/FsRq5zKw4qalqWAjFl5JrGBmgXlK] 有人说产品开发过程中web前端没有结论,只有随需求不停的修改,但是项目必须要有阶段性的结论,作为一个前端开发,如何避免为了某一个需求而陷入反复更改的困境呢?不要把责任全部推到产品不断的需求更改或者设计不停的视觉调整上,你其实可以做得更好。在不断的追求新技术,打磨技术精益求精之时,拓宽自己的知识面,寻找正确了工作姿势也很重要。 -------------------------------------------------------------------------------- 首先,心态很重要。
10个月前
开发模式
莫卓颖 于 10个月前发表 1622 2 2
{{tags: 工具建设 开发模式}} 序言 相信很多程序员都会经历两件事:第一件事情是没日没夜加班撸代码;第二件事情是写的程序出现bug没有及时发现而被老板骂。不知道大家有木有考虑从工具或者架构的角度出发去解决以上两个问题,木有考虑的同学也木有关系,本系列文章将会将会围绕整个前端的开发流程出发解决这两个问题,帮助大家提高产品质量以及开发效率。 文章导航图 对于前端开发来说大致分为5个阶段:开发、联调、测试、上线、监控维护,本系列文章将会选取每个阶段比较影响效率以及质量的点进行详细描述。这一章我们先来从开发阶段出发考虑有哪些方面可以做效率提升?[http://7tszky.com1.z0.glb.clouddn.com/FjS2kLJ0-Mxs066zwKNYvOyRDl0r] 页面结构继承化
10个月前
开发模式
张颖 ,认真认真 于 1年前发表 1924 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] 他介绍了前端如何从开发、链条、测试、上线、监控维护五个阶段是如何做效率提升的,着重介绍了围绕整个前端的自动化如何提升效率。
1年前
开发模式
黎清龙 于 1年前发表 3173 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
1年前
开发模式
ousiri 于 1年前发表 2722 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';
1年前
开发模式
邝伟科 于 1年前发表 3761 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年前发表 1744 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 于 2年前发表 3091 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 }
2年前
开发模式