1. 前端概览
1.1 前端开发三大件
Html结构,CSS表现,JS行为。
- 结构其实就是HTML语义化的结果,多个标签集合,当页面没有css,js时还能够保持有层次感的序列视图。
可以在chrome控制台运行以下代码,查看只有语义的html结构:
Array.from(document.styleSheets).forEach(item => item.disabled = false)
- 表现能够让内容更容易让用户接受,记住。 CSS禅意花园 可以看到不同样式变化带来的风格的变化。
- 行为能够与用户发生交互,给用户反馈。 可以看看下面网站,不同框架库对todolist的实现。 Todomvc
1.2 JS角色
前期只是为了校验表单,然后发展为动态效果开发,接着主要负责响应用户交互,现在页面数据渲染展示、交互、效果、校验等多位一体的开发方式。用一张图表示就这样的一个关系。
st=>start: 校验表单
op1=>operation: 动态效果开发
op2=>operation: 响应用户交互
io=>inputoutput: 渲染展示、交互、效果、校验等
e=>end: 多位一体
st->op1->op2->io->e
2. 现代前端开发方式
目前流行的前端框架都是基于Node,Npm,Yarn的开发方式,比如Vue结合Vue-cli工具可以方便的初始化项目,而以前的项目则是手工去新建文件,下载文件,定义项目的入口,然后组织打包方式,然后全部拷贝发布上线。
2.1 传统方式
在没有npm以前,如下的JS资源:
<script src="../js/jquery-1.10.1.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/login.js"></script>
<script src="../js/jquery.nicescroll.js"></script>
<script src="../js/jquery.qrcode.min.js"></script>
<script src='../jslib/moment.min.js'></script>
<script src='../js/locale/zh-cn.js'></script>
<script src="../mobisscroll3/js/mobiscroll.custom-3.0.0-beta2.min.js"></script>
<script src='../plugins/layer-pc/layer.js'></script>
所有资源插件都需要从原本不同的网站去下载,下载好之后放到项目资源目录中。随着项目的开发,时间的推移,如果本地源码被破坏修改,想重新从官网下载,但官网又更新版本了,或者官网已经失联,下载起来就比较困难。 两个问题:下载麻烦,版本管理维护比较困难。
2.2 NPM方式
随着Node在前端工程中大火,后来内置的NPM(Node Package Manager)就扮演了资源统一管理这样的角色,通过本地的Package.json管理文件名,版本号,命令行进行远程拉包的方式解决了开发当中到处找资源的窘境,他不但可以获取资源,也可以将自己编写的包或命令行程序进行发布分享。 PS: 下载最新的Node安装包进行安装,然后分别根据:node -v,npm -v两个命令测试是否安装成功。 PS: call:node call:npm
由于业务需求的不断增大,Npm下载了很多个包,这些包如何打包就是一个问题了。同时随着ES6的发布,而浏览器支持又不是给力。有些资源开发时用到,但上线后又用不到,比如SCSS相关的资源。 这时候一个神器Webpack横空出世,基本解决了前面提到的一些问题,而且还添加了很多新的想法和可能。结合cli工具,使现在的前端开发在工程化领域更加方便,开发更便捷。 其中Babel的剑走偏峰,Webpack-dev-server的巧妙应用,各种Loader的百花齐放,共同构筑了现代开发的宏伟基础世界,关于他们的细节故事后续有机会在分享。
3. MVVM开发核心
Vue是专注于View层的数据双向绑定框架,核心是 MVVM(Model-View-ViewModel) 中的 VM,也就是 ViewModel。ViewModel负责连接 View 和 Model,保证视图和数据的一致性,并且能够实时相互更新,数据影响视图,视图中操作影响数据。
3.1 数据双向更新
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
<div>
<p>Hello,<span id="name"></span></p>
</div>
<script>
var user = {}
Object.defineProperty(user, 'name', {
get: function () {
return document.getElementById('name').innerHTML
},
set: function (n) {
return document.getElementById('name').innerHTML = n
}
})
</script>
这段代码保存到本地,然后在控制台里边修改一下user的属性,比如:user.name='shanghai',看看效果。
而Vue实现有点小复杂,也是面试题必考的环节之一,所以有空的同学了解一下。
- 实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
- 实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
- 实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
- mvvm入口函数,整合以上三者 vue 的双向绑定原理及实现 vue的双向绑定原理及实现 一个github供参考,简版mvvm库,仿vue实现双向绑定基本功能
3.2 数据驱动视图
通过修改数据来达到更新视图的目的,比如:const User = { name: 'jikey', age: 20 },对应页面上:我是Jikey,修改:User.name = 'Tang',那页面上自动变为:我是Jikey。而如果是jQuery时代,那得先找到dom元素,然后在更新,如果这个属性页面上有多处,那就需要手工找到所有的进行更新。比如:$('.userEl1, .userEl2').html('Jikey')等等的方式。
3.3 URL变化视图更新,页面不刷新,更少的从数据从后端请求。
3.3.1 传统方式
比如公网上有个url:http://milu.blog,输入地址栏之后:
- 先从缓存中查询相关304状态的资源
- 然后从全球根DNS库中查询域名对应的服务器IP,
- 根据IP找到服务器发起建立TCP链接三次握手,
- 然后浏览器向服务器发起HTTP请求,
- 服务端看到有请求过来,解析URL路径
- 根据服务端的路由,返回全部HTML结构,图片,CSS,JS文件。
- 浏览器根据返回的内容依次构建:DOM树,CSSOM树, 将DOM,CSSOM合并生成渲染树,计算渲染树布局,然后将布局渲染到屏幕上。
3.3.2 Vue方式
只有首次发起全页面请求,后续请求服务端返回业务相关JSON数据,由浏览器Vue模板来组装HTML结构,然后渲染到屏幕上。由此可以看到,只要浏览器不帅锅,性能更好,渲染体验更好。同时也重新阐明了Vue的立场,就是前端框架,与Spring, Struts, Thinkphp这些服务端框架不一样,也不具备处理POST请求的能力,只能从拼接的url参数上取值,微信授权就是这种方式获取OpenId。
内部技术处理上主要是2种方式:
hash 模式 通过为hash增加监听事件来达到:更新视图不重新请求页面但可以ajax请求数据的目的。 window.addEventListener("hashchange", handleHash, false)
history 模式 HTML5提供了两个新的方法:pushState(), replaceState()使我们可以对浏览器历史记录栈进行操作: window.addEventListener('popstate', matchAndUpdate) window.history.pushState(stateObject, title, url) window.history.replaceState(stateObject, title, url)。
3.4 统一数据源管理
Vue是基于组件构建前端页面,多个组件上的数据必须保持同步和一致性,比如管理界面,左侧菜单的打开状态,必须在切换好的页面中保持当前目录的展开。用户头像必须在每个页面都显示同一的头像。等等。这时候就需要一个全局变量通过代码编程的方式方便的管理数据,为了与业界保持一致,采用了一定的API表明上看起来更繁琐,随着项目的增大,API更加的利于数据的管理。
4. Vue核心
全家桶构建的快速开发体系,Vue-cli初始化项目基础配置和文件结构,Vuex进行全局的数据状态管理,Vue-Router进行路由的跳转与处理。
5. Vue优点
5.1 文档清晰完善
5.2 入门曲线更为平缓
5.3 应用方式更为灵活
5.4 周边生态日趋完善
6. Vue难点
前期主要是前端基础的难点,中后期就是项目架构性能的优化和扩展维护。
6.1 JS基础
包括变量类型,流程控制,事件,DOM, BOM
6.2 Ajax基础
入手的关键字
- 同步异步请求
- HTTP1.0,HTTP2.0区别
- 各个HTTP状态码的调试,了解常见的200,301,400,401,404,500含义
- Chrome 调试工具 Network面板:主要查看状态码,request, response,从而验证发出请求与后端返回的字段的正确性。
- Postman工具:模拟浏览器发起请求,从而脱离浏览器来验证接口是否正确
6.3 ES6基础
call:es6 主要是增加变量申明,箭头函数,Promise,Async, Await的支持,增强String,Number,Function,Array,Object等的扩展还有增加模块管理Exports,Import功能。
7. Vue与非Vue项目结合
先引入Vue主文件,组件文件,然后寻找一个适当的容器装载Vue渲染后的结果。
7.1 寻找容器
id为app的容器元素。
7.2 JS文件的引入
引入打包之后的dist文件。
7.3 404状态的处理
8. Vue调试
结合Vue.js devtools, Chrome Debugger调试。
- Vue.js devtools 通过Components, Vuex, Events, Routing, Performance, Settings几个tab着重对Vue组件整个生命周期内API数据的追踪,比如可以在面板上看到data, computed
- Chrome Debugger 着重对代码流程数据的逐步追踪
9. Vue与SEO
SSR渲染框架支持Nuxt
10. Vue性能优化
10.1 异步组件
Vue.component('async-webpack-example', () => import('./my-async-component')) // 这个 `import` 函数会返回一个 `Promise` 对象。
10.2 Webpack配置
10.3 工具
webpack-bundle-analyzer:webpack的打包性能分析插件,通过命令:npm run build --report
,生成页面在页面中可以查看项目打包分布,每个包的体积等一些情况。现在已经内置,安装命令:$ npm intall webpack-bundle-analyzer --save-dev