相关技术

海纳百川有容乃大
web技术

javascript中的深拷贝与浅拷贝

js有五种基本数据类型，string,number,boolean,null,undefind。这五种类型的赋值，就是值传递。特殊类型对象的赋值是将对象地址的引用赋值。这时候修改对象中的属性或者值，会导致所有引用这个对象的值改变。如果想要真的复制一个新的对象，而不是复制对象的引用，就要用到对象的深拷贝。 当一个变量存放基本数据类型时与复杂的数据类型时分别存在以下的特点： * 基本数据类型的特点：变量直接将基本数据类型的值存储在栈(stack)内存中 * 引用数据类型的特点：变量将引用数据类型的引用（可以看作是地址）存储在栈(stack)内存，而对象本身存放在堆内存里，在栈中引用指向堆中的对象。 其实当解释器寻找引用值时，会首先检索其在栈中的地址引用，取得地址后从堆中获得对象。 首先我们来看一个例子： var num = 666; var numCopy = num; var obj = {name:"张三"}; var objCopy = obj; 对于以上的代码，变量的内存分配是在栈中，所以变量不可以存放堆中的对象，所以赋值就会出现两种情况
4 min read
NodeJS

用Puppeteer做一个简单的数据爬虫

用Puppeteer做一个简单的数据爬虫 本项目仅做参考，提供给新手的一个入门示例。此项目是利用puppeteer来爬取本人一个博客系统的数据 * 先看演示 因为禁用了headless，所以会弹出浏览器窗口，也是为了容易调试看效果 注意：因为是我自己的个人博客，服务器又是在国外，在国内访问较慢。如运行本demo出现超时，属于正常现象，这种情况下建议开启科学上网（搞技术的这就不多说了吧），开启全局代理试下 目录结构 * /data: 抓取数据存储位置（有条件的可以直接存在数据库中） * /utils: 工具类 * index.js: 入口文件（核心代码） * config.js: 配置文件（抓取地址与抓取页面数配置） 项目启动 * 安装依赖(进入项目目录) npm install * 普通启动 npm start * 调试启动 npm run dev 核心代码
5 min read
web技术

用nodejs写一个alfred workflow

前言：工作中很多时候都要讲究效率，把一些繁琐重复的事精简化。能使你的工作都事半功倍～ 我用的环境node v10.19.0, npm 6.13.4, alfred 4.0.9 如果你还不了解alfred, 点此进入 废话不多说, 就用nodejs做个alfred的workflow工具, 功能需求： * 获取局域网的IP地址 * 获取公网的IP地址 * 输入IP地址查询归属地 因为我本人是从事前端开发的，nodejs对我来说并不陌生，所以今天就讲讲ndoejs开发workflow插件 制作初衷：我做的移动端项目很多，常常需要手机与电脑连接一个局域网下进行调试，每次都要查询一下自己的网卡IP。很容易就把自己给累死（哈哈） 先上效果图 * 直接输入ip * 直接输入ipp * 输入ip + IP地址 搞起来 开始前需要了解一下alfy 1.
4 min read
web技术

HTTP1.0、HTTP1.1 和 HTTP2.0 的区别

早在 HTTP 建立之初，主要就是为了将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器。也是说对于前端来说，我们所写的HTML页面将要放在我们的 web 服务器上，用户端通过浏览器访问url地址来获取网页的显示内容，但是到了 WEB2.0 以来，我们的页面变得复杂，不仅仅单纯的是一些简单的文字和图片，同时我们的 HTML 页面有了 CSS，Javascript，来丰富我们的页面展示，当 ajax 的出现，我们又多了一种向服务器端获取数据的方法，这些其实都是基于 HTTP 协议的
12 min read
编程技术

Linux Crontab 定时任务

cron介绍 我们经常使用的是crontab命令是cron table的简写，它是cron的配置文件，也可以叫它作业列表，我们可以在以下文件夹内找到相关配置文件。 * /var/spool/cron/ 目录下存放的是每个用户包括root的crontab任务，每个任务以创建者的名字命名 * /etc/crontab 这个文件负责调度各种管理和维护任务。 * /etc/cron.d/ 这个目录用来存放任何要执行的crontab文件或脚本。 我们还可以把脚本放在/etc/cron.hourly、/etc/cron.daily、/etc/cron.weekly、/etc/cron.monthly目录中，让它每小时/天/星期、月执行一次。 crontab 使用命令如下 crontab [-u username]　　　　//省略用户表表示操作当前用户的crontab -e (编辑工作表) -l (列出工作表里的命令) -r (删除工作作) 我们用crontab -e进入当前用户的工作表编辑，是常见
2 min read
web技术 Featured

使用Mockjs模拟数据请求

用mockjs生成数据,不需要等待接口即可调试 一、安装 * 用npm包管理工具安装 npm install mockjs * 标签引入 <script src="http://mockjs.com/dist/mock.js"></script> 二、生成随机数据 Mock.js 的语法规范包括两部分： * 数据模板定义（Data Temaplte Definition，DTD） * 数据占位符定义（Data Placeholder Definition，DPD） 1. 将字符串随机重复1遍-10遍 Mock.mock({ "string|1-10": "★" }) // { // "
4 min read
web技术

FormData 对象之文件上传

writeHeader: 表单数据以键值对的形式向服务器发送，这个过程是浏览器自动完成的。但是有时候，我们希望通过脚本完成过程，构造和编辑表单键值对，然后通过XMLHttpRequest.send()方法发送。浏览器原生提供了 FormData 对象来完成这项工作。 用户上传文件，也是通过表单。具体来说，就是通过文件输入框选择本地文件，提交表单的时候，浏览器就会把这个文件发送到服务器。 <input type="file" id="file" name="myFile"> 选择文件之后，将文件放入formData file.onchange = function (e) { console.log(e.target.files) let formData = new FormData(); formData.append(
2 min read
web技术 Featured

前端图片canvas，file，blob，DataURL等格式转换

将file转化成blob * 利用URL.createObjectURL() let $img = document.getElementById('img') file.onchange = function (e) { let file = e.target.files[0] let fileUrl = window.URL.createObjectURL(file) $img.src = fileUrl img.onload = function () { // 手动回收 URL.revokeObjectURL(fileUrl) } } 当选择图片后，生成的img src类似"blob:null/4304d4f3-c13b-43e8-83f6-8c80426520ff"，能正常显示图片。 将file转化为DataURL * 利用FileReader.readAsDataURL() l
1 min read
相关技术 Featured

Mongo shell指南（CRUD）

MongoDB 概念解析 MongoDB 是一个基于分布式文件存储的数据库。由 C++ 语言编写。旨在为 WEB 应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。 | MongoDB术语/概念 | 说明 | | :---: | :---: | :---: | | database | 数据库 | | collection | 集合 | | document | 文档 | | field | 域 | | index | 索引 | | primary key | 主键，MongoDB自动将_id字段设置为主键 | 安装MongoDB 安装MongoDB请参考之前文章MongoDB安装与基本使用 创建文档 1. insertOne命令（用于创建单个文档） db.<collection>.insertOne(<document>, { writeConcern:
15 min read
web技术

快速理解javascript中的Array.prototype.forEach

我们都知道document.querySelectorAll()能够获取dom节点，它返回时的并不是一个真正的数组，而是一个伪数组（NodeList），对于NodeList而言，它里面是没有forEach方法的,于是经常见到一下这种写法 var doms = document.querySelectorAll('#dom'); Array.prototype.forEach.call(doms, function(item) { console.log(item) }) 这样将Array原型中方法，赋给要循环的NodeList，通过call改变this指向，传入参数。 * 至于forEach 方法，它可以接受一个函数参数： [1,2,3].forEach(function(item) { console.log(item) }) 从上面可以看出此时在forEach是数组内置函数，this指向的自然是调用的这个数组（当然并不是说传入的函数内部打印this，那里的this指向的是全局window对象），所以赋予一个数组forEach的时
1 min read
web技术

深入babel（实战）

前言：此文章只是个人理解，如有错误希望留言指出 上一篇已经讲了babel的作用和基本配置，那怎么才能应用到自己的项目中呢？这篇文章就以webpack为例，搭建一个简单的webpack应用（前提你你要先安装node环境，这里就不说了，这不是这篇文章的重点，请自行百度） * 首先创建一个空的文件夹example-babel，用终端进入此目录中运行 npm init #这行命令初始化此文件夹，一路回车就ok * 接着安装babel工具 npm i babel-cli -D * 安装preset插件 npm i babel-preset-env * 安装runtime插件，需要的地方将自动转换 npm i babel-plugin-transform-runtime babel-runtime -D * 编写.babelrc文件，配置插件选项 { "presets": [ [ "babel-preset-env", {
2 min read
web技术

初探babel

前言：此文章仅仅作为个人理解 * babel是一个广泛使用的编译器，可以将es6转成es5代码，从而在现有的环境执行 * 使用babel的第一步就是配置一下.babelrc文件，存放在项目的根目录下 基本格式如下： { "presets": [], "plugins": [] } presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。 ES2015转码规则 $ npm install --save-dev babel-preset-env 官方有一句话这样说： 根据你支持的环境自动决定适合你的 Babel 插件的 Babel preset。它使用了 compat-table 在没有任何配置选项的情况下，babel-preset-env 与 babel-preset-latest（或者babel-preset-es2015，babel-preset-es2016和babel-preset-es2017一起）的行为完全相同。 参考：https://www.babeljs.cn/docs/p
3 min read
web技术

JavaScript 复杂判断的更优雅写法

前提我们编写js代码时经常遇到复杂逻辑判断的情况，通常大家可以用if/else或者switch来实现多个条件判断，但这样会有个问题，随着逻辑复杂度的增加，代码中的if/else/switch会变得越来越臃肿，越来越看不懂，那么如何更优雅的写判断逻辑，本文带你试一下。举个例子先看一段代码 /** * 按钮点击事件 * @param {number} status 活动状态：1 开团进行中 2 开团失败 3 商品售罄 4 开团成功 5 系统取消 */ const onButtonClick = (status)=>{ if(status == 1){ sendLog('processing') jumpTo('IndexPage') }else if(status == 2){ sendLog('fail'
8 min read
web技术

ejs模板的书写

1、EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装 2、EJS的特点： * 快速编译和渲染 * 简单的模板标签 * 自定义标记分隔符 * 支持文本包含 * 支持浏览器端和服务器端 * 模板静态缓存 * 支持express视图系统 3、EJS成员函数： * Render(str,data,[option]):直接渲染字符串并生成html str：需要解析的字符串模板 data：数据 option：配置选项 * Compile(str,[option]):编译字符串得到模板函数 str：需要解析的字符串模板 option：配置选项 两个函数包括的配置选项如下： 4、EJS常用标签 * <% %>流程控制标签 * <%= %>输出标签（原文输出HTML标签） * <%-
5 min read
web技术

如何封装并发布自己的npm包

最近很多人问我,如何取封装自己的npm工具包,直接用npm安装,省时又省力.关键支持三种引用方式(amd,cmd和直接引入),下面就教大家如何去封装自己的应用工具包. * 首先先去[npm官网](https://www.npmjs.com/)注册一个自己的账号,有了自己的账号才能在将你的插件代码放在npm仓库中. * 电脑需要node环境支持并且有npm包管理工具 有了自己的账号下面就开始实践操作吧! 第一步 首先登陆npm npm login 出现下图则证明登陆成功 第二步 创建一个文件夹去存放一会将要写的插件,文件夹的名字叫做npmDemo mkdir npmDemo
1 min read
相关技术

Wget 递归爬取网站

有时间看到别人网站的页面比较漂亮，就想给扒皮下来，学习学习。分享一个我常用网站扒皮命令wget 这个命令可以以递归的方式下载整站，并可以将下载的页面中的链接转换为本地链接。 wget加上参数之后，即可成为相当强大的下载工具。 wget -r -p -np -k http://xxx.com/xxx * -r, –recursive（递归） specify recursive download.（指定递归下载） * -k, –convert-links（转换链接） make links in downloaded HTML point to local files.（将下载的HTML页面中的链接转换为相对链接即本地链接） * -p, –page-requisites（页面必需元素） get all images, etc. needed to display HTML page.（下载所有的图片等页面显示所需的内容）
1 min read