web前端开发

Web前端开发标准规范总结

蓝咒 提交于 2020-02-12 20:51:39
Web前端作为开发团队中不可或缺的一部分,需要按照相关规定进行合理编写(一部分不良习惯可能给自己和他人造成不必要的麻烦)。不同公司不同团队具有不同的规范和文档。下面是根据不同企业和团队的要求进行全面详细的整理结果。备注:实际开发请以本公司的规范为标准。 A.基本原则 符合web标准(UTF-8,HTML5),语义化html(HTML5新增要求,减少div和span等无特定语义的标签使用),结构表现行为分离(HTML-CSS-JS代码分离,不同行为代码高内聚低耦合),兼容性优良(早期版本浏览器兼容,移动端和PC端设备兼容).页面性能方面(减少请求次数,例如使用精灵图和sass语法),代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度(减小repaint和reflow). B.文件命名规范 1、html,css,js,lib,images文件均存放至项目的目录中。如果使用相关前端框架,根据框架的文件格式进行合理布局。 2、所有文件夹及文件使用英文命名(避免使用中文路径)。 3、html文件:入口文件使用index.html。如果有对应的设计组设计原稿,需要将对应的设计稿和html文件命名一致并合理存放。 4、css文件命名:后缀.css。通用initial.css,初始化base.css,首页index.css,其他页面按照对应的html命名。 5、Js文件命名:英文命名

合格的Web前端工程师需要具备哪些技能-好程序员

我怕爱的太早我们不能终老 提交于 2020-02-12 15:18:49
  合格的Web前端工程师需要具备哪些技能-好程序员,互联网的发展,让web前端发生了翻天覆地的变化,web前端开发工程师可以让网页内容变得更加生动,为用户带来更好的体验。那么,web前端好学吗?作为一个合格的Web前端工程师,需要具备哪些技能呢?下面就来和小编一起看一看吧! 1、HTML5 HTML是超级文本标记语言,是为“网页创建和其他可在网页浏览器中看到的信息”设计的语言。HTML5是由万维网发布的最新的语言规范,是开放的Web网络平台的奠基石,所以做Web前端,精通HTML5是必须要掌握的一项技能。 2、CSS3 CSS即层叠样式表(Cascading StyleSheet)。在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。 CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括:盒子模型、列表模块、超链接方式、语言模块 、背景和边框 、文字特效 、多栏布局等。CSS3对于Web前端整个页面的设计是必备的技能。 3、JavaScript JavaScript一种直译式脚本语言,是一种动态类型、弱类型

新手在学习web前端过程中会遇到哪些困境

懵懂的女人 提交于 2020-02-12 12:22:21
刚刚学习 web 前端的新手在学习过程中或多或少都会遇到很多问题,下面和 小编一起来看看阻挡新手在学习 web 前端过程中的困境都有哪些,希望对正在学习的你能有所帮助。 一、 入门 web 前端时的一些困境 1 、因一些基础算法、数据结构理论不扎实导致一些编程思维难于理解。 比如原型链,如果清楚数据结构中链表结构,那么这个东西不难理解,再比如哈希值,懂得数据结构中哈希表,哈希值也就迎刃而解。 2 、计算机体系结构、操作系统理论、网络理论不扎实导致到后期一些东西难于理解。 比如有同学从前端学习入手,后来学习 node 开发,在 I/O , 进程、线程、 IPC 、线程锁方面有些概念就比较难于理解,而导致不能很好得使用 node 的 api 。 3 、前端整体体系架构没有做过深入思考。 导致用会用,但不知道为什么用,用另外一个有什么区别。 4 、学习环境中无高手。 没有高手能够指导自己进入下一个层次。 5 、有意识但是没有行动 我的网盘收集了一堆资料或者一堆视频,然后就没有然后了。 二、 如何才能快速入门前端 1 、学习东西,自学是一种途径,然而在自学的过程中,很多人处于不知道自己不知道的状态。 2 、另一种是跟着高手,开阔视野,达到知道自己不知道的境界,从而有方向,在短时期内进入到一个新的境界,节约时间成本。 来源: https://www.cnblogs.com/coffees/p

在web前端学习中需要注意哪些方面

故事扮演 提交于 2020-02-12 12:19:54
Web 前端技术已经成为了很多互联网企业备受重视的方向之一,同时,也吸引了很多人投身到 web 前端开发的行业中,这其中,有不少人是零基础跨行而来,对于他们来说,参加 web 前端培训是他们快速入行的捷径。那么,在 web 前端学习中需要注意哪些方面呢?下面 小编给大家分析一下。 一、夯实基础 无论学习哪门知识都要有坚实的基础。 Web 前端开发工程师不仅要掌握基本的 Web 前端开发技术,网站性能优化、 SEO 和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及熟练掌握理论层面的知识。 Web 前端的前期学习相对于其它语言来说相对简单,所以掌握起来也相对容易一些。 二、重视细节 孔子曰: “成大业若烹小鲜,做大事比重细节。”很多 web 前端的初学者只注重速度不注重质量,从而忽视了一些必不可少的细节。诸如:代码的命名规范、给代码加备注、代码的简洁等。这些小细节看似不重要,但决定了整个项目的好坏。而自身能力的提升正是通过这些细节来体现的。 三、优化布局 利用 HTML5 做网站时,关键在于注重网站的布局。好的网站布局不仅能够给用户直观的体验、展现企业的形象。还便于 SEO 进行搜索引擎优化,提升企业在搜索引擎中排名,以获取更所的浏览量。因为如果网站排名靠后或者没有排名。就不能让更多的人了解一家公司,更不用谈盈利了。想要成为优秀 web 前端开发者

web前端工程师不同级别分别掌握哪些技能

末鹿安然 提交于 2020-02-12 11:17:03
随着大前端时代的到来,移动互联网颠覆了PC互联网。接下来,前端将颠覆原生App世界。而近几年,前端技术能力的值钱程度很突出,名列前茅。这正代表了前端技术的当前行情。前端工程师一般分为初级工程师、中级工程师、高级工程师、架构师或技术经理角色。不同级别的web前端工程师都应该掌握哪些知识呢 初级前端工程师:能熟练使用html、css、js 主要工作还是搭建静态页面,主要工作可能是给一些工作做企业官网居多(个人猜测)。进阶的知识的话就是响应式这一块了,一套代码能适配pc+手机是初级前端工程师的进阶, 中级前端工程师:作为一名中级前端工程师的话,除了上面的以外,还需要会使用一些框架之类的东西,像bootstrap、jquery之类的。进阶的知识应该是ajax这一块了,当然ajax并不难,了解怎么与后台交互是学习ajax的关键点, 高级前端工程师:想成为高级前端工程师?首先要学习的就是前端工程化,推荐的几个进阶框架是angular.js、vue-cli、react 。那我本人比较推荐学习的是vue,至于为什么…肯定是因为火,第二是因为简单好用。它和jquery有着很大区别。vue是数据控制页面渲染及状态,而jquery是DOM节点控制渲染,vue渲染页面更容易更优雅。vue能够把前端项目彻底工程化,有配置文件、可以安装第三方模块、配合webpack打包、可以实现模块化开发…等等

说说前端这些事

笑着哭i 提交于 2020-02-12 05:41:45
好几天没有写博客了,最近在学习 backbone 为下一个项目做准备。 想想我从.net转向 前端工作已经有半年了(2014-3月份开始),我对 javascript这门语言本身是非常喜爱的,而且我也对 APP开发比较感兴趣,所以也不知道是因为巧合还是怎么的我就稀里糊涂的进入了 webApp 前端的开发工作! 想想在从事此工作之前我也很彷徨过,有一度的时间,我想放弃过从事IT行业的工作,但是始终自己没有那个勇气。 再说说目前我看过的一篇报道,2017年,穿戴式设备将会普及全世界 70%,想想到那时候,人民全是带着手表,不再玩手机,那 webApp还存在吗?毕竟一个穿戴设备可不会支持浏览器。 好了,说的太多的废话,下面讲讲我从事半年 web 前端所终结的经验。 记得,从来公司那会,公司一个项目说直接给我做,当时真是一头雾水,而且感觉压力很大啊,比较从未有过这方面的经验,就赶鸭子上架了,当时我们的项目经理做技术选型的时候说用JQM框架,还好,在2013年的时候,我特地买过一本书了解过前端的框架,书中主要讲的是:Jquery Mobile和senche touche 还有phonegap打包。 从UI那边接过来 PSD图之后,就让我切图,当时就泪流满面了,我哪会切图啊。%>_<%,经过一番讨教和学习终于学会了前端最基本的技能---切图。 然后我就开始做了,因为要做手机端啊

关于互联网应用前端架构的一些思考

ぐ巨炮叔叔 提交于 2020-02-11 16:31:11
一、互联网应用的分类 讨论前端架构之前,首先要弄清楚互联网应用的类型,明确了自己的产品所属的类型才能打造属于自己的架构。对互联网产品进行分类,网上有很多不同的观点。我觉得分类是多维度的,但是按照交互以及功能的复杂程度来分类是比较客观的。因此,我比较认同淘宝玉伯在关于前后端开发模式中对应用的分类,以下引用玉伯的观点: 前端涉及的产品形态在业界可分为两大类:Web Pages 和 Web Apps 。 Web Pages 是浏览类的,用户主要是来看的:以内容展现为主,辅有少量交互。前端提供基础类库,开发工具化、外包化。典型:首页、营销活动、频道等等。 Web Apps 则以交互为主,用户主要是来用的。可分为两种: 体验类:包含大量交互,同时用户体验很重要。比如 GMail, 支付宝收银台、淘宝购物车等等。 功能类:包含大量交互,以功能为主,体验不是第一位的。比如后台系统、认证流程等。 Web Apps 的开发,前端投入了大量人力,但前端资源依旧存在潜在的瓶颈(比如新增加一条业务线时,很可能无前端去支持)。现有前后端配合的开发模式,沟通协作成本偏高,可维护性不够方便。在现有的研发模式下,前端自身的价值点也很难体现出来(花了大量时间在业务上,但得到的认可不多)。 最核心的问题,依旧是前后端的解耦:如何让前后端的工作彼此更独立,如何让更合适的人做更合适的事,把事情做得更好。 对于体验类

前端面试集锦(1-24)

ぃ、小莉子 提交于 2020-02-09 13:06:35
目录 1、id选择器? 2、类选择器 3、元素选择器 4、通用选择器 5、简述什么是浏览器事件流 6、如何用CSS隐藏一个元素? 7、一行CSS实现padding上下左右分别为1,2,3,4px? 8、前后端分离的基本原理? 9、如何创建响应式布局? 10、你使用过那些前端框架? 11、什么式ajax请求?使用jQuery和XMLHttpRequest对象实现一个ajax请求? 12、如何在前端实现轮询? 13、如何在前端实现长轮询? 14、vuex的作用? 15、vue中的路由拦截器的作用? 16、axios的作用? 17、列举vue的常见指令? 18、简述jsonp及其原理? 19、简述cors及其原理? 20、看js代码写结果? 21、看js代码写结果 22、看js代码写结果 23、看js代码写结果 24、看js代码写结果 1、id选择器? #id /*id选择器 #号*/ #d1 { /*将id为d1的标签内部文本内容改成绿色*/ color: green; } 2、类选择器 .id /*类选择器 点号*/ .c1 { /*让所有具有c1类属性值的标签内部文本变成蓝色*/ color:blue; } 3、元素选择器 /*标签选择器 元素选择器*/ div { /*将页面上所有的div标签内部的文本变成红色*/ color: red; } 4、通用选择器 * /*通用选择器

想成为一个Web前端开发工程师,需要掌握的知识总结

岁酱吖の 提交于 2020-02-06 22:36:50
前端工程师已经成为目前互联网企业极具竞争力的人才,企业不断提升薪资水平为了招聘到优秀的Web前端开发工程师。因此,越来越多的人想要学习Web前端。那么呢?Web前端的学习路线是什么? 加扣裙:768976403 免费获取学习资料 想成为一个Web前端开发工程师,需要掌握的知识有很多,大概包括:HTML、CSS、JavaScript、XML、JSON、服务器脚本语言(PHP,ASP,.NET,JSP等等)、jquery框架、页面性能优化、SEO站内优化、开放服务API接入、浏览器兼容性调试、W3C规范等等。 1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、WebApp页面布局。学习目标是完成PC端网站布局,WebApp页面布局,还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。 2、JavaScript高级课程、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等。学习目标是可以通过原生JavaScript开发交互功能,实现网站上的交互效果,以及模块化应用等,实现完整的前端工程。 加扣裙:768976403 免费获取学习资料 3、Web前端框架、混合开发

前端需要掌握的知识

ぐ巨炮叔叔 提交于 2020-02-05 20:59:18
一.基础知识 HTML --- 定义了网页的内容。 W3school CSS --- 描述了网页的布局。 参考手册 HTML5 ---是下一代的 HTML。 W3school CSS3 ---是最新的 CSS 标准。 参考手册 JavaScript --- 设计了网页的行为。 菜鸟教程 jQuery --- 是由JavaScript语法写成的一个插件库。 API Bootstrap --- 来自 Twitter,是目前最受欢迎的前端框架,响应式 CSS 能够自适应于台式机、平板电脑和手机。 Bootstrap4 二.进阶学习 node.js(npm)--- 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 菜鸟教程 Sass --- css预处理器语言,支持变量、mixin,继承等功能,是基于Ruby的。 Scss中文网 , Sass本站教程 Vue.js --- 不是一个框架,只是聚焦图层,是一个构建数据驱动的web界面的库。通过简单的API提供高效的数据绑定和灵活的组建系统。 菜鸟教程 sea.js --- js模块加载器。 三.工程自动化(前端构建工具) gulp --- 是工具链、构建工具,可以配合各种插件做js压缩,css压缩,less编译 替代手工实现自动化工作。 gulp中文网 , gulp入门 webpack --- 是文件打包工具