CSS3 实现全景图浏览效果

Demo实现思路利用 CSS3 做出一个 3D 立方体。在立方体的6个面设置目标图片(利用Pano2VR 或者类似的全景工具导出的图片,一共有6张)。使用perspective、translateZ、transform-style: preserve-3d 等属性改变视图的大小。添加触摸事件改变translateX、translateY的角度数即可实现一个基本的全景图效果。注:页面使用了ES6,浏...

实现 AMD 模块加载器

只处理了两个模块直接循环依赖,还没有解决模块间间接循环依赖的问题。...

Vue 2.0 源码浅析:加载和实例化过程

分析加载的时候都执行了什么方法以及 new 一个 vue 实例从定义到渲染页面经过了哪些流程。加载过程静态方法initGlobalAPI(Vue)initUse(Vue)initMixin(Vue)initExtend(Vue)initAssetRegisters(Vue)原型方法initMixin(Vue)stateMixin(Vue)eventsMixin(Vue)lifecycleMixin...

启用 HTTP2 升级 Nginx 记录

HTTP/2 特点:多路复用,代替原来的序列和阻塞机制。所有的并发请求可以通过一个 TCP 连接并发完成。 (HTTP/1.x 发送多个请求会建立多次 TCP 连接,虽然 keep-alive 也可以复用一个连接,但是多个请求是串行有序的,并不能同时请求)服务器推送。服务器在发送 HTML 页面时可以主动推送其它的资源(JS/CSS/Image),而不用等浏览器解析 HTML 到对应位置才发请求...

设计模式 - 单例模式

单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例,这个类称为单例类,它提供全局访问的方法。单例模式是一种对象创建型模式。单例模式又名单件模式或单态模式。特点某个类只能有一个实例。它必须自行创建这个实例。它必须自行向整个系统提供这个实例。适用场景系统只需要一个实例对象,如系统要求提供一个唯一的序列号生成器,或者需要考虑资源消耗太大而只允许创建一个对象。客户调用类的单个实例只允...

设计模式 - 观察者模式

观察者模式也叫发布订阅模式,Publish 发布 / Subscribe 订阅,它定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象。这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己。举例你的微信订阅了某个公众号,公众号某天发布了一篇文章,你的微信上就能收到消息并且查看这篇文章,不止是你能收到,其他人如果订阅了这个公众号也能收到。基于 web 开发的事件绑...

使用 background-size 让精灵图实现自适应缩放

background-size 除了可以设置 cover、contain 这两个值,还可以自定义设置大小,比如:backgound-size: 10px 20px 或者 background-size: 10% 20%,前者以像素为单位表示背景图的大小宽10px 高20px,后者以百分比为单位基于父元素大小计算,效果与 img 标签的 width、height 是一样的。如果要实现背景图自适应缩...

Object.defineproperty 实现数据与视图绑定

Object.defineproperty(obj, prop, descriptor) 可以添加/修改对象的属性,调用后会返回该对象。和平时直接添加对象属性:var obj = {title: ''} 是有区别的。通过 Object.defineproperty 定义可以配置对象属性是否可以枚举/删除/可写以及为属性添加自定义的 getter/setter 等特性。使用属性不可写属性不可删除属性...