分类 JavaScript 下的文章
-
关于使用Koa2的点点滴滴
Koa是基于Nodejs的一个后端框架，算是比较常用的，核心思想就是中间件，Koa实现底层逻辑，其余的就需要自己实现，包括：session、数据库操作、文件上传、路由、模板、静态资源访问等 前言 一直以来都是使用thinkjs这个框架，集成很多功能，基本上就只需要负责写逻辑就OK了，所以想尝试一下Koa这种需要动手逐个实现功能的，类似也有express 这里并不打算写新手教程，可自行百度，只是写使用过程中遇到的一些疑惑 下面代码基于ES6、7 1、安装 官网推荐使用Nodejs >= 7.6的版本，小于这个版本需要采用babel方式曲线救国 实际使用发现，用了babe......
-
一个简单的移动端视频组件的实现
一个简单的移动端视频组件的实现 据说移动端需要个视频组件，然后自己尝试了一下，不知道能不能用上，有问题希望大家提出来，(>=<) 这里还是采用了标签video的方式来实现的视频播放。 当然video存在一些问题 视频在最顶层的问题，这里需要区分不同的系统和系统版本， ios系统 在ios8以下，video处于最顶层 在ios8以上ios10以下的iphone上视频在不播放时，不会处于最顶层，如果播放，视频就会自动全屏，处于最顶层， 在ios10以上的iphone系统上视频不播放和播放时，都不会自动全屏，并处于最顶层。 android系统 在安卓系统下，video处于最顶......
-
在游戏内嵌项目中体验Vue2.0全家桶
前言 最近在做率土之滨海外版的内嵌项目，其实之前已经做过一版，但是需求不是很满意，然后又改了设计，改了功能，最终变成一个小论坛：有发帖、回帖、发帖和回帖都能上传图片、点赞、帖子列表、我的帖子、我的点赞、我的回帖等等功能。来组动态预览图： 相比第一版，增加了几个接口功能。而本次开发使用了Vue2.0 + Vue-router + Vue-resource + Vuex + ES6的组合，原因如下： 之前做过一版，二次开发如果在旧版的基础改会缺少点挑战性，相反正因为熟悉，意味着在项目计划排期内有更多尝试新技术的可能性 vue在社区很火，而其在单页面据说有不错的体验，看起来很适合内嵌......
-
canvas学习案例之简单的物理运动
这次主要写2种简单的运动效果，包括匀速直线运动、匀加速直线运动。在码代码之前先了解下canvas动画效果的基本实现原理，其核心思想是先定义一个初始状态，然后定义一个定时器，定时器内执行一个方法，在这个方法中要清除当前的画面，然后重新绘制需要变化的效果。由于人眼存在残影，所以短时间内的中断的变化可以看成是连续的变化。 以下代码都是基于下面的html结构 <canvas id="canvas" width="728" height="400"> 你的浏览器不支持canvas，请跟换其他浏览器试一试 </c......
-
Augmented Reality
噔噔！一个类似阴阳师现世抽卡的小demo，由于getUserMedia的兼容性问题，目前只有安卓手机可以看到...（建议拿一些高端点的安卓机） 玩法：扫左图的二维码后，点击允许访问摄像头后，再扫右边的二维码（相当于阴阳师里的召唤阵） 或者你也可以拿另外一台手机扫下面的码来显示召唤阵 下面探索一下其实现的原理，其中主要的交互包括： 开启摄像头 > 扫码 > 显示模型 转换为相对应的技术，奏是... · getUserMedia，开启摄像头获取设备的媒体信息 · OpenCv，js-aruco, 图像处理，识别二维码 · 画出3d模型，threejs，three......
-
简单的canvas绘图demo
最近在看canvas基础知识，刚学完绘制路径、矩形，设置线条、颜色、样式和阴影等，就想码下demo巩固下基础知识。于是网上搜了，找到了绘制XP壁纸的例子，里面用到了前面说到的各个知识点。好了，进入主题了。 html代码： <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">浏览器居然不支持Canvas?赶快换一个吧！！</canvas> js代码： window.onload = fu......
-
JS学习笔记——实用的 JS 小技巧2
5. 找到数组中的最大最小值 内部函数Math.max() 和 Math.min() 可以从参数中找到最大值和最小值： Math.max(1, 2, 3, 4); // 4 Math.min(1, 2, 3, 4); // 1 如果要在数组中找最大最小值可以这样用： var numbers = [1, 2, 3, 4]; Math.max.apply(null, numbers) // 4 Math.min.apply(null, numbers) // 1 透过 ES6 的展开运算符来完成： var numbers = [1, 2, 3, 4]; Math.max(...nu......
-
ES6在新图册组件中的应用
ES7都来了，然而我们连ES6都很少用到，基于ES6的不成熟，以及浏览器支持程度问题，导致大家都比较少使用得上它。不过目前日渐更新的浏览器，已经大面积支持ES6的新特性了，即使不支持，也可以使用Babel来进行转换为ES5来执行。此次就运用到Babel来编译，已集成到前端发布工具中，添加即可使用。 1、类定义 以前的做法： function ImageFall(param){ } ImageFall.prototype = {} 怎么看，都不像一个类，怪别扭 class ImageFall{ //构造函数 con......
-
吱吱说VR，你怕了吗？
首先，看下demo效果，扫一下下面的二维码： 主要利用浏览器的deviceorientation事件监视设备朝向，记录下其受地心引力作用下而在方向上产生变化的数据，然后使用DeviceOrientationControls.js（一个three.js的插件）让摄像头根据设备的移动进行调整，相当于模拟人看向物体的某个方向，犹如人的视线一样。最后，结合three.js来构建一个3d世界。 1. 画一个会动的太阳 引用three.js, 建立3个要素：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中，然后再画一个太阳。 ......
-
用requestAnimationFrame来代替setInterval
用requestAnimationFrame来代替setInterval 在高级浏览器中，我们用requestAnimationFrame这个方法来代替setInterval和setTimout来做定时器。 requestAnimationFrame的执行机制 目前的显示器大部分的PSF都是60帧/秒，即每1000/60 = 16.7ms刷新一次，如果setTimeout/setInterval设置的时间间隔小于16.7，那么就会出现过度绘制的问题。而requestAnimationFrame正是为了这个而出现的，它会跟着浏览器的绘制走，浏览器每次重绘会通知requestAnim......
-
关于函数声明与函数表达式的一些理解
通常我们定义函数会用下面两种写法： 1、函数声明 function test(){ //... } 2、函数表达式 var test = function(){ //... }; 表面上看没什么区别，实际上解析器会在执行任何代码前先读取声明，而函数表达式要等到解析器执行到它所在的代码行才会真正被执行。下面举个例子： var test = function() { console.log(2) }; function test() { //这个是函数声明，将会被提升 console.log(1); } test() 结果是输出2，这个代码片段会被......
-
sticky解决粘性交互在微信的问题
前言 粘性交互 指的是某个模块在页面滚动到指定位置时脱离页面不再顺页面滚动而滚动，而是处于屏幕某一固定位置，变成fixed状态，粘着屏幕某一边缘。这种交互经常用到一些导航，比如《大话西游》手游移动官网，效果请看下面动图示意： 这种交互的主要逻辑是：导航模块默认是普通流体布局，然后监听window的scroll事件，当页面滚动到导航模块的位置时把导航改成position:fixed状态并调整模块的显示位置即可。在大部分浏览器没什么问题，但是微信对scroll这高频事件做了处理，即使你绑定了scroll事件，在滑动屏幕时也要等页面滚动完后才会执行。所以在微信下这种粘性交互是不流畅的：......
-
JS学习笔记——实用的 JS 小技巧
1. 安全的串接字串 假设有一些不确定的变量类型，而你想将它们串接成字符串，这样可能会导致错误。 var one = 1; var two = 2; var three = '3'; var result = one + two + three; // 会得到 "33" 而非 "123" 可以用 concat 来串接字符串： var one = 1; var two = 2; var three = '3'; var result = ''.concat(one, two, three); // 得到 "123" 2.......
-
再聊PC页面适配
今年3月份写过一篇《聊聊PC端页面适配》文章，里面主要谈到一些对pc端页面做适配的看法以及方法（百分比和js检测）。最近在做劲舞团的官网，再次遇到了适配这个点，而且把适配要求提得更高点。所以这次咱们再来聊聊~ 适配考虑的方法主要还是之前文章说的两种，那么劲舞团官网遇到的适配新挑战是什么呢？ 1、需要适配的尺寸有明显的区间区分 2、不一样的布局和交互：横向双屏布局以及横向滚动切屏交互 先来个整体的布局示图： 适配区间分析 因为页面是分两屏的设计，这里的适配区间需要考虑两层：第一层是浏览器可视区域的大小变化下，页面左右两屏的宽度适配；第二层是当左右屏宽度发生变化后，左右两屏里面......
-
ECMAScript 2016 Language Specification (1)
#ECMAScript 2016 Language Specification (1) 听从卡总教导，无论学习什么，至少找到你能找到的最官方的文档，然后把文档好好的读一遍（就当学英语），而不是百度一下然后看别人的博客。所以去找到了ECMA标准翻出了emca-262，准备从最基础的东西入手，反正总体而言也是看不懂，所以只能慢慢啃。 所以读着觉得可以开个超级大坑，慢慢更新，什么时候更新完我也不知道，反正应该是不会有人看的。本来准备开始读的时候还是ECMAScript2015 ，拖着拖着已经变成ECMAScript2016了，感觉如果我再拖下去就要变成ECMAScript2017了。所以......
