前端面页性能优化

表单性能优化 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 技巧大全

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">&l...

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

moment.js 一个近乎完美的日期类库

前言 其实这篇文章没什么可分享的,不是写给前端大牛,当然本博客也没有这种魅力能引来前端大牛。所以这篇文章是写给前端小白的。 怎么定义小白,其实像这种也不好说,我们不能拿在前端的工作年限来划分,因为很多人虽然在前端打拼了好多年,但水平依旧一般般,比如:我。 差点又跑题了,还是回到 momentjs 的介绍上来吧! 官方网址:http://momentjs.com/ 为了让这篇文章看起来不那么寒酸,在这里截个图...

2018
05-07

Vue $nextTick 解密

前言 Vue $nextTick 的用法在网上可以搜索出一大堆,基本都是大同小异,把官方的话搬过来改改,或者把 Vue $nextTick 的源码实现分析一遍,然后,然后你就很容易被带走了,在不归路上起走起远。在这里没有针对谁,也不是说分析源码没有,或者没必要。我觉得源码分析分析到了点上就 OK,点到为止,不然很容易让初学者找不到北,越想越多,还没开始学他就已经想跑路了。 关于 $nextTick 比如官方这么一句话...

2018
05-06

JavaScript 事件循环运行机制解密

前言 JavaScript 是单线程,这个地球人都知道,但 JavaScript 却可以做到类似多线程的感觉,这是怎么实现的呢,比如:你的程序中通过 ajax 发起了一个请求,此时你会发现,即使请求还没有返回结果,程序竟然继续往下执行了,JavaScript 的魅力就在于此,虽然我是单线程,但我可以让你有“多线程”的感觉。 上面说到的“多线程”的感觉其实就是通过 JavaScript 的事件循环机制实现的。这也就是事件循环在 Java...

2018
05-03

Vue 里的十万个为什么

前言 正如标题所说的,本文主要是分享一些关于 Vue 中的为为什么,但标题中的十万个有点夸张了,不过这也不重要,重要的是本文会持续更新,把 Vue 中的一些容易产生疑问的知识点收录进来。 vue-cli 创建的项目为什么会有两个 id=”app”? index.html是html文件的模板,将来启动项目后要把动态生成的模板都会放在id为app这个div中。 在App.vue中也有一个id为app的div,这并不冲突,可以看下m...

2018
04-30

Github 仓库入门:代码上传与管理

前言 上传一些项目到 Github 已经成为了程序员的一份副业了,上传代码到 Github 仓库不仅仅只是为了分享,更重要的是让自己的代码有一个归宿,也大大地方便了自己管理代码。这篇文章不分享什么有用的技术,只想默默地分享下怎么我们的代码上传到 Github 仓库,有用收藏,无用勿喷。 首先要想有一个仓库,你先得有个 Github 帐号,如果还没有,那就偷偷打开 https://github.com/,我不会笑你的,因为虽然...

2018
04-25

koa 2 开始

前言 koa 2 是一个基于 Node.js 开发的 web 框架,跟 Express 作用差不多,也是同一个团队打造的,只不过 koa 使用了更加新的语法(ES6),去掉了重复繁琐的回调函数嵌套,你可以使用,async 配合 await 来实现异步调用的同步写法,并且还极大地提升常用错误处理效率。这就让我们可以使用新语法来完成我们的工作。 官方网址:http://koajs.com/ koa 2 安装 koa 2 的安装有两种方法,一种是按照官方给出...

2018
04-22

VMware Workstation Pro 安装虚拟机全程记录

前言 首先,为什么会有这篇文章?原因是我想学学 Linux ,所以就用起了虚拟机来练手。而 虚拟机的使用又基本离不开 VMware Workstation ,所以本文就诞生了。不篇文章没有什么技术含量,都是一些只是用来说明过程的截图。本文文字很少,图片居多,因为想让你看得更明白。好下面我们开始吧! VMware Workstation Pro 安装 说明到安装,肯定得先下载, 官方下载地址:https://www.centos.org/ 官方下载页...

2018
04-17

Vue2 实现代码高亮功能

前言 本来这是一个很简单的问题,直接引入第三方插件,然后安装第三方插件的教程写几行代码就可以了,但这是理想的状态,在实际开发中,肯定会遇到各种情况,导致代码没有亮度。 基于 highlight.js 实现 安装 highlinght.js npm install highlight.js 下面我们先来基本按照 highlight.js 官方教程来实践一下。 引入 js 库 highlight.js 和样式表 github.css,官方提供了很多种主题,所有的主题样式文...

2018
04-15

Vue2+Express 项目开发环境搭建

前言 之前分享过一篇《Vue+Express+MongoDB 搭建极简版个人博客(增删改查)》,但没有怎么细说如何搭建 Vue+Express 开发环境。所以在这里就分享下。也算是一个记录吧! Vue+Express 项目开发环境搭建之旅 首先我们依次执行如下命令行, 安装 vue 环境 // 安装 vue-cli 脚手架 npm install -g vue-cli // 创建并初始化一个项目目录 vue init webpack myapp // 切换到项目目录 cd myapp // 安...

2018
04-12

ejs+Egg.js+MongoDB 搭建极简版个人博客(增删改查)

前言 上一篇博文中分享了Vue+Express+MongoDB 搭建极简版个人博客(增删改查),从中接触到了 Egg.js 所以也顺便把 Egg.js 也先简单地玩一下,同样的,接下来要展示的示例也是数据的增删改查,非常地简单,只是想通过这些简单的过程来粗略地认识下 Egg.js。 个人博客搭建之旅 这个也没什么好说的,直接进入主题。 涉及到的技术栈: Egg.js MongoDB mongoose ejs 文件结构 ├── app │ ├── controll...

2018
04-10

Vue2+Express+MongoDB 搭建极简版个人博客(增删改查)

前言 这个示例没有过多的修饰,没有好看的界面,只是从功能实现出发,不保证好看,但保证能用,这个示例通过 vue+express+ mongodb 搭建极简版个人博客,实现博客文章管理中简单的增删改查。 个人博客搭建之旅 简单的文件结构 ├── server │ ├── modules │ │ └── index.js // mongooes 模型 │ ├── api.js // 后台的所有接器都放在这里 │ ├── db.js // 数据库连接信息...

2018
04-08

Vue2 vuex 状态管理详解

前言 在 Vue 中有一个统一管理状态的地方,没错它就是将要出场的 vuex ,vuex 是用来管理状态的,状态是什么?说得接地气点就是一些变量,这些变量可以通过特定的方式在全局中调用,让不同组件之间的数据通信变得如鱼得水。 vuex 状态管理之旅 vuex 是什么 官方有这么一小段话: 官方定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...

2018
04-01

Vue2 父子组件通信的奥秘

前言 组件通信,在 Vue 中非常地常见,我们必需得会,不仅仅如,我们还得会父子组件间通信的各种套路,所以本文要分享的就是这个,一步一步来解开父子组件通信的奥秘。 父子组件通信之旅 说起父子组件之间的数据父互,我想你脑中已经有了不二仁选,比如在父组件中添加属性来跟子组件进行单向数据传递,并在子组件中通过props 来接收。这种方式接收到的数据你不能直接修改,不然会毫不客气地给你报错 ...

2018
03-28

link 和 @import 引入样式表你真的了解吗?

前言 样式表的引入相信你已经不陌生,link 姿势引入你早已用得炉火纯青,虽然这样,但关于 link 和 import 之间的关系或者说区别你又知道多少?这篇文章就是要把它们之间的细微差别给挑出来,让你过目的。 link 是 html 中的语法,而 import 是样式表中的语法,两者虽然作用一样,但使用的场景有所不同。 还有一个就是加载时机的不同,如果 import 是写在样式表中的,那么 impot 命令就会等到父样式表加...

2018
03-26

Vue2 App 框架级页面过渡效果(IOS 版)

前言 页面过渡效果现在的 APP 一抓一大把,比如:微信,QQ。个人认为页面的过渡效果对于提高用户体验来说,有很大的作用。谁不喜欢看到一个活生生的应用,谁又会喜欢古董级的应用?所以这篇文章就是让你体验下页面平滑过渡的那种细腻的,如丝般顺滑的感觉,感觉有了什么都好说。 这里说的 IOS 版本不是说只适用于 IOS ,而是页面效果切换是类 IOS 的切换动画效果。 Vue 页面过渡之旅 那我们就开始吧,...

2018
03-24

Vue2 生命周期钩子

前言 不管是 Angualr 还是 Vue,都会有自己的生命周期勾子,有了这些勾子函数,我们就可以很容易地云在特定的时刻执行一些相关的操作。比如在数据更时,在组件销毁时等等。 下面我们先来看一个官方给我们提供的一个生命周期勾子的显示图: 看完这个图我相信你已经知道 Vue 的生命周期有了大概的认识。为了让你更直观地知道这些生命周期勾子函数都是什么时候触发的,下面我写了一个简单的示例,运行下面...

2018
03-18

《ES6 标准入门》查缺补漏

前言 这篇文章主要是对第一次阅读 《ES6 标准入门》 完了之后一些疏漏或者遗忘的知识点进行查缺补漏,尽管这一次也不可能把所有的知识都都补上,那至少补上了一些。本文不会一次更新完,时间也不允许,只能在空闲的琐碎时间一章一章地回味。并且像这种也不可以操作之过急,得一步一个脚印。 第2章:let 和 const 命令 1、关于 let , 在 for 循环中,循环变量部分为一个父作用域,循环体内部是一个单独...

2018
03-15

Vue2 Element dom.js 详解

一个 dom.js 模块功能比较简单,把一些常用的 dom 操作封装在这里。比如:类的添加删除,样式的设置等。 dom.js /* istanbul ignore next */ import Vue from 'vue'; // 运行环境 const isServer = Vue.prototype.$isServer; // 匹配 “:”,“-”,“_” 中的任意一个,但每一个都可以重复,并且连带后面的一个字符(用于改为大写) const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g; // 匹配 moz开头...

2018
03-14

Vue2 Element 模仿秀-输入框篇(Input)

前方 这里文章主要分享Element 对 input 输入框在组件封装。但是本文没有把关于 input 的输入框所有组件都模仿一遍,原因有二:1、官方介绍 input 类组件中包括了其它组件相对较复杂的组件,比如:select 组件、autocomplete 组件,在这里我打算把它分开来模仿。2、如果都放在一篇文章中,代码会很多,不便于阅读理解。 文件结构 ├── index.html ├── mixins │ └── emitter.js ├── utils │ ├── cal...

2018
03-13

Vue2 axios 服务器通信

前言 是想使用 axios 我们不可避免地要跟数据打交道,所以在这里我们得做一些请求接口来模拟数据的请求,这里我们使用 easy-mock,类似的工具还有 JSONPlaceholder 不过 JSONPlaceholder 相对来说会比较麻烦一些,我也没有用过,easy-mock 非常容易上手,你只需要到官方网站中注册一个帐号,然后就可以新建一些接口了。至于怎么新建可以看官方文档教程,在这里不多说。 vue axios 之旅 首先在使用 axio...

2018
03-13