sunq1982的博客

原创 chatgpt给我的linux通用的解压缩bash函数

这个函数可以根据后缀名自己判断用什么解压缩方式。

原创 用vscode远程登陆服务器编辑文件

vscode远程登陆服务器编辑文件

原创 POST status code: 405 Method Not Allowed, 但是GET 方法可行，折腾两天，问题居然是...

这是我学习http的详细踩坑经历，只为伯君一笑:我希望用axios来发起一个POST请求，但是老是报错 status code: 405 Method Not Allowed 。但是奇怪的是GET就可以。我反复调试各种参数，是不是url不对，相对路径换成绝对路径?是不是请求头不对，尝试各种content-type?我甚至用Jquery 的ajax， 以及原生xhr 都尝试了一遍还是没有用，一样的问题。既然客户端不对，那是不是服务端有问题？是不是windows PC 用来做服务端有什么限制?于

原创 学习行为树的心得，以及如何使用BehaviorTree.js

首先给大家推荐两篇个人认为最好的，讲行为树的文章。行为树原理还有Unreal引擎的这篇，应该算是进阶版行为树进阶然后自己在github上面找了一个相对比较受欢迎的行为树框架BehaviorTree.jsREADME.md 中有两种方法方法一：一个个建立节点 BehaviorTree.register()用BehaviorTreeImporter 一次性导入json格式的行为树第一种方法举个例子：...

原创 fitflex: CSS布局就是这么简单

您是否还在为如何实现DOM元素的垂直居中对齐而挠头呢?别担心,朋友。Fitflex为您提供了一种只需少量Javascript代码和配置就能轻松实现响应式布局的方法。还有一件事，它可以适应各种屏幕尺寸的手机、平板电脑、台式电脑……你对此感到兴奋吗?githubnpm让我们现在就盘它吧!UI交互的例子大致看完文档后，你可以盘下这个例子，挺有意思的，绝对让你对CSS布局有更新的认识。盘它吧，...

原创 Webpack4两种加载第三方模块的方法:ProvidePlugin和 DllPlugin

第一种方法这种方法比较简单。就是用 webpack.ProvidePlugin 这个插件plugins: [ new webpack.ProvidePlugin({ $:'fitflex', watchInDepth:'watch-in-depth' }), }), ],...

原创 怎样设置javascript的私有变量

众所周知，javascript没有私有变量。在常规的编程范式里面只有一种约定俗成的方法。用下划线。比如function Book(title) { this. _title = title; //用下划线告诉大家这是私有变量。}Book.prototype = { display: () =>{ ``` ｝ ```}但是这需要所有程序员都是道德高尚，听话的人。万...

原创 webpack4 optimization.splitChunks的注意点

写了个chunk，没有办法实现代码分离。 搞了一个多小时，最后发现官方文档的这句话，吐血了！webpack will automatically split chunks based on these conditions:New chunk can be shared OR modules are from the node_modules folderNew chunk wou...

原创 webpack4利用import动态加载的一些说明

最近开始学习webpack4, 有一个新功能，是可以用import做动态加载。 ES6的import语法告诉我们，模块只能做静态加载。 所谓静态加载，就是你不能写成如下形式：let filename = 'module.js';import {mod} from './' + filename. 也不能写成如下形式：if(condition) {import {mod...

转载 讲拖拽（draggable）的不错的文章 和范例

原创 CSS 布局解决方案之延伸篇

看到了一篇比较好的CSS布局解决方案的文章。 https://segmentfault.com/a/1190000013565024然后自己做一点延伸，再把代码敲出来，加深下印象。水平居中：inline-block + text-alignCSS： <style> .child1 { display: inline-bl...

原创 用proxy写一个递归来监听嵌套对象甚至JSON

之前的这篇文章 [http://blog.csdn.net/sunq1982/article/details/79354755]其实那个监听方式有个大bug，当不停的update 监听对象以后就会导致内存泄漏。因为每次在调用get的时候都会生成一个新的proxy,后来才知道是多傻。经过我一天时间的思考，用了一个递归的方法去解决嵌套对象的监听问题。下面是代码：//传递两个参数，...

原创 原型链详解

js最难理解的就是原型链，之前对原型链的理解一直很模糊，知道做了一些项目以后才渐渐的清晰起来，接下来我就试图来解释一下。首先是为什么需要“原型链”，我的理解就是两个字”共享”。 打个比方如果 A1 instanceof A, A2 instanceof A1, 那么A1可以用A.prototype上面所有的方法，而A2可以用 A1.prototype, 以及A.prototype上面所有的方法。

原创 对于ES6 Proxy 用法的理解以及实例

学了proxy以后，感觉这是一个很有用的东西。一个最大的功能应该就是能实现对于对象的监听。自己写了一个类，来实现这个功能。下面是代码。class Watch { // 生成一个watch类 constructor() { this.emit = dispatchEvent.bind(document); this.on = addEventListener...

原创 阮一峰 自定义元素教程中的一些疏漏

最近突发奇想，想自己写一些html元素方便以后重复调用，所以参照了阮大神的下面这篇文章，跟着敲了下代码，发现无法运行。 http://www.ruanyifeng.com/blog/2017/06/custom-elements.html后来又是搜索了很多资料，发现下面这篇文章是讲得最清楚的，而且其代码可以运行成功 https://segmentfault.com/a/1190000011

原创 理解 Vue.js中的v-for功能

我们如果用html去写一个表格是很麻烦的一件事情，需要写很多的tr, th, td, 但是如果我们用了vue.js以后一切就变得如此简单。下面是pug形式的html: table#example2(border='1' cellspacing='0') tr th(v-for='head in heads' :style='{width:tWi

原创 node.js+redis+express 实现发布订阅功能

var redis = require('redis');var express = require('express');var app = express();//这里建立了三个redis的客户端，为什么是3个呢？//一个是发布，一个是订阅，一个是处理正常的req,res//本来是想用订阅的client来处理的req,res,但是却报错//后来查了以后才知道，原来如果此客户端订阅就不能

原创 在express 模板引擎的路由中加载socket.io

看了很多socket.io结合express的例子，只是一些单一的demo。很少有提到在express模板引擎中如何加载socket.io，今天琢磨了半个下午，好不容易搞出来了，这里分享给大家。首先我们要知道的是，socket.io是基于http的。 也就是说http之上，有一个app，也有一个io。如果我希望在某个路由中用socket.io，那么就需要把io挂载到router上export出来，然

原创 Mongoose中间件入门示例

Mongoose的中间件功能很强大，可以把复杂的异步程序，诸如各种数据验证的方法，拆分后按照同步顺序执行，这里就举一个简单的中间件用法\\前面的代码都是范式，在基础入门已经提过了var mongoose = require('mongoose');mongoose.connect('mongodb://localhost:28001/test');var db = mongoose.conne

原创 mongoose的基础用法

下面是根据官网文档quick start的范例敲了一遍代码，然后附加一些解释//首先npm下载mongoose并且保证mongodb已经下载，服务器已经运行//接下来是获取mongoose模块var mongoose = require('mongoose');mongoose.connect('mongodb://localhost:28001/test');var db = mongoo

原创 socket.io命名空间的详细解析

所谓命名空间，就是指在不同的域当中发消息只能给当前的域的socket收到。 下面来看一个实例。 看下客户端的代码：<script src="/socket.io/socket.io.js"></script> var chat = io.connect('http://localhost:3000/chat'); var news = io.connect('http://loca

原创 用socket.io发私信

在socket.io中发私信其实就是定点对某个特定的socket.id发消息。 下面这个示例有三个一样的客户端, 客户端1发私信给客户端2，客户端2发私信给客户端3， 客户端3发私信给客户端1. 下面是三个客户端的html, 取之于官方范例：<!doctype html><html><head> <title>Socket.IO chat</title> <style>

原创 Socket.io对于房间的详细解析

最近学习了socket.io房间的用法，现在来梳理一下。 首先我们还是先看下客户端的chat.html，这取自于官方文档的例子：<!doctype html><html><head> <title>Socket.IO chat</title> <style> * { margin: 0; padding: 0;

原创 Express 4.x 使用CORS跨域的详细解析

前两天在stackoverflow里面提问res.jsonp的用法，被回答者嘲讽：现在是2017年了，还用jsonp? 用CORS跨域啊。做为一名傻傻的业余爱好者，不明就里，居然问：是什么技术取代jsonp在CORS跨域里面使用？ 估计回答的人已经吐血了，说：CORS就是一门技术。 后来自己去翻关于各方面CORS的技术博客，现在稍微懂了一点，在此做个笔记。 jsonp是属于比较老的技术，HTML5

原创 Express4.x中res.format()的用法

res.format的作用是根据request heards所能接受的格式，来响应不同的内容。来看个例子：这是服务端路由程序 router.jsvar express = require('express');router.get('/', function (req, res) { res.send('this is a router base page!');});router.ge

原创 Express 4.x中间件express-session的详细解析

对这个中间件express-session的一些设置一直是懵懵懂懂，现在稍微懂了一点。 先简单的看下代码吧：这是路由页面代码 cookieRouter.jsvar express = require('express');var bodyParser = require('body-parser');//引入此中间件解析表单post来的数据var session = require('ex

原创 Express 4.x中间件methodOverride的详细解析

methodOverride用于当服务器端运用put, delete这种方法，而客户端不支持的情况之下，对请求方法进行转换从而能够保持通讯能够成功的办法。假设服务端用的是put方法的话，值得注意的是在form的属性里面需要这么写。action="index1.html?_method=PUT"首先看下客户端html的这个表单提交：<!DOCTYPE html><html><head> <m

原创 Express 4.x中间件multer的详细解析

multer这个中间件用来处理客户上传的各种文件并且保存到服务端，非常强大和实用。下面让我们来看看怎么搞。 首先还是去下载下这个中间件，需要提一下的是，我用的是v1.3.0, 老版本的的使用方法会有较大出入，这里就不说了。 npm install multer –save下面先看客户端的html，上传一个文件玩玩： <html lang="en"><head> <meta char

原创 Express 4.x中间件morgan(logger)的详细解析

开头先说写无关的话： 看了很多技术博客，最痛恨的就是那种拷贝粘贴党，要么就是那种原文翻译混乱党， 都是属于无脑型。不仅如此，格式也是让人心生绝望。浪费了很多时间。 当然有些人写这些只是给自己记的笔记，自己也不能太过激。 好了，牢骚发过了，现在写正题。 express 4.x相比express 3.x有很大的改进，特别是中间件方面，已经不再兼容，需要自己去下载。 所以只要碰到这种格式的 expr

原创 Node.js 写入文件流的缓存问题探讨

客户端学得差不多了，为了打通客户端和服务端的任督二脉， 现在小白在看node.js. 关于写文件流的操作，想知道缓存最多能一次性存入多少字节。 下面是代码:var count = 0; //计数器记录可以写多少个字符。var flagOut = true; //flag触发后，跳出循环，不再写文件。var writeable = fs.createWriteStream('./testInpu

原创 为什么我们喜欢用 async function

小明是个菜鸟程序员，他写了三个延时1秒执行的函数 fn1, fn2, fn3:var fn1 = function () { setTimeout(function () { console.log('fn1 is executed'); }, 1000);};var fn2 = function () { setTimeout(function () {

原创 关于js中对对象原型和构造函数的一些理解

先随意写一个构造函数，然后创建两个它的实例对象。function Box(age) { this.name = 'ss', this.age = age return this.age;}Box.prototype.run = function () { console.log(`${this.name} : I am ${this.age}.`);}var box1 = new

原创 ES6语法之函数式编程实现 pipeline

我们的目标是给定一个初始值以后，用pipeline的方法实现不同函数运算的顺序执行，从而得出最终结果。 最终实现应该如下：var result = pipeline(initialValue, func1, func2, func3...);首先先写几个函数吧：var double = n => n * 2;var pow = n => n * n;var pow3 = n => n * n

原创 戏说js的call, apply 和 bind （文章内容可能引起逻辑严谨的程序员的不适，慎入！）

有两个对象，他们的名字叫obj1, 和obj2, 他们很像，但是其实是生活在不同的平行空间中行走，但是彼此不能相见。下面请看看他们长什么样子。var obj1 = { power: 8, inc: function (elem1, elem2) { this.power++; console.log(this.power + elem1 + elem

原创 ES6中箭头函数的浅析

先看这个代码：var obj = { name: 'ss', time: function () { return function () { console.log(this.name); } }};obj.time()();//显然没有结果，this作用域的问题这样就可以运行var obj = { nam

原创 ES6 中 let的在for循环中变量作用域问题的探讨

如果你直接这么运行，那么电脑就卡死了，因为死循环了。for (var i = 0; i < 3; i++) { var i = 1; console.log(i);}可是如果你这么写for (let i = 0; i < 3; i++) { let i = 1; console.log(i);结果则是：111如果你这么写，结果同上for (var i = 0; i < 3;

原创 setInterval()和clearInterval()在闭包内的用法

看了大部分博客都是setInterval以后，然后用事件clearInterval. 下面的例子是用闭包中的内部变量来控制定时器。function fn() { var i = 0; var t = setInterval(function () { i++; console.log(i); if (i == 10) {

原创 对于javascript MDN 中let 和var范例的认识

这是javascript MDN的范例 目的是为了说明let作用域的问题。var SomeConstructor;{ let privateScope = {}; SomeConstructor = function SomeConstructor () { this.someProperty = "foo"; privateScope.hidden