加入收藏 | 设为首页 | 会员中心 | 我要投稿 辽源站长网 (https://www.0437zz.com/)- 云专线、云连接、智能数据、边缘计算、数据安全!
当前位置: 首页 > 运营中心 > 交互 > 正文

学web前端开发写给新手的建议,超实用!

发布时间:2021-01-01 17:47:50 所属栏目:交互 来源:网络整理
导读:01?前面的话 如今我们使用的互联网,客户端与服务器端的交互无时无刻不在发生。比如我们在浏览器打开网页,浏览器就是客户端,将网页数据发过来的也就是服务器。其实服务器,并没有什么特别的,也就是一台昼夜不停运转的电脑罢了。每一台入网的机器,都会被
副标题[/!--empirenews.page--]

01?前面的话

如今我们使用的互联网,客户端与服务器端的交互无时无刻不在发生。比如我们在浏览器打开网页,浏览器就是客户端,将网页数据发过来的也就是服务器。其实服务器,并没有什么特别的,也就是一台昼夜不停运转的电脑罢了。每一台入网的机器,都会被分配一个ip,我们可以通过ipconfig / ifconfig这样的命令,知道我们电脑的ip地址。服务器本身,运行着服务器程序,他们监听着来源于网络的请求,并对请求进行响应。

比较常见的服务器程序,比如apache / Nginx / IIS等等,我们可以通过以下这样的一个小的实验,来了解网络中的客户端与服务器,是如何进行交互的。

实验:一个小的局域网

第一步:运行你电脑上的服务器程序(以apache为例,建议使用xampp / wamp这样的软件包,win下一键安装,能省不少事。当然,喜欢折腾的同学和SA们肯定要一个一个装啦),在apache的www目录下放入一些网页文件,然后在浏览器的localhost下浏览网页。

第二步:在电脑上打开wifi共享软件,通过ipconfig / ifconfig命令查看本机在内网的ip,让手机连接电脑共享的wifi(或者是两者同连一个路由器的wifi),在手机浏览器的地址栏输入电脑的ip,进入电脑的服务器并浏览网页。

上面的小实验的第二步,就模拟了一个简单的浏览器+服务器系统(BS系统),也在一定程度上反映了网站基本的访问原理。同时,这也是Web前端开发中真机测试移动端页面的一个行之有效的方法;当然,你也可以通过这种方式,实现局域网络的文件共享。

继续深入一步,我们在浏览网站的时候很少使用ip直接访问的,而是用www.baidu.com这样的域名,域名与提供对应服务的服务器的ip地址通过DNS服务器相互对应。我们可以通过ping命令,也可以通过一些在线的工具,如来获取一个网站的ip地址,有时候ping出来的ip是不一样的,一般和你使用网络的地点有关,这主要是为了将对服务器的请求分流,减轻服务器的压力,保证网站的访问速度(比如可以了解一下CDN)。(web前端学习交流群:328058344 禁止闲聊,非喜勿进!)

02?开发的过程与设计的艺术

如何从0建立一个网站,这就涉及到软件产品的开发了。一般,会有以下几个职位。

产品(PM):负责对软件产品的功能,目标用户等许多部分,进行一个详细的归纳整理,包括前期的功能地位和后期的功能修缮;

设计(UE):对用户使用的产品界面、交互方式进行统筹和设计;

前端(FE):活跃于前端的程序员,负责使用代码实现设计师的设计,并与后端协调数据在客户端的渲染工作;

后端(BE):活跃于服务器端的程序员,为前端的渲染提供所需的数据;

系统(SA):保证开发过程中,对于服务器权限的管理与协调,以及服务器运行环境的提供,同时保证网站在生产环境中的平稳运行。

限于个人能力,我在此仅从前端和后端这两个角度,探讨网站实现的技术细节,其中会涉及许多具体的解决方案,供大家参考。

现在我们从这样的角度去看一个网站,我将他分为三层,视图层,数据层,以及控制数据在视图上的显示方式的控制器。

举个例子,一个留言板,他的数据层会包括留言者的留言内容、留言时间、留言者的信息等内容。这些数据,就像一张excel表格一样,存储在我们的服务器。而我们的用户肯定不希望看到一个简陋的表格,他们希望看到的至少是一个界面,数据内容被清新美观的显示在我们的浏览器上,而这个界面,也会随着数据内容的增删修改而做出相应的调整。存储表格数据的,就是数据层;用户看到的,就是视图层;让界面随数据产生改变,则是控制器的使命。

现在,从技术的角度我们去实现他。首先,前端工程师根据设计师的设计,做出视图层的模板,后端工程师也做好相应的数据存储工作,包括设计创建数据库、数据表等等。现在,基本的工作完成。继续下去,我们则有很多的选择。

选择一:后端渲染数据到视图

这种方法,就是前端将模板交给后端,告诉后端具体在哪个位置放什么样的数据,放的时候有什么具体的要求,剩下的渲染工作完全交给后端处理。这样的方法实现起来门槛低,而且由于服务器计算性能一般情况下强于客户机,后端来刷模板简单粗暴速度快,没有任何争议。缺点是后端工程师由于处理了数据填写的工作,相当于涉及了视图层(即前端)的工作内容,导致分工不够明确;同时,由于是后端更新数据,而后端代码是运行在服务器上的,每次要更新都要刷新页面重新请求一个完整的页面,某种意义上来说,用户体验相对较差。

选择二:后端将数据生成为小的数据文件,前端获取数据并由前端更新视图。

这种方法,涉及到前端的Ajax。说白了就是在后台异步加载另外一个页面,在加载过程中用户不会看到任何变化,而加载完成后,相当于在前端程序里获取了一个字符串,剩下的任务就是将这个字符串解析取出里面的数据并将对应内容渲染到相应的位置上。通过这种方式,首先可以保证视图层显示的内容都完全由前端工程师负责,分工明确,实现了一定程度上的前后端分离;同时,与服务器交互的文件大小,从一整个页面缩小到了一个仅仅包含要更新的数据的小文件,交互的量减小,带来性能上的提升;另外,由于交互文件一般使用json这种多数编程语言都可以解析的数据格式,不仅可以给网页前端使用,也可以给移动端app的前端开发使用,统一了接口,扩展时减小了工作量。

选择三:单页应用(SPA)

我先解释一下单页应用,和传统网站相比,他更接近于移动端应用程序,其核心就是将路由控制在前端工程师的手里。核心技术除了上面的Ajax,还有pushState,又有人将两者合称为PJAX。

先说什么是路由,路由可以理解为你网站域名后面的内容,比如www.abc.com/p/123这样的网址,后面的/p/123就标明了一个路径。可以类比于我们电脑的磁盘,当我在路径的位置输入C:/p/123的时候,我希望看到C盘下p文件夹下123文件夹的内容,当123变成了456,显示的内容应该有些变化。如果456文件夹存在,显示该文件夹的内容;如果不存在,则会弹出错误信息提示不存在。对应我们的网站,如果当/p/123变成/p/456的时候,也应该给出对应的显示。路由由前端控制的含义,就是说,网站url的变化与对应的显示由前端处理。你的整个网站实际上只有一个页面,前端根据url的变化,通过Ajax异步加载需要的数据,然后通过pushState操作浏览器的历史记录,达到与浏览普通网站同样的效果。

(编辑:辽源站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

推荐文章
    热点阅读