• 2015-2016前端知识体系

    2015-2016前端知识体系 获取原图 一、框架与组件 bootstrap等UI框架设计与实现 伸缩布局:grid网格布局 基础UI样式:元素reset、按钮、图片、菜单、表单 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告 响应式布局:布局、结构、样式、媒体、javascript响应式 第三方插件:插件管理 jQuery、zepto使用原理以及插件开发 支持amd、cmd、全局变量的模块化封装 $.fn.method = function(){} mvc/mvvm框架原理设计,vue/angular/avalon等 directive设计:html、text、class、html、attr、repeat、ref,可扩展 filter设计:bool、upperCase、lowerCase,可扩展 表达式设计:if-else等实现 viewmodel结构设计:例如数据,元素,方法的挂载与作用域 数据更变检测:函数触发,脏数据检测、对象hijacking polymer/angular2思想与设计思路 import技术 template和script引入方式 css样式命名空间隔离 简单复用第三方库 reactjs原理与使用 virtual dom单向数据绑定 js执行语法方式 UI由状态控制 commonJS/AMD/CMD 模块引入 模块定义 模块标识 UMD解决不同规范兼容性的问题,例如webpack封装 模块懒执行(CMD)与与预执行(AMD) loadJs模块化加载原理与实现 创建script标签,需要id映射到资源url onload加载模块队列判断 全部加载完成后触发 加载失败问题优化 requirejs、modjs、seajs polyfill、shim原理与实现 polyfill提供了开发者们希望浏览器原生提供支持的功能特性 shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现 virtual Dom、Incremental DOM 1.用js对象树表示dom树结构,根据该对象树构建dom树 2.状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异...


  • 下一代前端打包工具与tree-shaking

    一、js模块化打包概述   随着js模块化规范AMD、CMD、commonJs的出现,模块打包工具也在不断的出现和演变,依次出现了r.js、browserify和webpack,过去的2015年就是webpack大行其道的一年,又随着reactjs、es6的出现,webpack更是深入人心,因为其人性化的特点和友好性,确实给前端模块打包带来了极大的方便。   不过今天并不是重点讲webpack,而是rollup,要了解webpack,可以看我的另一篇文章:http://ouvens.github.io/frontend-build/2015/04/01/webpack-tool.html ,在讲rollup之前先来看看几种之前的前端打包方案。 二、js模块化打包方案   先区分下几个不同概念:包管理工具(package manager)、模块加载器(module loader),打包工具(bundler),包管理器指管理安装js模块的这类,例如npm、bower、jspm这些,模块加载器指向requirejs、modjs、seajs这些,模块加载器又主要遵循AMD、CMD、Commonjs三种规范,打包工具则指r.js、browserify、webpack这类。 1、r.js   在grunt结合requirejs的年代,r.js作为通用标配的打包工具普世存在,当然现在应该也有些团队在用。   r.js是requireJS的优化(Optimizer)工具,可以实现前端文件的压缩与合并,在requireJS异步按需加载的基础上进一步提供前端优化,减小前端文件大小、减少对服务器的文件请求。先来分析一个官网的例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 { appDir: '../www', baseUrl: 'js/lib', paths: { app: '../app'...


  • web前端响应式设计总结

    web前端响应式设计总结 一、响应式概述   响应式是指根据不同设备浏览器分辨率或尺寸来展示不同页面结构、行为、表现的设计方式。这里总结了响应式网站设计需要涉及到的相关的内容,有不正确的欢迎大家指正。谈到响应式网站,目前比较主流的做法是通过前端通过判断userAgent来做页面的302跳转。 那么问题来了,使用userAgent的问题: 依赖设备本身浏览器或设备特点,例如尺寸,屏幕分辨率等。 需要分配多个站点页面跳转适配浏览器。例如:ke.qq.com,m.ke.qq.com,来分别存放PC端和移动端的页面。 多了一次跳转,跳转之前的逻辑不能少,这样用户体验就慢了   当然我们也都知道像bootstrap这种ui框架也是响应式的,即写一份代码,在浏览器和移动端都能跑,然而事实上这些事远远不够的,而且在移动端为什么要加载那么多PC端的内容?   我们理解的是完整的响应式页面的设计不仅仅是通过屏幕尺寸来动态改变页面容器的宽度等,其实大部分人通常理解的都停留在这个方面。完整的响应式网站的实现其实需要考虑到以下这些问题:响应式布局、响应式html和css、响应式媒体、响应式javascript。   这些页面在移动端和PC端使用同一个页面(大家可以用chrome浏览器一下),这样就避免了多余的302跳转,另外页面布局、逻辑、图片等内容都通过不同浏览器来适应。下面具体讲下各个部分的实现所涉及的内容。 二、响应式布局   响应式布局是用来兼容浏览器分辨率,清晰度,横屏,竖屏的页面元素布局方式。一般使用栅格方式实现。时间思路有两种,一种是PC端优先,另一种是以移动优先,PC端作为一个扩展。由于移动端的资源比较优先,一般比较推荐从移动端扩展到PC端,这样就避免了在移动端加载多余的PC端内容。响应式布局主要可以结合几种实现方式: 1,移动端布局控制 使用 viewport标签在手机浏览器上控制布局控制不缩放等通用定义。 1 2 <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1" /> <meta name="apple-mobile-web-app-status-bar-style" content="blank" /> 由于这些定义在移动端必须定义,这里还是需要定义,用到PC端也不影响,只是有些多余。 2,普通元素的栅格布局 对于普通的div布局,使用了通用简单的栅格布局,相信这个大家都知道原理: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 .row{ width: 100%; } .row...


  • 九种浏览器端缓存机制知多少

      浏览器缓存(Browser Caching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。浏览器端缓存的机制种类较多,总体归纳为九种,这里详细分析下这九种缓存机制的原理和使用场景。打开浏览器的调试模式->resources左侧就有浏览器的8种缓存机制。    一、http缓存   http缓存是基于HTTP协议的浏览器文件级缓存机制。即针对文件的重复请求情况下,浏览器可以根据协议头判断从服务器端请求文件还是从本地读取文件,chrome控制台下的Frames即展示的是浏览器的http文件级缓存。以下是浏览器缓存的整个机制流程。主要是针对重复的http请求,在有缓存的情况下判断过程主要分3步: 判断expires,如果未过期,直接读取http缓存文件,不发http请求,否则进入下一步 判断是否含有etag,有则带上if-none-match发送请求,未修改返回304,修改返回200,否则进入下一步 判断是否含有last-modified,有则带上if-modified-since发送请求,无效返回200,有效返回304,否则直接向服务器请求    如果通过etag和last-modified判断,即使返回304有至少有一次http请求,只不过返回的是304的返回内容,而不是文件内容。所以合理设计实现expires参数可以减少较多的浏览器请求。 二、websql    websql这种方式只有较新的chrome浏览器支持,并以一个独立规范形式出现,主要有以下特点 Web Sql 数据库API 实际上不是HTML5规范的组成部分; 在HTML5之前就已经存在了,是单独的规范; 它是将数据以数据库的形式存储在客户端,根据需求去读取; 跟Storage的区别是: Storage和Cookie都是以键值对的形式存在的; Web Sql 更方便于检索,允许sql语句查询; 让浏览器实现小型数据库存储功能; 这个数据库是集成在浏览器里面的,目前主流浏览器基本都已支持;   websql API主要包含三个核心方法: openDatabase : 这个方法使用现有数据库或创建新数据库创建数据库对象。 transaction : 这个方法允许我们根据情况控制事务提交或回滚。 executeSql : 这个方法用于执行真实的SQL查询。    openDatabase方法可以打开已经存在的数据库,不存在则创建 1 var db = openDatabase('mydatabase', '2.0', 'my db', 2 * 1024);...


  • 一些前端编程题

    1,数组元素统计方法,统一数组中各个元素出现的次数,使用O(1)复杂度算法。 1 2 3 4 5 6 7 8 9 10 11 function makeCount(arr){ let countObj = {}; for(let item of arr){ if(countObj[item]){ countObj[item] ++; }else{ countObj[item] = 1; } } return countObj; } 2,计算目录/a/b/c/d/e.js和/a/b/f/g.js的相对目录。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15...


  • Koa框架实践与中间件原理剖析

      [转载]:http://www.cnblogs.com/Leo_wl/p/4684633.html。本文写的很深刻易懂,转来收藏。   Koa是Express原班人马打造的一个更小,基于nodejs平台的下一代web开发框架。Koa的精妙之处就在于其使用generator和promise,实现了一种更为有趣的中间件系统,Koa的中间件是一系列generator函数的对象,执行起来有点类似于栈的结构,依次执行。同时也类似于Python的django框架的中间件系统,以前苏千大神做分享的时候把这种模型称作为洋葱模型。   当一个请求过来的时候,会依次经过各个中间件进行处理,中间件跳转的信号是yield next,当到某个中间件后,该中间件处理完不执行yield next的时候,然后就会逆序执行前面那些中间件剩下的逻辑。直接上个官网的例子: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 var koa = require('koa'); var app = koa(); // response-time中间件 app.use(function *(next){ var start = new Date; yield next; var...


  • Nodejs下的ES6兼容性与性能分析

    ES6标准发布后,前端人员也开发渐渐了解到了es6,但是由于兼容性的问题,仍然没有得到广泛的推广,不过业界也用了一些折中性的方案来解决兼容性和开发体系问题,但大家仍很疑惑,使用ES6会有哪些兼容性问题。 一、Nodejs下ES6兼容性现状   之前写了es6通过Babel编译后的在浏览器端的兼容性问题《Babel下的ES6兼容性和规范》,随着范围的扩展,ES6在Nodejs上兼容性也有必要重新梳理下。   随着iojs的引入,新版的Nodejs开始原生支持部分ES6的特性,既然ES6在浏览器端使用需要使用babel等编译,在Nodejs总可以放心使用了吧。然而事实并非如此,为此在nodejs端,我也做了特性兼容性研究: ES6新特性在Nodejs下的兼容性列表 这里罗列下nodejs支持的新特性,没列出的新特性均为不支持。 https://iojs.org/en/es6.html https://kangax.github.io/compat-table/es6/ ES6特性 Nodejs兼容性 let,const,块 strict模式支持 class类 strict模式支持 Map,Set 和 WeakMap,WeakSet 支持 generators 支持 进制转换 支持 对象字面量扩展 支持 promise 支持 String对象新API 支持 symbols 支持 字符串模板 支持 可见,es6的新特性在Nodejs中比babel还要差,而新版的babel已经能够支持es6的90%新特性了~ 二、Nodejs ES6性能分析   尽管目前Node下使用ES6我们仍然会大失所望,但es6发展的趋势定是必然,这里还是有必要对ES6的原生性能做了详细的对比测试。测试基本方法: 1,对于重复操作循环执行100万次 2,所有程序运行在Nodejs下执行 3,环境描述 CPU: Interl(R) Core(Tm) i5-3470 CPU @ 3.2GHz 内存:4.00GB 操作系统: 64位操作系统 node版本:node...


  • javascript实现数据双向绑定的三种方式

    前端数据的双向绑定方法   前端的视图层和数据层有时需要实现双向绑定(two-way-binding),例如mvvm框架,数据驱动视图,视图状态机等,研究了几个目前主流的数据双向绑定框架,总结了下。目前实现数据双向绑定主要有以下三种。 github演示例子 1、手动绑定 比较老的实现方式,有点像观察者编程模式,主要思路是通过在数据对象上定义get和set方法(当然还有其它方法),调用时手动调用get或set数据,改变数据后出发UI层的渲染操作;以视图驱动数据变化的场景主要应用与input、select、textarea等元素,当UI层变化时,通过监听dom的change,keypress,keyup等事件来出发事件改变数据层的数据。整个过程均通过函数调用完成。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45...


  • 产品的生命周期--阅读《人人都是产品经理》总结

    先来张图,将本书42.2万字的文字浓缩成一张图来作总结。关于一个互联网产品,无论大小,其生命周期过程如下 查看大图 策划一个产品涉及较多的是文档,下面也总结了一些文档的通用规范 查看大图 总结文档规范的原因很简单,可以帮助一个新的产品经理直接就能写出一份完善并且思路清晰的文档出来,至少第一眼看不出来是新手写的。 此处整理出来已经有不少东西了,不喜欢多余的文字,此图已涵盖产品生命周期的始终。读者们慢慢品味。 产品经理学习网站: 人人都是产品经理 产品100 PM caff 虎嗅网 互联网的壹些事 产品邦 极客公园


  • 写写前端团队管理

      前注:知乎上偶尔看到一个关于前端团队管理的话题,请允许我这个人好奇心比较重,深扒了下,加上自己的一些理解,做了点学习和领悟,梳理出来分享给大家,我不生产团队管理知识,我只是团队管理知识的搬运工。如果说做任何一门学问(比如技术,万事虽表现不同,但原理想通)都是一个理论加实践的过程,那么团队管理也不例外,接下来就先来理论一下。   作为技术开发人员,我们常常接受上级leader的委托去和其它成员协作完成项目任务,而且也常常专注于自己的事情,或赶项目进度,或研习各类技术。不过试想,如果你和你现在的leader调换角色,你会为你的团队做些什么?怎样去解决团队中存在的问题?你又应该如何去做好团队中各类事情的协调工作呢?   总结了各路前辈的说法,最终认为,如果你要做好一个前端团队的管理,至少应该从下面几个方面去考虑你手头的工作。 1. 持续不断的自我提高和认知转变。   首先必须承认,作为团队管理者,自身的认知和视野往往会成为整体团队水平的天花板。试想如果你跟着你个水平还不如你的leader手下工作,你会怎么想,最后做事情的结果也可想而知。但是常常,一个技术领域的内容是有限的,例如前端,一般在大公司工作两年以后,就会很快看到前端的天花板。这时作为管理者,可能需要关注的就是面向扩展与面向未来去做一些事情。   先引一张图: 面向扩展,你就需要去横向了解除前端外的其它内容,例如后端、底层架构设计、移动端开发、甚至产品经理思维等各方面知识和技术。 面向未来,你就需要敏锐地了解未来的技术趋势和市场变化,例如Web VR、通用型Web Native View的开发等趋势,首先要有认知。当然也可以做适当的调研尝试,调研尝试不必亲力亲为,可以分配给团队里面时间相对充裕并有能力完成这一任务的人,这样既给了团队成员机会,也可以让团队帮助你更快速地学习。   另外即使管理者各方面水平都达到一定的高度,另一方面也需要多听其它成员的意见,目前尽管业界内优秀的前端工程师比较缺乏,但也往往不缺乏牛人,兼听则明,偏信则暗,自古如此。   此外也要认识到自己从技术开发角色到团队管理角色认知的转变,确实如月影前辈所说:要成为优秀的技术人员,最重要的是要知道和善于发挥自己的长处,很多优秀的技术牛人熟知并且善于此道,所以牛人往往有个性,因为他们的特点和长处鲜明。而作为合格的管理者呢?最重要的不是发挥自己的长处和宣扬自己的个性,而是要看到自己的短处,要磨圆自身,在此之上,要知道和善于发挥他人的长处,容忍他人之短。作为一名合格的管理者,很多时候就不能仅仅在自己的立场上考虑问题了。 2. 团队培养。   团队培养往往针对团队中的新人或工作技能还有所欠缺的成员,其核心目标是尽可能快速提高新成员的工作能力和效率,以便后面能胜任更多的工作。通常也有一些有效的方法和机制来帮助他们快速提高。 导师制度。   对于进入团队的新人,一般会推荐有导师带领指导,这样可以帮助他们解决一些日常知识或经验性问题,避免他们自己去摸索折腾导致效率较低。同时导师也可以对新人做技术性学习的指导,能很快帮助新人快速提升。 必要的培训。   必要的项目经验培训可以帮助新人快速地了解并接手项目中的工作,缩短了新人了解项目开发所需要的时间周期。另外,也可以定期组织知识性的培训,帮助新成员拓宽技术视野。 codereview。   定期的codereview则可以帮助新成员发现项目代码的问题和不规范的地方,有利于团队成员的基本功培养和项目开发规范的推进实施,另外书写规范的代码也是工程师必备的技能。 鼓励文章输出。   鼓励新人写技术文章,能起到一个很好的引导入门作用,有助于帮助他们提高自学能力和解决问题的能力。 多学习分享。   如果有空余时间,鼓励新人多学习积累并学会分享,以提高工作中各方面的素质和能力。 职业规划。   帮助团队成员做职业规划,给团队成员定目标时可以适当提高,但是最终期望要有所降低,常言,取法其上,得乎其中;取法其中,得乎其下。总之,让每个人对自己都有明确的成长目标和方向,这样才不容易迷茫。 3. 团队文化。   团队文化则比较灵活,各个团队不一样,各个公司不一样,同个公司不同团队也不一定一样。但无论怎样,建立舒适的工作氛围尤其重要,例如定点上下班、上班需要穿啥衣服等细节在互联网公司就不大适用了,技术开发相对来说有点偏向创作性质的工作,如果因为这些条条框框会让人很不适。而且团队成员常常有较多聪明的的大牛,他们个性鲜明,自然不喜欢这些传统的规定。再者目前互联网公司内部工作中加班已成常态,如果还加上这些条条框框限制,就令人更不满了。   另外,为了缓解日常工作的压力,可以周期行地组织一些团建活动,例如聚餐、周边游等可以帮助大家转移注意力、缓解大家平时工作中的压力,同时也是促进团队成员之间相互了解和交流的机会。 4. 项目管理。   团队的日常工作中主要还是以完成项目任务为主,对于开发团队管理者,则需要做好项目工作的开展和监督工作,例如项目开发前期参与需求评审,中期向上级反馈项目进度,推动项目流程,后期监督项目完成质量,推进优化工作等等。而在各项工作的开展过程中,需要做的是要将项目完全委托给对应的项目成员,信任并支持他的工作,这时对项目开发实现细节的过分监督就会让下面人觉得没有自己信任度。通常团队成员也都是团队leader招的或接触过,对其能力必须是已经认可的,应该向下尽量放权给项目owner或开发负责人。这点主要对于团队管理者来说最重要的则是信任团队的其它成员能做完做好手头的工作。   除了工作上的信任和放权,另一点则是给团队中有潜力的成员提供机会。例如一个技术较强的人很想尝试下新的技术,例如想在项目中使用react、前后端同构等新技术,这时要尽量创造并提供机会让他们去尝试实践,否则长期在一个固定成熟的项目base上重复开发需求是很容易失去激情的。一个技术   而大多数管理者则希望维持稳定可控的开发模式来提高绩效产出,抱着无过即有功的态度,这样确实能在开发中尽可能减少意外问题的发生,但团队的成员如果没有新技术的尝试激励,一段时间后就会失去战斗的热情,没有成就感,觉得阻碍了自己的技术的成长,久而久之,问题就出现了。 5. 团队绩效与奖惩评定。   从以人为本的角度上再来看,大家无论从事技术、产品、运行还是管理,最初衷的目标当然还是希望得到一定的经济回报,而团队成员得到的回报则往往和团队完成项目工作的绩效和待遇来体现,作为团队管理者尽可能为团队成员争取更好的回报则是建立威望的最佳方式。   除了尽可能争取更好的团队回报,对于绩效的分配则可能是一个及其麻烦的问题。工作上,团队成员之间是同事,是兄弟,但是你也不能指望光靠情怀让大家努力工作。对于做事情积极主动的员工,可以考虑给予更好的项目和提升机会;而对于主动性稍微欠缺的成员,则可以给予暂时性的惩罚性措施,例如绩效评级暂时性地给2星或者C。   说是以人为本,但其实团队绩效与奖惩评定可以说是团队管理中最复杂的一个环节。而且对于人的认识则更难,对于表现优秀积极的员工,把最好的项目交给他,让他很快提升,但可能到了他预期的级别或到他认为的天花板就很快跳槽了;对于积极性稍差、表现不佳的员工,得到了较差的绩效,但是他感觉做的事情工作量和其他人差不多,同样是一起加班干活,如果连续两次以上被评级为2星或C以下,那基本肯定就离职了;而对于中间段的一部分人,比较优秀,表现积极努力,但是由于leader手上的资源有限,你只能给予他正常的绩效,如果长期连续如此,期望和结果存在一定的差距,那可能也呆不长了。   所以对于绩效的分配可以考虑尽可能惠及大多数人的立场上考虑。避免部分人因为连续拿优升得太快而离职,也不能让另一部分看不到希望。不患寡而患不均,不患贫而患不安,要想通过团队绩效与奖惩评定来稳固团队成员的信心重要的不是奖惩制度本身,而应该是对人性的理解,知道怎样恩威并重。   很多时候你可能并不了解他们,最终他们很不理解地得到你给的考评,由于团队管理的对象是你的下级,可能因为面子问题(脸皮薄)可能你得不到他们的这方面的反馈,这也就需要你多去了解和接触下属来知道他们自己的需求了。 例如(来自@泡泡): 1、一个入职2年,但是一直没有怎么晋升的同学,那么他目前可能最需要的是晋级。那么,你认为他要做哪些工作才能晋级?让他负责一个牛X的项目,还是在业务上玩出了什么新花样?找他谈谈,然后给他一点帮助。 2、一个技术比较强的同学,天天写页面做业务,没什么挑战。然后你发现他想做点有技术难度的,有挑战的内容。那么你可以让他负责组内的框架设计、基础组件开发,让他造几个轮子。 3、一个同学一直还没拿过5星或者3.75A。虽然他能力没组里其他同学强,但他却非常希望拿个好考核。怎么办?分配个项目给他负责,让他做PM,督促他发个好看的进度邮件,总结邮件,让他积极一点,年底给他打个3.75。 6....

公众号

加我赏红包,哈哈哈

公众号

欢迎关注 极限前端 公众号