自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

saucxs

sau交流学习社区(https://www.mwcxs.top)

原创 简单水印(watermark-dom)和算法水印(频域方式图片合并)实现

一、简单水印(watermark-dom) 阿里巴巴内网的不可见水印用的是什么算法? 据说月饼事件截图的那位员工也被开除了? 下面的只是简单的加一个很浅的水印,实现起来很容易。 1、看看水印的效果 随便找一个网站,比如就找掘金的个人首页, (1)F12检查模式, (2)在console里粘贴下面的...

2019-04-29 09:32:37 981 0

原创 happyChat开发系列:使用websocket.io实现双向通信的乐聊大前端开发

一、前言 乐聊是一个自己用websocket写一个完整的应用,虽然功能比较欠缺,但是实现了基本的文字聊天,以及群聊,私聊,机器人聊天等功能。因为这个自己做了PC端,无线端(手机端),以及使用cordova打包成一个android的apk。实现了一个大前端的项目,虽然现在android端还是有点有...

2019-04-10 10:39:36 149 0

原创 阿里云服务器:新用户的登陆服务器实例

一、登陆阿里云服务器官网 这个不用多说:https://homenew.console.aliyun.com/ 进入到控制台 二、实例修改root密码 重置实例密码,点击之后 点击修改之后,重新选择vnc登陆 三、使用VNC登陆 第一次登陆VNC登陆,会有给出远程登陆密码...

2020-01-12 21:17:25 343 0

原创 JavaScript系列--深浅拷贝简单实现

一、前言 之前写了一篇:浅析JavaScript解析赋值、浅拷贝和深拷贝的区别:https://www.mwcxs.top/page/592.html。里面介绍了解析赋值,浅拷贝,深拷贝的原理和实现。浅拷贝方法:Object.assign(),展开语法Spread,Array.prototype...

2019-08-24 23:06:19 27 0

原创 【JavaScript系列】时间复杂度和空间复杂度

一、前言 时间复杂度和空间复杂度,我们在大学里的算法与数据结构课程中已经学习过,这回根据项目工作中整理一下,这个估计只是一个粗略的估计分析,并不是一个准确的估计分析。 1、学习时间复杂度和空间复杂度是很有必要的,这个属于算法与数据结构的范畴,学这个是为了解决代码中的“快”和“省”的问题。这样才...

2019-07-30 10:34:54 520 0

原创 【JavaScript系列】类型判断(typeof,instanceof,constructor,Object.prototype.toString)

一、前言 类型判断有时候真的头疼,但是一旦熟练使用就会觉得不过如此。初级的,会判断数字和字符串。中级的,会判断数组和对象。进阶的,会判断日期,正则,错误类型。高级的,会判断plainObject,空对象,window对象等等。 基本类型:String、Number、Boolean、Symbol...

2019-07-25 09:33:26 52 0

原创 【vue系列】项目开发中常用的Vue小技巧--全局注册过滤器,全局组件注册,不同路由的组件复用

一、前言 vue的使用过程中会遇到各种场景,当普通使用时觉得没什么,但是或许优化一下可以更高效更优美地进行开发。下面有一些我在日常开发的时候用到的小技巧 二、全局注册过滤器 1、正常写法 之前我是这么写的过滤器的,在具体页面中。 filters: { roleFilt...

2019-07-23 15:13:09 116 0

原创 【混合App开发系列】Cordova+Vue实现Android APP开发(四)-- 热更新详细教程

一、前言 Cordova+Vue实现AndroidAPP开发(四)--热更新详细教程 二、安装Cordova热更新插件和热更新工具 1、安装Cordova热更新插件 cordova plugin add cordova-hot-code-push-plugin 2、安装Cord...

2019-07-05 09:48:01 783 0

原创 【JavaScript系列】vue项目中实现滚动条(具体视窗口的滚动条)操作:(1)置底,(2)置于上次停留的位置

一、前言 之前写了一个happyChat的项目,主要是想学习一下socketIO的使用。然后最近在给happyChat做前端优化和升级。发现第一版做的很low。 需要优化的问题: 1、问题1:滚动条会出现在头部和底部的视窗中,之前固定头部和固定底部是使用`position:fixed`。 ...

2019-07-05 09:44:39 375 0

原创 【JavaScript系列】深入javascript的主流的模块规范

一、前言 目前主流的模块规范: 1、UMD通用模块 2、CommonJs 3、es6 module 二、UMD模块(通用模块) (function (global, factory) { typeof exports === 'object' &...

2019-07-02 23:06:13 33 0

原创 Cordova+Vue实现Android APP开发(三)-- 设置图标和启动欢迎页详细教程

一、前言 内容是自己查资料和自己进坑出坑,适用于cordova打包android7.0版本以后的版本。我目前使用的是android8.0,android8.1,android9,androidQ等版本。(1)设置图标icon,准备好素材,在配置文件中加入不同尺寸的<icon density...

2019-06-28 21:13:08 880 0

原创 Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理

接上一篇文章:Cordova+Vue实现Android APP开发(一) 一、使用cordova打包运行app 打包静态资源,没有问题的,但是把自己的vue其他项目转成android app时候,发现接口请求不到数据。 1、对axios的统一加一个前缀 2、vue打包 ...

2019-06-27 14:22:42 1105 0

原创 cordova混合App开发:Cordova+Vue实现Android APP开发(一)

一、前言 android开发以前干过,但是一直觉得比较麻烦,缺少分享功能,现在的app大多数是h5的混合开发的app,需要用到原生的android API的时候需要去做兼容,如果是开发速度合并效率,还是混合的H5开发比较受企业的青睐。现在先来自己趟趟水环境配置。 二、下载并安装Androi...

2019-06-26 10:04:26 1430 1

原创 vue+axios+koa 前端后端实现登录拦截--http拦截

一、前言 要想统一处理所有http请求和响应,就得用上 axios 的拦截器。通过配置http response inteceptor,当后端接口返回401 Unauthorized(未授权),让用户重新登录。 二、具体实现 当前端使用localStorage存储登陆信息,但是这个时候,...

2019-06-25 23:13:02 537 0

原创 css系列--纯 CSS 实现绘制各种三角形(各种角度)

一、前言 三角形实现原理:宽度width为0;height为0;(1)有一条横竖边(上下左右)的设置为border-方向:长度 solid red,这个画的就是底部的直线。其他边使用border-方向:长度 solid transparent。(2)有两个横竖边(上下左右)的设置,若斜边是在三角...

2019-06-21 14:47:09 65 0

原创 微信小程序-实现tab选项卡

一、前言 小程序开发中,有很多封装好的控件供开发者使用,但是,很常见的tab选项卡居然没有,只能自己搞一个。 实现原理也很简单,无非是用给view(tab)设置一个点击事件bintap,并且给view(tab)一个data-idx索引,根据当前index来改变tab的状态并决定swiper显示...

2019-06-20 10:20:44 7405 1

原创 css系列--六种实现元素水平居中方法

一、前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可能认为这些方法对于浏览嘎嘎的兼容性处理太麻烦了。 ...

2019-06-18 17:49:39 66 0

原创 webpack系列--webpack4.x入门配置基础(一)

一、前言 webpack在不断的迭代优化,目前已经到了4.29.6。在webpack4这个版本中,做了很多优化,引入了很多特性,将获得更多模块类型,.mjs支持,更好的默认值,更为简洁的模式设置,更加智能的chunk,新增的splitChunks来自定义分隔代码块等等。升级待4,在打包速度,代码...

2019-06-17 13:25:15 65 0

原创 懒加载实践--js图片懒加载及优化

一、前言 为啥要对图片使用懒加载?我们首先来聊聊这个问题,对于页面来说架子啊速度影响着最大的就是图片,一张普通的图片可以达到4-5M的大小,而代码压缩也就只有几十KB。当页面图片过多的时候,页面加载速度很缓慢,一个页面加载几秒没有完成,用户体验不好,会丧失很多用户的。 所以对于图片过多的页面,...

2019-06-14 13:38:51 204 0

原创 webAssembly系列--webAssembly初探究竟

一、前言 自从JavaScript诞生开始,到现在开始变成流行的编程语言,背后的是web发展所推动的。web应用的变得更多更复杂,但是渐渐暴露出JavaScript的问题: (1)语法太灵活导致开发大型web项目困难; (2)性能不足满足一些场景的需要。 二、为什么需要WebAssem...

2019-06-14 13:36:58 1402 0

原创 vuex系列--浅析Vuex 的设计思想

一、前言 在聊之前,大家要始终记得一句话:一切前端概念,都是纸老虎。 不管是Vue,还是 React,都需要管理状态(state),比如组件之间都有共享状态的需要。什么是共享状态?比如一个组件需要使用另一个组件的状态,或者一个组件需要改变另一个组件的状态,都是共享状态。 如果不对状态进行有效...

2019-06-14 13:35:01 767 0

原创 vue系列--Virtual DOM 真的比操作原生 DOM 快吗?

一、前言 网上都说操作真实dom怎么怎么慢,这儿有个例子:http://chrisharrington.github.io/demos/performance/,例子循环2000个随机数组,点击按钮重新生成随机数组渲染页面,也是自己用的js 操作dom 比用react 和angular 都要快。...

2019-06-10 14:11:37 619 0

原创 JavaScript数组reduce()方法详解及奇淫技巧

一、前言 reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。 reduce() 可以作为一个高阶函数,用于函数的 compose。 reduce()方法可以搞定的东西,for循环,或者forEach方法有时候也可以搞定,那为啥要用reduce...

2019-06-06 16:06:00 295 0

原创 JavaScript 系列--JavaScript一些奇淫技巧的实现方法(三)数字取整,数组求和

一、前言 简短的sleep函数,获取时间戳:https://www.mwcxs.top/page/746.html 数字格式化 1234567890 --> 1,234,567,890;argruments 对象(类数组)转换成数组: https://www.mwcxs.top/pag...

2019-06-04 21:10:14 79 0

原创 JavaScript 系列--JavaScript一些奇淫技巧的实现方法(二)数字格式化 1234567890到 1,234,567,890;argruments 对象(类数组)转换成数组

一、前言 之前写了一篇文章:JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳 https://www.mwcxs.top/page/746.html 介绍了sleep函数和获取时间戳的方法。接下来我们来介绍数字格式化1234567...

2019-05-31 14:41:04 66 0

原创 JavaScript 系列--JavaScript一些奇淫技巧的实现方法(一)简短的sleep函数,获取时间戳

一、前言 有些东西很好用,但是你未必知道;有些东西你可能用过,但是你未必知道原理。 实现一个目的有多种途径,俗话说,条条大路通罗马。发散一下大家的思维以及拓展一下知识面。 二、实现一个简短的sleep函数 sleep函数主要用来做延迟执行的,很多编程语言都有sleep函数,但是javas...

2019-05-31 14:37:44 86 0

原创 设计方案--移动端延迟300ms的原因以及解决方案

一、前言 移动端浏览器提供一个特殊的功能:双击(double tap)缩放。 二、移动端延迟300ms的原因 为什么要用触摸事件?触摸事件是移动端浏览器特有的html5事件。 因为移动端的click有很大延迟(大约300ms),300ms延迟来自判断双击和长按,因为只有默认等待时间结束...

2019-05-29 16:44:11 76 0

原创 vue系列--vue是如何实现绑定事件

一、前言 vuejs中的事件绑定,使用<v-on:事件名 = 函数名>来完成的,这里函数名是定义在Vue实例中的methods对象中的,Vue实例可以直接访问其中的方法。 二、事件绑定方式 1、 直接在标签中写js方法 <button v-on:click=&qu...

2019-05-27 22:00:48 2401 0

原创 浅析SSR(服务端渲染)和SPA(客户端渲染)

一、前言 C端项目重构成首屏服务端渲染(SSR:serve side render),对于重构成SSR,redux不是必须的。本文以vue为栗子的项目。 二、什么是服务端渲染 将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完...

2019-05-24 17:53:32 3618 1

原创 JavaScript系列--类型判断的4种基本方法,研究jquery的type方法,空对象的检测方法,类数组对象

一、前言 类型判断有时候真的头疼,但是一旦熟练使用就会觉得不过如此。初级的,会判断数字和字符串。中级的,会判断数组和对象。进阶的,会判断日期,正则,错误类型。高级的,会判断plainObject,空对象,window对象等等。 基本类型:String、Number、Boolean、Symbol、...

2019-05-23 11:04:12 26 0

原创 计算机基础系列--从输入 URL 到页面加载完成的详细过程,贯穿整个开发知识体系

一、前言 这道题的覆盖面可以非常广,很适合作为一道承载知识体系的题目。每一个前端人员,如果要往更高阶发展,必然会将自己的知识体系梳理一遍,没有牢固的知识体系,无法往更高处走! 二、主干流程 在将浏览器渲染原理、JS运行机制、JS引擎解析流程梳理一遍后,感觉就跟打通了任督二脉一样,有了一个...

2019-05-23 10:57:00 50 0

原创 webpack系列--浅析webpack的原理

一、前言 现在随着前端开发的复杂度和规模越来越大,鹰不能抛开工程化来独立开发,比如:react的jsx代码必须编译后才能在浏览器中使用,比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架,开发效率会大幅下降。 在众多前端工程化工具中,webpack脱颖而出成为了当今最流行的前端构...

2019-05-21 09:54:16 169 0

原创 移动端设计方案--如何设计移动端屏适配方案

一、前言 在众多的移动设备中,前端开发人员如何在不同屏幕大小,不同程度的高清屏下去百分百的还原设计稿,从来都不是一件简单的事情,需要考虑众多因素,权衡利弊,做出取舍,结合需求去选择最合适的方案。 之前有一篇:如何设计移动端高清方案 二、面对的问题 在不同大小和高清的屏幕下: (1)如...

2019-05-20 17:55:13 172 0

原创 移动端设计方案--如何更好的设计移动端高清方案

一、前言 有时候需要前端做到移动端高清显示,1、面对开发移动端H5页面,2、面对不同分辨率的手机,3、面对不同屏幕尺寸的手机。 二、视觉稿 前端开发正常是,视觉的小哥哥给我们psd或者导出的skech文件,这个就是视觉稿,然后前端开始写结构,写元素,调整,优化等等。 对于移动端开发而言...

2019-05-18 23:14:11 61 0

原创 HTTP系列--HTTP2.0新特性:二进制传输,多路复用,Haeder压缩,服务端push,QUIC协议

一、前言 HTTP 2.0 相比于 HTTP 1.X,可以说是大幅度提高了 web 的性能。 在 HTTP 1.X 中,为了性能考虑,我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量,当页面中需要请求很多资源的时候,队头阻塞(Head ...

2019-05-18 23:13:03 280 0

原创 V8引擎--浅析Chrome V8引擎中的垃圾回收机制和内存泄露优化策略

V8 实现了准确式 GC,GC 算法采用了分代式垃圾回收机制。因此,V8 将内存(堆)分为新生代和老生代两部分。 一、前言 V8的垃圾回收机制:JavaScript使用垃圾回收机制来自动管理内存。垃圾回收是一把双刃剑,其好处是可以大幅简化程序的内存管理代码,降低程序员的负担,减少因 长时间...

2019-05-16 21:02:45 85 0

原创 计算机基础--http的基础整理和巩固

一、前言 主要包括:1、http基础:TCP/IP,TCP协议,IP协议,DNS协议,URI与URL; 2、http协议:http报文,http方法,http状态码,常见问题 名词解释: (1)HTTP(HyperText Transfer Protocol)超文本传输协议 (2)URL...

2019-05-16 21:01:31 25 0

原创 框架选择--如何看待前端框架选型 ?

对于前端团队,可以实现企业受益最大化要点。 一、技术选型的策略 1、保证产品质量 (1)功能稳健:网页不白屏,不错位,不卡死;操作正常;数据精准。 (2)体验优秀:加载体验,交互体验,视觉体验,无障碍访问。 2、降低人力成本 (1)降低前期开发成本; (2)降低后期维护成本。 ...

2019-05-16 20:59:33 310 0

原创 数据可视化系列--svg入门基础(二)

接上一篇:数据可视化-svg入门基础(一),基础一主要是介绍了svg概念,元素样式设置等。 svg是(scalable vector graphic)伸缩矢量图像。 一、目录 (1)图形元素 (2)文字元素 (3)特殊元素 (4)滤镜元素 (5)渐变元素 二、图形元素 1、矩...

2019-05-15 17:06:42 74 0

原创 数据可视化系列--svg入门基础(一)

一、前言 1、SVG(Scalable Vector Graphics)可伸缩矢量图形 特点: (1)使用xml格式来定义图形; (2)用来定义web上的使用的矢量图; (3)改变图像尺寸,图片质量不受损; (4)所有元素属性可以使用动画; (5)继承了W3C标准,在html中使用方...

2019-05-15 17:05:53 268 0

提示
确定要删除当前文章?
取消 删除