2018 April 24 —— improvement; web; js

Vue Mooc(1-2)

目的: 旨在通过一个实战项目快速的练习快速的进入前端开发领域;

前言: 杜绝复制粘贴!!!自己去敲,自己去采坑,自己去实践.

饿了么商家端的实战练习

前置

  • Vue resource
  • Vue-Router
  • scroll
  • 组件化开发
  • ES6
  • css

实战项目的意义

实战项目的意义就在于有类比:类比RN类比Native项目,从项目需求分析,到开发,到上线的整体流程对比分析

组件化与模块化在实战项目中的应用

Vue.js 的数据驱动分析

Vue-cli 脚手架工具 - 搭建基础框架

Vue-router 页面管理路由

Vue-resource 后端 Ajax 通信 <看到这个词就回到了之前写 JSP="" 的时间="">

Webpack 构建工具

es6 + eslint eslint是 es6代码检查工具 <es6的代码无缝与学习 RN 时的知识对接,开心>

前端工程化思想认知

移动端常用开发技巧 —> 不偷懒,完整的项目开发流程,多回顾多总结

前端复杂化

Object.defineProperty(object, propertyname, descriptor): 在对象上定义新属性或修改对象的一个现有属性 => vue.js关于Object.defineProperty

Vue 在移动端以及高端浏览器兼容性优秀

前端交互以及逻辑复杂化

架构从传统 MVC (当年的 SSH 让我记忆深刻) –> 转变为 REST API + 前端 MV* 的前后端分离架构转移;

MVVM

ViewModel 通信桥梁,数据的双向绑定,移动端 Android 的 dataBinding… RN 中的 Redux Mobx…

借助 MVVM 前端在进行数据相关的操作时,可以通过 Ajax 做数据持久化, 无需刷新整个页面,只需要改变对应 DOM 中改动的数据;

SPA 单页应用 –> 优化前端交互性能

前端的技术选型

  • 技术对比
  • 社区文化
  • 原理掌控
  • 开发学习成本
  • 招人的难易度

Vue

Vue.js 从视图层 SDK ,发展为了 Vue.js + Vue-Router + Vue-resource 等插件组合而成的轻量级 MVVM 框架

核心: 数据驱动 and 组件化(页面抽象为组件树)

Vue 核心概念

原始开发流程: 从后端获取数据-> 手动操作数据-> 完成 DOM 的改变(繁琐的 DOM 操作)

采用 Vue 之后的变化,在于引入了 ViewModel ,当数据变化时通知vue 指令去修改对应的 DOM(视图), 而当视图变化时也借助 Dom listener 去通知对应的 Model 数据变化;

数据驱动响应原理:

Vue 针对模版做编译构建指令对象,指令对象关联对应的 Watcher ,Watcher 对于数据的监听依赖了 Model 数据的 getter, 当数据变化时,数据通过属性的 setter 通知到 watcher 中,进而通知指令对象的变化,而指令对象是对于 Dom 的封装,也就是指令对象的变化影响到 Dom 的变更,进而完成双向绑定;

Vue 数据响应

组件化:

组件化的概念在我们移动端其实非常常见,在 RN 中就更加常见了,页面组件化,将整个页面拆卸成一个个独立的组件,组件可以更好的完成页面的模块化以及增加代码的可重用性;

旁白:有很多组件就是业务组件,一次性组件,我所理解的可重用组件与一次性业务组件是有封装差异的;

每个组件都有对应的 ViewModel;

组件封装原则: 每个组件对应一个工程目录,组件相关资源在该目录下就近维护–> 算是一种开发规范吧,增加代码的可维护性,移动端也常常这样做,也是增加组件的独立性,不做移动端如果仅仅存在包隔离程度的确是太弱了,总会有人去破坏的,必须引入编译隔离才能更好的维持独立性;

页面只作为组件的容器,细粒度的组件可以自由组合嵌套组装成完整的页面;

上一篇
下一篇
Loading Disqus comments...
Table of Contents