前端开发技术概述

Ｗｅｂ前端开发技术研究　

魏　娜　

（苏州经贸职业技术学院，苏州２１５００９）　

摘　要：阐述Ｗｅｂ前端开发相关技术等．主要聚焦于基于ｗｅｂ浏览器编程的前端开发技术和标　准，内容包括ＨＴＭＬ／ＸＨＴＭＬ、层叠样式表（ｃｓｓ）、文档对象模型（ＤＯＭ），ＪａｖａＳｃｒｉｐｔ、跨浏　览器开发、Ｆｉｒｅｆｏｘ扩展开发以及Ｗｅｂ站点设计与维护等。　

关键词：Ｗｅｂ前端开发；网站重构；ＨＴＭＬ；ＣＳＳ；ＪａｖａＳｃｒｉｐｔ　

０　引言　

２００５年以后，互联网进入Ｗｅｂ　２．０时代，各种类似　

桌面软件的Ｗｅｂ应用大量涌现．网站的前端由此发生　

了翻天覆地的变化　网页不再只是承载单一的文字和　

冈片．各种富媒体让网页的内容更加生动．网页上软件　

化的交互形式为用户提供了更好的使用体验．这些都　

是基于前端技术实现的　Ｗｅｂ前端开发技术是一个先易后难的过程．主要　

包括三个要素：ＨＴＭＬ、ＣＳＳ和ＪａｖａＳｃｒｉｐｔ，这就要求前端　

开发工程师不仅要掌握基本的Ｗｅｂ前端开发技术．网　

站性能优化、ＳＥＯ和服务器端的基础知识，而且要学会　运用各种工具进行辅助开发以及理论层面的知识．包　

括代码的可维护性、组件的易用性、分层语义模板和浏　

览器分级支持等　

１　网站重构　

随着Ｗｅｂ　２．０概念的普及和Ｗ３Ｃ组织的推广．网　

站重构的影响力正以惊人的速度增长。ＸＨＴＭＬ＋ＣＳＳ布　局、ＤＨＴＭＬ和ＡＪＡＸ像一阵旋风，铺天盖地席卷而来，　

包括新浪、搜狐、网易、腾讯、淘宝等在内的各种规模的　ＩＴ企业都对自己的网站进行了重构。　

●重构的目的　网站重构的本质是构建一个前端灵活的ＭＶＣ框　

架．即ＨＴＭＬ作为信息模型（Ｍｏｄｅ１），ＣＳＳ控制样式　（Ｖｉｅｗ），ＪａｖａＳｃｒｉｐｔ负责调度数据和实现某种展现逻辑　

（Ｃｏｎｔｒｏｌｌｅｒ）　同时，代码需要具有很好的复用性和可维　

护性　这是高效率、高质量开发以及协作开发的基　

础。　

ＤＨＴＭＬ可以让用户的操作更炫，更吸引眼球：　ＡＪＡＸ可以实现无刷新的数据交换．让用户的操作更流　

理论探讨

249作者简介：韩宇（1997—　），男，汉族，四川南充人。主要研究方向：web前端开发与vue框架。当前，随着信息技术的发展，我们已经进入到信息化时代，信息化网络技术已经广泛应用到社会生活的方方面面，极大地改变了人们学习、生活和工作的习惯。甚至很多时候，人们离开了网络技术的支持，很多工作就无法顺利开展。而Web前端开发技术是展现网页形态主要的技术方式，对于网络环境信息开发具有十分重要的作用，更是直接影响到对网络用户在信息传输以及个人服务等方面的体验。而作为互联网企业，提升用户服务体验是企业扩大自身影响力，实现自身健康发展的重要因素。因此，作为互联网企业，必须加强Web前端技术的开发。一、Web前端技术简析Web前端技术大致可分为：HTML、DOM、CSS和JavaScript这四种。（一）HTMLHTML是英文Hypertext Marked Language的缩写，是一种超文本标记语言，属于标准通用化标记语言的应用。因此，用HTML编写出来的超文本文档也被人们称为超文本文档。这种超文本文档可以独立于UNIX、WINDOWS等操作系统平台，并通过操作系统平台的浏览器得以识别。在实际操作中，技术开发人员可以根据超文本传输协议“HTTP”规则，使用Tag标签，利用浏览器将相关的文字、图片、影响、动画、视频及声音等内容显示出来。目前，随着Web技术的发展，HTML的版本也更新到了XHTML和HTML5，而且在应用方面也由过去的桌面终端逐渐应用到移动终端当中。（二）DOMDOM是Document Object Model的简写，是一种文档对象的模型。在实际应用中，DOM这种语言能以独立于平台的方式，对文本文档的内容和结构进行访问、修改。因此，DOM是对HTML和XML文档进行处理表示的常用方法。在最初阶段，开发人员将其作为一种实现JavaScript在不同浏览器之间进行移植的编程语言。但随着对该技术研究的深入，目前DOM技术应用的范围越来越广泛。通过运用该技术，能实现用户页面的动态变化，比如说将某一元素进行动态的显示或隐藏，同时还可以将该元素的属性进行改变，将其减少或增加，从而有效增强Web页面的交互性。此外，DOM技术已经成为Web系统页面设计三大组成元素“HTML”、“CSS”和、“JS”提供文档对象的模型支持。（三）CSSCSS也被称为层叠样式表，是Cascading Style Sheets的缩写。 这一技术的出现是为了满足Web系统页面设计开发的需求，因为当前的页面需求越来越多，设计开发者为了让HTML实现更多的页面复杂显示及功能，会使HTML变得越来越臃肿，同时该页面也变得越来越杂乱。而运用CSS技术，能对越来越臃肿的Web系统页面进行静态的修饰，同时还能配合其他的脚本语言对Web系统页面进行动态的修订，甚至进行格式化处理。可以说，CSS技术的出现及广泛应用，能为HTML提供了新样式描述，并定义了该网页中各元素显示的方式，真正解决了当前Web页面设计方面出现的问题。具体而言，CSS技术的样式定义十分丰富，能实现多页面的应用、层叠和页面压缩，同时还易于使用并修改。（四）JavaScriptJS是英文JavaScript的缩写，主要是指在页面设计中针对内置支持、动态、弱以及基于原型的直译式脚本语言，是以JavaScript引擎为浏览器重要的组成部分，目前被广泛用在网页客户端相关的动态功能的设计与开发上，能促进HTML网页的动态功能。同时，该技术也被广泛应用到服务器端相关设计的开发当中。在实际操作中，完整的JavaScript大致上包含ECMA Script基础、文档对象模型和浏览器对象模型三部分，具有基于对象、动态性、简单和跨平台性的显著特点。而且，JavaScript语言不需要终端服务器的支持，能在最大限度上减少当前网页服务器方面的负担，并实现异步JavaScript和XML的功能。二、Web前端技术开发的现状分析Web前端开发技术与计算机编程完全相反，门槛较低，比较容易入门。在实际生活中，任何技术人员都可以通过自主学习，逐渐掌握Web前端开发技术的知识，从而进入到该行业当中，从事web前端技术的开发工作。单着门技术入门虽然容易，但要想精通却很困难，很多技术人员一般都是停留在技术开发的初级阶段，往往缺乏后续的系统技术优化能力，从而影响到web页面的使用体验。此外，随着信息技术的更新换代，Web前端开发技术的行业规范与规定尚需要不断更新、探索。因此，作为技术开发人员，必须不断充实自己，进行技术的革新。三、结语综上所述，随着现代信息技术的发展，Web技术已经成为人们日常生活必不可少的组成部分，作为技术人员，必须重视前端技术的开发，更好地满足人们的使用需求，并促进行业的健康发展。参考文献：[1]喻会.基于网站制作的Web前端开发技术与优化策略分析[J].信息通信,2019(11):265-266.[2]孙仕云.WEB系统前端开发技术分析[J].通讯世界,2017(12):267-268.[3]李帮诚.Web前端开发技术与研究[J].电脑知识与技术,2016,12(29):47-49.摘　要：随着信息技术的发展，在大数据时代，人们对网站性能的要求越来越高。作为近年来兴起的能促进网站性能优化的Web前端开发技术，得到了人们的广泛关注。Web前端开发技术借助各种工具，能够支持代码的维护、组件易用、语义模板分层以及浏览器分级等网页的各种形态。文章就针对Web前端开发技术进行分析，以供参考。关键词：web；前端开发；技术分析Web前端开发技术分析韩　宇（四川轻化工大学，四川　宜宾　644000）

网页前端技术开发规范

1. 规范概述

1.1. 目的

为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。

1.2. 准则

符合web标准，语义化html，结构表现行为分离，兼容性优良。页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

2. 文件规范

2.1. 基本要求

1) 对页面中标签属性的值都需要用双引号包括起来

2) 所有页面编码均采用utf-8

2.2. 文件存放与命名规范

1) html，css，js，images文件均归档至《系统开发规范》约定的目录中；

2) html文件命名：英文命名，后缀.htm，同时将对应界面稿放于同目录中, 并要求与html文件同名，以方便后端添加功能时查找对应页面；

3) css文件命名：英文命名，后缀.css，共用base.css，首页index.css，其他页面依实际模块需求命名；

4) js文件命名：英文命名，后缀.js，共用common.js，其他依实际模块需求命名。

2.3. html书写规范

1) 文档类型声明及编码：统一为html5声明类型；编码统一为，书写时利用IDE实现层次分明的缩进；

2) 非特殊情况下样式文件必须外链至...之间；非特殊情况下JavaScript文件必须外链至页面底部；

3) 引入样式文件或JavaScript文件时，须略去默认类型声明，写法如下：

4) 引入JS库文件，路径或文件名须包含库名称及版本号及是否为压缩版，比如jquery-1.4.1.min.js；引入插件，文件名格式为库名称+插件名称，比如jQuery.cookie.js；

5) 所有编码均遵循xhtml标准，标签、属性、属性命名必须由小写字母及下划线数字组成，且所有标签必须闭合，包括br (), hr(

Web前端开发技术有哪些

Web前端开发技术有哪些?随着互联网的发展，web前端开发技术是越来越多，要求也越来越多。在这里小编为大家详细介绍一下web前端开发技术的三大要素。

Web前端开发技术包括三个要素：HTML、CSS和JavaScript，但随着RIA的流行和普及，Flash/Flex、Silverlight、XML和服务器端语言也是前端开发工程师应该掌握的。Web前端开发工程师既要与上游的交互设计师、视觉设计师和产品经理沟通，又要与下游的服务器端工程师沟通，需要掌握的技能非常多。这就从知识的广度上对Web前端开发工程师提出了要求。源代码教育是一家专业从事JAVA培训、PHP培训、WEB前端培训、UI设计培训的高科技IT教育培训机构。致力于打造中国知名IT教育品牌。如果要精于前端开发这一行，也许要先通十行。然而，全才总是少有的。所以，对于不太重要的知识，我们只需要“通”即可。但“通”到什么程度才算够用呢？对于很多初级前端开发工程师来说，这个问题是非常令人迷惑的。

前端开发的入门门槛其实非常低，与服务器端语言先慢后快的学习曲线相比，前端开发的学习曲线是先快后慢。所以，对于从事IT工作的人来说，前端开发是个不错的切入点。也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后面的学习曲线越来越陡峭，每前进一步都很难。另一方面，正如前面所说，前端开发是个非常新的职业，对一些规范和最佳实践的研究都处于探索阶段。总有新的灵感和技术不时闪现出来，例如CSS

sprite、负边距布局、栅格布局等；各种JavaScript框架层出不穷，为整个前端开发领域注入了巨大的活力；浏览器大战也越来越白热化，跨浏览器兼容方案依然是五花八门。为了满足“高可维护性”的需要，需要更深入、更系统地去掌握前端知识，这样才可能创建一个好的前端架构，保证代码的质量。