说一句
为什么要说Web前端工程师?要知道,Android、Ios开发工程师都属于前端,前端即客户端,是跟用户接触的直接通道
石器时代的前端工程师
写好布局、样式、交互之后直接丢给服务端的同学**“ 绑数据 ”,其他东西几乎不用管**,项目结构也十分简单,无非就是css、js、image这三个文件夹,这属于传统开发
现代前端
以前的网站就叫网站,现在可以说是Web应用,页面复杂度、项目结构复杂度增加,特别是单页面应用的风靡。组件化,工程化,自动化,模块化成了前端发展的趋势
工程、自动、模块
前后端分离
这就意味着,前端、服务端职责分离,前端负责所有有关页面的东西,包括**“ 绑数据 ”,而服务端只负责数据的处理**,增删改查等提供接口给前端调用即可。问题来了?How?前端怎么绑数据,主要看你选择那种渲染方式
服务端渲染
服务端渲染,就如同传统开发一样,前端写好模板给服务端的绑数据,如Java的Jsp模板引擎,PHP的Smarty模板引擎,这个工作本来是应该由前端来做的,但是学习成本太高(环境搭建、语言学习…),所以才有了**Nodejs**的出现
Nodejs
Nodejs也是一门服务端语言,相当于把Javascript跑在了服务端上,学习成本很低,让Node直接替换掉Java、PHP吗?如果你是自己玩玩,那么是可以的,Node + 某数据库 + 某模板引擎。如果你公司的核心语言是Java、PHP,又想前后端分离怎么办,让Node做中间层就好
大概就是,客户端Javascript通过Ajax请求Node接口,Node请求Java、PHP接口
客户端渲染
客户端渲染就是所有数据都通过Javascript进行渲染,目前主流的三个SPA框架是**Angular、React、Vue,SPA即Simple Page Application(单页应用),整个项目只有一个入口**,不刷新页面就可以做到跳转,想象一下原生APP,项目的组件化、工程化思想得到了进一步提升,个人推荐新手学习Vue(中文文档、轻便、易懂)
数据驱动
像Angular、React、Vue这些都是MVVM框架,Module、View、ViewModule三层,数据双向绑定,是数据驱动,Jquery这些库其实是DOM驱动,控制隐藏一个元素都是操控DOM的属性而已,拿代码对比一下DOM驱动跟数据驱动
// DOM驱动
<div id='app'></div>
document.querySelector('#app').hidden = true;
// 数据驱动
<div id='app' v-if='show'></div>
let vm = new Vue({
el: '#app',
data: {
show: true
}
})
数据驱动中,想要隐藏掉#app只需要把show改为false(双向绑定,Module里面改了,View里面跟着改)
vm.show = false
半客户端、半服务端渲染
大家都知道,单页应用的通病就是对SEO很不友好,由于是异步渲染所以爬虫抓取不到页面的内容,因此出现了很多基于SPA框架的服务端渲染框架,如基于Vue的**Nuxt**,又是单页应用,又能做SEO
为什么选择Vue
你应该掌握的技能