threeJs-简介
前言在前端的开发过程中，需要实现 可视化 or 3D展示操作的过程中我们可以通过echarts和webGl来实现我们想要的需求及效果，本篇文章不述echarts，想了解的朋友可以点击这里-> 传送门。在3D效果方面，前端可以通过webGl来实现，但写原生的webGl除了会javaScript外还需要会glsl，而这对于我们目前来说是需要大量的时间的。那么，我们能不能边写边学呢？答案是可以的，我们可以学习three.js等有一定的了解和积累过后再去学习/掌握原生的webGL、glsl和图形学的相关知识。
three.js 介绍three.js是一款由JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
我们可以看腾讯云官网的一个3d效果：
就问是不是很酷炫。
我们也可以实现这样的一个效果，但是要一摸一样那是不现实的，我们没有它的素材，但我们学会了three.js可以照猫画虎。
最后想学习three.js或者感兴趣的朋友可以关注一波本专栏。免费且长期更新。
下篇文章将会告诉大家如何安装、使用three.js。
前端跨端开发选型对比
前言在现在的大前端时代，产生了很多的跨端技术和框架，前端再也不是了那个只需要写html、css、js的时代，而是需要涉及到app、小程序、网页(web、h5、大屏数据可视化、webgl)、桌面端(window、macos、linux)这些方方面面，现在有很多可供我们选择的技术和框架以及打包工具，我们应该怎么选择呢？
目前比较常见的有以下技术和框架，本文将会结合情况进行分析，助你在跨端开发的时候选择不在有选择困难症。
uni-app (可开发app、网页、小程序)
react Native (可开发 android、ios app应用)
weex 英文官网weex 中文官网(可构建iOS、Android、Web)
vant (ui 组件库)
electron (桌面端(window、macos、linux)的打包工具)
flutter flutter 中文文档 (支持android、ios、window、macos、linux)
mpvue (小程序)
5 + App(仅支持app)
Wap2App(仅支持app)
简述各跨端开发技术/框架uni-appuni-app 是由 dclo ...
前端实现页面变灰功能(含 Flutter )
今天从前端的角度出发，看看变灰的原理及实现过程。
除了普通的前端常用方式，本文还会告诉大家在flutter中如何使所有的页面变灰哦。
原本是准备分两篇文章介绍的，但flutter的内容不多，最后仔细一想还是用一篇文章吧。关于flutter如何实现页面变灰？在文末。
常见前端实现及问题实现思路及原理我们先一起看一下常见的主流网站掘金、淘宝、scdn是怎么实现的：
掘金
淘宝
csdn
经过上面的主流网站案例我们得知，这些主流网站都是通过 css3 中的新增的 filter 属性实现的。
filter属性有啥用？是干啥的？我们可以先看一下MDN中的解释：
CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染
大白话就是 filter 属性就是用来给元素添加不同的滤镜。该属性中支持传入多种 Filter 函数。其中 grayscale是用于置灰的关键。使用grayscale将改变输入图像灰度。
因此，只需将页面的 html 元素设置以下样式即可实现页面置灰：
123html { filter: grayscal ...
Node从零到一，实现API的编写并能够访问（二）
终于发布这篇文章了，之前有点忙一直没时间写，想要将自己的项目上传到服务器的小伙伴可以跟着本篇文章操作，然后就可以上线访问了。
本篇的主要内容是将上篇文章写好的node项目部署到服务器，通过服务器的公网ip访问，实现域名访问。
如果还没看过上篇文章的小伙伴可以先去看一下，然后跟着操作一下，再来看这篇文章。Node从零到一，实现API的编写并能够访问
1、域名购买域名并备案，我这里是通过阿里云购买的域名如果没有域名的小伙伴可以点击这个连接购买自己想要的域名 阿里云域名购买。购买域名后记得备案哦，不然没办法跟着后面的步骤操作哦。提醒哈：需要实名认证才可以购买域名和备案
2、服务器在购买域名后备案的期间我们可以先去服务器商那里把服务器买了，我这里依旧使用的是阿里云的轻量服务器，打折的时候买的，一年只要100多。阿里云的服务器一般在双11和618等一些促销时间也是会跟着进行打折的，小伙伴可以去蹲一下。
3、解析域名到服务器域名备案经过漫长的3周时间，接下来就是把域名解析到服务器了，找到域名->域名列表->解析点击添加记录填写相应的信息并保存就可以了解析记录选择A 就可以了，如果说你要 ...
javaScript高阶函数-reduce
前言可能部分同学很少在项目中使用到reduce，使用过的朋友感觉到它是非常的方便。一问reduce可以干什么？有哪些好用便捷之处？下面我们将详细解释并举例使用，相信看完本篇文章后你会有更深和对其有一定的了解。
什么是reducereduce是es6中新增的一个方法，普遍用于求和使用，但你知道吗，它不只是可以用于求和，还有其他的使用方法和技巧。
让我们一起看看它还有哪些奥妙之处。let’s go
reduce 语法1arr.reduce(callback,[initialValue])
reduce为数组中的每一个元素依次执行回调函数callback，不包括数组中被删除或从未被赋值的元素，接受四个参数：
「初始值」（或者上一次回调函数的返回值）
「当前元素值」
「当前索引」
「调用 reduce 的数组」。
callback回调函数必须有返回值。
initialValue(可选参数)
当设置了initialValue参数时，callback 第一个参数 初始值将默认是 initialValue。
123let arr = [1, 2, 3, 4];let sum = arr.red ...
Node从零到一，实现API的编写并能够访问（一）
最近在开始探索Node，使自己逐渐向全栈发展，简单记录一下从0到1的过程。Node官网：http://nodejs.cn/
一、 安装Node.js已安装过的小伙伴可忽略此步骤
打开Node官网，下载并安装Node.js下载地址：Node下载地址
安装完成过后按 win + R(Window系统),输入 cmd在命令行中输入 **node -v **，如果出现了版本号则表示安装成功
二、 初始化项目
在 D盘（你们可根据自身选择磁盘） 中新建一个文件夹
打开新建的文件夹
在文件夹的地址栏输入 cmd
在命令行中输入 npm init，文件夹中会得到一个 package.json 的文件
三、 安装依赖项我这里并没有使用 Node 原生的 http模块，使用的是express，有其他需要可以在安装，我这路只安装了一个 express
express —— 一款基于Node的快速、开放、极简、易上手的Node框架
body-parser —— 用来解析表单。
12//安装 npm install express body-parser mysql
四、 编写项目
在文件夹的根目录 ...
javaScript中的事件循环(event Loop)
前言由于javaScript作为脚本语言，主要用途是与用户互动，以及操作浏览器DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？这就导致了javaScript注定成为一门单线程的脚本语言，没办法多线程执行任务。
什么是event loop（事件循环）？
是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制，也就是我们经常使用异步的原理。查看任务队列中是否存在任务，存在则送到执行栈中执行，反复循环查看并执行，这个过程称之为事件循环（event loop）。
js的任务分为同步任务、异步任务，而异步任务里面又分宏任务、微任务。
为啥需要知道event loop？
一是要增加自己技术的深度，也就是懂得JavaScript的运行机制。
二是现在前端领域各种技术层出不穷，掌握底层原理，知道其本质。可以让自己以不变，应万变。
三是应对各大互联网公司的面试，懂其原理，题目任其发挥。
案例看个的经典的代码段，并说明打印的内容 ...
JavaScript中的Math
前言javascript中的Math对象作为保存数学公式、信息和计算的地方。Math对象提供了一些辅助计算的属性和方法，在我们日常使用都是**Math.ceil()、Math.round()**等较多。
为啥没有new Math()这种操作呢？
因为啊Math()和Date()等这种对象不一样，它在我们的javascript引擎中就已经帮我们new好了，所以我们在使用的过程中也就不再需要new Math()，这种操作了，我们直接Math.xx这样使用就可以了。
本篇文章将对Math对象的一些api进行系列的详解和使用。
let’s go，让我们步入正题
1、min() 方法用来确定一组数值中的最小值
12let min = Math.min(3, 54, 32, 16); console.log(min); // 3
2、max() 方法用来确定一组数值中的最大值
12let max = Math.max(3, 54, 32, 16); console.log(max); // 54
2、舍入1. Math.ceil()方法始终向上舍入为最接近的整数
12cons ...
详解JavaScript的String（二）
本篇衔接”详解JavaScript的String “这篇文章
一、字符串检测1、indexOf()方法从字符串开头开始查找子字符串，如果包含则返回下标，反之则返回 -1
123let string = "hello world"; console.log(string.indexOf("o")); // 4 console.log(string.indexOf("B")); // -1
2、lastIndexOf()方法从字符串末尾开始查找子字符串，如果包含则返回下标，反之则返回 -1
123let string = "hello world"; console.log(string.lastIndexOf("o")); // 4 console.log(string.lastIndexOf("B")); // -1
二、字符串包含1、includes()ES6新增，用于检测字符串、数组等中是否包含该值，以布尔值的形式返回
123 ...
详解JavaScript的String
String是对应字符串的引用类型。由16位码元（code unit）组成。对多数字符来说，每16位码元对应一个字符。可以通过new构造函数创建，也可以通过字面量的方式创建。
12let string = new String("hello")//new 创建let test = "hello"//字面量创建
一、length属性字符串中字符的数量(长度)。
12let string = "hello world"; console.log(string.length); //11
二、chart()返回给定索引位置的字符，由传给方法的整数参数指定
12let string = "hello world"; console.log(string.chart(0)); // "h"
三、拼接字符串目前有concat()、（ + ）号拼接、模板字符串三种方式
1、concat()用于将一个或多个字符串拼接成一个新字符串
1234let string = "hello &qu ...