- 博客(76)
- 收藏
- 关注
RSS订阅
原创 【Vue】前端规范及工程化
1.前端规范1.1工作流规范1.1.1 版本号规范主版本号：当你做了不兼容的 API 修改，次版本号：当你做了向下兼容的功能性新增，修订号：当你做了向下兼容的问题修正。1.1.2 版本控制规范参考git flow协作流程,以功能为主要自下而上的开发流程规范。master(production分支): 只合并其他分支，不能在此分支上开发修改代码，此分支是发布到最近的生产环境中的...
2019-10-12 08:52:01
1121
原创 【Go】理解go语言中的http包
go提供了详细且完整的标准库，同样我们使用go语言中的http包也非常方便，只需要几行代码便可以开启一个服务。现在，我们尽量使用代码理解下http包中的工作原理。package mainimport ( "fmt" "log" "net/http")func helloWeb(w http.ResponseWriter, r *http.Request) { fmt.Fprin...
2020-02-13 18:34:11
724
原创 【Go】go语言中的几点细节
Go是门简洁、高效的语言，因为在底层封装了许多东西，在go的编写中有许多细节需要我们留意，此文章尽可能通过代码来列举一些go语言中的细节(keng)。1.func main() { slice := []int{0, 1, 2, 3} m := make(map[int]*int) for key, val := range slice { m[key] = &val ...
2020-02-12 16:57:43
320
原创 【Vue】Vue-Router源码分析
入口万变不离其宗，看源码先找入口，首先看vue-router的入口，定义在src/index中。vue-router是基于类(class)实现。类中提供了构造方法和一些其他方法，类定义完后给类添加了install方法。vue-router其实是一个vue插件，使用vue-router需要Vue.use(vue-router)。Vue.use原理可看另一篇文章，总结一句话就是:Vue会调用...
2020-01-16 16:09:11
908
原创 【Go】go--反射
反射反射是指在程序运行时来检查变量的结构对于接口来说才有反射概念接口因为有接口才有反射，在理解反射前要理解下接口对于每一个接口变量，它都在底层保存了一对值(pair)：接口的值和类型。接口变量的静态类型在编译期间就已经确定，并且只有一个静态类型。var r io.Readerr = os.Stdinr = bufio.NewReader(r)r = new(bytes....
2020-01-13 11:12:39
298
原创 【网络协议】网络协议(三)--传输层TCP/UDP协议
TCP协议--IP协议
IP协议IP协议能保证数据从一台计算机有能力到达另一台计算机，它主要包含两个方面：1.IP头部信息，2.IP数据报的路由和转发IP地址IP地址是IP协议中非常重要的内容，IP地址是分配给用户使用网络的标签。目前IP地址广泛采用的v4版本即ipv4，它规定网络地址由32位2进制表示，即范围0.0.0.0-255.255.255.255。根据IP地址，网络可以将数据传输到目标IP地址上。地址的...
2020-01-09 11:42:01
331
原创 【网络协议】网络协议(一)--TCP/IP模型概述
我们整天在和网络打交道，但我们对网络传输到底是怎样运作的了解甚少，有必要理解我们使用的网络协议到底是什么。1.TCP/IP协议族群TCP/IP协议族群存在许多协议，例如TCP协议、UDP协议、HTTP协议、IP协议等，这些协议被抽象化成一个模型，称TCP/IP模型。TCP/IP模型自下而上分为链路层、网络层、传输层、应用层。链路层：TCP/IP模型的最底层，主要两个功能：1.将IP层的数据...
2020-01-08 21:56:46
461
原创 【Go】go中的死锁
go语言中的协程(goroutine)和通道(channel)提供非常好的处理并发的方式，基于协程(goroutine)和通道(channel)可以将并发中的数据简单化。但用不好则会带来许多问题，死锁就是协程出现问题的一种表现形式。那什么是死锁？按照我对go死锁的理解，就是在程序中的代码被阻塞了，运行不下去，导致程序报错。在go语言中，主要存在这几种死锁情况1.无缓冲通道的死锁packag...
2020-01-06 22:53:05
453
原创 【React】create-react-app源码分析
var currentNodeVersion = process.versions.node;var semver = currentNodeVersion.split('.');var major = semver[0];if (major < 8) { console.error( 'You are running Node ' + currentNode...
2019-12-31 16:33:44
554
原创 【Go】go mod 模块化
很多语言有专门的工具或者库来管理项目中的依赖包或第三方库，比如java有maven，javascript有npm。但对于go 来说，v1.1之前是没有内置的go模块工具的，项目文件需要放在GOPATH/src下来运行，这样的工作方式比较强制，可能会降低效率。在v1.1之后，go提供了内置的go mod工具，通过go mod我们可以愉快的进行go依赖包的管理和升级。go mod 常用命令down...
2019-11-17 20:22:24
344
原创 【eslint】配置eslint及vscode中eslint的配置
1.eslint配置eslint是完全支持自定义配置的代码检查工具，简单两个字：好用!npm i -D eslint eslint-plugin-vue babel-eslint在项目中安装相关依赖(以vue项目为准)根目录下创建.eslintrc.js文件作为eslint配置文件module.exports = { root: true, env: { // 启用 ES...
2019-10-25 08:47:56
1792
原创 【Vue】理解Vue源码系列（九）
我们知道了组件配置的合并流程，我们再来看看组件注册的过程，组件注册分为全局注册和局部注册，首先我们来看组件的全局注册。全局注册的代码定义在vue/src/core/global-api/assets.js中。import { ASSET_TYPES } from 'shared/constants'import { isPlainObject, validateComponentName }...
2019-07-20 22:26:36
252
原创 【Vue】理解Vue源码系列（七）
通过createComponent我们得到了组件vnode，接着会执行_update函数，_update的核心又是通过执行patch来完成的，patch是通过createElm来实现的，我们来看其中的逻辑。function createElm ( vnode, insertedVnodeQueue, parentElm, refElm, nested, ownerArra...
2019-07-07 22:23:44
265
原创 【Vue】理解Vue源码系列（六）
在createComponent中，我们了解了组件构造器的初始化，接下来我们看看组件生命周期的安装。export function createComponent ( ... // install component management hooks onto the placeholder node installComponentHooks(data) ...}funct...
2019-07-07 20:52:47
281
原创 【Vue】理解Vue源码系列（五）
我们了解了Vue首次加载过程，之前的分析是建立在有template的基础上的，例如var app = new Vue({ template:"<div>hello</div>", el: '#app',})但更多情况我们是传入一个组件来完成Vue的初始化，例如var demo = { name: 'demo', template: ...
2019-07-06 22:44:54
1351
原创 【Vue】理解Vue源码系列（四）
_render方法定义在vue/src/core/instance/render.jsVue.prototype._render = function (): VNode { const vm: Component = this const { render, _parentVnode } = vm.$options if (_parentVnode) { ...
2019-07-06 16:54:19
213
原创 【Vue】理解Vue源码系列（三）
当Vue执行完_init方法后，会调用$mount方法，这个方法在入口已经定义好了，我们先来看带有编译功能的$mount方法。目录在vue/src/platporms/web/entry-runtime-with-compiler.js。const mount = Vue.prototype.$mountVue.prototype.$mount = function ( el?: stri...
2019-06-30 16:28:48
175
原创 【Vue】理解Vue源码系列（二）
Runtime + Compiler我们来看带有编译功能的Vue版本，vue/src/platforms/web/entry-runtime-with-compiler.js。import config from 'core/config'import { warn, cached } from 'core/util/index'import { mark, measure } from ...
2019-06-29 10:39:08
238
原创 【Vue】理解Vue源码系列（一）
深入理解Vue源码，才是真正的使用Vue。我们可能用Vue开发了很多项目，但并不知道Vue框架中的原理，这样我们只会是一个Api调用师。理解一些框架的源码，帮助我们去设计、开发出更高质量的代码，这是一个真正工程师的必要技能。接下来，我们开启Vue源码探究之旅。本次Vue源码系列的Vue版本为2.6.10，所有的讨论都是围绕着这个版本的Vue展开的。我们先来看Vue源码目录，Vue源码都在src...
2019-06-28 09:10:21
489
原创 编写JS简洁代码的原则
变量名变量命名必须准确，不能无意义 var yyyymmdd; // No var yearMonthDay // Yes对于值不会改变的常量使用const关键字变量命名不能废话 getUserInfo() // No getUser() // Yes 都是获取用户，下面的更加简洁尽量使每个变量名有意义 const total = 55 + 20 // N...
2019-06-25 22:52:19
257
原创 【webpack】tree shaking使用
tree shaking主要是将import/export中未引用到的代码给找出来。通过demo看tree shaking 给我们做了什么.├── dist├── node_modules├── package-lock.json├── package.json├── src└── webpack.config.jsdemo结构// webpack.config.jscon...
2019-04-22 13:58:52
559
原创 Vue 仿大众点评项目
项目地址vue-dianping 仿大众点评Vue项目技术栈:VueVuexVue-RouterVue-CliExpressSequelizePostgreSql实现功能:登录注册发布点评点赞评论上传文件下载并安装模块git clone https://github.com/Jcanno/Vue-DianPing.gitcd Vue-DianPingnp...
2019-04-15 21:45:33
1697
1
原创 【Git】git基本操作
新建一个项目后，初始化本地仓库git init在项目目录下会有一个.git的隐藏文件，此文件就是项目本地仓库我们在编辑好代码后，使用git暂存文件git add . // 将所有文件提交到本地仓库接着我们提交到本地仓库git commit "本次提交的信息"当我们要提交到远程分支上的时候，我们先在github上创建一个远程仓库在项目里添加远程仓库地址git remote add ...
2019-03-30 13:04:10
182
原创 【react】组件间的通信
1.父组件传值给子组件import React, { Component } from 'react'export default class Father extends Component { render() { return ( <Son name="World"></Son> ) }}class Son extend...
2019-03-21 11:50:39
161
原创 【react】dva
dva是react的数据流解决方案，基于 redux 和 redux-saga。ANT DESIGN PRO框架中集成了dva，在项目中我们看看dva常用的功能。1.Modelnamespacemodel层的命名空间，它是根状态上的属性。state当前model的状态，优先级低于根状态的同名属性const app = dva({ initialState: { count: 1 }...
2019-03-20 21:07:24
225
原创 【react】redux
Redex是React的数据状态管理器，功能类似Vue的Vuex，都是对数据状态进行保存。1.安装通过npm install redux便可安装redux状态管理器。2.actionaction是一个纯函数，redux只能通过dispatch（触发）一个action（动作）来更改状态// 一个action可以长这样的export const increase = () => {...
2019-03-20 13:48:26
208
原创 【webpack】在webpack4中使用babel
babel是JS转译器，JS语法标准更新太快，而浏览器还未更新，babel就帮助我们将新标准的JS语法转译成浏览器能识别的JS标准。我们在webpack中使用babel来转译JSnpm install babel-core babel-loaderbabel-core是babel的核心包修改show文件里的代码// 操作 DOM 元素，把 content 显示到网页上const sho...
2019-03-15 09:21:33
667
原创 【webpack】webpack4入门--插件使用
插件能拓展webpack的功能，让webpack更加灵活，我们使用插件来应用到webpack中。首先安装mini-css-extract-plugin插件，这个插件是在webpack4中用于分离css文件的，webpack4之前用的是extract-text-webpack-plugin插件。npm install mini-css-extract-plugin安装完插件后，配置webpac...
2019-03-14 11:29:47
422
原创 【webpack】webpack4入门--loader使用
webpack的强大，在于有丰富的loader和插件。loader能够将浏览器环境原生不认识的文件转化为自己能够认识的文件。我们用css文件继续做个测试。新建一个main.css文件#app{ text-align: center}现在我们的项目目录如下.├── config├── index.html├── main.css├── main.js├── node_mod...
2019-03-14 10:46:19
279
原创 【webpack】webpack4入门--entry、output
webpack是构建应用的打包工具，webpack将各个模块之间的依赖关系进行整理输出，官网的图片就已经很形象的说明这个道理。我们通过实际动手来入门webpack新建一个项目，用命令行npm init --yes初始化package.json文件。创建一个config文件夹，再创建一个webpack.dev.js文件，该文件用于webpack的配置。新建一个show.js，敲上代码...
2019-03-14 10:09:52
491
原创 【webpack】模块化
前端模块化是目前的趋势，任何文件都可以当做一个模块，模块化中也有许多不同的标准。1.CommonJSCommonJS是JavaScript的模块化规范，也受到Node.js的广泛使用，它的导入导出语句如下//导入const a = require("A")//导出module.export = moduleA.func;大部分npm包都实现了CommonJS规范，但缺点是无法直接...
2019-03-13 21:25:33
191
原创 【Vue】vue-router中的history和hash
vue-router提供了两个url模式，一种是hash，另一种是HTML5新增的history，在vue-router中可以通过mode: "history"或者mode: "hash"设置，默认为hash模式。1.history请求的url中不会有#利用了HTML5 History Interface新增的pushState() 和 replaceState() 方法前端url需要与...
2019-03-13 17:16:43
270
原创 【Vue】简述Vue中双向绑定原理
双向绑定是数据变化更新到视图，视图上数据的变化更新到数据层。Vue的双向绑定实现主要依赖于三个方面：数据监听（observer）指令解析（compile）观察订阅（watcher）数据监听通过Object.defineProperty()方法劫持数据data中的变化，每当有数据变化，它就会通知watcher指令解析将v-on、v-bind指令进行解析整理，绑定相应的数据。观察者是...
2019-03-12 22:48:14
933
原创 【Vue】Vue生命周期
先来一张官网生命周期图我们在用代码来测试vue中的声明周期 mounted(){ console.log('-----mounted-----'); console.log(this.$el); console.log(this.$data); console.log(this.message); }, beforeMount(){ con...
2019-03-12 09:17:52
969
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人