TypeScript 基本类型

前言 TypeScript 基本类型也不少,下面我们就来看看都有哪些。 在 TypeScript 中声明变量时我们一般需要同时确定变量的类型,而这个类型的确定有两种方法,一种是显示的,一种是隐式的。在看这些之前,我们必需先得知道 在 TypeScript 中都有些什么类型的变量。 Null,Undefined,Never,Boolean,String,Number,Object,Array,Tuple,Any,Void,Enum 显式类型声明 Null,Undefined ,Never 类型 ...

2018
10-25

Vue2 组件:tab 标签页

这个组件实现了: 支持设置默认选中 支持 tab 嵌套 支持设置 tab 面签的排列方向 实现这个 tab 标签页效果我把它细分成了三个文件(Tabs.vue,TabsNav.vue,TabsPannel.vue).下面我们直接来看代码: Tabs.vue <template> <div :class="`ku-tabs ${finallyTabsPosition}`" v-if="panesSlots.length > 0"> <div class="ku-tabs-header"> <ku-tabs-nav ></ku...

2018
10-17

Vue2 组件:进度条

组件实现了: 可自定义进度条颜色 可自定义进度条高度 进度文字位置可指定 进度条动画时长 效果图: 现在我们就来看看组件要怎么实现 代码 <template> <div class="ku-progress-box" :class="{true:'outer '+ textPosition ,false:'inner '+ textPosition}[isOuter] " :style="`height:${barHeight}px`"> <div class="ku-progress-line-bar" :style="`border-radius:${barHe...

2018
10-17

Vue2 组件:表格

表格在很多列表页中很常见,所以我们有必要把它封装成一个组件。 这个组件实现了: 表格标题对齐方式(alignTitle)及宽度可设置(width),可单独设置某个标题居中(align) 自定义字段排序(指定哪些列有排序功能) 大范围点击及精确点击都可触发 效果: 代码 <template> <div class="table-box" :class="tableClass"> <table> <thead :class="alignTitle"> ...

2018
10-10

deepin (Linux) 系统安装 vue/cli 3.0

前言 首先声明一下,这是一篇水文,没什么技术含量,只作记录用,方便后来者,少掉坑,快速开发,不被无关紧要的事担误.如果你已经把 vue/cli 3.0 安装好,那么你就可以不用看了. 本文主要是针对 deepin (Linux) 系统用户安装 vue/cli 3.0 开始吧 不管是在 window 系统下还是在 Linux 和系统下要想安装 vue/cli 3.0,我们都必需要先安装 Node.js 和 npm , 这两个安装很简单,只要用官网下载一个资源包,解压就可以...

2018
10-07

JavaScript 做一个照片墙效果(三)

前言 这是第三个照片墙效果,这个跟之前的两个不同,这个效果是把图片做成旋转,类似于轮播,但比轮播效果要炫一些. 这个示例基本实现了: 1.可以沿着 translateX 和 translateY 两个方向旋转.不过在translateX方向作了一个范围的限制 2.只有当动画运动完后,才可以进行下次动画 3.在指定的区域内按下鼠标并滑动后可触发动画效果 在线示例:http://yunkus.com/demo/photo-wall/photo-wall-3/ HTML 代码 <!D...

2018
10-07

Canvas 实现炫丽的粒子运动效果(粒子跟随鼠标)

前言 关于粒子效果之前也做过一个可让粒子生成文字并带有一些动画的效果.相对来说现在要分享的这个效果会容易一些,代码量也会少一些,但效果也绝不会逊色于第一个。 效果: 在线示例:http://yunkus.com/demo/canvas/canvas-granule-animation-and-mouse-follow/ 简单归简单,其中 canvas 的一些用法我们要记牢.这个效果也是从网上看到的,然后就又按自己的理解并用ES6撸了一个相似的效果.话不多说,上码: ...

2018
09-27

JavaScript 做一个照片墙效果(二)

前言 之前也写过一个照片墙效果,只不过,那个相对来说比较普通,只有拖拽图片才会有动画效果,而现在这个效果会更炫一些,至于效果如果,看到示例你自有定夺.这个效果是在网上看到的,感觉还不错,所以就自己就撸了一个出来。 在线示例:http://yunkus.com/demo/javascript-photo-wall/javascript-photo-wall-2/ 样式 #imgBox{ width: 800px; height: 400px; margin: 80px auto; perspect...

2018
09-25

小程序踩坑之路

前言 小程序给我们带来了不一样的体验,但同是也给开发人员带来了不少坑,下面就是踩坑之路,说长不长不短不短。 踩坑之路 按钮样式相关 // 去掉小程序按钮默认的边框 button[class="btn btn-primary"]::after { border:none } // 修改按钮禁止类样式 button[class="btn btn-primary"][disabled]{ color: #666; background: #ccc; } 单选多选按钮样式相关 // 修改选中...

2018
09-22

小程序做一个图片切换效果

前言 下面来做一个图片切换效果,这个效果是从附近的微群小程序中看到的,觉得效果还不错,用户体验比微信小程序中的 swiper 组件的默认效果会好很多,没有那么中规中矩。不过在附近的微群小程序中的这个效果也不是很完美,手动操作切换图片时有明显的不流畅。 小程序图片切换之旅 为此,我也尝试做了一个类似的切换效果,不过做完之后效果比附近的微群小程序中的切换效果更好,理由如下: 1、图片切换...

2018
09-20

小程序做一个弹幕效果

前言 小程序来了,你肯定已经跟它交过手,即使也没交过手,估计你也已经把它列入了你的学习列表中,这篇文章就给大家分享一个在小程序中实现的弹幕效果。 弹幕之旅 要想写出一个弹幕效果,其实也不然,主要是在小程序中我们就不能像平时一样很方便地操作 dom ,我们只能通过变能的方法来实现。下面就是通过数据来驱动 DOM 完成弹幕动画效果。 这个弹幕实现了: 1、可以传一个延迟参数来让弹幕延迟出现 ...

2018
09-18

发布-订阅模式:一呼百应

前言 网上关于发布-订阅模式的文章已经有很多,但雷同的数不胜数,没有意思,再者我觉得网上很多文章说得不够形象生动,让人看得云里雾里的,为此我想分享下我对发布-订阅模式的理解。 发布-订阅模式之旅 发布-订阅这个在很多模式中都很常见,比如 VUE。条条道路通罗马,可能实现的方法不同,但效果是差不多的。在一些异步请求中发布-订阅模式也大有用处。我觉得这个发布-订阅模式其实作用就相当于 VUE...

2018
09-10

策略模式:以不变应万变

前言 不管什么书,你有没有发现它们都有一个共同点,就是不管一个知识点有多容易懂,作者都会用尽量多的文字来描述。我认为其中一个重要的原因就是从不同的角度来给你展现这个知识点,让你对所学知识点更加深刻,但有时候我并不这么认为,我觉得更好的做法是我给你讲完了一个套路,你可以自己去慢慢体会,理解透彻,然后再结合自己的实践工作进行尝试。我觉得把书写厚是体力活,把书写薄才是脑力活,不费...

2018
09-07

单例模式:一个人的寂寞

前言 单例模式(Singleton)说白了就是一山不能容二虎。只允许实例化一个实例对象。 原理 那单例模式的原理是什么呢?它的套路也很简单,在创建对象之前先判断下实例对象是否已经存在,如果实例对象不存在,那么就创建它,否则直接返回已有的实例对象。那创建的这个实例要保存到哪里呢?放在全局对象?No,一般的实现是通过立即执行函数和闭包实现实例的存储,然后通过对外方法来访问这个实例对象。 这...

2018
09-03

centos 7 安装及启动 Mongodb

Mongodb 征战之旅 下载 mongodb 访问如下地址: https://www.mongodb.com/download-center#community 点击 Linux 版本进行下载,下拉框中选中 RHEL 7 Linux 64-bit x64 复制 Download 按钮旁边的下载地址。在 putty 中输入如下命令行进行下载。 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-4.0.0.tgz 解压文件 tar -zxvf mongodb-linux-x86_64-rhel70-4.0.0.tgz 解...

2018
07-08

putty 终端连接 centos 7 虚拟机

在一切(网络)都正常的情况下,你只需要像连接云服务器那样连接就好了。 第一步,通过 ifconfig 命令 或者 ip addr 命令查看 centos 虚拟机的 ip 地址。 第二步:在宿主机打开 putth 输入这个 ip 地址(192.168.108.129),就可以连接了。 首次会看到如下提示:直接点是就行。 同样的输入账号和密码就可以进到熟悉的页面了。 我的虚拟机使用的是 NAT (系统默认的模式),但安装完系统后还是不能访问外...

2018
07-06

centos 7 安装 Node.js

最近用 vue2、koa2 做一个网站,然后部署到服务器中。第一步就是得安装一个 Node.js 的环境。在 Window 中安装非常简单,直接官网中下载双击安装包进行安装就可以了。而到了 centos 7 中就不一样了,不过依然还是简单的几步。 本例中我用的是 centos 7 虚拟机进行演示。跟真实环境应该没什么差别。 第一步:从官方中下载需要的版本。 第二步:在centos 中 执行如下命令,下载 Node.js wget https://nodej...

2018
07-05

VMware Workstation Pro 安装完 centos 7 虚拟机后无法 ping 外网

在 vmware 中安装完 centos 7 后无法访问或者 ping 通过外网是常有的事。并且有时候解决问题的方法也很简单,只要你知道原因,而当你不知道原因时,单凭试一试很有可能会把原本简单的问题复杂化。比如这篇文章即将要分享的就是这样。所以本文并有什么技术含量,只是用于记录此时此刻踩过的坑。 安装完 vmware 以及 centos7 后默认是 NAT 模式,默认为这种模式本身没什么问题,问题是当我们安装完 centos 7 ...

2018
07-05

JavaScript 技巧大全

前言 这篇文章不会分享很高深的问题,只是把平时在前端开发中很常用到的东西整理出来,让经历过的东西有个家。 类型判断 console.log(Object.prototype.toString.call([1,2])); // [object Array] console.log(Object.prototype.toString.call({})); // [object Object] console.log(Object.prototype.toString.call("Hellow")); // [object String] console.log(Object.prototype...

2018
07-02

AngularJS 指令实现自定义下拉框

前言 AngularJS 的时代已经接近尾,但依然使用它的项目还是不计其数,下面就来做一个自定义的下拉框。 效果走一波: 这个下拉框可以实现: 禁用下拉框 禁用指定下拉项 选中高亮 是否默认选中第一个 是否要显示“全部”一项 自定义下拉框 样式代码 ul{ padding: 0; margin:0; list-style:none; } .dj-select-box{ position: relative; width: 200px; cursor: pointe...

2018
06-30

前端面页性能优化

表单性能优化 HTML 代码 <form id="my-form" action=""> <input type="text" name="name"> <input type="password" name="password"> </form> <input id="btn" type="button" value="获取表单数据"/> JavaScript 代码 var myForm = document.getElementById("my-form"); var name,password; btn.onclick = function(){ name = myForm["name"].va...

2018
06-16

div+css 技巧大全

121212 css 计数 css 代码 .choose{ counter-reset:fruit; } .choose input:checked{ counter-increment: fruit; } .count:before{ content:counter(fruit); } HTML 代码 <div class="choose"> <label><input type="checkbox">1</label> <label><input type="checkbox">2</label> </div> <p><span class="count...

2018
06-16

Vue2+Koa2 图片上传功能实现

前言 对于一个博客网站来说附件上传功能可以说是不可或缺,特别是图片上传功能,谁都不愿意看到一个文字满天飞,图片一张都没的博客。这样会让别人的阅读欲望大打折扣。本文主要是分享一下 前端 vue2 加后端 koa2 实现的图片上传功能,没有太多多余的代码,直接把实战中的主要代码呈上,希望你喜欢。 准备工作 需要了解 formDate 需要了解 axios(网络通信库,简单的理解就是请求) 需要了解 koa-multer...

2018
06-10

判断对象是否含有某个属性

前言 这其实没什么好说的,本文章只作记录。各位看官可以作选择性阅读。 hasOwnProperty() 方法 const obj = { name:"前端技术", age:"3年2月20日" } console.log(obj.hasOwnProperty("name")); // true 不管对象的属性是否可枚举,hasOwnProperty() 方法都能检测到。 注意: 如果我们使用的话,有一种情况是不可用的,就是当我们像下面通过 Object.create(null,{……}) 这...

2018
06-06

JavaScript 中的可枚举属性与继承的可枚举属性解密

前言 这篇文章主要是分享一下什么是可枚举属性和继承属性,可枚举属性和继承属性这两个词估计你已经在网上看到无数次了,但网上对于这两个东西的解释很多都不是很详细,一笔带过的居多,特别是继承属性的介绍。基本都是只见【继承属性】这四个字眼,却极少看到有关这个名词的相关介绍,所以才有了这篇文章。 可枚举属性 什么才算是可枚举属性?我们不妨回想一下,在平时的开发中我们是如何定义一个对象...

2018
06-05

原生 JavaScript 做一个接地气的富文本编辑器

前言 这里不分享富文本编辑器都有哪些,哪些富文本编辑好用,而是简单地分享一下如何做一个比较接地气的而已很简单但很实用的富文本编辑器。当然这里也不是把这个富文本编辑器做很多强大,因为也没必要,并且也不是一天两天可以做得完的,为此是这里只是想通过一个简单的例子来说明如何做一个更加贴心的富文本编辑器。 在开始之前我们先来看一看效果图: 富文本编辑器之旅 这里我先把代码贴出来,是好...

2018
05-30

字符串和数组方法整理

前言 字符串和数组两个所涉及的方法也不是很多,但不知道为什么,需要用某些方法的时候脑子里竟然不知道对应的方法叫什么,或者知道这个方法怎么写,但里面的参数,以及返回值,还是是很清楚。所在对于我自己来说,有必要整理出来。 字符串方法 startsWith() endsWith() includes() 这三个方法用法简单: const str = "hello yunkus.com!" const res = str.startsWith("hello"); // true con...

2018
05-25

window name.bat 批量处理文件/文件夹

前言 .bat 后缀 ,双击后就可执行 .bat 里面的命令行,做成 .bat 文件批处理有时候可以大大的节省我们的宝贵时间,减少重复工作。 现在我们先来了解下 window 里的批量文件处理 *.bat 文件的基本结构: @echo off 不显示执行过程中的命令行,如果前面不带 @ 那么就会把自己(echo off)显示出来,其它的命令行不显示。这样就可以保证命令行执行窗口的整洁 pause 暂停,也就是我们双击 .bat 文件后命令执...

2018
05-21

Vue2 插件开发 Toast

前言 Vue 插件开发第一篇,这篇来做个简单的例子,Toast 弹窗提示,如果不知道如何制作 Vue 插件,可以看这里《Vue 插件编写的完整套路》。 基本文件结构 src ├── components │ ├── DetailPost.vue │ ├── EditPost.vue │ └── Home.vue ├── assets │ └── plugins │ └── toast.css ├── plugins │ └── Toast.js ├── router │ └── index.js ├── ...

2018
05-09

pasition.js 一个很炫酷的 path 过渡动画类库

前言 动画过渡给我们带来的视觉冲击不用我多说,最近无意中发现了一个 path 过渡动画的类库 pasition.js ,pasition.js 由腾讯AlloyTeam正式发布,在学习这个类库过程中发现网上的文章绝大多数都是一个样,只是官方的一个拷贝,为此,我觉得有必会把一些东西说明白。 在这里就不把官方的介绍文章拷贝一份了,毕竟时间宝贵,不过你可以通过这个网址https://github.com/AlloyTeam/pasition#usage欣赏一下,...

2018
05-08