开心大表哥-CSDN博客

原创 css3鼠标点击出现波浪动态效果案例现场

(function() { let x, y; let index = 0; let screenSizeWidth = (′body′).width();letscreenSizeHeight=(′body′).width();letscre...

2018-09-13 10:51:50 4059 6

原创用benchmark测试es6的extends属性的性能

用benchmark测试es6的extends属性的性能新建一个文件叫classExtend.js放以下代码：'use strict';const Benchmark = require('benchmark');const benchmarks = require('beautify-benchmark');const suite = new Benchmark.Suite();...

2018-08-27 22:26:43 469 1

原创谷歌浏览器扩展程序一键解决本地开发跨域问题，让你不用乱mock数据

谷歌浏览器扩展程序一键解决本地开发跨域问题，让你不用乱mock数据 1.在谷歌浏览器中打开它的网上应用商店（需要翻墙）；2.然后在搜索框中输入：Access-Control-Allow-Origin，在回车搜索一下，就会有图片的结果； 3.在上图第一个工具中点击添加至Chrome进行添加；4.添加成功后就会在浏览器的右上角出现一个绿色的图标（如果你是老司机装的拓展太多可能不能在这...

2018-08-27 21:56:26 1067 1

原创占位图和图片懒加载项目实战详解

占位图（兜底图）：真实图片太大还没有加载完之前先用一张占位图表示这个位置将来会有图片或者说明这个位置是有图片的但是不知道什么原因真正的图片没有加载出来用户只能看到这张占位图；什么是图片懒加载：懒加载也就是延迟加载，当访问一个页面的时候，先把img元素渲染出来，但是不给它真正的src地址，只有当用户需要看到真正图片的时候，才设置图片正真的路径，让图片显示出来。为什么要使用懒加...

2018-08-23 14:40:37 7313 5

原创活用clone和trigger函数，点击按钮原有事件不触发，之后再触发原有事件

活用clone和trigger函数，点击按钮原有事件不触发，之后再触发原有事件需求：网站开发完毕了，然后产品说要在原来的’确认按钮’点击后加一个’弹窗’提醒用户一些注意事项，在用户点击弹窗里面的’同意按钮’后再执行原来’确认按钮’ 里面绑定的事件。需求看起来很简单，但是有一个要求不能在原来代码上改，只能引入一个js文件和一个css文件。思路：将’确认按钮’clone出来，然后将它...

2018-08-23 10:34:13 1307 2

[Vue] - 1. 如何实现一个响应式对象最近在看 Vue 的源码，其中最核心基础的一块就是 Observer/Watcher/Dep, 简而言之就是，Vue 是如何拦截数据的读写，如果实现对应的监听，并且特定的监听执行特定的回调或者渲染逻辑的。总的可以拆成三大块来说。这一块，主要说的是 Vue 是如何将一个 plain object 给处理成 reactive object 的，也就是，...

2018-07-10 09:42:09 15277 2

原创人人都是webpack使用者，小白从入门到精通秒变大神

什么是WebPack，为什么要使用它？因为别人都在用，我不会用怎么跟他们一起装逼？别人说的这些是什么，我根本不懂：类似gulp把自己定位为stream building tools一样，webpack把自己定位为module building system。在webpack看来，所以的文件都是模块，只是处理的方式依赖不同的工具而已。webpack同时也把node的IO和modu...

2018-07-05 18:27:18 1435 5

原创深入理解vue slot插槽

单个插槽只使用这个标签的话，可以将父组件放在子组件的内容，放到想让他显示的地方具名插槽将放在子组件里的不同html标签放在不同的位置父组件在要分发的标签里添加 slot=’name’ 属性子组件在对应分发的位置的slot标签里，添加name=’name’ 属性，然后就会将对应的标签放在对应的位置了案例地址：http://dotwe.org/vue/e639fd3...

2018-06-28 18:43:54 5548 2

原创如何删除mac中的.DS_Store和git中的.DS_Store

.DS_Store 是什么使用 Mac 的用户可能会注意到，系统经常会自动在每个目录生成一个隐藏的 .DS_Store 文件。.DS_Store(英文全称 Desktop Services Store)是一种由苹果公司的Mac OS X操作系统所创造的隐藏文件，目的在于存贮目录的自定义属性，例如文件们的图标位置或者是背景色的选择。相当于 Windows 下的 desktop.ini。G...

2018-06-25 14:15:57 8344 1

原创微信小程序开发之wepy框架

wepy是由腾讯团队推出的小程序组件化开发框架，为什么一开始推出的时候不直接用这一套！？官网地址 WePY 是一款让小程序支持组件化开发的框架，通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化，Promise，Async Functions的引入都是为了能让开发小程序项目变得更加简单，高效。特性：类Vue开发风格支持自定义组件开发支持引入NPM包 ...

2018-06-19 20:11:01 7427 1

原创浏览器调试移动端网页包括安卓和苹果两种设备

情景：手机浏览器上打开一个网页发现界面出错了，可在电脑浏览器上运行的明明很完美，但是我无法对手机浏览器上的页面进行审核元素；这可怎么调试啊，怎样才能知道它在哪里错了！解决方案有两个：一：引入vconsole插件，手机上可以出现审核元素的界面供调试二：真机连电脑调试。 a.安卓手机解决方案： 1. 手机开启调试模式连接电脑，确保是调试模式连接的，安卓机型太多自行百度吧！（可以参考...

2018-06-13 21:35:14 7444

原创 mac下npm安装全局组件报错

1.没有权限安装在你的安装指令前面加上sudo，然后会提醒你输入密码，这个密码是你mac的开机解锁码！如：sudo npm install egg-init -g2.更换全局变量文件夹2.1.回到用户根目录下再新建一个全局安装的路径cd ~mkdir ~/.npm-global之前安装过的话会提醒存在了.npm-global这个文件夹2.2.配置npm使用新的...

2018-06-09 15:52:44 5696 3

原创微信小游戏和微信小程序的区别与共同

微信小游戏小游戏的运行环境在 iOS 上是 JavaScriptCore，在 Android 上是 V8，都是没有 BOM 和 DOM 的运行环境，没有全局的 document 和 window 对象。因此当你希望使用 DOM API 来创建 Canvas 和 Image 等元素的时候，会引发错误。对引擎的支持情况许多开发者对小游戏对 Cocos、Egret、Laya、Unity ...

2018-06-09 11:52:26 12732 4

原创微信小程序canva生成图片，长按图片识别小程序二维码详解

下面这个图片就是通过图片和文字等内容合成的一张带有微信小程序二维码的图片，在小程序内部长按可以识别出来：基本思路是先将内容用canvas排好版，然后把该canvas转化成图片；图片利用wx.previewImage进行展示，才能识别图片中的微信小程序二维码，这是博主目前知道唯一一种识别二维码的手段。1.合成canvas wxml:<canvas canvas-id="myc...

2018-05-09 14:45:54 25374 7

原创 Javascript闭包由浅入深题目

闭包就是能够读取其他函数内部变量的函数两个最大用处一个是前面提到的可以读取函数内部的变量；一个就是让这些变量的值始终保持在内存中。1、变量作用域要理解闭包，首先要理解javascript的特殊的变量作用域。变量的作用域无非就两种：全局变量和局部变量。 javascript语言的特别之处就在于：函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。注意...

2018-05-07 00:28:06 1526 1

原创移动端1px误差的原因以及解决方案

移动端1px问题在面试和工作中会经常遇到，系统地理解它是一个优秀前端的必修课！为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum...

2018-05-06 19:32:38 5273

原创浏览器同源政策之ajax请求不能发送

同源政策（same-origin policy）是浏览器安全的基石同源指的是三个相同限制范围（1） Cookie、LocalStorage 和 IndexDB 无法读取。（2） DOM 无法获得。（3） AJAX 请求不能发送。下面重点讲解AJAX 请求不能发送：同源政策规定，AJAX请求只能发给同源的网址，否则就报错。有4种方法规避这个限制：1.JSO...

2018-05-06 10:01:22 2030 1

原创 es6 promise对象常用案例

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。//创造一个Promise实例const promise = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error...

2018-05-05 23:41:06 564

原创简要理解vue的mvvm模式中的双向数据绑定

mvvm（Model-View-ViewModel）模式：由视图(View)、视图模型(ViewModel)、模型(Model)三部分组成，结构如下图。通过这三部分实现UI逻辑、呈现逻辑和状态控制、数据与业务逻辑的分离。使用MVVM模式有几大好处：　　1. 低耦合。View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Mo...

2018-05-05 11:30:51 3331 1

原创 http的缓存机制面试版

最近面试了4间公司，有3间问了我http的缓存机制。面试过后我上网查了挺多资料的，找到了一个相对不错的！稍微画了一下重点。先简单介绍一下HTTP报文： HTTP报文就是浏览器和服务器间通信时发送及响应的数据块。浏览器向服务器请求数据，发送请求(request)报文；服务器向浏览器返回数据，返回响应(response)报文。报文信息主要分为两部分 1.包含属性的首部(header)—...

2018-05-05 02:06:27 2604

原创简要掌握CommonJS的规范和使用方法

前言：CommonJs规范的出发点：后台JS没有模块系统、标准库较少、缺乏包管理工具；为了让JS可以在任何地方运行，以达到Java、C#、PHP这些后台语言具备开发大型应用的能力；事实上ES6已经出现了模块规范，如果使用ES6的模块规范是无需node.js环境的。因此，需要将commonJS规范和ES6的模块规范区分开来。 1.CommonJS模块规范主要分为三部分：模块定义、模块标识、模块引用...

2018-05-04 16:23:06 5191 1

原创 css清除浮动的最好的方式和原因

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。不清浮动：清浮动：原理：（1） display:block使生成的元素以块级元素显示,占满剩余空间（2）height:0避免生成内容破坏原有布局的高度（3）visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和...

2018-04-30 21:02:10 5848 2

原创 css实现多列高度不同的div等高

利用padding-bottom|margin-bottom正负值相抵；设置父容器设置超出隐藏（overflow:hidden），这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。 <!DOCTYPE HTML&...

2018-04-30 20:43:02 8254 2

原创循环调用innerHTML属性时进行性能优化1000多倍

innerHTML是一个JavaScript访问dom的API,由于js和dom时两个相互独立的功能只要通过接口彼此连接，就会产生消耗。所以访问dom元素的有代价的，修改元素则更为昂贵，因为他会导致浏览器重新计算页面的几何变化。最坏的情况是在循环中访问或修改元素，尤其是对HTML元素集合循环操作。这是下面两次写法循环15000次在谷歌浏览器上的差距，你没有看错，这两种写法的差距能到达1...

2018-04-30 16:35:23 6365 3

原创微信小程序怎样显示空格和换行

微信小程序里面的换行和空格只能在<text></text>里面写，换行是：\n空格是：\t 先看效果图：然后再看对应的代码：<text class='daynum-text'>已获得<text class='daynum-text1'>1852 </text>积分</text><text cl...

2018-04-28 14:48:21 27188 2

原创谷歌浏览器地址转换成二维码的插件，只需几行代码即可实现

谷歌浏览器插件，是利用javascript进行编写的。具体代码参考在github里面，这是本人简单编写的一个谷歌浏览器地址转换成二维码的插件，里面的代码思路本文暂时不做解析，只是介绍如何使用这个插件。 1.将插件下载到本地。 2.打开谷歌浏览器，点击‘拓展程序’： 3.点击‘加载已解压的拓展程序’： 4.刷新一下浏览器，发现右上角出现了，新按钮，点击按钮就能将当前页面的URL转化成...

2018-04-26 14:16:03 17478 5

原创一秒入门：不定宽高的水平垂直居中简单方式

<html> <meta charset="UTF-8"> <body> <div class="container"> <div class="wrap"> <p>铺设大量智能设备，使用

2018-04-24 18:07:51 8428 3

原创 windows下cmd命令行上传代码到github的指定库

1.在你的github里面建立一个仓库： 2.填写仓库的信息： 3.仓库成功创建： 4.去到本地，cd进入你想要上传内容的根目录，用git初始化根目录git init（如果遇到 LF will be replaced by CRLF错误，请看附录） 5.添加git add . 6.后面的步骤看第5步截图中的标注就可以了！成功后刷新一下仓库即可看到上传的内容了！...

2018-04-24 12:42:15 1956 1

原创 github删除仓库只要3步，将别人的仓库拿到本地修改再上传到自己的仓库

1.进入想要删除的仓库，点击setting 2.滚动到网页下面点击delete this repository 3.在弹窗里面输入仓库名，点击I understand the…… 好了，删了，奖声在哪里？！...

2018-04-23 18:13:04 10955 2

原创操作animate.css的一些小技巧

animate.css是一个不错的css3动态样式文件，它利用keyframes封装了很多动态样式。具体的可以到官网查看由于内容少而且方便操作，所以官网上竟然连教程都没有写；咋一看会有一种丈二和尚摸不着头脑。编哥我也是摸索了一阵才领悟到的，所以我写个文章把一些操作和巧妙都记录下来，方便以后回顾！ 1.用别人的东西肯定要拿过来嘛！所以第一步就是先把animate.css这个文件，拿到本...

2018-04-22 23:30:51 5300 1

原创 html5页面中添加腾讯地图api

html5页面中添加腾讯地图api：点击地图出现详细的地图：这是一个基于微信端的地图处理方案。先看看html架构：<a id="aToMap" href=""> <div class="map" id="map-container"> </div></a><

2018-04-22 23:05:52 11283 3

原创安装sass环境-ruby安装指南

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）window下安装SASS首先需要安装Ruby，官网下载。安装过程中请注意勾选Add Ruby executables to your PATH添加到系统环境变量。如下图：安装的过程就是点点点，Windows的基本操作，所以详细的图就不截了。安装结束之后测试ru...

2018-04-20 23:54:06 8641 1

原创 windows下ssh-keygen 不是内部或外部命令和打开id_rsa.pub文件

ssh-keygen 不是内部或外部命令，主要是没有找到ssh-keygen.exe，所以我们要将ssh-keygen.exe文件所在的目录配置到全局变量中去。 1.找到Git/usr/bin目录下的ssh-keygen.exe 2.属性–>高级系统设置–>环境变量–>系统变量,找到Path变量，进行编辑，End到最后，输入分号，粘贴复制的ssh-keygen所在的路径，...

2018-04-20 17:21:52 41688 15

原创基于nodejs的网络图片爬虫

这是我研究nodejs爬虫后写的一个图片爬虫小例子。不过功能还是挺强大的可以将你喜欢的图片下载下来。主要的爬虫代码：//var http = require('https');var http = require('http');var fs = require('fs');var cheerio = require('cheerio');var request = require...

2018-04-20 15:50:47 6258 7

原创 javascript一道综合了解析数组、数组去重和数组排序的前端工程师进阶面试题

已知道如下数组： var arr = [[1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14]],15]], 10]; 编写一个程序将数组扁平化并去除其中重复部分数据，最终得到一个升序且不重复的数组： var res= [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15] 答案：<scr...

2018-04-08 15:26:07 705 4

原创 javascript数组对象for循环中突然出现闭包的解决方案

1.代码目的是：将后台返回的data数组对象通过setData函数写到全局数组itemArr中。但是下面的写法出错了！<script>var data = [ {name:'小红',age:'18'}, {name:'小名',age:'19'}, {name:'小白',age:'20'}, ...

2018-04-08 11:40:07 5088 2

原创微信小程序修改data中定义的值setData()

1.修改普通变量的值data: { isShowPage1:false, count:0, },playAgain:function(){ this.setData({//通过setData来修改 isShowPage1: true, count:10, }); },普通变量修改是很简单的，参考一下上面就可以！ ...

2018-04-04 18:18:47 11778 2

原创微信小程序跳转外链web-view用法

小程序已经开放了，跳转外链的功能，意思是，在小程序里面可以直接跳转到一个h5页面中。注意上图中的两个信息： 1.个人类型与海外。。。。不支持。 2.配置域名白名单。基本的配置结束之后，我们就来开始用web-view这个插件了。 <web-view src="https://hx.qq.com/zlkdatasys/mct/proj_1/download.shtm...

2018-04-03 18:12:22 75765 9

原创微信小程序缺少文件, error: /game.json not found

今天小程序功能开发结束了，想要换真实环境下的appid来测试一波，兴高采烈的点击‘预览’想要生成二维码的时候，竟然报了一个十分莫名其妙的错误：缺少文件, error: /game.json not found 第一时间去找百度，竟然没有任何一条跟这个错误相关的搜索我当时就慌了：妈的，这问题是第一次出现在人类历史上的吗？后来，冷静下来，认真看了微信小程序的开发文档和对比了其他微信小程序我发...

2018-04-03 17:07:39 17436 8

原创微信小程序一秒学会制作table表格

大家都知道微信小程序自身没有提供表格这个组件，但是今天的项目需求又出现了，所以只能模仿一个了。效果图：代码挺简单方便的： wxml: <view class='history-table-wrap'> <view class="table"> <view class="tr"> <view class=...

2018-03-27 10:57:00 41551 18