使用ShadowDOM开发基于Vue的JSSDK

最近用shadowDOM开发了两个jssdk,样式和逻辑天然地完全隔离,非常好用; 但同时也带来了一些问题,这里一并整理下来。 一、概述 JSSDK js 编写的软件开发工具包(Software Development Kit),sdk 对应到前端可以是库或组件,为其他软件提供某些功能。 Shadow DOM 一种规范、接口、能力。(MDN说明请点击查看) 可以将一个隐藏的、独立的 DOM 附加到…

Read More

前端上传预览和下载文件

上传预览 这里是上传预览只是指选择本地图片进行预览 选择图片用的是 input[file=type],预览有两种方案: 1、FileReader 调用 readAsDataURL 方法,将文件转为 base64,赋值给img标签; 2、URL.createObjectURL() 调用 createObjectURL 方法将文件转为对象url,同样赋值给img标签; 下载 1、FileSaver 直…

Read More

前后端对跨域请求的处理

ajax跨域请求及Content-Type相关内容 文中出现的源码在这里 I、简单请求 简单请求:使用 GET/POST/HEAD 的请求方式,且没有人为设置 CORS 安全首部字段集合之外的其他首部字段,且 Content-Type 首部为这三个值:text/plain, multipart/form-data, application/x-www-form-urlencoded,这种请求就是简…

Read More

正则表达式

最近看到一个正则入门的网站:https://regexlearn.com/zh-cn/learn,以做题的形式学习正则,一页一个知识点; 看完发现有几个不熟悉或老是忘的,整理下来; 测试时可用在线的一些网页,比较好找,我一般都用这个:https://c.runoob.com/front-end/854/ 基本语法 1、否定字符集:[^abc] 2、引用捕获组:从1开始,\1 表示引用第一个捕获组,…

Read More

Canvas 动画分析

之前用Canvas做过几个动画效果,效果如下图所示(点击图片可跳转到demo页面查看源码):      这几个动画做下来,发现和canvas本身的关系不大,还是“无css3时代”的那一套js动画逻辑; 页面出现了动画,肯定是有元素的属性在改变,动画过程其实就是时间和属性值的函数,比如最简单的匀速运动公式:属性值 = 常量 * 时间; 思路 js 做动画主要逻辑(思路)算是有两类: 1、固…

Read More

原生JS实现AJAX、JSONP及DOM加载完成事件

旧文一篇,2014年发布于前端乱炖中,是当时学习的整理,现在拿过来备份凑个篇数,原文中的部分代码错误也一并改正了; 文中还做了一些IE低版本的兼容性处理,现在已基本不用考虑了; 一、JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面;ajax的技术核心是 XMLHttpRequest 对象;ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应…

Read More

three.js 几种搭建全景图的方案

之后可能会做一个类似全景导航的项目,最近手里没活,就调研一下怎么做; 参照demo:是贝壳找房“VR看房”中的全景模式 全景图效果,网上有很多叫天空盒(SkyBox)的,不知这个名字从何而来; 简介 单纯的做全景图效果,方法比较多,根据几何体结构的不同,分为两种情况: 一种是球面全景图,素材如图1,就是将图片绘制到一个球体上,相机在球体中心,这样就能看到全景图了,具体效果及代码可查看 Threej…

Read More

后羿射日 – PixiJS开发射箭类游戏

年前为了学习 PixiJS 写了一个移动端的射箭小游戏,从开始构思,到找素材再到开发,花了七八天时间,之前只在朋友圈发过;现在公开源码,希望能对大家有所启发; 源码地址 https://github.com/sun2dan/shoot-sun 成品效果 预览地址:https://ashita.top/html/game/shoot-sun/index.html 游戏设计 背景大概是后羿射日的情节,…

Read More

NuxtJS 代理

Vue 中可以设置代理,但它的代理都是本地 Node 代理,只在开发中用,解决开发过程中跨域之类的问题; Nuxtjs 则不同,服务端渲染应用部署方式下,代理功能要随页面发布到线上;如果是静态应用部署方式,功能就和 Vue 一样了,只在开发中用; 这里主要讨论服务端渲染应用部署方式下的代理; 0、代理和反向代理 代理这个词生活中还是比较常见的,比如“代理人”,一般指可以帮我们去做某些事情的人; 针…

Read More

NuxtJS 部署

最近接手一个 NuxtJS 项目,目前是打包成静态页面上线的(generate命令),没有用到 node server(但项目中引用了 Koa 框架),现在要从其他系动态统获取数据,需要 node server 环境,于是研究了一下部署的流程; 1、打包 本地打包,要先执行下面的命令 2、上传文件到服务器 将 .nuxt文件夹、nuxt.config.js、package.json、static文…

Read More