- 博客(67)
- 收藏
- 关注
RSS订阅原创 Vue的变化侦测原理
什么是变化侦测Vue.js会自动通过状态生成DOM，并将其输出到页面上显示出来，这个过程叫渲染。Vue.js的渲染过程是声明式的，我们通过模板来描述状态与DOM之间的映射关系。通常，在运行时应用内部的状态会不断发生变化，此时需要不停地重新渲染。这时如何确定状态中发生了什么变化？变化侦测就是用来解决这个问题的，它分为两种类型：一种是“推”（push），另一种是“拉”（pull）。Angular和React中的变化侦测都属于“拉”，这就是说当状态发生变化时，它不知道哪个状态变了，只知道状态有可能变了，然
2020-11-18 13:24:26
608
原创 发布订阅模式
简单的买鞋订阅例子var shoeObj = {};shoeObj.list = [];shoeObj.listen = function (key, fn) { if (!this.list[key]) { this.list[key] = []; } this.list[key].push(fn)}shoeObj.notify = function () { var key = Array.prototype.shift.call(argum
2020-10-13 16:08:08
4421
1
原创 单例模式
单例模式只会创建一个实例，且仅有一个实例，并提供一个访问它的全局访问点代理单例var CreateDiv=function(html){ this.html=html; this.init(); } CreateDiv.prototype.init=function(){ var div=document.createElement('div'); div.innerHTML=this.html; document.body.appendChild(
2020-10-13 16:02:25
222
原创 继承模式
模版方法模式，继承和重写父类方法父类var Interview = function () { }Interview.prototype.writtenTest = function () { console.log('我终于看到笔试题了。');}Interview.prototype.technicalInterview = function () { console.log('我是技术负责人负责面试。');}Interview.prototype.leader = f
2020-10-13 16:00:37
196
1
原创 Vue中nextTick源码分析理解，以及和setTimeout的区别
nextTick 源码在 src/core/util/next-tick.js 里面。在vue的next-tick实现中使用了几种情况来延迟调用该函数，首先我们会判断我们的设备是否支持Promise对象，如果支持的话，会使用 Promise.then 来做延迟调用函数。如果设备不支持Promise对象，再判断是否支持 MutationObserver 对象，如果支持就使用MutationObserver来做延迟，如果不支持的话，我们会使用setImmediate，如果不支持setImmediate的话，
2020-09-24 15:49:15
2109
原创 JS Array那些事儿
entries()方法返回一个新的Array Iterator对象什么是Array Iterator对象?const array1 = ['a', 'b', 'c'];const iterator1 = array1.entries();console.log(iterator1.next());console.log(iterator1.next());console.log(iterator1.next());console.log(iterator1.next());打印结果：
2020-08-05 15:16:59
383
原创 JWT令牌介绍
什么是JWTJSON Web令牌（JWT）是一个开放标准，它定义了一种紧凑且自包含的方式，用于在各方之间安全地将信息作为JSON对象传输。由于此信息是经过数字签名的，因此可以进行验证和信任。可以使用密钥（使用HMAC算法）或使用RSA或ECDSA的公钥/私钥配对对JWT进行签名。尽管可以对JWT进行加密以提供双方之间的保密性，但我们将重点关注已签名的令牌。签名的令牌可以验证其中包含的声明的完整性，而加密的令牌则对第三方隐藏这些声明。当使用公钥/私钥对对令牌进行签名时，签名还可以证明只有持有私钥的一方才是
2020-07-31 16:11:15
1116
原创 了解this
this到底指向哪里？this指向问题就看一点就行，this 的值就是在点之前的这个对象，即调用该方法的对象。在没有对象的情况下调用：this == undefinedfunction sayHi() { alert(this);}sayHi(); // undefined在这种情况下，严格模式下的 this 值为 undefined。如果我们尝试访问 this.name，将会报错。在非严格模式的情况下，this 将会是 全局对象（浏览器中的 window）。这是一个历史行为，“use
2020-07-30 17:40:08
159
原创 JS改变input元素的value值之后如何使v-model双向绑定的值也跟着同步改变？
双向绑定不管是Angular还是Vue，他们的表单的双向绑定无非做了两件事，一件是接收输入的数据并赋值给元素的value属性，一件是监听input/change等事件，然后将$event.target.value赋值给绑定的值。这样就实现了基本的view-model和model-view的双向绑定。输入+输出===双向绑定总结为代码就是：<input [value]="name" (input)="name = $event.target.value" />在Angular里面：&
2020-07-30 16:54:54
3645
原创 最佳实践MVC模式的Node框架Nest.JS最全介绍
Middleware中间件中间件是用来做什么的？执行任何代码更改请求/响应对象结束请求-响应周期调用堆栈中的下一个中间件函数如果当前的中间件函数没有结束请求-响应周期，那么必须调用next()将控制权传递给下一个中间件函数。否则请求会一直停留在挂起状态。使用中间件Nest没有实现中间件装饰器，我们使用模块类的configure方法。因此需要使用中间件的模块都需要implements NestModule。export class AppModule implements NestMo
2020-07-09 14:43:02
2090
原创 我为什么喜欢威斯布鲁克
我为什么喜欢威斯布鲁克？其实威少的粉丝不算多，比起库里，勒布朗这种级别的，周围一抓可能一大把他们的粉丝。但是我只喜欢威少。因为他就是我理想中的齐天大圣。孙悟空很真。白骨精假装的妙龄女子已然取得他身边的人的信任。唐僧，也就是他的直属领导，以及他的二师兄猪八戒，也就是他的资深同事，甚至中立的沙僧，即使他可能相信孙悟空的话，但是还是选择了站队领导。这样的情况下，孙悟空仍然选择相信自己，妖就是妖，即使得罪领导和同事，即使不被那么多人喜欢，即使被戴上紧箍咒，他仍然选择了戳破妖精真相。其实同时，他也戳破了领导的
2020-06-12 15:20:23
20761
原创 闲情偶寄
君问归期未有期，巴山夜雨涨秋池。何当共剪西窗烛，却话巴山夜雨时。人生几十载，滚滚而来，熙熙攘攘，李商隐在外为官，四处奔波，虽因与少年时的老师和后来的岳父，卷入党争，郁郁不得志。然而，他一定时刻想念着他的妻子。我不说我想你，但是我的每个字都在说我想你，这一定是我想你的最高境界了。最令人心痛，他执笔落下这首诗的那天，他的妻子刚刚因病去世几天，而在消息不通的古代，他还不知道。他还在许着愿，未来的某个巴山下雨的晚上，我们坐在一起，没有党争，没有政治，没有奔波，没有喧闹。安静的雨声，还有，你和我。过
2020-06-10 15:21:14
811
原创 使用Node爬虫中国所有大学数据（二）
本文介绍根据省份爬取大学列表和每个大学的百度百科详情。创建大学实体类大学的信息比较多，因为我们想展示比较详细的大学数据。import { Entity, Column, PrimaryGeneratedColumn } from 'typeorm';@Entity()export class College { @PrimaryGeneratedColumn() id: number; @Column() name: string; @Column({ null
2020-05-28 14:28:02
258
原创 使用Node爬虫中国所有大学数据（一）
Nest是用于构建高效，可扩展的Node.js服务器端应用程序的框架。它使用渐进式JavaScript，内置并完全支持TypeScript，并结合了OOP（面向对象编程），FP（函数式编程）和FRP（函数响应式编程）。在底层，Nest默认使用Express这类的健壮的服务端框架，并且你可以选择自己配置使用Fastify。Nest在这些常见的Node.js框架（Express / Fastify）之上提供了一个抽象级别，但也直接向开发者公开了它们的API。 这使开发人员可以自由使用底层平台的第三方库。这
2020-05-28 14:27:08
526
翻译 关于 AsyncPipe你不知道的三件事
你一定听说过Angular的AsyncPipe管道吧？这是一个很方便的管道，我们可以在模版里面使用它，这样就不用强制性的去从Observables或Promises处理展开数据。AsyncPipe有一些我们刚开始可能看不出来的魔法力十足的东西。本文中我们希望能对这个有用的小工具的内部运作有更加深刻的了解。订阅长连接的数据流一般我们想起来AsyncPipe，只会想起解析来自Http请求的值。我们发起一个Http请求，返回一个Observable<Response>，做一些数据转化（比如map(
2020-05-25 18:37:37
759
原创 使用RXJS实现高级缓存
在构建Web应用程序时，性能应始终是头等大事。我们可以采取许多措施来加快Angular应用程序的运行速度，例如Tree-Shaking，AoT（提前编译），懒加载模块或缓存。为了提高关于Angular应用程序性能实践方面的全面了解，我们强烈建议您查看 Minko Gechev.撰写的Angular Performance Checklist。在这篇文章中，我们专注于缓存。...
2020-05-21 13:19:34
1185
1
原创 Nest.js初探索之实体映射数据库的三种方式
TypeOrmModule如果我们安装了@nestjs/typeorm，那么使用TypeOrmModule.forRoot(): TypeOrmModule.forRoot({ type:'mysql', host:'localhost', port:3306, username:'root', password:'123456',...
2020-04-09 16:50:29
2192
原创 CodeMirror自定义关键词以及关键词功能的源码
背景最近遇到一个需求是在 sql-hint提供的自动提示关键词的基础上，需要可以自定义关键词。解析在上一篇文章我们知道，实现自动提示的功能，需要引入下面四个js文件require("codemirror/lib/codemirror");require("codemirror/mode/sql/sql");require("codemirror/addon/hint/show-hint...
2020-03-17 14:26:53
4307
3
原创 Codemirror提示关键词/自动提示
Codemirror是一个不错的Web代码编辑库，可以方便简单的集成。没有自动提示功能的代码编辑器是没有灵魂的，Codemirror的自动提示功能是使用show-hint库进行的，我们可以调用showHint方法或者autoComplete方法来显示提示框。普遍的用法：var editor = CodeMirror.fromTextArea(document.getElementById("c...
2020-01-16 15:47:04
18349
12
原创 彻底理解RxJS里面的Observable 、Observer 、Subject
最近闲来无事，常常重读Angular官方文档，颇能发现些有趣的地方。让我想起海澜之家的广告词：每次都有新体验。关于RXJS的基础概念，observable和observer，我们好多次搞得头晕眼花。其实，看下面这简简单单的一行代码就懂了它们的关系：observable.subscribe(observer);observable是数据源头，是生产者，是待订阅者，通过subscribe方法...
2019-12-23 18:19:20
4374
2
原创 你不知道的Ionic Cordova Camera的坑，进来，我告诉你。
曾几何时，我们完成了所有的开发和测试，在一个键盘声噼里啪啦的普通下午，打开了Xcode，将我们的Ionic应用打包发布，你按下所有按钮，看着Xcode开始上传，你起来去茶水间（水桶旁）泡了一杯高档咖啡（雀巢速溶）。你品着热气腾腾的咖啡，甚至放松的打开了网易音乐，你想，半个小时之后，不，甚至只要二十分钟，你就可以在群里@领导，平静而喜悦的发出消息：XXXX已成功发布至线上。你仿佛看到了其他人的官...
2019-12-10 17:50:47
541
原创 ionic3最详细最完整架构（大量图文）——一文教会你使用Ionic
环境配置这个在之前的博文有详细讲解。Android和iOS开发环境配置项目架构运行Ionic start myApp tabs命令行这里start代表新建一个Ionic应用，MyIonicProject 是项目名称，tutorial是tutorial模板，还有其他几种模板：tabs : 底部3个tab模板 sidemenu：侧边栏菜单模板 blank：空模板 super：...
2019-12-10 17:25:23
1444
原创 如何在Ionic3中调起第三方地图APP（百度，高德，腾讯）
大家有没有碰到需要在Ionic里面打开第三方地图软件，来使用导航或者其他使用其他的地图功能呢？通过使用uri scheme的方式调起第三方应用是现在web调原生应用采用的主要方法（第三方应用须支持URI Scheme），至于具体的Scheme如何使用，需要到第三方应用的文档查看，每一家都不相同。我们可以使用Cordova原生插件AppAvailability来通过URI Scheme检查应...
2019-12-10 17:06:28
966
1
原创 基于Ionic3和极光推送实现推送功能
我们的项目里使用极光推送来进行推送消息的接收。1：在极光开发者服务中心配置应用如果新建一个应用，会自动生成AppKey和Master Secret：然后进行推送设置，否则无法接收推送。Android：IOS：注意这里iOS的APNS证书文件需要到苹果开发者中心进行配置，生产环境是用于发布之后的正式环境，开发环境是用于测试推送环境的。极光官网文档有关于如何配置...
2019-12-10 16:53:25
489
原创 谈谈如何设计一个友好的权限管理模块（下）
现在，我们应该拿到了一个获取菜单列表的接口。我们在store的user模块里，加一个获取菜单的方法： GetUserMenuList({ commit }) { return new Promise((resolve, reject) => { getUserMenu().then( response => { ...
2019-12-10 15:47:59
188
原创 谈谈如何设计一个友好的权限管理模块（上）
权限管理是很多管理系统常见的需求，说起来这是一个比较简单的功能，但是每个人在实现的时候，往往都是以满足自己的眼前需求为动机，不太考虑整体的设计，导致使用不友好，拓展不方便，甚至代码层面也是千奇百怪，使用各种方式的都有。遥想几年前，我还是实习生的时候，实现自己的第一个权限方面的需求，采用的是将用户的角色存储在localStorage里面，然后前端代码根据这个角色来判断隐藏菜单栏和一些按钮。后端压...
2019-12-10 14:52:32
243
原创 关于人工智能，机器学习和大数据
最近经常思考职业问题，前端做了这么久，发现自己除了刚开始工作那阵主要做前端顺带负责自己的API模块，写了一些的.NET和MySQL之后，沉浸在探索前端的世界里这两年，从Angular到现在公司的Vue，做久了确实会觉得有些疲乏和缺乏新意（不是页面和业务层面的，而是心理和技术层面的）。最近公司部门一直在强调AI，许多同事们学习AI的劲头也越来越强劲。公司里也有许多正在负责AI方面的工作的人。...
2019-10-29 18:08:05
246
原创 Docker和Curl
Docker本地测试nginx启dockercreate local images & build dockerdocker build -t your_name Dockerfile_pathmake container & run dockerdocker run -d -p 80:80 --env API_URL=http://xxxxxxxxcom/api ...
2019-06-04 11:27:50
9021
1
原创 使用Docker和gitlab.yml部署项目CI，CD
一：CI 持续集成（提交代码+编译+测试+发布）CI，continuous integration,持续集成，是软件开发过程中一个非常重要的环节，在敏捷开发过程中，持续集成通常用来进行日常编译和自动化测试，来保证及时发现提交的问题。持续集成（Continuous Integration，简称CI） 持续交付（Continuous delivery） 持续部署（continuous...
2019-05-22 15:18:30
2116
原创 Supervisor进程管理和Nginx服务
一：Supervisor在 web 应用部署到线上后，需要保证应用一直处于运行状态，在遇到程序异常、报错等情况，导致 web 应用终止时，需要保证程序可以立刻重启，继续提供服务。所以，就需要一个工具，时刻监控 web 应用的运行情况，管理该进程。Supervisor 就是解决这种需求的工具，可以保证程序崩溃后，重新把程序启动起来等功能。Supervisor是一个用 Python ...
2019-05-22 14:32:02
930
原创 三年Angular架构经验总结
又是许久没有动笔写博客了，18年换了公司，一直很忙。最近临近过年，几个项目也都告一段落，趁着测试和Refactor Code的功夫，想总结一下自己过去三年使用Angular搭建项目的经验。从当初使用Angular1到现在手里的Angular6，还有已经发布几个月的Angular7，不断迭代的Angular，不断进步，不断优化。经验的积累使我感受到一个好的Angular项目结构对于开发和维护...
2019-01-16 16:51:28
2979
1
原创 使用Vue构建Ionic混合APP系列教程最后一篇（五）：使用Vue CLI编译最终的Cordova应用
狗年大吉，恭喜发财。新年之后第一次写文章，将年前未完成的系列最后一篇结束掉。一些想说的话：不论是Angular还是Vue，或者Jquery甚至原生的html，都可以通过Cordova的封装作为webview以原生应用的方式安装到你的手机上呈现。我们这个系列教程的目的就是想在Vue里可以使用Ionic这个漂亮的框架，不过你也可以使用其它的UI框架，比如：VUX，Onsen-UI，WEEK，Vue-m...
2018-03-05 16:31:29
4846
1
原创 iOS使用TestFlight测试流程
在iOS发布之前，我们经常需要对我们的设备进行测试，通过xcode的直接安装到设备是一种方式，但是这种方式有些缺点：需要将设备的udid添加到证书中需要将设备通过USB连接到电脑再通过xcode安装这种测试方法和开发人员息息相关，当测试员和开发人员不在同一现场就会很难进行，所以我们看看如何使用苹果官方的TestFlight方式进行测试。开发者账号下面的iTunes Connect
2017-12-25 10:46:58
11556
1
原创 使用Vue构建Ionic混合APP系列教程（四）：数据存储
大多数应用程序基本都需要保存一些在应用重新加载时需要的数据。我们经常使用用户设备上的本地存储来实现。当使用Ionic/Angular的时候，我们可以简单的使用Ionic内置的Storage API，并不需要知道背后的原理——Ionic会自动地选择最合适的存储方式。再说一次，在Vue里我们没有现成的东西可以用，是安装一个库还是自己搭建解决方案全决定于我们自己。在这篇教程，我们将扩展上篇教程里的Redd
2017-12-21 17:45:54
2251
原创 使用Vue构建Ionic混合APP系列教程（三）：服务和Http请求
当学习一个新框架的时候，特别是你之前已经使用一个框架很久了，很自然的你会试图用之前使用的框架来理解一些别的框架的原理。正如我上一篇文章提到的，Angular是一个结构严密的框架，提供了一切开箱即用的东西，不管如何都会有一个正确的方法去解决问题。Vue的结构并不是很严密，也不是什么东西都提供好了，给了你更灵活的选择去按照你希望的方式组织项目的结构。Angular是设计用来处理你的应用所有方面的事情，V
2017-12-21 16:26:43
2590
原创 使用Vue构建Ionic混合APP系列教程（二）：导航
这篇教程我们将从Vue里最基础的路由/导航开始讲起，然后再看看通过Vue构建的Ionic应用如何导航。在Vue里引入Ionic的组件（或者任何其他东西）是非常简单的，就像你在Angular中做的一样，只需要把他们注入模板里，不过当我们想在两个页面之间导航时稍微变复杂了一点。在Angular里，我们只是用ionic-angular库提供的NavController服务，但是在Vue里我们将依赖于Vue
2017-12-21 14:58:34
11978
原创 使用Vue构建Ionic混合APP系列教程（一）：Vue语法 vs Angular语法
通过关于Stencil的介绍以及Ionic向web components的转变，我们知道很快就将可以使用任何自己喜欢的框架来搭建Ionic应用。以前我们会受到Ionic总是和Angular绑在一起的限制，不过这里的“限制”并不是什么贬义词，对搭建移动应用来说，Angular是一个伟大的框架，而且我觉得未来Ionic还是会采用Angular作为默认框架。不过，现在我们总算是有的选择了。选项之一就是现在
2017-12-19 15:16:12
11689
2
原创 即将到来的Ionic4以及它使用的Stencil会产生什么影响？
Ionic Team最近宣布在明年即将发布的Ionic4会全面采用Stencil来实现标准Web Components。Ionic4因为很多原因所以是一次重大的升级，但是最牛逼的地方在于它第一次实现了与框架无关，不再必须使用Angular，你可以使用Vue，React，JQuery或者干脆不使用任何框架来进行Ionic开发，这一切都是因为可以使用Stencil来构建标准web components（
2017-12-18 18:57:39
8416
3
原创 基于Ionic3实现微信支付和支付宝支付
在Ionic应用里实现支付并不难，但是有的坑真是不爬不知道。一：支付宝支付网上关于支付宝支付cordova插件真是非常多，但是大多会报一些让你很无语的错误。比如sdk早已过时不是最新的，或者没有出来效果。我也是经过大量试错，最终选择了以下这个。安装cordova支付宝支付插件：ionic cordova plugin add cordova-plugin-alipay-v2 -
2017-11-23 20:05:04
14470
7
原创 搭建你的第一个Ionic应用（二）——Android和IOS开发环境配置
现在我们可以在浏览器上看到自己的APP了，但是在浏览器上的APP说到底还只是一个单页应用，最有成就感的应该是我们自己做的APP在真正的手机上跑起来，right? 那么，就让我们继续吧。 如何将我们的单页应用变成APP安装到真机上？一）Android配置android开发环境安装ant。Apache Ant下载地址 最后不要忘记配置环境变量。 安装Java JDK 。因为android底层是采
2017-08-03 14:02:43
4602
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人