前端工程师

前端框架与类库

五迷三道 提交于 2020-01-04 00:37:23
一直不能分别前端框架和类库(我这个前端也是假的吧?),结合各位前辈的思想,整理了一下: 前端框架与前端类库的区别 使用框架前,我觉得很重要的一点是弄清类库(诸如JQuery)和框架(诸如angularJS)的区别在何处。 简单而言,类库,解决的是代码或者是模块级别的复用或者对复杂度的封装问题,例如将一个解决复杂问题的功能模块封装成一个函数,提供一个简单的接口。库它是一种工具,它提供了很多封装好的方法,用与不用取决于我们自身,即使用了也不会影响我们呢的代码结构。 而框架,更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC,为了实现M和V的解耦,把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化。是面向一个领域来提供一套解决方案,提高开发效率,如果我们选择了使用某框架,就应该遵循该框架所规定的规则。 二者最主要的区别是 :JQuery以DOM操作为中心,框架,准确来说是MVC框架,是以模型(model)为中心,而DOM操作是附加的。所以,以模型为中心最终达到的目的是带来一整套工作流程的变更,使得后台工程师可以编写前端的模型代码,把后台与前端打通,交互设计师处理UI跟模型的互动关系,UI设计师可以专注、无障碍的处理HTML源码,把它们以界面模板的形式提交给交互工程师。这一整套协作机制能大大提高开发效率。使用MVC框架使得前端任务更好的被解耦。

Web前端框架与类库的思考

痞子三分冷 提交于 2020-01-04 00:37:15
说起前端框架,我也是醉了。现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利。   当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉。网站技术是为业务而存在的,除此毫无意义,框架也是一样。在技术选型和架构设计 当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道。就好像一个日均pv只有几百的小型电商网站,却要大喊 “某宝就是这么搞的”,然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统...等巴拉巴拉的一堆用来处理高并发,海量数据访问的手段。我想 说,有意义吗? 顺带可以看看这个源码框架: http://www.jinhusns.com/Products/Download/?type=xcj   前端框架的理解误区   网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架 是舍本逐末,得不偿失的。前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的 Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架。   当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要,值得学习借鉴

Web前端框架与类库的思考

十年热恋 提交于 2020-01-04 00:36:59
说起前端框架,我也是醉了。现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利。 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉。网站技术是为业务而存在的,除此毫无意义,框架也是一样。在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道。就好像一个日均pv只有几百的小型电商网站,却要大喊“某宝就是这么搞的”,然后搭建应用服务器集群,使用分布式文件系统和分布式数据库系统…等巴拉巴拉的一堆用来处理高并发,海量数据访问的手段。我想说,有意义吗?   前端框架的理解误区 网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架是舍本逐末,得不偿失的。前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架。 当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要,值得学习借鉴,但我们不能因此变得盲从。只有深刻去理解前端框架,知道什么时候该用什么什么框架解决什么问题,才能有的放矢,直击要害。   前端框架与前端类库的区别 使用框架前

Web前端框架与类库的思考

走远了吗. 提交于 2020-01-04 00:36:49
前端框架的理解误区 网站的价值在于它能为用户提供什么价值,在于网站能做什么,而不在于它是怎么做的,所以在网站还很小的时候就去追求网站的架构框架是舍本逐末,得不偿失的。前端框架同理,如果是一个简单的页面型产品,应用只是依赖服务器来生成Web页面和视图,并且只需要使用一些简单的Javascript或者JQuery来使应用更加具有互动性,那么一个JQuery前端类库就可以了,真的没必要用上一些高大上的框架。 当然,框架的确是很有用的,重点是我们要知道什么时候该用什么框架。大公司大项目的经验和成功模式固然重要,值得学习借鉴,但我们不能因此变得盲从。只有深刻去理解前端框架,知道什么时候该用什么什么框架解决什么问题,才能有的放矢,直击要害。 前端框架与前端类库的区别 使用框架前,我觉得很重要的一点是弄清类库(诸如JQuery)和框架(诸如angularJS)的区别在何处。 简单而言,类库,解决的是代码或者是模块级别的复用或者对复杂度的封装问题,例如将一个解决复杂问题的功能模块封装成一个函数,提供一个简单的接口。库它是一种工具,它提供了很多封装好的方法,用与不用取决于我们自身,即使用了也不会影响我们呢的代码结构。 而框架,更多的是对模式级别的复用和对程序组织的规范。这里的模式是指比如MVC,为了实现M和V的解耦,把复杂的耦合关系由经常变化的业务代码转移到不经常变化的框架内部消化

前端工程化

馋奶兔 提交于 2020-01-04 00:25:23
前端架构: 1.前端工程化 web应用复杂度的增加,特别是单页面应用的风靡。组件化,工程化,自动化成了前端发展的趋势。或者说一线的互联网公司就是这么做的。 每个前端团队都在打造自己的前端开发体系,这通常是一个东拼西凑,逐渐磨合的过程,在技术发展日新月异的今天,这样的过程真的是不可抽象和复制的么?本文希望能够通过系统的拆解前端开发体系为大家提供体系设计思路参考。 前端工程的3个阶段 第一阶段: 库/框架选型 Animate.css jQuery vue.js underscore.js React.js Backbone.js Bootstarp zepto.js jade normalize.css compass Angular.js 解决开发效率 第二阶段: 简单构建优化 选择构建工具,对代码进行压缩,校验,之后再以页面为单位进行简单的资源合并。 第三阶段: JS/CSS模块化开发 解决维护效率 js的模块化方案 ADM/CDM/UMD/ES6 Module css的模块化:less,sass。 第四阶段: 前端是一个技术问题较少,工程问题较多的开发领域 当我们要开发一款完整的Web应用时,前端将面临更多的工程问题,比如: - 大体量:多功能、多页面、多状态、多系统; - 大规模:多人甚至多团队合作开发; - 高性能:CDN部署、缓存控制、文件指纹、缓存复用、请求合并、按需加载

黑马程序员:从零基础到精通的前端学习路线

微笑、不失礼 提交于 2020-01-04 00:16:09
黑马程序员:从零基础到精通的前端学习路线 随着互联网的深入发展,前端开发工程师一跃成为市场上非常抢手的人才。很多同学,包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图,很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实,前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张,内容虽多但有迹可循,只要循序渐进就不怕学不好前端! 那么前端开发到底需要学什么?应该怎么学?接下来黑马程序员前端学院教你如何从零基础学习前端。 一、前端开发入门 在入门阶段,你首先要学会最基本的技能:根据UI的设计稿,实现HTML的静态页面制作。这就要求你得掌握HTML、CSS页面布局排版、样式美化等技能。 在这个阶段你需要学习: 1、HTML+CSS基础 掌握HTML的标签使用、排版技巧、CSS的布局定位、样式美化、浏览器兼容性。 2、JavaScript基础 掌握JS的基本语法、条件、语句、循环等,学会常用算法,增强逻辑性。 3、常用的前端工具 比如Webstrom、Sublime、Dreamweaver等。掌握其快捷键设置等技巧,可快速提高开发调试效率。 这个阶段的学习难度相对不高,学完这些之后,我们已经能完成静态页面的制作。当然,这只是入门,如果你想用这些技能找工作的话还是比较困难的。 二、前端开发初级 在接下来的这一个阶段

博客初心源于前端攻城狮

十年热恋 提交于 2020-01-04 00:15:28
初始博客的初衷源于“前端攻城狮”,有人很疑惑为啥因为它呢?那就让我们一起来了解“前端攻城狮”吧! 首先,前端攻城狮是取得前端工程师的谐音!它是一个职位,对于这个职位有几个字可以概括:高薪,有前景,累,苦逼。 前景: 这个职位是近五年才兴起的一个职位,在之前是被鄙视的一个!有句话说得好风水轮流转,现在这个职位风生水起了,它的市场是可以说是供不应求! 如何了解前端?    前端是做什么的?   --- 产品经理(PM或者叫PD)根据可行性调研后提需求,然后和视觉(UE)确定交互视觉稿,由前端和后端进行开发。后端负责数据和接口设计,前端负责页面呈现和交互功能    前端工程师要会哪些东西?   ---前端不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等       以上只是初步的说下这个职位...... 来源: https://www.cnblogs.com/rainheader/p/4573690.html

淘宝的D2前端开发论坛

跟風遠走 提交于 2020-01-04 00:13:38
自从去年12月份淘宝UED(User Experience Design)团队首次发起一个名为D2的前端开发论坛,第一届仅仅过去3个月,又宣布下个月在北京召开第二届的D2,效率不可说不高。 D2(Designer and Developer)前端技术论坛(简称D2),为国内前端开发者和网站设计师提供一个交流的机会,一起分享技术的乐趣,探讨行业的发展,以技术会友。这个论坛主要关注于讨论各种前端技术的发展与实践,包括JavaScript、ActionScript、CSS、xHTML等“传统”技术与Adobe AIR、Google Gears等“新兴”技术。 第一届是在杭州举行的,主题为: 《前端技术:未来一两年的发展与实践》。 第二届将在4月26和27日举行,主题为:“ 现代前端技术在网站中的应用 ”。 目前很多公司可能由于成本或资源的限制,大部分UI上的工作都由网站开发人员兼任了,很少有专门的美工,UI开发工程师。但是UI却是客户(包括公司高层或投资者,他们只看结果的)最关注的地方,用我们项目组的时髦话说就是要“外部简单内部强大复杂无比”。 有关淘宝UED团队的Blog,可以访问: http://ued.taobao.com/blog/ 相关文章: 12月18日,前端开发论坛“D2”邀请函 第一届D2前端技术论坛(照片、讲稿、视频) 第二届D2前端技术论坛将在北京举行 来源:

如何成为一名优秀的前端工程师 (share)

谁说胖子不能爱 提交于 2020-01-04 00:05:57
发现一篇不错的博文,和大家分享一下,为有志成为一名优秀前端工程师的童鞋们提供一个参考。 :)~ 本文来源: http://www.biaodianfu.com/what-makes-a-good-front-end-engineer.html 一、技术的必须的 作为一名最基础的前端工程师你必须掌握HTML、CSS和JavaScript。三者必须同时精通,类似我这样对前端知识一知半解的,一遇到问题就停下工作就四处搜索解决方案的,首先就算不上一个合格的前端人员。像我这样的如果当了前端工程师那工期肯定是不能保证的。合格的前端工程师第一要学会的就是在没有任何外来帮助的情况下(包括搜索引擎),能够完成大多数任务。 以下知识点是作为一个前端工程师必须了解和熟悉的: DOM结构 ——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。 DOM操作 ——怎样添加、移除、移动、复制、创建和查找节点。 事件 ——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。 XMLHttpRequest ——这是什么、怎样完整地执行一次GET请求、怎样检测错误。 严格模式与混杂模式 ——如何触发这两种模式,区分它们有何意义。 盒模型 ——外边距、内边距和边框之间的关系,IE < 8中的盒模型有什么不同。 块级元素与行内元素 ——怎么用CSS控制它们

Web前端知识技能大汇总

可紊 提交于 2020-01-04 00:04:47
项目起源   还记得@jayli 的这幅前端知识结构图么。   图片的形式具有诸多的不便。缺失源图的我们,无法为此图贡献些什么,随着时间的迁移,或许有些技术点会发生改变,所以有了这个GitHub项目。我们可以通过协作的方式来共同维护这个项目。Git的历史记录也可以见证前端行业的一些变迁。    可视化效果  前端开发知识结构 前端工程师 浏览器 IE6/ 7 / 8 / 9 / 10 / 11 (Trident) Firefox (Gecko) Chrome / Chromium (Blink) Safari (WebKit) Opera (Blink) 编程语言 JavaScript / Node.js CoffeeScript TypeScript 切页面 HTML / HTML5 CSS/CSS3 Sass / LESS / Stylus PhotoShop / Paint.net / Fireworks / GIMP / Sketch 开发工具 编辑器和IDE VIM / Sublime Text2 Notepad++ / EditPlus WebStorm Emacs EmacsWiki Brackets Atom Lime Text Light Table Codebox TextMate Neovim Komodo IDE / Edit Eclipse Visual