- 博客(50)
- 收藏
- 关注
RSS订阅原创 “山寨版”《草料二维码》
之前版本是支持自定义 logo 的大小的，但是这种过于自由导致二维码的识别效率不高，容易出现识别不出的情况，因此这次版本去掉了自定义 logo 大小的功能，根据 qrcode 的容错率计算 logo 最大能占用的面积大小，用于计算 logo 的最大大小。首先绘制码点，在绘制码点之前，我们需要计算 logo 所占位置的区域，此区域内不绘制码点，(之前是 logo 直接覆盖码点，效果不好)，提高绘制速度。之前浏览过草料二维码的网站，他的二维码美化功能很强大💪，可以分别自定义码眼和码点的形状和颜色！
2024-06-27 14:21:27
296
原创 underscore 诞生记（二）—— 链式调用与混入（mixin）
上篇文章讲述了 underscore 的基本结构搭建，本文继续讲链式调用与混入。如果你还没看过第一篇文章，请点击 “underscore 诞生记（一）—— 基本结构搭建”链式调用在 JQuery 中，我们经常使用到链式调用，如：$('.div') .css('color', 'red') .show();那么在 underscore 中，是否支持链式调用呢？答案是支持的，只不...
2019-04-30 10:55:51
272
原创 underscore 诞生记（一）—— 基本结构搭建
1. 简介underscore 是一款成熟可靠的第三方开源库，正如 jQuery 统一了不同浏览器之间的 DOM 操作的差异，让我们可以简单地对 DOM 进行操作，underscore 则提供了一套完善的函数式编程的接口，让我们更方便地在 JavaScript 中实现函数式编程。jQuery 在加载时，会把自身绑定到唯一的全局变量 $ 上，underscore 与其类似，会把自身绑定到唯一的...
2019-04-30 10:54:55
297
原创 daily-question-02（前端每日一题02）
在这里记录着每天自己遇到的一道印象深刻的前端问题，以及一道生活中随处可见的小问题。强迫自己形成积累的习惯，鞭挞自己不断前行，共同学习。Github 地址2019/04/15 - 2019/04/211. 写一个乱序函数 ？遍历数组元素，然后将当前元素与以后随机位置的元素进行交换。 function shuffle(a) { for (let i = a.length; i; ...
2019-04-30 10:54:11
343
原创 daily-question-01（前端每日一题01）
在这里记录着每天自己遇到的一道印象深刻的前端问题，以及一道生活中随处可见的小问题。强迫自己形成积累的习惯，鞭挞自己不断前行，共同学习。Github 地址2019/04/01 - 2019/04/071.为何 [] == ![] 结果为 true，而 {} == !{} 却为 false首先了解一下类型转化的规则：1、如果有一个操作数是布尔值，则在比较相等性之前先将其转换为数值——fal...
2019-04-30 10:53:21
435
原创 一款轮播组件的诞生
1. 前言早在几个月前，就想自己动手写个轮播图组件，因此也看了许多文章，断断续续过了几个月，今天终于有时间腾出手来给此插件做个总结，因此有了这篇文章。话不多说，先上 Demo, 效果如下：2. HTML and CSS本文不讨论html,css的实现方式，直接贴上代码<!DOCTYPE html><html> <head> <me
2018-12-28 17:46:24
208
原创 ES6 手写一个“辨色”小游戏
1. 前言依稀记得几年前朋友圈流行的辨色小游戏，找出颜色不同的矩形。前些天突发奇想，打算自己手写一个类似的游戏，话不多说，先上 Demo . –项目源码本实例基于 ES6 实现，并兼容 ie9及以上。2. 项目结构index.html index.css index.js本文主要讲述如何使用 js 实现功能，html css 不在此范围。直接上代码。<!--index.html-...
2018-09-19 15:09:31
641
原创 Vue 编写一个长按指令插件
1. 如何编写 Vue 插件在以往的 Vue 项目开发过程中，我们使用插件的方法是Vue.use(plugin)。如： import filters from "./filter/filters";Vue.use(filters);plugin 为 Object 对象，需内置一个install()方法方可使用。该方法第一个参数为Vue对象，其余参数由使用者传入决定。plu...
2018-09-06 17:16:46
756
原创 Webpack4 搭建 Vue 项目
1. 前言由于 Parcel 打包工具的影响，webpack4 也追求零配置搭建项目。而前阵子出现的 vue-cli 3.0也是基于 webpack4 零配置的思想创建的。对于一些习惯webpack3 的开发者难免有些不习惯。本文就带你绕过 vue-cli，用 webpack4 一步步搭建 vue 项目。注：（本文讲述的是webpack4基础配置，文章有点长，请耐心看完。或者直接查看项目源...
2018-08-23 17:49:20
3060
12
原创 vue 手写一个时间选择器
最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件，今天带大家一步一步实现 DatePicker 的 vue 组件。原理 DatePicker 的原理是——计算日历面板中当月或选中月份的总天数及前后月份相近的日子，根据点击事件计算日历面板显示内容，以及将所选值赋值给&amp;lt;input/&amp;gt;标签。实现CSS 代码于文章末...
2018-08-02 15:23:24
5236
1
原创 详解 JSONP
JSONP 被用于跨域获取数据。在讲解它之前，先讲讲它与 JSON 之间的区别什么是JSON？JSON 是一种基于文本的数据交换方式，或者叫做数据描述格式。其优点是：1、基于纯文本，跨平台传递极其简单；2、Javascript 原生支持，后台语言几乎全部支持；3、轻量级数据格式，占用字符数量极少，特别适合互联网传递；4、可读性较强，虽然比不上 XML 那么一目了然，但在...
2018-07-31 15:01:12
366
原创 如何开发脚手架
开发一个简单的脚手架工具前言像我们熟悉的 vue-cli，create-react-app 等脚手架，只需要输入简单的命令 vue init webpack project，即可快速帮我们生成一个初始项目。在实际工作中，我们可以定制一个属于自己的脚手架，来提高自己的工作效率。为什么需要需要脚手架？减少重复性的工作，不再需要复制其他项目再删除无关代码，或者从零创建一个项目和文件...
2018-07-27 16:18:21
4039
3
原创 parcel-vue
前沿parcel 工具的优点：1、 Parcel 使用工作进程启用多核编译，并具有文件系统缓存，即使在重新启动后也可快速重新构建。2 、Parcel 支持JS，CSS，HTML，文件资源等等 - 不需要安装任何插件。3、在需要时，代码使用 Babel，PostCSS 和 PostHTML 自动转换 - 即使是 node_modules。4、Parcel 使用动态 import(...
2018-07-02 11:47:00
730
原创 Promise 详解
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。Promise 是一个对象，从它可以获取异步操作的消息。function promise () { new Promise(() => { setTimeout(() => { console.log(100) }...
2018-04-20 12:56:39
234
原创 使用 socket.io.js 实现 websocket 实时通讯
背景 最近公司在做一个快递柜项目，需要与快递柜设备端进行实时通讯，因此接触了 websocket.websocket 作用 简单的说： 传统 http 通讯一次交互数据后就断开连接了，服务端没法主动向客户端推送信息。 而长连接的 websocket 解决了这一问题下面会有一个简单的例子介绍 socket.io.js 的使用github 代码地址将...
2018-03-28 14:19:32
43651
4
原创 使用 electron 编写 window 桌面应用
背景 最近公司在搞一个泰国快递柜项目，需要使用 window 桌面应用，听说 javascript 可以编写桌面应用，因此踏入了 electron 的编写道路，写下这篇文章，记录爬过的坑。1. 安装Electronnpm install -g electron2. 安装Electron-forgenpm install -g electron-forge3. 新建...
2018-03-03 11:22:51
4386
原创 cookie/sessionStorage/localStorage 的区别及用法
区别本地 cookie 可以跨浏览器使用，可以设置有效期，可以跨标签使用。sessionStorage 只用来单页面存储数据localStorage 用来永久保存数据相同点都是用来存储数据！用法cookie //JS操作cookies方法! //写cookies function setCookie(name,value) { var Days = 30; var
2017-12-06 19:18:09
1249
原创 浏览器上传图片的方法
1. 设置 headerheaders: {'Content-Type': 'multipart/form-data'}2. 获取 file 文件let files = e.target.files[0] || e.DataTransfer.files[0]if (files.length === 0) { return} else { let param = new wind
2017-11-25 10:29:18
2520
原创 vue-i18n 实现多语言切换
首先安装npm install vue-i18n然后在main.js 中引入：import Vue from 'vue'import VueI18n from 'vue-i18n'Vue.use(VueI18n)配置相关文件在 src 根目录新建一个 language 文件夹 里面放置一个 index.js 和其他语言包，这里以中英文为例，// index.jsimport messagesE
2017-11-23 19:20:14
3016
转载 阻止a标签默认行为的方法
以下简单总结以下a标签阻止默认行为的几种简单方法，希望可以对有需要的朋友有些帮助，(1) <a href="javascript:void(0);" onclick= "myjs( )"> Click Me </a>onclick方法负责执行js函数，而void是一个操作符，void(0)返回undefined，地址不发生跳转。<a href="javascript:;" > Click
2017-11-23 09:38:48
376
原创 vue 打包优化
1. 去除控制台调试时的打印信息修改build/webpack.prod.conf.js在 plugins 中的 UglifyJsPlugin 的 compress 加入这两行： drop_debugger: true, drop_console: true代码如下new webpack.optimize.UglifyJsPlugin({ compress:{ wa
2017-11-13 12:45:54
558
原创 vue 实现 pager 组件翻页效果
【名称】pager 翻页组件【技术】使用 VUE.JS 制作【效果】实现页码跳转，根据组件 props 参数获取 pager 的页码总数和当前页码。当页码过多时，显示首尾页码以及当前页码及当前页码左右页码。首尾可点击进入上一页或下一页【代码】<template> <div> <div class="pager-wrapper" v-if="pageNum < 6">
2017-11-03 17:14:30
2394
转载 apply、call和bind的区别
在JS中，这三者都是用来改变函数的this对象的指向的，他们有什么样的区别呢?在说区别之前还是先总结一下三者的相似之处：都是用来改变函数的this对象的指向的。第一个参数都是this要指向的对象。都可以利用后续参数传参。 那么他们的区别在哪里的，先看一个例子。 var xw = { name : "小王", gender : "男", age
2017-11-01 17:37:12
291
原创 vue 实现省市区三级联动
1. 省市区数据表prpvinces.js温馨提示：该数据表未按 eslint 语法编写，因此会报错。事先将 eslint 关闭问题即可解决。关闭方法： 找到 build>webpack.base.conf.js>module.exports>module>rules删除以下代码：{ test: /\.(js|vue)$/, loader: 'eslint-loader'
2017-11-01 14:20:31
9539
1
原创 stylus 详解与引入
Stylus介绍及特点Stylus 是一个基于Node.js的CSS的预处理框架，诞生于2010年，比较年轻，可以说是一种新型语言，其本质上做的事情与 Sass/LESS 等类似， 可以以近似脚本的方式去写CSS代码，创建健壮的、动态的、富有表现力的CSS，默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。Stylus比LESS更强大，而且基于nodejs比Sass更符合我们的思路。S
2017-10-30 11:48:27
6502
原创 瀑布流布局的实现
提出问题 如何实现图片的瀑布流布局？实现思路 两种方法，一种是 CSS 实现，能实现页面响应式瀑布流，使用 column-width 和 column-gap 属性。另一种是 JS 实现，通过获取窗口宽度计算首行填充图片个数，定义行高度数组。然后将 DOM 操作修改第二行第一个元素的绝对定位，使其位于上一行高度最小的元素之下，并求和这两个元素的高度，更新高度数组。解决问题详细代码请点击这
2017-10-30 09:36:47
1396
2
原创 vue 如何使某个组件不被 keep-alive 缓存
提出问题 最近在做项目发现一个问题，当我使用了 keep-alive 标签后，进入了某个路由进行一系列操作，再点击浏览器后退，再次进入刚才的路由，页面被操作的数据没有初始化！分析问题 这是因为 keep-alive 将路由页面缓存，所以该路由没有完成整个生命周期，没有 destroyed，因此重新进入也没有触发其他生命周期钩子，如 created 等。解决问题（1）. 查看官方文档
2017-10-28 10:24:26
10128
原创 利用JQ实现简单的拖曳效果
提出问题 如何实现将一个盒子里的元素拉到另外一个盒子里？实现思路 此操作包含的事件有 mousedown mousemove mouseup ,对这三个事件进行监听并进行相应的操作。 操作设计的节点有：原节点，临时节点，新节点 节点的移动涉及事件e的坐标 操作元素使用JQUERY 代码实现相应的注释在文中已有体现，请认真观看，你可以理解的。先定义一个对象 drag
2017-10-18 15:37:47
1417
原创 quill——简单的富文本编辑器
先介绍一下一般网页如何实现 quill 富文本编辑器引入 quill.js 文件<script src="https://cdn.quilljs.com/1.3.3/quill.js"></script>引入主题 css 文件 <link href="https://cdn.quilljs.com/1.3.3/quill.snow.css" rel="stylesheet">本文操作基于 J
2017-10-16 14:33:58
10454
3
原创 canvas 实现刮刮乐
提出问题 在一个电商网站上如何实现刮刮乐的效果？实现思路 用HTML5 的 canvas 标签画图在解决问题前，我们先来了解一下 canvas 标签canvas 是 html5 出现的新标签，像所有的 dom 对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js 能够调用它来进行绘图。context是一个封装了很多绘图功能的对象，获取这个对象的方法是 :var canvas
2017-10-15 12:18:51
4594
1
原创 懒加载
问题 一个电商网站上有大量的图片，加载很慢，如何使用懒加载优化用户体验？懒加载的原理： 先让所有的图片都显示同一张图片，在通过判断窗口大小以及滚动距离，判断该DOM元素是否在我们已视区域，如果在已视区域，则用js修改img标签的src为data中储存的真正的src,然后再添加一些图片出现的特效即可！html 代码<div class="lazyload"> <div> <ul>
2017-10-12 17:19:13
1453
1
原创 javascript 的正则表达式
定义 var reg = new RegExp("hello")或 var reg = /hello/var reg = new RegExp(/hello/)但是不能写成 var reg = new RegExp('/hello/') 会报错1.test方法RegExp.prototype.test()——用来测试字符串中是否含有子字符串/hello/.test("abchello"); //
2017-10-12 14:33:20
330
原创 hexo+github搭建免费个人博客
阅读本文应具备的知识：了解 git 和 github具备 markdown 语法基础知识1.在 github 建立属于自己的 github.io你要有一个 github 账号，并建立自己的 github.io 仓库，不懂可以查我这篇文章 《在 github 上实现页面托管预览功能》了解 markdown 语法，简单入门可以查看我这篇文章《如何入门简书》下载和安装git,教程请自行百度安
2017-10-03 13:20:14
3243
1
原创 详解vue之vuex
vuex存在的目的由于vue为单页面应用，其组件之间的数据传递如果单单依赖storage,很容易出现数据被覆盖，被串改的情况发生，vuex正是为解决这个问题而生，提供一个空间供所有的组件读写。1.安装vuexnpm i vuex --s2.基本代码然后在入口文件main.js输入一下代码// main.jsimport store from './store'new Vue({ el: '#a
2017-10-03 11:42:32
590
原创 详解vue之better-scroll实现轮播图和页面滚动
1.安装better-scroll在根目录中package.json的dependencies中添加："better-scroll": "^0.1.15"然后 npm i 安装。2.封装代码将better-scroll封装成两个基础组件slider和scroll放于src/base文件夹中。 slider.vue 代码<template> <div class="slider" ref="sl
2017-10-02 20:43:39
7861
1
原创 简单入门小程序03
上一节我们讲到《智慧插座》me 页面的制作，本文接下来讲 pay 支付页面的制作。 本文的知识点有： 参数在小程序内部的传递方法pay.wxss 代码/* pages/pay/pay.wxss */.title{ width: 600rpx; display: flex; padding: 20rpx; border-bottom: 1px solid #eee; marg
2017-09-30 00:01:54
418
原创 简单入门小程序02
上一节我们讲到《智慧插座》index 页面的制作，本文接下来讲 me 个人页面的制作。 本文的知识点有： * 利用 wx:if 实现页面内部 tab 切换 * wx:for 的列表遍历先上 me.wxss 代码/* pages/me/me.wxss */.user { width: 100%; padding: 20rpx 0; box-shadow: 0 2px 7px rgba
2017-09-29 23:28:48
420
原创 使用prototype自定义数组方法
题目如何实现下列代码：[1,2,3,4,5].duplicator(); // [1,2,3,4,5,1,2,3,4,5]解决方法使用array的prototype属性,自定义duplicator()方法，js代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>
2017-09-28 15:14:26
559
原创 一个域名自适应用户屏幕展现不同内容
目前有两种方法：一种是利用媒体查询@media,查询用户的屏幕大小，根据用户屏幕大小实现一套代码兼容pc与移动端 主要运用的CSS框架有bootstrap。其优点是：一套代码实现PC与移动端，维护成本较低 其缺点是：用户会下载多余无用的代码，当用户网速较差时，页面加载过慢影响用户体验另一种方法是通过userAgent 查询，根据用户设备跳转不同的网页，代码如下：<html> <meta
2017-09-28 00:21:14
428
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人