babulongbo-CSDN博客

原创字符集与emoji

目标了解字符集的来源了解emoji的来源了解emoji的字符编码常见字符集问题字符集的来源所谓字符集（Character Set）简而言之就是字符（Character）的集合，常见的字符有数字、字母、标点符号、功能符号等；字符又是由字节（Byte）组成，字节是计算机信息技术用于计量存储容量的一种计量单位，也表示一些计算机编程语言中的数据类型和语言字符，一个字节存储8位无符号数，储存的数值范围为0-255。这里的【位】指的是二进制数字0或1。字节通常简写为【B】，而位通常简写为小写【b】，计算机存

2022-02-15 19:53:32 991

原创 Egg.js框架使用文档

创建项目mkdir egg-example && cd egg-examplenpm init egg --type=simplenpm i修改项目目录cd app/mkdir service middleware schedule extendcd ../config/touch config.prod.js config.unittest.js config....

2020-01-06 14:40:45 2289

原创阿里云搭建npm私服和上传npm包

安装verdaccio：npm install -g verdaccio --unsafe-perm加上--unsafe-perm选项是为了防止gyp ERR! permission denied启动verdaccioverdaccio执行结果如下：*** WARNING: Verdaccio doesn't need superuser privileges. Don't run...

2020-01-06 14:38:17 1629

原创 vue-cli3创建项目

vue-cli3创建一个配置文件vue-cli3创建项目使用命令vue ui选择配置#创建项目名称#选择npm包管理器#选择【若目标文件夹已存在则将其覆盖】#选择【手动】#选择 -Babel -Router -Vuex -Css Pre-processors -Linter / Formater -Unit Testing -使用配置文件#选择【Sas...

2020-01-06 14:35:05 464

原创服务器数据库自动化备份

服务器数据库自动化备份操作系统： CentOS 7.7 64位mysql Ver 14.14 Distrib 5.7.28, for Linux (x86_64) using EditLine wrapper通过crontab实现mysql数据的自动备份创建启动脚本：cd /etc/cron.daily/touch mysqlTimingBackupvi /etc/cron.da...

2019-11-12 19:19:50 492 1

原创 nginx服务器部署步骤

Nginx 安装操作系统： CentOS 7.7 64位安装编译工具及库文件yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel首先要安装 PCRE下载 PCRE 安装包:cd /usr/local/src/wget http://downloads.sourceforge.net/pr...

2019-11-12 19:15:01 449

原创两列等高布局在项目中的应用

遇到的问题最近开发一个小型项目，项目只有两个页面，一个主页面，一个列表页面。项目使用的是vue技术栈，在开发页面的组件是遇到了一个布局问题，布局如下：要求：1.外部容器的高度由图片决定2.图片的宽度固定，右侧元素分配剩余空间3.右侧元素的高度于图片的一样高4.右侧上方文字不固定，但是最多不超过两行，下方文字总是位居底部分析问题由上面的要求可以得出以下结论：1.这是一个两列等高布...

2019-11-04 11:13:14 589

原创 webp格式的图片如何在html中应用

webp格式的图片既然有那么多的好处，那么如何使用这种格式的图片？首先要考虑到兼容性，对于不支持webp格式的图片依然使用原来的方式，对于支持webp格式的图片则使用新的格式。例如静态资源中包含了webp和img两个文件夹，分别是webp资源和png资源。对于同一个使用背景图的元素，我们原先是这样设置的 .elem { background-image:...

2019-02-24 16:48:28 7271 2

原创使用原生实现tab切换+slideToggle效果

**问题描述：**当tab切换时，由于tab对应的内容不同，导致内容容器的高度的不同。直接的切换显示内容显得太僵硬了，所以希望内容容器根据内容的多少实现slideToggle效果。**解析问题：**首先一点是使用原生，意味着不能使用第三方框架。而实现slideToggle动画效果主要有两种手段，一种是使用css3动画，另一种是javascript使用定时器实现slideToggle效果。但是...

2019-02-22 20:43:21 1308

原创 js 面试题

javascript的数据类型原始类型：null,undefined,number（数字类型）,string（字符串类型）,boolean（布尔值类型）,symbol（es6新增的符号类型）复合类型：objectjavascript强制转换和隐式转换强制类型转换是指将基本类型显示转化为包装类型（装箱）。例如：Number,String,Boolean,parseInt,parseFloat...

2019-02-20 20:14:15 271

原创 css 常见问题

隐藏滚动条并可以滚动内容1.计算滚动条宽度并隐藏起来页面向右偏移一定的距离。可以使用绝对定位或者translate。2.使用三个容器包围起来，不需要计算滚动条的宽度未知css隐藏滚动条这个方法不兼容IE，做移动端的可以使用。那就是自定义滚动条的伪对象选择器::-webkit-scrollbarchrome 和Safari: .element::-webkit-scrollbar { ...

2019-02-18 23:33:15 295

原创 html常见问题

HTML中<!DOCTYPE>标签的作用是什么呢？声明位于文档中的最前面的位置，处于html标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。HTML元素分类?在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。块级元素内联元素内联块元素div,p,h1~h6,ul,ol,dl,table,...

2019-02-18 23:32:09 680

原创 vue监听document的scroll事件

当前遇到了一个这样的业务场景：当页面滚动距离大于指定距离，显示回到顶部的按钮，否则隐藏按钮；项目构成：vue-cli + axios要求：不使用jQuery,使用原生完成这个组件。首先：MDN中对scroll事件的定义，可以发现其中的关键点element的scroll事件不冒泡, 但是document的defaultView的scroll事件冒泡document.defaultView指的...

2018-10-23 12:19:04 5830 1

原创 vue中的滚动事件以及requestAnimationFrame动画

接着上一章将，这一章主要讲编程时遇到的问题：scroll事件：我在vue中是这样使用的object.addEventListener(‘scroll’, e => {}, false);结果发现不行，于是查了很多资料，最后有3种解决方案：①在节点上使用onscroll=“function”②在节点上使用@scroll事件③object.addEventListener的第三个参数...

2018-09-27 11:56:30 4716

原创 VUE“粘性”阅读进度条

这个进度条是网上一个实例，原实例使用jQuery实现的查看，最近在用vue-cli，所以就用vue实现该组件查看。这个进度条有有意思的地方是：用户的一系列操作都和导航息息相关。一般来说，普通的导航，只是通过点击显示不同的内容或滚动到其他指定位置，至于用户在页面上的其他操作(滚动等)是和导航很少有关系，但是这个导航不一样，用户在页面上的一切操作都和导航相关。废话不多说了，我们来分析一下这个导航是...

2018-09-27 11:06:22 577

原创使用原生获取DOM元素的样式

我们在日常的工作场景下会遇到需要修改页面元素的样式问题，特别是使用原生js获取元素的样式，如果只是获取在元素的内联样式，可以通过Element.getAttribute(attr)来获取元素的属性，但是如果获取的是DOM元素的css样式表哪？这也是有办法的我们可以通过[getComputedStyle]进行获取，具体的可以点击这里来看。为了保持兼容性(ie)我们还要使用currentStyl...

2018-09-18 20:12:54 803

原创廖雪峰博客高阶函数的答案

廖雪峰博客高阶函数的答案：selfHigherOrderFn: function () { // demo1 求和 function sum (fn, ...num1) { const nums = Array.from(arguments).slice(1); let tota...

2018-09-12 20:39:49 282

原创定制个性化eslint

我们在使用vue-cli项目时，尤其在团队合作的时候不免要使用eslint，但是有时候eslint过于严格，比如说默认是2个空格，文件最后一行要有换行符等等，这些我们不需要或者不适合的规则，可以通过项目下的.eslintrc.js文件进行配置，例如我的： // add your custom rules here rules: { // allow async-aw...

2018-09-12 20:13:21 638

原创 js中的函数传参：值传递，引用传递 or 共享传递

周末的时候在看common.js规范时候遇到一个问题：function require () { let Modules = {exports:{}}; (function (Modules, exports) { let someFn = function () {}; ***//exports和modules.exports断开了引用**...

2018-09-10 20:00:23 3725 1

原创 sass单文件编译脚本

#!/bin/bash# sass文件编译脚本sass $2 $1.scss:$1.css --style compressed --sourcemap=none使用方式：例子输入命令： ./sass.sh scss/base.scss回车

2018-09-10 18:49:46 278

原创设置文本框的placeholder的样式

Input:-webkit-input-placeholder{ ...Style } textarea:-webkit-textarea-placeholder{ ...Style}

2018-09-10 18:44:41 1326

原创禁止输入框粘贴，复制，剪切，右键

<p>禁止粘贴：<input type="" name="" onpaste="return false;"/></p><p>禁止复制：<input type="" name="" oncopy="return false;"/></p

2018-09-10 18:43:36 683

原创设置提示信息框并缓存

手机中常见的一种提示方式：弹出一个黑色的提示框，然后几秒后消失；原理也非常简单：创建一个dom，将显示的内容放到dom中，然后使用定时器定时，到指定的时间后删除dom。但是操作dom的开销很昂贵，并且也没有必要，如果只是显示同样的内容，我们不需要每次创建—删除dom，我们只需要首次创建，然后让dom显示—隐藏即可。（操作dom会触发浏览器对页面的渲染，而显示和隐藏dom树则只会影响局部的d...

2018-09-10 18:42:01 332

原创 vue-cli项目设置全局变量

将变量挂在到window对象上你可以在你的base.js文件定义一个变量例如TB，将你自定义的所有函数和属性挂载到这个TB对象上，然后再将TB对象挂载到window对象上。例如：;(function () { Function isString () { ... } .... .... Const TB = { isString: isStrin...

2018-09-10 18:28:57 1467

原创 js数组生成随机数

1.使用random函数生成一个与数组length长度有关的数字(index = Math.floor(Math.random() * arr.length)); 2.保存这个元素result.push(arr[index]); 3.将数组的最后一个元素与该元素交换 arr[index] = arr[arr.length-1]; 4.删除最后一个元素arr.splice(arr.length...

2018-09-10 18:27:23 2561

原创设置vue-cli的默认路由

当我们创建vue-cli项目时，路径是http://localhost:9527/#/，但是这是有缺陷的首先#在很多环境中不允许使用或者使用时有严重的缺陷，其次从命名的角度来看也是不友好的。所以为了解决这个问题，vue提供了history-mode模式；来解决这个问题。另一个问题是，浏览器默认访问的是http://localhost:9527这种连接，但是我们需要默认去登录页面，例如：http...

2018-09-10 18:26:06 2098 1

原创 vue2.0：Can not read property ‘XXX’ of undefined

问题描述:在vue2环境下:页面爆出标题的错误，但是页面的数据和方法正常渲染和使用，没有任何异常。解决办法：①定义异步请求数据的完整格式②页面使用该数据时，使用v-if进行判断一下问题分析：当你的页面中渲染的时候，created的数据肯定是还没获取到的，如果你的json是只嵌套一层，因为data你已经定义好了，所以data.a不会出现data undefined的错误，只是找不...

2018-09-10 18:24:31 8502

原创消除a标签点击去掉高亮背景&消除ios点击后出现黑色背景

标签{ -webkit-tap-highlight-color:rgba(0,0,0,0); }

2018-09-10 18:23:11 1290

原创 js实现购物车的抛物线

我们经常在电商网站上买东西，当我们将心仪的商品加入购物车时，可能碰到下面的画面。注意小球的运动，请自主忽略画技；小球的运动轨迹呈现抛物线，且小球的体积由大变小在由小变大；对于一个编程人员，不探究其原理都可能睡不着，所以就研究一下其原理；首先小球的运动轨迹是一个抛物线，则我们可以使用抛物线方程来计算水平方向和垂直方向的关系；求抛物线的方程首先的需要至少最少三个坐标点，当然三个...

2018-08-22 17:31:06 2082

原创 javascript实现弹出层

弹出层和弹窗相似但是并不相同；弹窗和弹出层都是由用户触发的显示提示信息的弹出面板；但是弹窗只是显示一些信息，没有太多的复杂的交互事件；而弹层类似一个整个页面，可以实现页面的所有功能；现在前端弹层使用的很频繁，如支付宝支付弹层等…所以掌握弹层是一个很重要的技能。如果只是简单的隐藏和切换，当然就不必说，我要说的html+animate+es6实现弹层； ; html弹层结构：...

2018-08-10 15:35:28 4650

原创实现无缝轮播的简单实例

/** * 图片轮播过程分析 * 假设一共有5张图片，克隆第一张图片放在最后，现在一共有6张图。 * 轮播中图片显示的顺序为： * 1 2 3 4 5 (6–>1) 2 3 4 5 (6–>1) …. * (6—>1)表示图片显示第6张...

2018-08-06 10:52:57 759

原创 sed:高效的批量替换文件内容的命令

今天项目的base.js文件需要重构一下，因为里面有很多多余的代码，并且结构存在很多不合理的地方。首先因为项目不支持es6模块化，所以只能使用传统的方法。首先声明一个顶级变量，挂在window对象下，然后所有的变量和方法都挂在到这个顶级变量上。;（function (window, document, $) { ...}(window, document, jQuery));...

2018-08-01 19:52:00 8778

原创鼠标滚轮事件以及满屏滚动实现

MDN对鼠标的滚轮事件的介绍： MDN对鼠标滚轮事件的实现：/** 鼠标滚轮事件* @return void* */function mouseWeel() { var prefix = "", _addEventListener, onwheel, support; if (window.addEv...

2018-07-26 16:39:21 2507

原创 vue组件props中异步获取的数据

在使用vue组件时，我们不免使用props获取父组件的数据，对于父组件直接定义的数据，例如： data{ sex: ‘男’， …. } 我们直接使用即可，但是如果我们所需的数据在父组件中是使用异步获取时，尤其我们的组件需要等待数据进行下一步操作时，如果不采用特殊的办法就会产生不可预知的错误，这时我们可以在子组件中使用watch，检测数据的变化，只用数据传递的值符合我们的期...

2018-05-17 19:26:58 3150

原创 javascript检测变量的类型

javascript检测变量的类型：目前JavaScript有三种方式：typeof,instanceof,object.prototype.tostring.call。他们分别用于检测基本类型，类，引用类型。重点是typeof和object.prototype.toString.call。有时我们使用typeof检测的引用类型的产生不易理解的结果，无法准确的检测变量的类型。例如： ...

2018-05-17 19:12:30 339

原创 sublime编译禁止生成.css.map文件

sublime如何设置编译路径，网上有很多，就不详细说了。sass编译虽然很方便，但是它生成的.css.map很烦人，所以我们肯通过配置禁止此文件的生成。详细配置如下：{ "cmd": ["sass", "--update", "${file_path}/${file_name}:${file_path/scss/css/}/${file_name/scss/css/}"...

2018-05-03 18:51:12 1289

原创 Uncaught TypeError: 'set' on proxy: trap returned falsish for property 'age'

今天学习阮一峰老师的es6时，跟着敲一个实例时出现这个错误。这个实例是：let validator = { set: function(obj, prop, value) { if (prop === 'age') { if (!Number.isInteger(value)) { throw new TypeError('The age is ...

2018-05-03 12:40:16 24594

原创解决移动端虚拟键盘扰乱布局问题

做移动端开发时总会遇到这样的问题：在某些Android机上点击输入框时页面的的布局错乱，字体变小，输入框被遮挡等问题。问题的原因（个人见解）：在出问题的手机浏览器上虚拟键盘不是以浮层的形式显示，而是以一个占据页面空间的div显示，因为虚拟键盘要占据空间，则你的内容页面的高度就会减少，所以如果你的适配里面有关于高度适应的字体设置，则需要进行修改。你的网页像是一个iframe一样嵌入到到当...

2018-04-25 19:59:05 1265

原创 javascript实现水果抽奖机

起因：公司每个月都要做推广活动，很多推广活动都需要抽奖，但是以前的抽奖的特效太简单，于是美工看到京东的年会抽奖机，我就不得不走向逆向仿制的道路上，经过三天的攻克，终于实现了抽奖效果。分析：水果抽奖机的动画效果是三个轮播图进行滚动到指定的位置。虽然是三个，但是只要破解一个，将其他动画依次延迟执行就可以了。分析其中的一个轮播动画，就会发现就是我们平常写的轮播图，只不多这个轮...

2018-04-12 17:40:45 3028

原创 localStorage实现弹窗只显示三次

起因：公司经常做活动，所以需要首页弹出弹窗显示活动，提醒用户参加，所以最近经常有弹窗显示。但是有时候弹窗的显示只是提醒用户，并要求每天只显示三次（每天进来的前三次，次数过多用户太烦）。以往弹窗有优惠券，所以后台就有数据库记录用户的登录的此时，但是这次只是提醒用户，并不涉及后台操作，所以要求使用localStorage实现这个功能。要求： ①弹窗在一段时间内使用 ②用户每天进来的前三...

2018-04-10 17:46:12 1315

空空如也

空空如也