对事也对人，文中出现的需求非实际原始需求，是基于原始需求模拟出来的假需求； 案例5，2019-06-28 这次是导出文件的需求； 一开始的方案是 GET 请求，在浏览器中打开，会自动下载文件；后来发现有的导出会带很多参数，可能会超出 GET 方式所能传递的长度；于是我提出了另一个方案，改成 form 表单 post 提交； 调试过程也非常有意思： 1、我先改了一个模块下的四个页面，分别对应无参数、…
作者： sun2dan
原生JS实现AJAX、JSONP及DOM加载完成事件
旧文一篇，2014年发布于前端乱炖中，是当时学习的整理，现在拿过来备份凑个篇数，原文中的部分代码错误也一并改正了； 文中还做了一些IE低版本的兼容性处理，现在已基本不用考虑了； 一、JS原生Ajax ajax：一种请求数据的方式，不需要刷新整个页面；ajax的技术核心是 XMLHttpRequest 对象；ajax 请求过程：创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应…
three.js 几种搭建全景图的方案
之后可能会做一个类似全景导航的项目，最近手里没活，就调研一下怎么做； 参照demo：是贝壳找房“VR看房”中的全景模式 全景图效果，网上有很多叫天空盒（SkyBox）的，不知这个名字从何而来； 简介 单纯的做全景图效果，方法比较多，根据几何体结构的不同，分为两种情况： 一种是球面全景图，素材如图1，就是将图片绘制到一个球体上，相机在球体中心，这样就能看到全景图了，具体效果及代码可查看 Threej…
后羿射日 – PixiJS开发射箭类游戏
年前为了学习 PixiJS 写了一个移动端的射箭小游戏，从开始构思，到找素材再到开发，花了七八天时间，之前只在朋友圈发过；现在公开源码，希望能对大家有所启发； 源码地址 https://github.com/sun2dan/shoot-sun 成品效果 预览地址：https://ashita.top/html/game/shoot-sun/index.html 游戏设计 背景大概是后羿射日的情节，…
NuxtJS 代理
Vue 中可以设置代理，但它的代理都是本地 Node 代理，只在开发中用，解决开发过程中跨域之类的问题； Nuxtjs 则不同，服务端渲染应用部署方式下，代理功能要随页面发布到线上；如果是静态应用部署方式，功能就和 Vue 一样了，只在开发中用； 这里主要讨论服务端渲染应用部署方式下的代理； 0、代理和反向代理 代理这个词生活中还是比较常见的，比如“代理人”，一般指可以帮我们去做某些事情的人； 针…
NuxtJS 部署
最近接手一个 NuxtJS 项目，目前是打包成静态页面上线的（generate命令），没有用到 node server（但项目中引用了 Koa 框架），现在要从其他系动态统获取数据，需要 node server 环境，于是研究了一下部署的流程； 1、打包 本地打包，要先执行下面的命令 2、上传文件到服务器 将 .nuxt文件夹、nuxt.config.js、package.json、static文…
NuxtJS 问题汇总
整理 nuxtjs 项目中遇到的各种问题； 一部分是没有理解 nuxt 的设计思想，一部分有些没找到原因，还有一些是版本的问题，更新后就出问题了… 0、安装过程中的问题 创建的时候，axios 一项是单选的，必须要空格才能选中，前几次创建项目的时候没有注意，直接一路 Enter 下来，生成的项目 package.json 中没有 axios 依赖，以为是 bug，后来发现这一项前边是空心的圆点，才…
SVG 边框动画
最近用到一个边框动画效果，动画过程是边框从四个端点出发，慢慢变长，最终填满所有边框，动画效果如下图： 这个是用SVG实现的，主要用到的属性是 stroke-dasharray； stroke-dasharray MDN官方文档点击可查看，这个属性主要是设置边框（stroke）的实线和间隔的数值，“实线长度[, 间隔长度, 实线长度, 间隔长度, ……]”这种格式； 参数中包含两类值：实线长度、间隔…
WordPress 全站启用 HTTPS
本来没想这么早加 HTTPS，之前在家里访问后台的时候，直接弹出一个广告……于是开始着手搞全站 HTTPS； 主要有三步：申请证书、安装证书、设置站点 HTTPS 访问； 申请证书 直接用了腾讯云的，免费一年；腾讯云文档在这里 路径：域名与网站 -> SSL证书管理 -> 申请证书，填写信息，验证身份； 验证通过后，就可以到证书管理里下载证书文件了，下载解压后会有不同服务器下的证书，…
ES6转ES5
WebStorm中可以添加 FileWatcher 将 ES6 代码转为 ES5代码； 也可以通过gulp、webpack等构建工具来实现，有时候自己写个简单的页面，并不想引入这些工具，这时候Webstorm的FileWatcher就非常有用了； WebStorm 方案 1、es6 的文件后缀用 .es6，不是 .js 这是因为 FileWatcher 是监听对应类型的文件来做处理，如果源文件和转…