mr_japson的博客

原创 一张图说清楚angular中的所有Ref用法

原创 一些vue中需要注意的细节

vue的难度和学习成本都不高，并且官方文档完善，所以越来越多的开发者都在使用vue。使用的人多了，踩到的坑也就多了，所以针对一些需要注意的细节简单汇总下：箭头函数的使用ES6的普及使得箭头函数的使用更加频繁，但是在Vue中不要在选项属性或者回调上使用箭头函数，举个例子：new Vue({ el: '#app', data: { show: true }, c...

原创 ios上解决异步事件收起键盘

页面中有文本框和多行文本框，输入框唤起时，点击左右上角执行异步事件时需要先收起键盘；1、考虑document.getElementById(id).blur();2、在事件中先执行 window.scrollTo(0,0.8); 然后再执行3、代码较多：//判断是否为苹果var isIPHONE = navigator.userAgent.toUpperCase().in...

原创 针对字段较多的内容非空和位数校验封装

针对字段较多的内容非空和位数校验封装：/***校验内容是否匹配格式*@paramval:string传入需要校验的内容,必填参数*@paramifEmpty:boolean需要校验是否不能为空,必填参数*@description:*true-不能为空*false-不做是否为空拦截**@paramoptio...

原创 还记得12年前给你美好回忆的歌么

12年前，大家耳熟能详、校园遍地播放的歌曲，是不是还有唤起你回忆的那些呢？说说给你故事的那些歌吧：秋天不回来老鼠爱大米qq爱让泪化作相思雨别说我的眼泪你无所谓你到底爱谁等一分钟包容爱情里没有谁对谁错擦肩而过求佛那女孩对我说简单爱痴心绝对想太多被伤过的心还可以爱谁错错错...

原创 如何做好新人串讲

一、什么是新人串讲？在新同学入职之后，对当前借贷宝已有架构、核心业务从代码层面和业务层面做一个综合性的讲解。二、为什么做串讲？帮助新入职的同学快速掌握现有功能、代码的设计与实现，从而可以快速的落地新的业务需求。三、什么时间串讲合适？实习生：入职1个月左右社招：入职2周左右四、串讲方向选择？采用 1+N 形式做方向安排，其中：客户端：1 = iOS/Android，N = R...

原创 浅谈下前端缓存机制

由于是本人的演讲内容摘录，所以上下文衔接有些抽象，适合有基础的阅读：先附上本人喜欢的由腾讯团队维护的技术网站：http://www.alloyteam.com/category/webdevelop/引言：在项目中遇到了IE浏览器因缓存问题未能成功向后端发送GET类型请求的bug。导出：性能优化之一——合理使用缓存在前端开发中，性能一直都是被大家所重视的一点，然而判...

原创 vue项目实现返回不刷新，再点返回刷新的需求

问题背景：有时候一些列表会有一些跳转的需求，比如跳到详情页、或者是其他相关的页面（比如跳到用户列表去查看用户的相关信息）等，此时再返回列表页，列表页会刷新重置。目前需求就是需要改成如下情况：　　问题1、列表 - 详情页，返回，不刷新重置；　　问题2、再点其他菜单，再返回，需要刷新重置。　　解决思路：　　解决需求自然是想到vue的keep-alive去缓存组件，但是缓存组件有个不好的...

原创 关于Android的window/location/href不跳转

问题背景：window.location.href 在Android手机微信浏览器 不跳转，没反应。1、在href的链接后面拼接随机数window.location.href = url + '?v='+ (newDate().getTime());或 top.window.location = url + '?v='+ (newDate().getTime());...

原创 关于node-sass报错

问题场景：本地打包或者docker上编译报错信息也不同类型：1、提示 cannot find module 'node-sass' 或者cannot find module 'node-sass/vendor';2、提示引入的scss文件有问题，直接贴图：目前来说，绝大可能是node-sass安装依赖时出问题了，因为node-sass自身的底层是从github下载...

原创 Vue官方风格指南

官方链接：https://cn.vuejs.org/v2/style-guide/链接中是具体的代码演示，图示如下：

原创 js实现监听键盘的收起和弹出

之前遇到一个bug，前提因素：1. vue项目2. 弹出层popup3. ios手机4. 弹出层中的input获取焦点后 点击键盘上的“完成”按钮收起键盘，再次触发input获取焦点发现没有反应。分析原因后，发现实则是弹出层随着键盘的收起和展开进行了下移和上移，而元素的点击位置没有实时变化，如下：正常的时候：唤起键盘：收起键盘后：实则弹层位置还没归位...

转载 vue单页面，多路由，前进刷新，后退不刷新

目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。注：　此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求，用户体验更流畅。项目需求：任何技术的探索，都来自项目的需求。之前经手的一个项目是微信端商城，使用的是传统的mvc模...

转载 vue3.0尝鲜 -- 摒弃Object.defineProperty，基于 Proxy 的观察者机制探索

写在前面：11月16日早上，Vue.js的作者尤大大在 Vue Toronto 的主题演讲中预演了Vue.js 3.0的一些新特性，其中一个很重要的改变就是Vue3 将使用 ES6的Proxy 作为其观察者机制，取代之前使用的Object.defineProperty。我相信许多同学深有体会，许多面试中Object.defineProperty是vue这个框架一个出现率很高的考察点，一开始大家对...

转载 vue源码分析：渲染篇

一、前言Vue.js框架是目前比较火的MVVM框架之一，简单易上手的学习曲线，友好的官方文档，配套的构建工具，让Vue.js在2016大放异彩，大有赶超React之势。前不久Vue.js 2.0正式版已出，在体积优化（相比1.0减少了50%）、性能提升（相比1.0提升60%）、API优化等各方面都更上一层楼；本文是系列文章，主要想通过对于Vue.js 2.0源码的分析，从代码层面解析Vue...

原创 Vue 搭建h5组件库并发布到 npm

目前适配 vue 开发的已有各种各样的UI组件库，比如 `Element `、`mint-ui` 和`iView `，它们确实强大和完善。但是用户的需求越来越复杂，当第三方库不能满足的时候，就有必要开发一套属于自己团队的组件库。通过对mint-ui的源码查看，希望利用文档中一个例子的具体描述，实现：小能做一个简单的组件被复用，大能做一个公司甚至开源组件库。以下是一个简单的功能组件，讲述从开...

原创 JavaScript判断对象类型方法及区别

文章的开始先说明JavaScript中七种内置数据类型：Undefined, Null, Boolean, Number,String, Object, symbol...前五个是基本数据类型；复杂数据类型Object中还细分了很多具体的类型，比如：Array, Function, Date等等。首先定义出几个测试变量，看看不同的方法究竟能把变量的类型解析成什么： 1 ...

原创 JS 条件语句的 几条守则

JavaScript 工作时，我们经常和条件语句打交道，这里有5条让你写出更好/干净的条件语句的建议。 1.多重判断时使用 Array.includes2.更少的嵌套，尽早 return3.使用默认参数和解构4.倾向于遍历对象而不是 Switch 语句5.对 所有/部分 判断使用 Array.every & Array.some 1.多重判断时使用 Arra...

原创 将多位数转换成中文显示

   pipe.ts： import { Pipe, PipeTransform } from '@angular/core'; /** * @title：将多位数转换成汉字的算法* @author：liuyu* @date：2018/04/28* @rule：1、十以内直接转换；2、万及亿以上的考虑连续0的问题； * 默认返回值为个位*/...

原创 ng2-模版和数据绑定学习

动态组件1、组件的模板不会永远是固定的。2、应用可能会需要在运行期间加载一些新的组件。3、展示如何使用ComponentFactoryResolver 来动态添加组件。有两个场景 ——    eg1：假设正在计划一个广告活动，要在广告条中显示一系列不同的广告。几个不同的小组可能会频繁加入新的广告组件。    eg2：用户拖动相关的块到特定区域，区域中便会生成相应的UI控件，此UI控件有自己的模板、...

原创 angular2学习时的路由重定向问题

关于angular2里面使用了templateUrl的时候设置moduleId其实是用于解析样式表和模板的相对路径，如文档中所述。包含组件的模块的模块标识。需要能够解析模板和样式的相对网址。在Dart中，这可以自动确定，不需要设置。在CommonJS中，这总是可以设置为module.id。ref（old）：https : //angular.io/docs/js/latest/api/core/i...

原创 函数式编程与面向对象编程的比较

    函数式编程作为结构化编程的一种，正在受到越来越多的重视。工程中不在只是面向对象编程，更多的人尝试着开始使用函数式编程来解决软件工程中遇到的问题。    什么是函数式编程？在维基百科中给出了详细的定义，函数式编程（英语：functional programming）或称函数程序设计，又称泛函编程，是一种编程范型，它将电脑运算视为数学上的函数计算，并且避免使用程序状态以及易变对象。函数编程语言...

原创 你知道几种编程思想？

四大编程思想简述1)POP--面向过程编程(Process-oriented programming ):面向过程编程是以功能为中心来进行思考和组织的一种编程方法，它强调的是系统的数据被加工和处理的过程，在程序设计中主要以函数或者过程为程序的基本组织方式，系统功能是由一组相关的过程和函数序列构成。面向过程强调的是功能（加工），数据仅仅作为输入和输出存在。这种过程化的思想是一种很朴素和普遍的思想和方...

原创 JavaScript实现将多位数转换成中文

GitHub地址：https://github.com/funnyGH/angular-pipe var map_obj = { "1":"一", "2":"二", "3":"三", "4":"四", "5":"五", &quo

原创 将多位数转换成中文显示

GitHub地址：https://github.com/funnyGH/angular-pipepipe.ts：import { Pipe, PipeTransform } from '@angular/core';import { Pipe, PipeTransform } from '@angular/core';/** * @title：将多位数转换成汉字的算法* @author：liuyu...

原创 将金额转换成千分制加万亿单位

github地址：https://github.com/funnyGH/angular-pipeimport { Pipe, PipeTransform } from '@angular/core';/** 可封装多个pipe* title：金额格式转换规则三算法* author：liuyub* date：2018/04/24* 规则：1、万以内金额保留两位小数且用千分符；2、万及亿以上的用万元/...

翻译 angularjs service全局保存数据的误区

《angular权威指南》中有这么一句话“服务提供了一种能在应用的整个生命周期内保持数据的方法，它能够在控制器之间进行通信，并且能保证数据的一致性。”         这里的【应用的整个生命周期】中的【应用】到底是什么？估计原文是【app】，然后就被翻译成了【应用】。【应用】是有歧义的，他可以有两个含义：1、指整个web应用，这样的话，他就类似于session了。第二个含义：【应用】指某个modu...

翻译 如何做好技术串讲

首先，如何做好演讲是个好话题，不过这过于大众的主题不想写，除非哪天能想到点 新意 再说；其次，串讲和演讲有啥区别呢？其实也没啥区别，一会儿说说我自己的理解；最后，什么时候做技术串讲也分情况，这个最后会说到。背景介绍：我司使用 Nodejs 大概两年多，不过分为好些独立的方向，且各自有其技术负责人。这月初，高(神)大(叨)上(叨)的CTO安排几个技术负责人分别把手头的项目好好整理，组织我们相互的串讲...

翻译 单点登录原理与简单实现

一、单系统登录机制1、http无状态协议　　web应用采用browser/server架构，http作为通信协议。http是无状态协议，浏览器的每一次请求，服务器会独立处理，不与之前或之后的请求产生关联，这个过程用下图说明，三次请求/响应对之间没有任何联系　　但这也同时意味着，任何用户都能通过浏览器访问服务器资源，如果想保护服务器的某些资源，必须限制浏览器请求；要限制浏览器请求，必须鉴别浏览器请求...

原创 Angularjs中的事件广播 —$broadcast,$emit,$on

Angularjs中不同作用域之间可以通过组合使用$broadcast,$emit,$on的事件广播机制来进行通信介绍：$broadcast的作用是将事件从父级作用域传播至子级作用域,包括自己。格式如下：$broadcast(eventName,args)$emit的作用是将事件从子级作用域传播至父级作用域,包括自己，直至根作用域。格式如下：$emit(eventName,args)$on用于在作...

翻译 Git分支管理策略

如果你严肃对待编程，就必定会使用"版本管理系统"（Version Control System）。眼下最流行的"版本管理系统"，非Git莫属。相比同类软件，Git有很多优点。其中很显著的一点，就是版本的分支（branch）和合并（merge）十分方便。有些传统的版本管理软件，分支操作实际上会生成一份现有代码的物理拷贝，而Git只生成一个指向当前版本（又称"快照"）的指针，因此非常快捷易用。但是，太...

翻译 常用 Git 命令清单

一般来说，日常使用只要记住下图6个命令，就可以了。但是熟练使用，恐怕要记住60～100个命令。下面是我整理的常用 Git 命令清单。几个专用名词的译名如下。Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库一、新建代码库# 在当前目录新建一个Git代码库$ git init# 新建一个目录，将其初始化为Git代码库...