首页手记愿你做一个现代Web前端工程师

愿你做一个现代Web前端工程师

标签：

Html5 前端工具 Vue.js

说一句

为什么要说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里面跟着改）