自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

vv_bug

Where there's a will there's a way.

  • 博客(185)
  • 资源 (4)
  • 问答 (3)
  • 收藏
  • 关注

原创 前端框架系列之(mvp)

简介前面我们介绍过了mvc 前端框架系列之(mvc),最后其实view跟controller的耦合度还是没有完全分离,所以会导致一大堆逻辑还是在view视图层了,所以为了解决这个问题,就把controller换成了presenter。Model(模型)表示应用程序核心(比如数据库记录列表)。View(视图)显示数据(数据库记录)。Presenter(代理)负责逻辑的处理我们再看一下mvc的设计图:再看一下mvp的设计图:MVP跟MVC很相像,我们把MVP当成MVC来看也不为过,pres

2020-06-16 16:26:18 1151

原创 前端框架系列之(mvc)

前言前面我们写了三篇关于es装饰器的文章了,感兴趣的可以去看看:前端框架系列之(装饰器Decorator)前端框架系列之(vue-class-component)前端框架系列之(vue-property-decorator)简介MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式:Model(模型)表示应用程序核心(比如数据库记录列表)。View(视图)显示数据(数据库记录)。Controller(控制器)处理输

2020-06-16 13:11:39 2071

原创 前端框架系列之(vue-property-decorator)

简介:这节我们继续解析一个叫vue-property-decorator的第三方库,首先可以看它官网的一个介绍:This library fully depends on [vue-class-component](https://github.com/vuejs/vue-class-component), so please read its README before using this library.也就是说它是基于vue-class-component库的,在上一篇文章中我们介绍了如何在v

2020-06-15 11:20:53 6219

原创 前端框架系列之(vue-class-component)

简介:说到函数式组件跟类组件在react官方就有提供,具体差异的话大家可以自行查阅react开发文档,下面我们看一下在react中怎么使用这两种方式定义组件:函数式组件:function Welcome (props) { return <h1>Welcome {props.name}</h1>}类组件:class Welcome extends React.Component { render() { return ( <h1>

2020-06-14 22:58:23 5399 1

原创 前端框架系列之(装饰器Decorator)

简介:装饰器是ES2016 stage-2的一个草案,但是在babel的支持下,已被广泛使用,有点类似java里面的注解。提案地址Class and Property Decorators用法:如果我们要在我们项目中使用最新的stage-2的装饰器提案怎么做呢?Preset: babel-preset-stage-1Plugins: babel-plugin-transform-decorators, babel-plugin-transform-decorators-legacyFirst

2020-06-14 19:44:59 1315

原创 js基础练习(二)

void 0;void会把后面变量都置成undefined;函数声明后面不可以跟括号,函数表达式可以所以我们经常看到比如:(function(){})();或者!function(){}();"!"跟"()"强制把函数声明变成表达式最好是加一个void,因为void符合语意,在java中表示没有返回值比如:void function(){}();...

2020-05-22 17:04:16 301

原创 js基础练习(一)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> /** * 转十进制 * @param str 进制字符串 * @param n 目标进制

2020-05-22 17:02:25 437

原创 秒懂NPM依赖包版本号~和^的区别

你是不是也和我一样,总忘记~和^的区别?(哈哈,或者你压根就不知道?)哈哈,不瞒你们说,今天忍住没看源码只盯着semver的api看了很久(????真是的又长又丑),终于是看到它的规律了(已经懂了的大牛就略过哈)我们常见的大概有这些:~1.0.0(^1): >=1.0.0 <1.1.0 ( >=1.0.0 <2.0.0)~1.0.1(^1.0.1): >=1.0...

2020-04-16 22:34:52 1495

原创 babel源码解析一

parse–>AST(解析源码为ast)if (ast) { if (ast.type === "Program") { ast = t.file(ast, [], []); } else if (ast.type !== "File") { throw new Error("AST root must be a Program or File no...

2020-01-12 21:59:28 4607

原创 js设计模式之(传输对象模式)

传输对象模式传输对象模式(Transfer Object Pattern)用于从客户端向服务器一次性传递带有多个属性的数据。传输对象也被称为数值对象。传输对象是一个具有 getter/setter 方法的简单的 POJO 类,它是可序列化的,所以它可以通过网络传输。它没有任何的行为。服务器端的业务类通常从数据库读取数据,然后填充 POJO,并把它发送到客户端或按值传递它。对于客户端,传输对象是只...

2020-01-06 17:35:35 553

原创 js设计模式之(状态模式)

状态模式在状态模式(State Pattern)中,类的行为是基于它的状态改变的。这种类型的设计模式属于行为型模式。在状态模式中,我们创建表示各种状态的对象和一个行为随着状态对象改变而改变的 context 对象。介绍意图:允许对象在内部状态发生改变时改变它的行为,对象看起来好像修改了它的类。主要解决:对象的行为依赖于它的状态(属性),并且可以根据它的状态改变而改变它的相关行为。何...

2020-01-06 17:33:24 458

原创 js设计模式之(解释器模式)

解释器模式解释器模式(Interpreter Pattern)提供了评估语言的语法或表达式的方式,它属于行为型模式。这种模式实现了一个表达式接口,该接口解释一个特定的上下文。这种模式被用在 SQL 解析.符号处理引擎等。介绍意图:给定一个语言,定义它的文法表示,并定义一个解释器,这个解释器使用该标识来解释语言中的句子。主要解决:对于一些固定文法构建一个解释句子的解释器。何时使用:如...

2020-01-06 17:28:31 542

原创 js设计模式之(命令模式)

命令模式命令模式(Command Pattern)是一种数据驱动的设计模式,它属于行为型模式。请求以命令的形式包裹在对象中,并传给调用对象。调用对象寻找可以处理该命令的合适的对象,并把该命令传给相应的对象,该对象执行命令。介绍意图:将一个请求封装成一个对象,从而使您可以用不同的请求对客户进行参数化。主要解决:在软件系统中,行为请求者与行为实现者通常是一种紧耦合的关系,但某些场合,比如需...

2020-01-06 17:25:36 699

原创 js设计模式之(桥接模式)

桥接模式桥接(Bridge)是用于把抽象化与实现化解耦,使得二者可以独立变化。这种类型的设计模式属于结构型模式,它通过提供抽象化和实现化之间的桥接结构,来实现二者的解耦。这种模式涉及到一个作为桥接的接口,使得实体类的功能独立于接口实现类。这两种类型的类可被结构化改变而互不影响。介绍意图:将抽象部分与实现部分分离,使它们都可以独立的变化。主要解决:在有多种可能会变化的情况下,用继承会造...

2020-01-06 17:22:45 726

原创 webpack源码解析二(html-webpack-plugin插件)

我们接着上一节从源码研究一下html-webpack-plugin插件,感兴趣的童鞋可以看一下我上一篇文章 webpack源码解析一文章开始先上一下源码:html-webpack-plugin源码地址,不废话,我们开车咯~~首先安装:yarn add html-webpack-plugin配置webpack.config.js: plugins: [ new HtmlPlugin(...

2019-12-17 01:55:58 6752 1

原创 webpack源码解析一

先上一张流程图,小伙伴可以跟着这个流程图结合代码往下走:图片来源于:细说webpack之流程篇开始git clone https://github.com/webpack/webpack.gityarnyarn setup打包node ./bin/webpack.jsbin/webpack.js//判断有没有安装webpack-cli,没有话的就提示是否需要安装con...

2019-12-13 18:19:25 3325 1

原创 Vue源码解析之(computed&watch&观察者模式)

前言:好久没写博客了,今年确实有点小忙,学习跟工作都很充实,身边也有小伙伴也经常说:技术是学不完的,能不能专一搞点自己喜欢的东西呢?学完新技术然后过几年又没了,岂不是白学了呢? 哈哈~ 说的确定有一点道理啊,但是没办法啊,新技术还是得去了解啊,至少要去看看别人的文档跟设计思想吧,也不怕小伙伴笑哈,最近还在补js跟css基础知识,学无止境,加油吧~骚年!前面有写过两篇vue的源码的文章,有兴趣的童...

2019-10-12 17:10:43 1364

原创 前端私有库搭建(verdaccio源码解析一)

前言: 很久没写东西了,并不是偷懒去了哈,最近一直在学东西,学用node搭服务器、学sql语句、学习jekins、docker、服务器配置等等,哈哈~感觉时间真的不够用,但是没办法啊,看到各大公司都在疯狂的裁员,只有不断的强化自己才能保住这碗饭,之后也会系统的总结一下整个学习过程,也欢迎大牛提意见跟指正,也不能说互联网前景不好了吧,只能说对程序员的要求变高了,加油,骚年!下面进入正题~~~在前...

2019-05-15 21:52:26 1314

原创 Mac:(-bash: xxx: command not found)

在开发中,当我们用npm或者yarn安装一个全局cli的时候:npm install -g xxx然后我们直接在命令行执行的时候会报错:-bash: xxx: command not found我用的是mac电脑,windows的原理一致~首先找到你的npm的安装路径:$ npm prefix -g/usr/local/Cellar/node/7.10.0可以看到你的npm安...

2019-01-24 18:08:41 2185 2

原创 Vue源码解析二(render&mount)

前言:前面我们根据vue官网的生命周期图走了一遍vue的源码,感兴趣的小伙伴可以去看我之前的文章Vue源码解析(一),今天我们重点研究一下render跟mount方法,这也是vue中两个比较重要的方法了,废话不多说了,我们开撸~~我们先回顾下上节内容,我们打开vue的源码,然后找到/vue/src/core/instance/init.js: Vue.prototype._init = fun...

2018-12-17 23:49:41 2307

原创 Vue源码解析(一)

前言:接触vue已经有一段时间了,前面也写了几篇关于vue全家桶的内容,感兴趣的小伙伴可以去看看,刚接触的时候就想去膜拜一下源码~可每次鼓起勇气去看vue源码的时候,当看到几万行代码的时候就直接望而却步了,小伙伴是不是也跟我当初一样呢? 下面分享一下我看vue源码的一些感触,然后记录一下我对源码的理解,欢迎指正,纯属个人笔记,大牛勿喷!我们直接上一张vue官网的vue的生命周期图:我们跟着源...

2018-12-11 17:39:25 26299 3

原创 vue预渲染之prerender-spa-plugin解析(二)

前面我们有介绍了什么是预渲染、使用场景、然后简单的介绍了预渲染的集成过程,感兴趣的童鞋可以去看一下vue预渲染之prerender-spa-plugin解析(一),这一节我们重点来研究一下prerender-spa-plugin的源码.附上prerender-spa-plugin的github地址: https://github.com/chrisvfritz/prerender-spa-plu...

2018-12-06 17:17:02 10179

原创 vue预渲染之prerender-spa-plugin解析(一)

前言:这几天一直看怎么样优化页面加载速度,一个页面的加载等待时间很长的话,确实很不友好,反正如果是app的话,我会直接卸载的,所以各个厂商为了能让用户尽快的看到页面内容做了一系列的操作(预渲染、ssr、同构等等),我们今天来看一下预渲染.什么是预渲染?为什么需要用预加载呢?以一个vue的spa(单页面)应用为例,我们用打包工具打包完毕后,我们的页面大概是这样的:然后我们运行下页面后:...

2018-11-28 23:16:33 12202 3

原创 前端入门之(axios解析)

前言:vue已经放弃维护vue-resource了,然后推荐使用axios,这一推荐不得了了,axios的人气大增啊,在github已经是50多k的star了,axios算是成功打入了vue全家桶了,既然官方这么推荐,我们接下来就来研究一下axios,顺便再啰嗦几句,我们一直在研究这个框架那个框架的,其实说白了,框架其实就是别人的一种编程思想,都是一些大牛总结的一些编程经验,形象一点就比如一辆汽车...

2018-11-16 17:39:19 7065 2

原创 前端入门之(vuex-router-sync解析)

前言:vue全家桶的内容我们已经研究过了vuex、vue-router,有兴趣的童鞋可以去看看我之前的两个系列的文章vuex源码解析一、vue-router全解析一,之前结合项目分析vuex的时候,当我们需要在vuex的action中处理路由跳转的时候,没认识vuex-router-sync的时候,我一般都是直接拿到router对象,然后稍微封装了一下进行跳转的,哈哈~~ 在看vue的github...

2018-11-14 13:31:12 14115 6

原创 远程调试 Android 、ios设备使用入门

前言:之前做android的时候还是比较反感做h5的童鞋的,因为感觉他们只是在浏览器上适配一下,然后负责任的会在自己手机上看一下ok后,就不管了,然后android机型太jb多了,每次一遇到问题测试就会说:“看吧看吧,在ios上好好的,为啥到android上就不行了,然后android小伙伴很懵逼,md这能怪我啊?”,哈哈,如今自己也开始接触web前端了(打脸了),每次为了不让原生小伙伴也向我之前...

2018-11-11 20:04:09 635

原创 node搭建简易服务器,设置跨域访问

前言:对于前端开发而言,写写ui想必对于小伙伴来说也就是分分钟的事,大部分的时间可以说都是耗在后台接口对接加调试上了,当然,这也不能怪后端的小伙伴,因为主要逻辑都在后端,他们还是比较辛苦滴,为了让前端跟后端依赖性降低,因此提前定义好接口文档就很必要了,那接口文档出来后,我们想模拟mock数据又该怎么办呢?哈哈,之前做android没接触过web前端的时候,都是java结合tomcat直接搭建一个...

2018-11-09 11:15:15 3896

原创 初识React项目遇到的坑(Uncaught ReferenceError: Set is not defined )

**前言:每次在android、rn跟h5中切换的时候,代码总是会闹各种笑话,比如在rn中变量都是包含在“{}”只有一层花括号,但是在vue中“{{}}”会有两层花括号,样式的话rn是驼峰fontSize这种,但在h5中是font-size,然后在android中老喜欢把一个字符串定义为String a=‘123’,/苦笑,说多了都是泪啊,也做了1年多的rn了,总觉得自己react上手应该问题不大...

2018-09-28 19:08:14 17355 4

原创 前端入门之(vue-router全解析三)

上一节前端入门之(vue-router全解析二)我们带着vue-router的push方法走了一遍源码,然后还分析了router-view的源码,最后还差router-link组件没有分析了,我们今天继续vue-router解析.我们在源码中找到router-link组件的代码:var Link = { name: 'router-link', props: { to: { ...

2018-09-27 09:51:36 1203

原创 前端入门之(vue-router全解析一)

前言: 一直想着啥时候能把vue全家桶的东西源码全部撸一遍,可惜无奈能力有限啊(哈哈,最近一直在补js基础),看vuex代码的时候觉得也还好,基本上是边学边解析源码的方式把vuex撸了一遍(毕竟整个vuex加起来也没多少代码),可当碰到vue-router的时候,首先就被它那几千行代码吓到了,刚开始看的时候是有点懵逼啊,所以把vue-router官网上的api看了一遍又一遍, 然后带着某个api功...

2018-09-20 23:37:15 1299

原创 前端入门之(vue-router全解析二)

前言: 一直想着啥时候能把vue全家桶的东西源码全部撸一遍,可惜无奈能力有限啊(哈哈,最近一直在补js基础),看vuex代码的时候觉得也还好,基本上是边学边解析源码的方式把vuex撸了一遍(毕竟整个vuex加起来也没多少代码),可当碰到vue-router的时候,首先就被它那几千行代码吓到了,刚开始看的时候是有点懵逼啊,所以把vue-router官网上的api看了一遍又一遍, 然后带着某个api功...

2018-09-19 00:43:41 2487 1

原创 前端入门之(vue图片加载框架完结)

前言: 2018已经过了一大半了,并没有感觉在本命年中有啥不顺的,每天过得还是挺开心的��,很感谢身边的朋友一路的陪伴,感恩!! 已经半年多没回家了,不久前跟麻麻发了一个视频,跟过年比,家里妹妹长了10cm,麻麻瘦了10kg,我家狗狗从小奶狗长到了30kg了,麻麻说:“你胡子长了要刮一刮了” ��! 才发现自己真的不小了~~为梦想历经沧桑、阅尽千帆、归去才发现自己早已非少年了啊!!! 不逼逼了...

2018-08-14 20:10:01 2743

原创 前端入门之(vue图片加载框架二)

我们继续我们上一节的前端入门之(vue图片加载框架一)往下~~上一节我们最后已经把框架的基本构造弄完了,最后也能够看到我们的效果了: 可以看到,我们已经简单的实现了我们的占位图的功能了,然后代码很简单:&lt;template&gt; &lt;div class="opt-container"&gt; &lt;img v-lazy="{src:111+images[1]}...

2018-08-07 16:56:22 743

原创 前端入门之(vue图片加载框架一)

前言: 之前做android的时候,会接触各种图片加载框架,也自己封装过,封装网络框架目的无非就是为了提高图片的复用性、减少内存消耗、监听图片的加载过程等等.换成web前端其实是一样的操作,好啦! 说了那么多我们来简单的实现一个图片加载框架,小伙伴跟紧了哦!!!因为一直在做vue,所以我就以vue为基础来开发我们的图片加载框架了,我们新见一个vue项目,然后运行(我就以之前的vuex的demo...

2018-08-01 23:12:44 5464

原创 前端入门之(vuex源码解析三)

上两节前端入门之(vuex源码解析二)我们把vuex的源码大概的撸了一遍,还剩下(插件、getters跟module),我们继续哈~插件童鞋们可以去看看vuex在各个浏览器的状态显示插件,小伙伴可以直接看官网然后集成哈,我这边网连github太慢了,就不带着一起安装了,附上vue-devtools插件地址: https://github.com/vuejs/vue-devtools我们简...

2018-07-31 23:06:57 463

原创 前端入门之(vuex源码解析二)

上一节前端入门之(vuex源码解析一)我们简单的过了一下vuex的源码,然后也大概了解了vuex的原理,这一节我们继续带着demo,然后对照着vuex源码做解析.先看一张官网文档vuex工作的流程图: 可以看到,当我们点击view中的某个按钮(+号)然后触发了一个action(‘increase‘)然后action继续commit到了mutation,mutation改变state(st...

2018-07-24 01:24:50 868

原创 前端入门之(vuex源码解析一)

前言: 这两天听到最多的就是“假疫苗“事件了,唉唉~~ 真的是为了利益可以不管不顾一切啊,这可能也是当今社会的一个现象,悲哀!! 说是有台风啥的,在家一个人默默地待了两天,一个人的时候总喜欢胡思乱想,甚至会花上一整天的时间思考完整个人生,有时候真希望自己能够活得天真或者自私点,这样就不会有太多烦恼了.bb了一会进入今天的主题哈,入坑前端也有一段时间了,从android的(data-bindi...

2018-07-23 00:57:05 2197

原创 前端入门之(我与iscroll的不期而遇)

博客已经停滞了一段时间了,目前一年是在跟js打交道,从最初的android到React-Native然后再到H5,也就短短的1年的时间,几乎明天都在学习,我tm都佩服我自己是怎么坚持下来的……^^,因为有android基础,所以RN上手相对容易一点,但是对于h5真的是从几乎0开始,一开始做东西的时候是灰常恐惧的,都不知道自己写出来的东西运行起来到底咋样,慢慢的遇到的坑多了,也就没什么感觉了(虽然现...

2018-07-20 02:19:57 697

原创 React-Native与原生页面混合路由策略(Android)

前言:做rn项目的时候,有可能会碰到有些页面是原生做的,有些页面是rn做的,那么rn页面与原生页面相互跳转的时候就很尴尬了,尴尬也得解决啊(rn存在的目的就是为了干掉原生页面,现在你硬是混合开发,怪我咯?) 先说一下目前遇到的坑: 因为我们目前所有的rn页面都在一个叫RNActivity的容器中,所以rn页面要跳转原生页面时候,调用native的jump方法开启一个叫原生activity的...

2018-05-06 17:47:25 4015 4

原创 React-Native发布项目到npm

前言:最近一直在看h5相关的书跟博客,rn偶尔有需求才会动一动,android是真的很少碰了(/忧伤),从h5基础-&gt;js-&gt;typescript-&gt;node-&gt;webpack,每天地铁来回两小时的时间我是一点没落下,学习真的是一件很枯燥的东西,贵在坚持,要给自己点鼓励,昨晚还因为自己学习了node,然后写了一个自动发包的小脚本激动了夜晚没睡觉(嗯嗯,就这么点出息了~),所...

2018-04-20 10:20:28 1567

ReactNative智能提示.jar(WebStorm)

ReactNative智能提示.jar(WebStorm)

2017-03-09

React Native继承Redux笔记

集成Redux笔记

2017-03-09

Android开关效果(兼容低版本)

各种开关效果,兼容低版本

2016-10-09

三种方式实现Android侧滑菜单

三种方式实现Android侧滑菜单

2016-08-21

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除