JavaScript流程控制
1. 运算符
1.1 赋值运算符
2. 语句
JavaScript基础语法
1. 简介
1.1 JavaScript是什么
JavaScript是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。
1.2 作用
网页特效(监听用户的一些行为让网页作出对应的反馈)
表单验证(针对表单数据的合法性进行判断)
数据交互(获取后台的数据,渲染到前端)
服务端编程(node.js)
1.3 JavaScript的组成
ECMAScript
规定了js基础语法核心知识
比如:变量、分支语句、循环语句、对象等等
Web Apis
DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作
BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等
JavaScript权威网站
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
2. JavaScript书写位置
2.1 内部JavaScript
直接写在html文件里,用script标签包住
规范:script标签写在</body>上面
1234567891011121314<!DOCTYPE ht ...
vuex
1. Vuex概述
1.1 官方解释
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的time-travel调试,状态快照导入导出等高级调试功能。
1.2 大白话
状态管理模式、集中式存储管理这些名词听起来就非常高大上,让人捉摸不透。
其实,可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。
那么,多个组件是不是就可以共享这个对象中的所有变量属性了呢?
如果是这样的话,为什么官方还要专门出一个插件Vuex呢?难道我们不能自己封装一个对象来管理吗?
当然可以,只是我们要先想想VueJS带给我们最大的便利是什么呢?没错,就是响应式。
如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢?当然也可以,只是自己封装可能稍微麻烦一些。
不用怀疑,Vuex就是为了提供这样一个在多个组件间共享状 ...
vue-router
1. 前端路由的概念
1.1 什么是路由
路由(英文:router)就是对应关系。
1.2 SPA与前端路由
SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一的一个页面内完成。
此时,不同组件之间的切换需要通过前端路由来实现。
结论:在 SPA 项目中,不同功能之间的切换,要依赖于前端路由来完成!
1.3 什么是前端路由
通俗易懂的概念:Hash 地址与组件之间的对应关系
1.4 前端路由的工作方式
① 用户点击了页面上的路由链接
② 导致了 URL 地址栏中的 Hash 值发生了变化
③ 前端路由监听了到 Hash 地址的变化
④ 前端路由把当前 Hash 地址对应的组件渲染到浏览器中
结论:前端路由,指的是 Hash 地址与组件之间的对应关系!
2. vue-router
vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。
vue-router 的官方文档地址:https://router.vuejs.org/zh/
2.1 vue-rout ...
vue动态组件插槽以及自定义指令
1. 动态组件
动态组件指的是动态切换组件的显示与隐藏。
1.1 如何实现动态组件渲染
vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染。示例代码如下:
123456789101112131415161718192021222324252627282930<template> <div id="app"> <!-- 通过is属性,动态指定要渲染的组件 --> <component :is="comName"></component> <!-- 点击按钮,动态切换组件的名称 --> <button @click="comName = 'LeftCom'">展示 Left 组件</button> <button @click="comName = 'RightCom'">展示 Right ...
vue生命周期和数据共享
1. 组件的生命周期
生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。
生命周期函数:是由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
注意:生命周期强调的是时间段,生命周期函数强调的是时间点。
2. 组件之间的数据共享
2.1 组件之间的关系
在项目开发中,组件之间的最常见的关系分为如下两种:
① 父子关系
② 兄弟关系
2.2 父子组件之间的数据共享
父子组件之间的数据共享又分为:
① 父 -> 子共享数据
② 子 -> 父共享数据
2.3 父组件向子组件共享数据
父组件向子组件共享数据需要使用自定义属性。示例代码如下:
父组件
12345678910111213141516171819202122232425<template> <div id="app"> <TestVue :msg="message" :user="userinfo"></TestVue ...
vue基础入门
1. vue介绍
1.1 什么是vue
官方给出的概念:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的前端框架。
构建用户界面
用vue往html页面中填充数据,非常的方便
框架
框架是一套现成的解决方案,程序员只能遵守框架的规范,去编写自己的业务功能
要学习vue,就是在学习vue框架中规定的用法
vue的指令、组件(是对UI结构的复用)、路由、Vuex、vue组件库
只有把上面罗列的内容掌握以后,才有才发vue项目的能力
1.2 vue的特性
vue 框架的特性,主要体现在如下两方面:
① 数据驱动视图
② 双向数据绑定
1.2.1 数据驱动视图
在使用了 vue 的页面中,vue 会监听数据的变化,从而自动重新渲染页面的结构。示意图如下:
1.2.2 双向数据绑定
在填写表单时,双向数据绑定可以辅助开发者在不操作 DOM 的前提下,自动把用户填写的内容同步到数据源
中。示意图如下:
1.3 MVVM
MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel,
它 ...
GRPC
gRPC是Google公司基于Protobuf开发的跨语言的开源RPC框架。gRPC基于HTTP/2协议设计,可以基于一个HTTP/2链接提供多个服务,对于移动设备更加友好。
GRPC技术栈
数据交互格式: protobuf
通信方式: 最底层为TCP或Unix Socket协议,在此之上是HTTP/2协议的实现
核心库: 在HTTP/2协议之上又构建了针对Go语言的gRPC核心库
Stub: 应用程序通过gRPC插件生产的Stub代码和gRPC核心库通信,也可以直接和gRPC核心库通信
gRPC采用protobuf描述 接口和数据, 我们可以把他理解为: protobuf ON HTTP2 的一种RPC
Hello gRPC
下面我们讲演示一个基础的gRPC服务.
protobuf grpc插件
protobuf 不仅可以定义交互的数据结构(message), 还可以定义交互的接口:
123service HelloService { rpc Hello (String) returns (String);}
从Protobuf的角度看,gRPC只不 ...
Protobuf编解码
Protobuf是Protocol Buffers的简称,它是Google公司开发的一种数据描述语言,并于2008年对外开源。Protobuf刚开源时的定位类似于XML、JSON等数据描述语言,通过附带工具生成代码并实现将结构化数据序列化的功能。但是我们更关注的是Protobuf作为接口规范的描述语言,可以作为设计安全的跨语言PRC接口的基础工具
官网
为什么选择Protobuf
一般而言我们需要一种编解码工具会参考:
编解码效率
高压缩比
多语言支持
其中压缩与效率 最被关注的点:
使用流程
首先需要定义我们的数据,通过编译器,来生成不同语言的代码
之前我们的RPC要么使用的Gob, 要么使用的json, 接下来我们将使用probuf
首先创建hello.proto文件,其中包装HelloService服务中用到的字符串类型
12345678syntax = "proto3";package hello;option go_package="pbrpc/pb";message String { string value ...
go语言RPC
概念
RPC是远程过程调用的简称,是分布式系统中不同节点间流行的通信方式。在互联网时代,RPC已经和IPC一样成为一个不可或缺的基础构件。
RPC传输协议
消息序列化与反序列化
下面是一个基于HTTP的 JSON的 RPC:
Go语言RPC
Go语言的标准库也提供了一个简单的RPC实现, 包的路径为net/rpc,也就是放在了net包目录下面。因此我们可以猜测该RPC包是建立在net包基础之上的
由上图可知一个rpc服务由2个部分组成:
server
client
基础的RPC服务
RPC Server
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647package mainimport ( "fmt" "log" "net" "net/rpc")type HelloService struct {}// Hello的逻辑 就是 将对方发送的消息前面添加一 ...