- 博客(77)
- 收藏
- 关注
RSS订阅
原创 简单水印（watermark-dom）和算法水印（频域方式图片合并）实现
一、简单水印（watermark-dom）阿里巴巴内网的不可见水印用的是什么算法？据说月饼事件截图的那位员工也被开除了？下面的只是简单的加一个很浅的水印，实现起来很容易。1、看看水印的效果随便找一个网站，比如就找掘金的个人首页，（1）F12检查模式，（2）在console里粘贴下面的代码，(function(watermark){window.watermarkdivs=[];va...
2019-04-29 09:32:37
3126
原创 happyChat开发系列：使用websocket.io实现双向通信的乐聊大前端开发
一、前言乐聊是一个自己用websocket写一个完整的应用，虽然功能比较欠缺，但是实现了基本的文字聊天，以及群聊，私聊，机器人聊天等功能。因为这个自己做了PC端，无线端（手机端），以及使用cordova打包成一个android的apk。实现了一个大前端的项目，虽然现在android端还是有点有问题，在修改bug。二、websocket的原理介绍1、为什么需要websocket？...
2019-04-10 10:39:36
480
原创 看VR发展史，VR技术成熟度曲线的趋势是？
hello，大家好，我是「松宝写代码」。近期给大家带来了「VR领域」分享，主要大纲如下：VR发展史 - VR技术介绍 - VR行业数据 - VR未来发展路线 - 更全面了解VR今天我们带来的是VR发展史，欢迎关注，留言交流学习。VR发展史1930s 科学幻想上个世纪30年代，作家 Stanley 就在其小说《皮格马利翁的眼镜》中，提到了这样一种 虚拟现实的眼镜，当人们戴上它时，可以 看到、听到、闻到 里面的角色感受到的事物，有如真实的生活在其中一般。1950s-1960s早期研究上
2022-03-31 23:49:15
561
原创 【研究】低代码/无代码的研究
【研究】低代码_无代码的深入浅出研究hello，大家好，我是「松宝写代码」。上一篇：【唠唠】低代码/无代码界定，https://blog.csdn.net/saucxs/article/details/123886780?spm=1001.2014.3001.5502导语：从国内低代码/无代码厂商的商业模式看，主要分为四类，分别是低代码开发平台、低代码产品、低代码开发功能和云厂商的低代码生态。全球市场2021年低代码市场规模为71亿美元，预计到2025年市场规模将达到154亿美元。一、低代码与无
2022-03-31 23:46:34
415
原创 【唠唠】低代码_无代码的界定
hello，大家好，我是「松宝写代码」。最近看到很多关于低代码的介绍和分析，说几点自己的想法💡今天来聊聊，低代码如何来界定？低代码属于PaaS中的应用开发aPaaS层面，通过可视化方式实现应用开发，降低写代码的成本。引入了PaaS和aPaaS的概念，我们来看下面的图1、SaaS，PaaS，IaaS分别是云计算的不同服务模式。2、aPaaS 和 IPaaS是基于PaaS的解决方案。3、aPaaS = 高代码 + 低代码/无代码（1）低代码/无代码，简单来说：开发人员可以通过图形化的用户界面，
2022-03-31 23:37:20
278
原创 阿里云服务器：新用户的登陆服务器实例
一、登陆阿里云服务器官网这个不用多说：https://homenew.console.aliyun.com/进入到控制台二、实例修改root密码重置实例密码，点击之后点击修改之后，重新选择vnc登陆三、使用VNC登陆第一次登陆VNC登陆，会有给出远程登陆密码，这个拿个小本记下来。然后后续的不再提示，可以修改远程密码。然后进入到登陆服务器...
2020-01-12 21:17:25
2002
原创 JavaScript系列--深浅拷贝简单实现
一、前言之前写了一篇：浅析JavaScript解析赋值、浅拷贝和深拷贝的区别：https://www.mwcxs.top/page/592.html。里面介绍了解析赋值，浅拷贝，深拷贝的原理和实现。浅拷贝方法：Object.assign()，展开语法Spread，Array.prototype.alice()，array.prototype.concat()。深拷贝方法：JSON.parse(...
2019-08-24 23:06:19
204
原创 【JavaScript系列】时间复杂度和空间复杂度
一、前言时间复杂度和空间复杂度，我们在大学里的算法与数据结构课程中已经学习过，这回根据项目工作中整理一下，这个估计只是一个粗略的估计分析，并不是一个准确的估计分析。1、学习时间复杂度和空间复杂度是很有必要的，这个属于算法与数据结构的范畴，学这个是为了解决代码中的“快”和“省”的问题。这样才能使你的代码运行效率更高，占用空间更小。代码执行效率需要通过复杂度分析。2、数据规模的大小会影响到...
2019-07-30 10:34:54
2724
1
原创 【JavaScript系列】类型判断(typeof，instanceof，constructor，Object.prototype.toString)
一、前言类型判断有时候真的头疼，但是一旦熟练使用就会觉得不过如此。初级的，会判断数字和字符串。中级的，会判断数组和对象。进阶的，会判断日期，正则，错误类型。高级的，会判断plainObject，空对象，window对象等等。基本类型：String、Number、Boolean、Symbol、Undefined、Null引用类型：Object基本类型也称为简单类型，由于其占据空间固...
2019-07-25 09:33:26
521
原创 【vue系列】项目开发中常用的Vue小技巧--全局注册过滤器，全局组件注册，不同路由的组件复用
一、前言vue的使用过程中会遇到各种场景，当普通使用时觉得没什么，但是或许优化一下可以更高效更优美地进行开发。下面有一些我在日常开发的时候用到的小技巧二、全局注册过滤器1、正常写法之前我是这么写的过滤器的，在具体页面中。 filters: { roleFilter(val) { //处理逻辑 if (val === 1) re...
2019-07-23 15:13:09
495
原创 【混合App开发系列】Cordova+Vue实现Android APP开发（四）-- 热更新详细教程
一、前言Cordova+Vue实现AndroidAPP开发（四）--热更新详细教程二、安装Cordova热更新插件和热更新工具1、安装Cordova热更新插件cordova plugin add cordova-hot-code-push-plugin2、安装Cordova热更新工具npm install -g cordova-hot-code-push...
2019-07-05 09:48:01
2431
2
原创 【JavaScript系列】vue项目中实现滚动条（具体视窗口的滚动条）操作：（1）置底，（2）置于上次停留的位置
一、前言之前写了一个happyChat的项目，主要是想学习一下socketIO的使用。然后最近在给happyChat做前端优化和升级。发现第一版做的很low。需要优化的问题：1、问题1：滚动条会出现在头部和底部的视窗中，之前固定头部和固定底部是使用`position:fixed`。解决方案：body和html禁止`overflow:hidden`，头部和底部是`position:r...
2019-07-05 09:44:39
1646
原创 【JavaScript系列】深入javascript的主流的模块规范
一、前言目前主流的模块规范：1、UMD通用模块2、CommonJs3、es6 module二、UMD模块（通用模块）(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = fact...
2019-07-02 23:06:13
317
原创 Cordova+Vue实现Android APP开发（三）-- 设置图标和启动欢迎页详细教程
一、前言内容是自己查资料和自己进坑出坑，适用于cordova打包android7.0版本以后的版本。我目前使用的是android8.0，android8.1，android9，androidQ等版本。（1）设置图标icon，准备好素材，在配置文件中加入不同尺寸的<icon density="hdpi" src="res/icon/android/drawable-hdpi/icon.pn...
2019-06-28 21:13:08
2643
原创 Cordova+Vue实现Android APP开发（二）-- 打包运行在真机上和打包运行在本地调试，以及打包时候一些问题的处理
接上一篇文章：Cordova+Vue实现Android APP开发（一）一、使用cordova打包运行app打包静态资源，没有问题的，但是把自己的vue其他项目转成android app时候，发现接口请求不到数据。1、对axios的统一加一个前缀2、vue打包3、打包android appcordova run android但是还是这样...
2019-06-27 14:22:42
3179
2
原创 cordova混合App开发：Cordova+Vue实现Android APP开发（一）
一、前言android开发以前干过，但是一直觉得比较麻烦，缺少分享功能，现在的app大多数是h5的混合开发的app，需要用到原生的android API的时候需要去做兼容，如果是开发速度合并效率，还是混合的H5开发比较受企业的青睐。现在先来自己趟趟水环境配置。二、下载并安装Android Studio Android Studio中文社区地址：http://www.android...
2019-06-26 10:04:26
4005
1
原创 vue+axios+koa 前端后端实现登录拦截--http拦截
一、前言要想统一处理所有http请求和响应，就得用上 axios 的拦截器。通过配置http response inteceptor，当后端接口返回401 Unauthorized（未授权），让用户重新登录。二、具体实现当前端使用localStorage存储登陆信息，但是这个时候，后端一般在登陆的成功的时候，使用JWT（json web token）会生成token，这个toke...
2019-06-25 23:13:02
1486
原创 css系列--纯 CSS 实现绘制各种三角形（各种角度）
一、前言三角形实现原理：宽度width为0；height为0；（1）有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。（2）有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top...
2019-06-21 14:47:09
462
原创 微信小程序-实现tab选项卡
一、前言小程序开发中，有很多封装好的控件供开发者使用，但是，很常见的tab选项卡居然没有，只能自己搞一个。实现原理也很简单，无非是用给view(tab)设置一个点击事件bintap，并且给view(tab)一个data-idx索引，根据当前index来改变tab的状态并决定swiper显示那个内容，改变swiper的内容只需要改变swiper的current就好。二、效果...
2019-06-20 10:20:44
29282
3
原创 css系列--六种实现元素水平居中方法
一、前言居中效果在CSS中很是普通的效果，平时大家所看到的居中效果主要分为三大类：水平居中、垂直居中和水平垂直居中。而其中水平居中相对于后两者来说要简单得多。使用了css3的flexbox的属性轻松实现多行文本水平垂直居中的方法。当然大家有可能认为这些方法对于浏览嘎嘎的兼容性处理太麻烦了。二、六种方法常见的居中是固定宽度，加上margin: 0 auto。但是如果宽度不明确，我们...
2019-06-18 17:49:39
280
原创 webpack系列--webpack4.x入门配置基础（一）
一、前言webpack在不断的迭代优化，目前已经到了4.29.6。在webpack4这个版本中，做了很多优化，引入了很多特性，将获得更多模块类型，.mjs支持，更好的默认值，更为简洁的模式设置，更加智能的chunk，新增的splitChunks来自定义分隔代码块等等。升级待4，在打包速度，代码体积，数量，以及运行效率上有一个飞跃。二、安装webpack4最基础入门2.1首先初始化...
2019-06-17 13:25:15
289
原创 懒加载实践--js图片懒加载及优化
一、前言为啥要对图片使用懒加载？我们首先来聊聊这个问题，对于页面来说架子啊速度影响着最大的就是图片，一张普通的图片可以达到4-5M的大小，而代码压缩也就只有几十KB。当页面图片过多的时候，页面加载速度很缓慢，一个页面加载几秒没有完成，用户体验不好，会丧失很多用户的。所以对于图片过多的页面，可以为了加速页面加载速度，很多时候我们需要将页面内未出现的可视区域内的图片先不加载，等到滚动到可视区的...
2019-06-14 13:38:51
423
原创 webAssembly系列--webAssembly初探究竟
一、前言自从JavaScript诞生开始，到现在开始变成流行的编程语言，背后的是web发展所推动的。web应用的变得更多更复杂，但是渐渐暴露出JavaScript的问题：（1）语法太灵活导致开发大型web项目困难；（2）性能不足满足一些场景的需要。二、为什么需要WebAssembly针对以上的问题，JavaScript出现了一些代替语言，比如：（1）微软的TypeSc...
2019-06-14 13:36:58
4299
原创 vuex系列--浅析Vuex 的设计思想
一、前言在聊之前，大家要始终记得一句话：一切前端概念，都是纸老虎。不管是Vue，还是 React，都需要管理状态（state），比如组件之间都有共享状态的需要。什么是共享状态？比如一个组件需要使用另一个组件的状态，或者一个组件需要改变另一个组件的状态，都是共享状态。如果不对状态进行有效的管理，状态在什么时候，由于什么原因，如何变化就会不受控制，就很难跟踪和测试了。如果没有经历过这方面的...
2019-06-14 13:35:01
4453
原创 vue系列--Virtual DOM 真的比操作原生 DOM 快吗？
一、前言网上都说操作真实dom怎么怎么慢，这儿有个例子：http://chrisharrington.github.io/demos/performance/，例子循环2000个随机数组，点击按钮重新生成随机数组渲染页面，也是自己用的js 操作dom 比用react 和angular 都要快。这是引用知乎上的一个问题。觉得写的很好。文章内容主要是来源于尤大大的回答。二、原生dom操作...
2019-06-10 14:11:37
1793
原创 JavaScript数组reduce()方法详解及奇淫技巧
一、前言reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。reduce() 可以作为一个高阶函数，用于函数的 compose。reduce()方法可以搞定的东西，for循环，或者forEach方法有时候也可以搞定，那为啥要用reduce()？这个问题，之前我也想过，要说原因还真找不到，唯一能找到的是：通往成功的道路有很多，但是总有一条路...
2019-06-06 16:06:00
2813
原创 JavaScript 系列--JavaScript一些奇淫技巧的实现方法（三）数字取整，数组求和
一、前言简短的sleep函数，获取时间戳：https://www.mwcxs.top/page/746.html数字格式化 1234567890 --> 1,234,567,890；argruments 对象(类数组)转换成数组：https://www.mwcxs.top/page/749.html今天我们来介绍一下数字取整，数组求和。二、数字取整1、普通版...
2019-06-04 21:10:14
462
原创 JavaScript 系列--JavaScript一些奇淫技巧的实现方法（二）数字格式化 1234567890到 1,234,567,890；argruments 对象(类数组)转换成数组
一、前言之前写了一篇文章：JavaScript 系列--JavaScript一些奇淫技巧的实现方法（一）简短的sleep函数，获取时间戳https://www.mwcxs.top/page/746.html介绍了sleep函数和获取时间戳的方法。接下来我们来介绍数字格式化1234567890-->1,234,567,890二、数字格式化1234567890--&...
2019-05-31 14:41:04
356
原创 JavaScript 系列--JavaScript一些奇淫技巧的实现方法（一）简短的sleep函数，获取时间戳
一、前言有些东西很好用，但是你未必知道；有些东西你可能用过，但是你未必知道原理。实现一个目的有多种途径，俗话说，条条大路通罗马。发散一下大家的思维以及拓展一下知识面。二、实现一个简短的sleep函数sleep函数主要用来做延迟执行的，很多编程语言都有sleep函数，但是javascript没有这个函数，我们实现一下：1、简单版本function sleep(sleep...
2019-05-31 14:37:44
331
原创 设计方案--移动端延迟300ms的原因以及解决方案
一、前言移动端浏览器提供一个特殊的功能：双击(double tap)缩放。二、移动端延迟300ms的原因为什么要用触摸事件？触摸事件是移动端浏览器特有的html5事件。因为移动端的click有很大延迟（大约300ms），300ms延迟来自判断双击和长按，因为只有默认等待时间结束以确定没有后续动作发生时，才会触发click事件。而触摸事件的延迟则是非常短的，使用触摸事件的能够提...
2019-05-29 16:44:11
282
原创 vue系列--vue是如何实现绑定事件
一、前言vuejs中的事件绑定，使用<v-on:事件名 = 函数名>来完成的，这里函数名是定义在Vue实例中的methods对象中的，Vue实例可以直接访问其中的方法。二、事件绑定方式1、 直接在标签中写js方法 <button v-on:click="alert（'hi'）">执行方法的第一种写法</button>2、调...
2019-05-27 22:00:48
10463
原创 浅析SSR(服务端渲染)和SPA(客户端渲染)
一、前言C端项目重构成首屏服务端渲染（SSR：serve side render），对于重构成SSR，redux不是必须的。本文以vue为栗子的项目。二、什么是服务端渲染将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序。我以weekly周报的登陆页面为例登陆页没有使用服务端渲染，请求到login页面，返回的b...
2019-05-24 17:53:32
9403
1
原创 JavaScript系列--类型判断的4种基本方法，研究jquery的type方法，空对象的检测方法，类数组对象
一、前言类型判断有时候真的头疼，但是一旦熟练使用就会觉得不过如此。初级的，会判断数字和字符串。中级的，会判断数组和对象。进阶的，会判断日期，正则，错误类型。高级的，会判断plainObject，空对象，window对象等等。基本类型：String、Number、Boolean、Symbol、Undefined、Null引用类型：Object基本类型也称为简单类型，由于其占据空间固定...
2019-05-23 11:04:12
116
原创 计算机基础系列--从输入 URL 到页面加载完成的详细过程，贯穿整个开发知识体系
一、前言这道题的覆盖面可以非常广，很适合作为一道承载知识体系的题目。每一个前端人员，如果要往更高阶发展，必然会将自己的知识体系梳理一遍，没有牢固的知识体系，无法往更高处走！二、主干流程在将浏览器渲染原理、JS运行机制、JS引擎解析流程梳理一遍后，感觉就跟打通了任督二脉一样，有了一个整体的架构，以前的知识点都连贯起来了。1、从浏览器接收url到开启网络请求线程（涉及到：浏览器机...
2019-05-23 10:57:00
403
原创 webpack系列--浅析webpack的原理
一、前言现在随着前端开发的复杂度和规模越来越大，鹰不能抛开工程化来独立开发，比如：react的jsx代码必须编译后才能在浏览器中使用，比如sass和less代码浏览器是不支持的。如果摒弃这些开发框架，开发效率会大幅下降。在众多前端工程化工具中，webpack脱颖而出成为了当今最流行的前端构建工具。二、webpack的原理知其然知其所以然。1、核心概念（1）entry：...
2019-05-21 09:54:16
751
原创 移动端设计方案--如何设计移动端屏适配方案
一、前言在众多的移动设备中，前端开发人员如何在不同屏幕大小，不同程度的高清屏下去百分百的还原设计稿，从来都不是一件简单的事情，需要考虑众多因素，权衡利弊，做出取舍，结合需求去选择最合适的方案。之前有一篇：如何设计移动端高清方案二、面对的问题在不同大小和高清的屏幕下：（1）如何保证 页面布局的一致性：不错乱，不变形；（2）如何保证 字体大小的一致性：大屏显示更大，小屏显...
2019-05-20 17:55:13
772
原创 移动端设计方案--如何更好的设计移动端高清方案
一、前言有时候需要前端做到移动端高清显示，1、面对开发移动端H5页面，2、面对不同分辨率的手机，3、面对不同屏幕尺寸的手机。二、视觉稿前端开发正常是，视觉的小哥哥给我们psd或者导出的skech文件，这个就是视觉稿，然后前端开始写结构，写元素，调整，优化等等。对于移动端开发而言，达到页面高清的效果，视觉稿的规范往往会遵循这两点：（1）选取一款手机的屏幕宽高作为基准（以前是...
2019-05-18 23:14:11
390
原创 HTTP系列--HTTP2.0新特性：二进制传输，多路复用，Haeder压缩，服务端push，QUIC协议
一、前言HTTP 2.0 相比于 HTTP 1.X，可以说是大幅度提高了 web 的性能。在 HTTP 1.X 中，为了性能考虑，我们会引入雪碧图、将小图内联、使用多个域名等等的方式。这一切都是因为浏览器限制了同一个域名下的请求数量，当页面中需要请求很多资源的时候，队头阻塞（Head of line blocking）会导致在达到最大请求数量时，剩余的资源需要等待其他资源请求完成后才...
2019-05-18 23:13:03
1120
原创 V8引擎--浅析Chrome V8引擎中的垃圾回收机制和内存泄露优化策略
V8 实现了准确式 GC，GC 算法采用了分代式垃圾回收机制。因此，V8 将内存（堆）分为新生代和老生代两部分。一、前言V8的垃圾回收机制：JavaScript使用垃圾回收机制来自动管理内存。垃圾回收是一把双刃剑，其好处是可以大幅简化程序的内存管理代码，降低程序员的负担，减少因 长时间运转而带来的内存泄露问题。但使用了垃圾回收即意味着程序员将无法掌控内存。ECMAScript没有...
2019-05-16 21:02:45
632
原创 计算机基础--http的基础整理和巩固
一、前言主要包括：1、http基础：TCP/IP，TCP协议，IP协议，DNS协议，URI与URL；2、http协议：http报文，http方法，http状态码，常见问题名词解释：（1）HTTP（HyperText Transfer Protocol）超文本传输协议（2）URL（Uniform Resource Locator）统一资源定位符（3）URI（Uniform R...
2019-05-16 21:01:31
143
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人