当前位置:首页 » 网页前端 » 淘宝前端架构设计
扩展阅读
webinf下怎么引入js 2023-08-31 21:54:13
堡垒机怎么打开web 2023-08-31 21:54:11

淘宝前端架构设计

发布时间: 2022-08-15 17:56:03

① 想转行,UI设计,网页前端开发,淘宝美工,哪个好些,为什么然后有

Web前端:
Web前端开发工程师,除了主要职责外,还要为网站上提供的产品和服务实现一流的Web界面,优化代码并保持良好兼容性;
Web前端表现层及与前后端交互的架构设计和开发;
配合后台开发人员实现产品界面和功能;
利用各种Web技术模拟开发产品原型;
Web新技术调研和资讯整理;
精通HTML/XHTML、CSS,熟悉页面架构和布局,对Web标准和标签语义化有深入理解;
熟悉Ajax、、DOM等前端技术,掌握面向对象编程思想。
UI设计:
UI即User Interface(用户界面)的简称。UI设计是指对软件的人机交互、操作逻辑、界面美观的整体设计。好的UI设计不仅是让软件变得有个性有品位,还要让软件的操作变得舒适简单、自由,充分体现软件的定位和特点。
web前端:主要是和代码打交道,还要涉及到ps的一些基本操作。
近几年,web前端市场需求特别大,无论是薪资待遇,还是未来的发展,都相当可观。
UI设计:主要是和图形界面打交道,还要有审美。最好是有艺术细胞的人来做。
所以,两个都谈不上好不好做,就看你喜欢编代码,还是喜欢搞设计了。

② 2015年有哪些比较优秀的前端框架

作者:匿名用户
链接:http://www.hu.com/question/39377015/answer/81017680
来源:知乎
着作权归作者所有,转载请联系作者获得授权。

此榜单根据github上star数作为排名依据,一个人力量有限,如果收集有遗漏欢迎补充。
1、名称:Bootstrap
类别/语言:HTML、CSS、JavaScript
创建者: Twitter
人气:在Github上有91007 stars
描述:主流框架中毋庸置疑的老大,Bootstrap 是基于 HTML、CSS、JavaScript 的,它简洁灵活,使得 Web 开发更加快捷。
核心概念/原则: RWD 和移动优先制。
浏览器支持: Firefox, Chrome, Safari, IE8+ (你需要 Respond.js for IE8)
响应式: Yes
模块化: Yes
官网地址:Bootstrap · The world's most popular mobile-first and responsive front-end framework.
Github地址:twbs/bootstrap · GitHub
2、名称:html5-boilerplate
类别/语言:HTML、CSS、JavaScript
创建者:Paul Irish
人气:在Github上有32,349 stars
描述:HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。
核心概念/原则:响应式
浏览器支持:Firefox, Chrome, Safari, IE8+,Edge,Opera
预处理器:None
响应式:Yes
模块化:Yes
官网地址:HTML5 Boilerplate: T
Github地址:h5bp/html5-boilerplate · GitHub
3、名称:Meteor
类别/语言:HTML、CSS、JavaScript
创建者:immir
人气:在Github上有31,092 stars
描述:Meteor是新一代的开发即时web应用的开源框架,它能帮助你在最少的时间内完成开发。
核心概念/原则:响应式
预处理器: Less
响应式: Yes
模块化: Yes
官网地址:Meteor
Github地址:meteor/meteor · GitHub
4、名称:Semantic UI
类别/语言:HTML、CSS、JavaScript
创建者: Jack Lukic
人气: 在Github上有22,325 stars
描述: “基于自然语言有效原则的UI组件框架”
核心概念/原则: 语义,标签的矛盾性、响应式
浏览器支持:Firefox, Chrome, Safari, IE10+ (IE9 with browser prefix only), Android 4, Blackberry 10。
预处理器: Less
响应式: Yes
模块化: Yes
官网地址:Semantic UI
Github地址:Semantic-Org/Semantic-UI · GitHub
5、名称:Foundation
类别/语言:HTML、CSS、JavaScript
创建者: ZURB
人气: 在Github上有22,206+ stars
描述: “世界上最优秀的响应式前端框架”
核心概念/原则: RWD 、手机优先、语义的
浏览器支持: Chrome, Firefox, Safari, IE9+; iOS, Android, Windows Phone 7+
预处理器: Sass
响应式: Yes
模块化: Yes
官网地址:Foundation | The most advanced responsive front-end framework in the world.
Github地址:zurb/foundation-sites · GitHub

6、名称:Materialize
类别/语言:CSS
创建者:Google
人气:在Github上有15,288stars
描述:Materialize是一个个基于材料设计的一个现代化的响应式前端框架。他们做了最繁重的工作,为您提供默认的样式,结合了您的自定义组件。此外,他们还改进动画和过渡,为开发人员提供流畅的体验。
核心概念/原则:响应式
预处理器:Sass
响应式:Yes
模块化:Yes
官网地址:Documentation
Github地址:Dogfalo/materialize · GitHub
浏览器支持:Chrome 35+, Firefox 31+, Safari 7+, IE 10+
7、名称:Pure
类别/语言:CSS
创建者: Yahoo
人气: 在Github上有13,161 stars
描述: “您可以在每一个web项目中使用的一组小的和响应式的CSS模块”
核心概念/原则:SMACSS,极简的.
浏览器支持:Firefox的最新版本, Chrome, Safari; IE7+; iOS 6.x, 7.x; Android 4.x
预处理器: None
响应式: Yes
模块化: Yes
官网地址:http://purecss.io/
Github地址:yahoo/pure · GitHub
8、名称:Vue
类别/语言:CSS、JavaScript
创建者:尤雨溪
人气:在Github上有12,214 stars
描述:Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。
核心概念/原则:响应式
浏览器支持:Firefox, Chrome, Safari, IE9+,Android 4.2+,iOS 7+
预处理器:None
响应式:Yes
模块化:Yes
官网地址:vue.js
Github地址:vuejs/vue · GitHub
9、名称:Skeleton
类别/语言:CSS、JavaScript
创建者:Dave Gamache
人气:在Github上有10,622stars
描述:Skeleton 是一个小的 JS 和 CSS 文件的集合,可帮你快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。
核心概念/原则:响应式
浏览器支持:Firefox, Chrome, Safari, IE10+,Opera
预处理器:None
响应式:Yes
模块化:Yes
官网地址:Skeleton: Responsive CSS Boilerplate
Github地址:dhg/Skeleton · GitHub
10.名称: Amaze UI
类别/语言:HTML、CSS、JavaScript
创建者:云适配
最后更新时间:2015年12月
人气:在Github上有6425 stars
描述:国内首个开源HTML5跨屏前端框架,中文排版支持更优、本土化组件丰富。
并在2015年11月推出基于 React.js 的专属移动端 Web 组件库Amaze UI touch。
核心概念/原则:组件化、移动优先、轻量级、高性能。
浏览器支持: Firefox, Chrome, Safari, IE8+
响应式: Yes
模块化: Yes
官网地址:Amaze UI | 中国首个开源 HTML5 跨屏前端框架
Github地址:amazeui/amazeui · GitHub
11、名称:UIkit
类别/语言:HTML、CSS、JavaScript
创建者: YOOtheme
人气: 在Github上有6,050+ stars
描述: “一个轻量级的和模块化的前端框架,用于快速开发和功能强大的web接口。”
核心概念/原则:RWD, 手机优先.
预处理器: Less, Sass
响应式: Yes
模块化: Yes
官网地址:UIkit
Github地址:uikit/uikit · GitHub
浏览器支持: Chrome, Firefox, Safari, IE9+
12、名称:Yui
类别/语言:CSS、JavaScript
创建者:Yahoo
人气:在Github上有3,200+ stars
描述:Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证
核心概念/原则:响应式
预处理器: None
响应式:Yes
模块化:Yes
官网地址:http://yuilibrary.com/
Github地址:yui/yui3 · GitHub
浏览器支持:Firefox, Chrome, Safari, IE10+,Opera
13.名称:kissy
类别/语言: JavaScript
创建者:淘宝前端
最后更新时间:2015年7月
人气:在Github上有2035 stars
描述:KISSY 是一款跨终端、模块化、高性能、使用简单的 JavaScript 框架。
框架大小: 37 KB
核心概念/原则: 模块化,跨终端,高扩展性
模块化: Yes
官网地址:KISSY - A Powerful JavaScript Framework
Github地址:kissyteam/kissy · GitHub
14.名称:MUI
类别/语言: HTML、CSS、JavaScript
创建者:Dclould
最后更新时间:2016年1月
人气:在Github上有2012 stars
描述:MUI-最接近原生App体验的前端框架框架。
核心概念/原则: 多端发布、高性能
响应式: NO
模块化: Yes
官网地址:MUI-最接近原生APP体验的高性能前端框架
Github地址:dcloudio/mui · GitHub
15.名称:Arale
类别/语言: JavaScript
创建者:支付宝前端
最后更新时间:2015年7月
人气:在Github上有1252 stars
描述:Arale 是一个开放、简单、易用的前端基础类库。
框架大小:未知
核心概念/原则: 开放、简单、易用
浏览器支持:Firefox, Chrome, Safari, IE6+
响应式: Yes
模块化: Yes
官网地址:Arale - 随心构建互联网应用
Github地址:aralejs/aralejs.org · GitHub

16.名称:JX
类别/语言:Javascript
创建者:腾讯前端
最后更新时间:2015年12月
人气:在Github上有952 stars
描述:JX 是模块化的非侵入式Web前端框架,特别适合构建和组织大规模、工业级的Web App。
框架大小: 未知
核心概念/原则: 保持最优执行效率
浏览器支持: 兼容主流浏览器
模块化: Yes
官网地址:JX - 腾讯 Web 前端开发框架
Github地址:AlloyTeam/JX · GitHub
17.名称:GMU
类别/语言:HTML、CSS、JavaScript
创建者:网络前端
最后更新时间:2015年12月
人气:在Github上有940stars
描述:GMU是基于zepto的mobile UI组件库,提供webapp、pad端简单易用的UI组件! Web App。
核心概念/原则: 简单易用、轻量级
模块化: Yes
官网地址:http://gmu..com/
Github地址:fex-team/GMU · GitHub
18.名称:ZUI
类别/语言: HTML、CSS、JavaScript
创建者:蝉道
最后更新时间:2015年7月
人气:在Github上有616 stars
描述:开源HTML5前端框架
核心概念/原则:简单易用、轻量级、易于定制
浏览器支持:未知
官网地址:ZUI - 开源HTML5跨屏框架
Github地址:easysoft/zui · GitHub
19.名称:Clouda Touch.js
类别/语言:JavaScript
创建者:网络云
人气:在Github上有387 stars
描述:Touch.js是移动设备上的手势识别与事件库,也是在网络内部广泛使用的开发。
核心概念/原则: 无入侵设计、媲美原生的交互、极简的API
模块化: Yes
官网地址:Touch.js
Github地址:Clouda-team/touch.code..com · GitHub
20.名称:Arkui
类别/语言:HTML、CSS、JavaScript
创建者:豆瓣
人气:在Github上有129 stars
模块化: Yes
官网地址:arkui
Github地址:mockee/arkui · GitHub

③ 淘宝前端用的什么框架

  • V- Layout 是阿里出品的基础 UI 框架,用于快速实现页面的复杂布局,在手机天猫 Android版 内广泛使用

淘宝、天猫一直致力于解决 页面动态化的问题

在2017年的4月发布了v1.0解决方案:Tangram模型 及其对应的Android库vlayout,该解决方案在手机淘宝、天猫Android版 内广泛使用

④ 前端开发工程师必读书籍有哪些值得推荐

1丶JavaScript入门
《JavaScript权威指南(第六版)》 ★★★★★
淘宝前端团队翻译的,看译者列表都是一堆大神。这本书又叫犀牛书,号称javascript开发者的圣经,网上对此书评价很多,大概意思都是说这本书是一本JavaScript文档手册,没有完整看过一遍此书的都不能算是一名合格的前端工程师。 我也是从这本书开始接触前端开发的,当时还是华章出版社的校园大使,免费申请到了这本书,可惜的是两年来我一直把它作为一本cookbook来查阅,一直没有好好通读一遍。个人感觉这本书还是写得枯燥了些,不过内容绝对是五颗星,无可挑剔!
2丶《JavaScript高级程序设计》 ★★★★★
又称红宝书,雅虎首席前端架构师,YUI的作者Zakas出品。虽然书名带了“高级”二字,但是讲得也很基础,而且行文风格很流畅,每一小节就像是一篇博客,读起来并不枯燥,个人感觉比上面那本犀牛书可读性更强。说到这里,也推荐大家多多关注作者的博客:NCZOnline - The official website of Nicholas C. Zakas ,上面也有许多高质量的博文。感觉这本书就像是作者平时的博文按照前端知识体系组织成了一本技术书。
作为初学者如果觉得上面两本书作为入门书来说太厚了,也可以看看这本,不厚,评价也很高,但是由于本人没看过,就不作过多评价了。
3丶《JavaScript编程精解》 ★★★★
用上下班时间看完的第三本书。看起来比较吃力,第五章函数式编程和第六章的面向对象编程很多都没看懂。全书游戏式的编程教程还是很有意思的。译者tom大叔名头很大,翻译的质量也只是中规中矩吧。不过,还是get到很多技巧!这本书的推荐语说这本书用来入门很好,但是个人认为初学者并不合适看这本书入门,作者在代码示例中不自觉得使用了一些高级用法,初学者看容易晕菜。听说最近出了第二版,加入了NodeJS的内容,这本书是开源的:Eloquent JavaScript
4丶《JQuery权威指南》 ★★★
错误很多啊,不过其中的语法+示例的形式,确实很适合初学者。但是错误实在太多了,而且有些语句还不通顺,看着很累啊,只能说写得好代码的人,书不一定写得好。

⑤ web前端未来该怎么样提前发展

随着互联网技术的不断发展和进步,前端技术更迭非常迅速,不少想要学习的朋友会担心Web前端还有前景吗?

趋势一:移动开发优先

现在不管大人还是小孩基本没事的时候都是人手一部手机来消遣时间,并且以前很多在PC端做的事情,手机端现在已经可以完全替代,手机比电脑更便捷,所以移动开发会越来越受市场欢迎。响应式设计显然是目前Web前端开发领域的主要趋势之一,其理念就是:集中创建页面的图片排版大小,可以自适应的根据用户使用的环境进行相应的布局。

趋势二:人工智能高速发展

AI的强势崛起,与Web的碰撞,使得网页更加强大,为网站主和用户同事带来价值。提供网络主机服务的Wix,是这一领域的领头羊。它提供了一个过程来询问用户一些问题,然后使用一个基于AI的平台,根据用户的回来提供给用户最符合他的需求的Web设计。

趋势三:单页站点多级应用

现在用户对于点击“下一页”的字眼有的厌烦,更加喜欢用滚屏方式浏览网页,层层相套的子页面形势逐渐被淘汰。这一趋势将简化互联网并带来更迷人和身临其境的网页浏览体验。

趋势四:流行的虚拟现实

VR现在依旧是很火的一个趋势,并且Mozilla和Google投资开发VR和Web之间的API。越来越多的VR应用程序相继问世。Facebook取消了他们的“专利”条款,使得React使用人数和开发人员的满意度达到空前的高度,react一度成为主流三大框架之一。

无论从哪方面来看,未来Web前端发展前景都非常可观,对于零基础的人来说,学习Web前端是一个不错的选择。

⑥ 做前端,如淘宝或其它网站,网页中其中一个功能,怎么解析代码,知道这个功能用到哪些代码。求具体

HTML,CSS,JS,大多是这几种,其实不知你说啥,要看网页代码,浏览器里有查看源文件

⑦ 类似淘宝用php做前端,java做后端的架构是怎样的

使用PHP做前端是说web服务,接口等用PHP编写,后台的数据逻辑用Java做

⑧ 淘宝有个前端开发用的素材库网站叫什么

iconfont-阿里巴巴矢量图标库

功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

地址

⑨ 零基础学习网页制作,从何学起

有些小白可能对html会感到好奇,html是什么 ?其实html就是我们所说的前端开发,但是两者也是有区别的,html就是静态网页制作的意思,而前端开发也是做网页的,但是同时包括了js和h5等一些延伸的技能,所以理论上可以说html=网页制作=前端开发,但是html和前端之间又有区别。

3、你适不适合学习前端开发?

如果你已经有了传统web基础(css+div),那么是时候提升你的前端开发技能了…

如果你没有接触过web前端开发,那么如果你经常上网,冲浪,希望要了解互联网世界背后的故事,可以先从web前端开始了解,因为这是开启互联网世界大门的钥匙…

web前端JS课程的核心特点。

web前端课程的核心特点是:我们不仅仅要学会制作一个网页,一个特效。

更多的是我们要用web前端开发传统应用程序,我们做pc端,移动端,各种响应式,web 游戏,web 企业管理系统,web 移动程序,开发一个大规模项目,html5游戏,甚至用js开发传统高级语言才能做的数据库交互,不用后台语言,就靠我们js做后台,流行大趋势……


4、课程模块介绍。

未来需要什么,我们就需要学什么:

模块1:基础入门阶段;

模块2:web移动开发– html5、 css3、

模块3:html 5 游戏— html5 、canvas;

模块4:用js去做传统java 、.NET、 PHP才能做的数据库操作,服务器编程。— ajax 、node.js;

模块5:大型BS、云计算、项目开发(比如淘宝,京东)–面向对象、设计模式、大型项目分层架构思想(比如MVC,MVVM)、js框架、web前端架构、js组件;


5、学习方法、薪资目标。

【两大基础,内外双修】

两大基础:js基础(蹲马步,基础中的基础–函数,事件,语句等)、面向对象(基础)。内外双修:

【内】掌握面向对象编程思维,模块化编程思维,大型项目分层编程思维,大型项目团队如何合作;

【外】学习一些前辈总结出来的最佳编程实践:设计模式,比如能够保证全局唯一的单例模式,创造万物的工厂模式,模拟现实中介的中介模式,代理模式,以及所有业界都在谈,都在吹,都在用的依赖倒置,依赖注入,面向切面编程等。

结语:年前,随着iPhone的兴起,iOS开发火爆中国。当年的行动者,如今已经成为百万富翁!今天,随着HTML5等WEB前端技术兴起,前端开发的大潮已经袭来!赶快行动,让青春不留遗憾,占领行业制高点,主动权就再你的手中