Web应用程序必须提供简单、直观和即时响应的用户界面，让他们的用户花更少的精力和时间。
为了帮助大家更好的提高工作效率，今天小编就为大家带来了这篇Web前端小技巧的文章，希望能够对大家有所帮助。
一、界面元素的需求
在Web前端设计中，简单清新的页面是很重要的。在任何时候，用户的屏幕上显示的模块越多，那他将花费更多的时间去搞清楚所有模块的作用。当模块很少时，可用的功能变得更加明显更容易被发现。简化界面显然是不容易的，尤其是如果你不想限制应用程序的功能的时候。
当你点击Kontain
搜索框的搜索链接时，会出现一个类似于下拉菜单的层。所以，如果您需要来缩小搜索范围，您可以选择菜单中你所需要的类型。这些选项的聚合简化了搜索框。
我们需要了解用户的习惯，去掉不需要的部分，只显示最常用的部分。
你可以用d出式菜单和 *** 作来做这件事，这在桌面软件中很常见。决定该保留什么隐藏什么不是一个简单的任务，也会取决于重要性和 *** 作时的频繁程度。
二、专门 *** 作
根据情况选择合适的控件是很重要的。不同情况下可以用不同的方式处理，带有目的性的控件会比其他控件能够更好地完成他们的目标工作。
例如，拿日历和下拉列表来做比较，显然日历选择器相比下拉列表不是很方便，在日历里你可以直接通过点击选择你想要的某一天。日历选择器也会让你更容易看到日期、周期和月份(特别是工作日和休息日)，因此能够让用户更快做出选择。
三、禁用按下按钮
在Web应用程序的表单问题中，如果你快速地点击两次或者更多次“提交”按钮，这个表单会被多次提交。这个问题是因为它会重复创建相同的项目。其实这个问题不难，大多数Web应用程序来说做到这一点是非常必要的。
它有两层维护：客户端和服务器端
。我们不会通过服务器端维护是因为这将取决于您使用的编程语言和你的后端架构。基本上你应该做的就是在提交过程中添加一个检测机制，去检查被提交的内容是否重复，并且是否需要阻止提交。
四、d出窗口的阴影
在d出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调从背景中脱颖而出
。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。
这种技术来源于传统的桌面软件，帮助用户把他们的焦点放在出现的窗口上。由于大多数情景窗口是不容易从桌面程序中辨识出来，所以阴影帮助他们更接近于读者，因为这种类似于三维的立体感，让用户更好分辨出。
五、空白状态时你要做什么?
当你的页面处在一个空白阶段时，你是怎么利用的?
当在页面或者查询结果没有信息时，告诉用户如何才能处理这些空白区域是跟用户最好的交谈。例如，一个项目管理应用程序的网页可能会列出用户的项目，但如果没有项目，你可以提供一个创建项目的链接。即使已经有创建项目的按钮存在在页面上，但这还是大大有利的。
通过空白状态去激励用户行为，可以大大减少“d出”，并且帮助您的潜在客户，更好地了解该系统如何工作。
六、按钮按下的状态
本人很喜欢页面上看起来很立体的小按钮。其实默认输入按钮可能不适合在一些情况下，而文字察兆链接很多时候不是很讨人喜欢。那么，当你把你的链接弄得看上去像按钮时，它们的 *** 作也应该和按钮一样，当然包括被搜州“按动”的效果。
这不是一个纯粹的视觉调整。提供即时反馈给用户将使应用程序感觉更有响应性。
你可以通过CSS为按败漏租钮增加按下的效果。
七、在登陆页面提供注册的链接
这个大家应该都是懂的，无论你点进大大小小的网站，不干点啥都要注册个账号。现在这个流量比油贵的年代，哪个站长不设置个注册才傻呢。
一些没有注册你的应用程序的用户将不可避免地停在你的登录页面上。他们想要使用你的应用程序，但是却不能立刻找到注册页面，这样的用户体验，会让你永远的失去这个用户。
八、关联导航
站在用户角度思考为什么他会点这个，那么他下一步想看见的是什么就给他什么链接。你不需要在每个地方显示同样的导航链接因为在用户可能不是在每个环境中都需要它们。
Web应用程序也可以受益于这种上下文关联的控件，因为这些控件通过只显示用户需要的内容来帮助整洁界面，并非显示所有的内容。
以上就是小编今天为大家分享的关于Web前端新手要了解的Web前端小技巧!的文章，希望本篇文章能够对正在从事Web前端工作的小伙伴们有所帮助。想要了解更多Web前端相关知识记得关注北大青鸟Web前端培训官网。最后祝愿小伙伴们工作顺利!
*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜。
今天小编要跟大家分享的文章是关于Web前端新手应该了解的Cookie知识。正准备学习Web前端知识和准备从事Web前端工作的小伙伴怎么能散孙不了解Cookie。今天小编就为大家带来了这篇文章，让我们一起来看一看Web前端新手应该了解的Cookie知识。
一、Cookie的出现
浏览器和服务器之间的通信少不了HTTP协议，但是因为HTTP协议是无状态的，所以服务器并不知道上一次浏览器做了什么样的 *** 作，这样严重阻碍了交互式Web
应用程序的实现。
针对上述的问题，网景公司的程序员创造了Cookie。
二、Cookie的传输
服务器端在实现Cookie标准的过程中，需要对任意HTTP请求发送Set-CookieHTTP头作为响应的一部分：
1.Set-Cookie:name=valueexpires=Tue,03-Sep-201914:10:21GMTpath=/
domain=.#
浏览器端会存储这样的Cookie，并且为之后的每个请求添加CookieHTTP请求头发送回服务器：
1.Cookie:name=value
服务器通过验证Cookie值，来判断浏览器发送请求属于哪一个用户。
三、浏览器中的Cookie
浏览器中的Cookie主要由以下几部分组成：
·名称：Cookie唯一的名称，必须经过URL编码处理。(同名会出现覆盖的情况)
·值：必须经过URL编码处理。
·域(domain)：默认情况下cookie在当前域下有效，你也可以设置该值来确保对其子域是否有效。
·路径(path)：指定Cookie在哪些路径下有效，默认是当前路径下。
·
失效时间(expires)：默认情况下，浏览器会话结束时会自动删除Cookie也可以设置一个GMT格式的日期，指冲扒链定具体的删除日期如果设置的日期为以前的日期，那么Cookie会立即删除。
·安全标志(secure)：指定之后只允许Cookie发送给https协议。
浏览器在发送请求时，只会将名称与值添加到请求头的Cookie字段中，发送给服务端。
浏览器提供了一个非常蹩脚的API来 *** 作Cookie：
1.document.cookie
通过上述方法可以对该Cookie进行写 *** 作此耐，每一次只能写入一条Cookie字符串：
1.document.cookie='a=1securepath=/'
通过该方法还可以进行Cookie的读 *** 作：
1.document.cookie//"a=1"
由于上述方法 *** 作Cookie非常的不直观，一般都会写一些函数来简化Cookie读取、设置和删除 *** 作。
对于Cookie的设置 *** 作中，需要以下几点：
对于名称和值进行URL编码处理，也就是采用JavaScript中的encodeURIComponent()方法
expires要求传入GMT格式的日期，需要处理为更易书写的方式，比如：设置秒数的方式注意只有的属性名的secure
每一段信息需要采用分号加空格。
1.functionsetCookie(key,value,attributes){
2.if(typeofdocument==='undefined'){
3.return
4.}
5.attributes=Object.assign({},{
6.path:'/'
7.},attributes)
8.
9.let{domain,path,expires,secure}=attributes
10.
11.if(typeofexpires==='number'){
12.expires=newDate(Date.now()+expires*1000)
13.}
14.if(expiresinstanceofDate){
15.expires=expires.toUTCString()
16.}else{
17.expires=''
18.}
19.
20.key=encodeURIComponent(key)
21.value=encodeURIComponent(value)
22.
23.letcookieStr=`${key}=${value}`
24.
25.if(domain){
26.cookieStr+=`domain=${domain}`
27.}
28.
29.if(path){
30.cookieStr+=`path=${path}`
31.}
32.
33.if(expires){
34.cookieStr+=`expires=${expires}`
35.}
36.
37.if(secure){
38.cookieStr+=`secure`
39.}
40.
41.return(document.cookie=cookieStr)
42.}
Cookie的读 *** 作需要注意的是将名称与值进行URL解码处理，也就是调用JavaScript中的decodeURIComponent()方法：
1.functiongetCookie(name){
2.if(typeofdocument==='undefined'){
3.return
4.}
5.letcookies=[]
6.letjar={}
7.document.cookie&&(cookies=document.cookie.split(''))
8.
9.for(leti=0,max=cookies.lengthi
10.let[key,value]=cookies[i].split('=')
11.key=decodeURIComponent(key)
12.value=decodeURIComponent(value)
13.jar[key]=value
14.if(key===name){
15.break
16.}
17.}
18.
19.returnname?jar[name]:jar
20.}
最后一个清除的方法就更加简单了，只要将失效日期(expires)设置为过去的日期即可：
1.functionremoveCookie(key){
2.setCookie(key,'',{expires:-1})
3.}
介绍Cookie基本 *** 作的封装之后，还需要了解浏览器为了限制Cookie不会被恶意使用，规定了Cookie所占磁盘空间的大小以及每个域名下Cookie的个数。
四、服务端的Cookie
相比较浏览器端，服务端执行Cookie的写 *** 作时，是将拼接好的Cookie字符串放入响应头的Set-Cookie字段中执行Cookie的读 *** 作时，则是解析HTTP请求头字段Cookie中的键值对。
与浏览器最大的不同，在于服务端对于Cookie的安全性 *** 碎了心
signed
当设置signed=true时，服务端会对该条Cookie字符串生成两个Set-Cookie响应头字段：
1.Set-Cookie:lastTime=2019-03-05T14:31:05.543Zpath=/httponly
2.Set-Cookie:lastTime.sig=URXREOYTtMnGm0b7qCYFJ2Db400path=/
httponly
这里通过再发送一条以.sig为后缀的名称以及对值进行加密的Cookie，来验证该条Cookie是否在传输的过程中被篡改。
httpOnly
服务端Set-Cookie字段中新增httpOnly属性，当服务端在返回的Cookie信息中含有httpOnly字段时，开发者是不能通过JavaScript来 *** 纵该条Cookie字符串的。
这样做的好处主要在于面对XSS(Cross-sitescripting)攻击时，黑客无法拿到设置httpOnly字段的Cookie信息。
此时，你会发现localStorage相比较Cookie，在XSS攻击的防御上就略逊一筹了。sameSite
在介绍这个新属性之前，首先你需要明白：当用户从#发起#的请求也会携带上Cookie，而从#携带过来的Cookie称为第三方Cookie。
虽然第三方Cookie有一些好处，但是给CSRF(Cross-siterequestforgrey)攻击的机会。
为了从根源上解决CSRF攻击，sameSite属性便闪亮登场了，它的取值有以下几种：
·
strict：浏览器在任何跨域请求中都不会携带Cookie，这样可以有效的防御CSRF攻击，但是对于有多个子域名的网站采用主域名存储用户登录信息的场景，每个子域名都需要用户重新登录，造成用户体验非常的差。
·lax：相比较strict，它允许从三方网站跳转过来的时候使用Cookie。
为了方便大家理解sameSite的实际效果，可以看这个例子：
1.//#服务端会在访问页面时返回如下Cookie
2.cookies.set('foo','aaaaa')
3.cookies.set('bar','bbbbb')
4.cookies.set('name','cccccc')
5.
6.//#服务端会在访问页面时返回如下Cookie
7.cookies.set('foo','a',{sameSite:'strict'})
8.cookies.set('bar','b',{sameSite:'lax'})
9.cookies.set('baz','c')
如何现在用户在#中点击链接跳转到#，它的请求头是这样的：
1.RequestHeaders
2.
3.Cookie:bar=bbaz=c
五、网站性能优化
Cookie在服务端和浏览器的通信中，主要依靠HTTP的响应头和请求头传输的，所以Cookie会占据一定的带宽。
前面提到浏览器会为每一次HTPP请求自动携带上Cookie信息，但是对于同站内的静态资源，服务器并不需要处理其携带的Cookie，这无形中便浪费了带宽。
在最佳实践中，一般都会将静态资源部署到独立的域名上，从而可以避免无效Cookie的影响。
以上就是小编今天为大家分享的关于Web前端新手应该了解的Cookie知识，希望本篇文章能够对正在从事Web前端工作和准备从事Web
前端学习的小伙伴们有所帮助。想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网！
作者|descire
来源|#/article/286535
*声明：内容与图片均来源于网络(部分内容有修改)，版权归原作者所有，如来源信息有误或侵犯权益，请联系我们删除或授权事宜
前端工程师，也叫Web前端开发工程师。他是随着web发展，细分出来的行业。
Web前端开发技术主要包括三个要素：HTML、CSS和JavaScript！
它要求前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。
随着近两三年来RIA（RichInternetApplications的缩写，中文含义为：丰富的因特网应用程序）的流行和普及带来的诸如：Flash/Flex，Silverlight、XML和服务器端语言（PHP、甚至不是一门语言，他仅仅是简单的标记语言！
CSS只是无类型的样式修饰语言。当然可以氏贺悉勉强算作弱类型语言。
Javascript的基础部分相对来说不难，入手还算快。
也正因为如此，前端开发领域有很多自学成“才”的同行，但大多数人都停留在会用的阶段，因为后拍喊面的学习曲线越来越陡峭，每前进一步都很难。
大多数程序员认为Javascript过于简陋，只适合一些网页上面花哨的表现，所以不愿花费精力去学习，或者以为不学习就能掌握。实际上，一门语言是否脚本语言，往往是她的设计目标决定，简单与复杂并不是区分脚本语言和非脚本语言的标准。事实上，在脚本语言里面，Javascript属于相当复杂的一门语言，他的复杂度即使放在非脚本语言中来衡量，也是一门相当复杂的语言！Javascript的复杂度不逊色于Perl和Python！
如何学习前端知识？学习HTML，CSS应该先跟着书仔细、扎实的学一遍。然后就需要做大量的练习，做各种常规的、奇怪的、大量的布局练习来捆固、理解自己的知识。
而学习Javascript首先要知道这门语言可以做什么，不能做什么，擅长做什么，不擅长做什么！
如果你只想当一个普通的前端程序员，你只需要记住大部分Javascript函数，做一些练习就可以了。
如果你想当深入了解Javascript，你需要了解Javascript的原理，机制。需要知道他们的本源，需要深刻了解Javascript基于对象的本质。还需要深刻了解浏览器宿主下的Javascript的行为、特性。
因为历史原因，Javascript一直不被重视，有点像被收养的一般！所以他有很多缺点，各个宿主环境下的行为不统一、内存溢出问题、执行效率低下等问题。作为一个优秀的前端工程师还需要深入了解、以及学会处理Javascript的这些缺陷。
那么一名优秀的、甚至卓越的前端开发工程师的具备什么条件？
首先，优歼乎秀的Web前端开发工程师要在知识体系上既要有广度和深度！做到这两点，其实很难。所以很多大公司即使出高薪也很难招聘到理想的前端开发工程师。技术非黑即白，只有对和错，而技巧则见仁见智。
在以前，会一点Photoshop和Dreamweaver的 *** 作，就可以制作网页。现在，只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。
Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好。
Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
其次，优秀的Web前端开发工程师应该具备快速学习能力。Web发展的很快，甚至可以说这些技术几乎每天都在变化！如果没有快速学习能力，就跟不上Web发展的步伐。前端工程师必须不断提升自己，不断学习新技术、新模式；仅仅依靠今天的知识无法适应未来。Web的明天与今天必将有天壤之别，而前端工程师的工作就是要搞清楚如何通过自己的Web应用程序来体现这种翻天覆地的变化。
说到这里，我想起了一个大师说过的一句话：对于新手来说，新技术就是新技术。对于一个高手来说，新技术不过是就技术的延伸。再者，优秀的前端工程师需要具备良好的沟通能力，因为前端工程师至少都要满足四类客户的需求。
1、产品经理。这些是负责策划应用程序的一群人。他们会想出很多新鲜的、奇怪的、甚至是不可是实现的应用。一般来说，产品经理都追求丰富的功能。
2、UI设计师。这些人负责应用程序的视觉设计和交互模拟。他们关心的是用户对什么敏感、交互的一贯性以及整体的好用性。一般来说，UI设计师于流畅靓丽、但并不容易实现的用户界面，而且他们经常不满前端工程师造成1px的误差。
3、项目经理。这些人负责实际地运行和维护应用程序。项目管理的主要关注点，无外乎正常运行时间、应用程序始终正常可用的时间、性能和截止日期。项目经理追求的目标往往是尽量保持事情的简单化，以及不在升级更新时引入新问题。
4、最终用户。指的是应用程序的主要消费者。尽管前端工程师不会经常与最终用户打交道，但他们的反馈意见至关重要。最终用户要求最多的就是对个人有用的功能，以及竞争性产品所具备的功能。
————————————
关于书籍：
HTML、CSS类别书籍，都是大同小异，在网上搜索一下很多推荐。
Javascript的书籍推荐看老外写的，国内很多Javascript书籍的作者对Javascript语言了解的都不是很透彻。
这里推荐几本Javascript书籍：
初级读物：
《JavaScript高级程序设计》：一本非常完整的经典入门书籍，被誉为JavaScript圣经之一，详解的非常详细，最新版第三版已经发布了，建议购买。
《JavaScript王者归来》百度的一个Web开发项目经理写的，作为初学者准备的入门级教程也不错。
中级读物：
《JavaScript权威指南》：另外一本JavaScript圣经，讲解的也非常详细，属于中级读物，建议购买。
《JavaScript.The.Good.Parts》：Yahoo大牛，JavaScript精神领袖DouglasCrockford的大作，虽然才100多页，但是字字珠玑啊！强烈建议阅读。
《高性能JavaScript》：《JavaScript高级程序设计》作者NicholasC.Zakas的又一大作。
《EloquentJavaScript》：这本书才200多页，非常短小，通过几个非常经典的例子（艾米丽姨妈的猫、悲惨的隐士、模拟生态圈、推箱子游戏等等）来介绍JavaScript方方面面的知识和应用方法。
高级读物
《JavaScriptPatterns》：书中介绍到了各种经典的模式，如构造函数、单例、工厂等等，值得学习。
《Pro.JavaScript.Design.Patterns》：Apress出版社讲解JavaScript设计模式的书，非常不错。
《DevelopingJavaScriptWebApplications》：构建富应用的好书，针对MVC模式有较为深入的讲解，同时也对一些流程的库进行了讲解。
《DevelopingLargeWebApplications》：不仅有JavaScript方面的介绍，还有CSS、HTML方面的介绍，但是介绍的内容却都非常不错，真正考虑到了一个大型的Web程序下，如何进行JavaScript架构设计，值得一读。
要做优秀的前端工程师，还需要继续努力：《高性能网站建设指南》、《Yahoo工程师的网站性能优化的建议》、“YSLOW”性能优化建议、《网站重构》、《Web开发敏捷之道》、“jQuery库”、“前端框架”、“HTML5”、“CSS3”。。。这些都要深入研究！
如果单纯只是学习前端编程语言、而不懂后端编程语言（PHP、p>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）