学习笔记(6)
移动端手势缩放pinchzoom.js源码
demo:https://github.com/LynnWonder/dva-router-demo
Object
等同于
new Object()
Object.assign
注意它不是添加在Object原型对象的方法
所以如果浏览器不能支持这个api，那么我们的重新定义属性的方式：
Object.defineProperty(obj, prop, descriptor)
//直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
Object.defineProperty(Object, "assign_lynn", {
value: function assign(target, varArgs) { // .length of function is 2
if (target == null) { // TypeError if undefined or null
throw new TypeError('Cannot convert undefined or null to object');
}
let to = new Object(target);
const args=Array.prototype.slice.call(arguments,1);
args.forEach((item)=>{
if (item!=null){
// 把参数列表中的对象复制进target
Object.keys(item).forEach((item0)=>{
to[item0]=item[item0];
})
}
});
// MDN上的代码
// for (var index = 1; index < arguments.length; index++) {
// var nextSource = arguments[index];
//
// if (nextSource != null) { // Skip over if undefined or null
// for (var nextKey in nextSource) {
// // Avoid bugs when hasOwnProperty is shadowed
// if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
// to[nextKey] = nextSource[nextKey];
// }
// }
// }
// }
return to;
},
writable: true,
configurable: true
});
const obj1={
a:1,
b:{
b1:2,
b2:3
}
};
const obj2={
a:2,
c:3
}
const obj3={
d:4
}
const merge=Object.assign_lynn(obj1,obj2,obj3);
console.info(merge);
Object.prototype.hasOwnProperty.call()
首先：所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性；和 in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。
为什么用它，而不是myObj.hasOwnProperty(prop)
Why use Object.prototype.hasOwnProperty.call(myObj, prop) instead of myObj.hasOwnProperty(prop)?
原因如下：
- If
objinherits fromnullnotObject.prototype：- 假如A=Object.create(null)；(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create)可以看polyfill看下源码，A的原型对象指向null，那么肯定没有hasOwnProperty方法
- If
hasOwnPropertyhas been redeclared onobj - If
hasOwnPropertyhas been redeclared inobj's prototype chain
再次看undefined和null的关系
null==undefined //true
null===undefined //false
null==null //true
null===null //true
undefined==undefined //true
undefined===undefined //true
var A;
var a=null;
console.info(null==null);
console.info(null===null);
console.info(undefined==undefined);
console.info(undefined===undefined);
if(a==null){
console.info(true);
}
if(A===undefined){
console.info(true);
}
document.implementation.createHTMLDocument
该方法 (属于document.implementation) 用来创建一个新的HTML文档.
https://developer.mozilla.org/zh-CN/docs/Web/API/DOMImplementation/createHTMLDocument
MDN上面的demo反映了一个问题：虽然我在写的时候把script写在底部，区别于放在头部阻塞渲染，这有利于页面快速呈现出来，但是由于iframe标签闭合的原因，script根本不会加载。
另外关于iframe属实会阻塞当前页面的onload事件的问题处理：
parentNode parentElement childNodes children
parentNode,parentElement,childNodes,children最经典讲解
image节点的独有属性
complete :属性可返回浏览器是否已完成对图像的加载
naturalHeight:返回一个 unsigned long 类型,表明图像在CSS像素中固有的高度, 如果可用的话; 否则, 返回0.
源码解读
/*
PinchZoom.js
Copyright (c) Manuel Stofer 2013 - today
Author: Manuel Stofer (mst@rtp.ch)
Version: 2.3.4
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
// polyfills
// 如果浏览器不能识别Object.assign，那么就定义一个函数
if (typeof Object.assign != 'function') {
// Must be writable: true, enumerable: false, configurable: true
Object.defineProperty(Object, "assign", {
value: function assign(target, varArgs) { // .length of function is 2
if (target == null) { // TypeError if undefined or null
throw new TypeError('Cannot convert undefined or null to object');
}
var to = Object(target);
for (var index = 1; index < arguments.length; index++) {
var nextSource = arguments[index];
if (nextSource != null) { // Skip over if undefined or null
for (var nextKey in nextSource) {
// Avoid bugs when hasOwnProperty is shadowed
if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) {
to[nextKey] = nextSource[nextKey];
}
}
}
}
return to;
},
writable: true,
configurable: true
});
}
if (typeof Array.from != 'function') {
Array.from = function (object) {
return [].slice.call(object);
};
}
// utils 工具类
// 这里是新创建了一个html文档
var buildElement = function(str) {
// empty string as title argument required by IE and Edge
var tmp = document.implementation.createHTMLDocument('');
tmp.body.innerHTML = str;
return Array.from(tmp.body.children)[0];
};
var triggerEvent = function(el, name) {
var event = document.createEvent('HTMLEvents');
event.initEvent(name, true, false);
el.dispatchEvent(event);
};
var definePinchZoom = function () {
/**
* Pinch zoom
* @param el
* @param options
* @constructor
*/
var PinchZoom = function (el, options) {
this.el = el;
this.zoomFactor = 1;
this.lastScale = 1;
// 元素translate值为-this.offset
this.offset = {
x: 0,
y: 0
};
this.initialOffset = {
x: 0,
y: 0,
};
this.options = Object.assign({}, this.defaults, options);
this.setupMarkup();
this.bindEvents();
this.update();
// The image may already be loaded when PinchZoom is initialized,
// and then the load event (which trigger update) will never fire.
if (this.isImageLoaded(this.el)) {
this.updateAspectRatio();
this.setupOffsets();
}
this.enable();
},
sum = function (a, b) {
return a + b;
},
isCloseTo = function (value, expected) {
return value > expected - 0.01 && value < expected + 0.01;
};
PinchZoom.prototype = {
//默认值
defaults: {
tapZoomFactor: 2,
zoomOutFactor: 1.3,
animationDuration: 300,
maxZoom: 4,
minZoom: 0.5,
draggableUnzoomed: true,
lockDragAxis: false,
setOffsetsOnce: false,
use2d: true,
zoomStartEventName: 'pz_zoomstart',
zoomUpdateEventName: 'pz_zoomupdate',
zoomEndEventName: 'pz_zoomend',
dragStartEventName: 'pz_dragstart',
dragUpdateEventName: 'pz_dragupdate',
dragEndEventName: 'pz_dragend',
doubleTapEventName: 'pz_doubletap',
verticalPadding: 0,
horizontalPadding: 0,
onZoomStart: null,
onZoomEnd: null,
onZoomUpdate: null,
onDragStart: null,
onDragEnd: null,
onDragUpdate: null,
onDoubleTap: null
},
/**
* Event handler for 'dragstart'
* @param event
*/
handleDragStart: function (event) {
triggerEvent(this.el, this.options.dragStartEventName);
if(typeof this.options.onDragStart == "function"){
// 触发拖动事件开始时的回调函数
this.options.onDragStart(this, event)
}
// this.inAnimation设为false
this.stopAnimation();
this.lastDragPosition = false;
this.hasInteraction = true;
this.handleDrag(event);
},
/**
* Event handler for 'drag'
* @param event
*/
handleDrag: function (event) {
var touch = this.getTouches(event)[0];
// this.lastDragPosition为touch
this.drag(touch, this.lastDragPosition);
this.offset = this.sanitizeOffset(this.offset);
this.lastDragPosition = touch;
},
handleDragEnd: function () {
triggerEvent(this.el, this.options.dragEndEventName);
if(typeof this.options.onDragEnd == "function"){
this.options.onDragEnd(this, event)
}
this.end();
},
/**
* Event handler for 'zoomstart'
* @param event
*/
handleZoomStart: function (event) {
triggerEvent(this.el, this.options.zoomStartEventName);
if(typeof this.options.onZoomStart == "function"){
this.options.onZoomStart(this, event)
}
this.stopAnimation();
this.lastScale = 1;
this.nthZoom = 0;
this.lastZoomCenter = false;
this.hasInteraction = true;
},
/**
* Event handler for 'zoom'
* @param event
*/
handleZoom: function (event, newScale) {
// a relative scale factor is used
var touchCenter = this.getTouchCenter(this.getTouches(event)),
scale = newScale / this.lastScale;
this.lastScale = newScale;
// the first touch events are thrown away since they are not precise
this.nthZoom += 1;
if (this.nthZoom > 3) {
this.scale(scale, touchCenter);
this.drag(touchCenter, this.lastZoomCenter);
}
this.lastZoomCenter = touchCenter;
},
handleZoomEnd: function () {
triggerEvent(this.el, this.options.zoomEndEventName);
if(typeof this.options.onZoomEnd == "function"){
this.options.onZoomEnd(this, event)
}
this.end();
},
/**
* Event handler for 'doubletap'
* @param event
*/
handleDoubleTap: function (event) {
var center = this.getTouches(event)[0],
zoomFactor = this.zoomFactor > 1 ? 1 : this.options.tapZoomFactor,
startZoomFactor = this.zoomFactor,
updateProgress = (function (progress) {
this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
}).bind(this);
if (this.hasInteraction) {
return;
}
this.isDoubleTap = true;
if (startZoomFactor > zoomFactor) {
center = this.getCurrentZoomCenter();
}
this.animate(this.options.animationDuration, updateProgress, this.swing);
triggerEvent(this.el, this.options.doubleTapEventName);
if(typeof this.options.onDoubleTap == "function"){
this.options.onDoubleTap(this, event)
}
},
/**
* Compute the initial offset
*
* the element should be centered in the container upon initialization
*/
computeInitialOffset: function () {
this.initialOffset = {
x: -Math.abs(this.el.offsetWidth * this.getInitialZoomFactor() - this.container.offsetWidth) / 2,
y: -Math.abs(this.el.offsetHeight * this.getInitialZoomFactor() - this.container.offsetHeight) / 2,
};
},
/**
* Reset current image offset to that of the initial offset
*/
resetOffset: function() {
this.offset.x = this.initialOffset.x;
this.offset.y = this.initialOffset.y;
},
/**
* Determine if image is loaded
*/
isImageLoaded: function (el) {
if (el.nodeName === 'IMG') {
// 如果图片没加载完或者说图像的像素高为0就返回false
return el.complete && el.naturalHeight !== 0;
} else {
return Array.from(el.querySelectorAll('img')).every(this.isImageLoaded);
}
},
setupOffsets: function() {
if (this.options.setOffsetsOnce && this._isOffsetsSet) {
return;
}
this._isOffsetsSet = true;
this.computeInitialOffset();
this.resetOffset();
},
/**
* Max / min values for the offset
* @param offset
* @return {Object} the sanitized offset
*/
sanitizeOffset: function (offset) {
var elWidth = this.el.offsetWidth * this.getInitialZoomFactor() * this.zoomFactor;
var elHeight = this.el.offsetHeight * this.getInitialZoomFactor() * this.zoomFactor;
var maxX = elWidth - this.getContainerX() + this.options.horizontalPadding,
maxY = elHeight - this.getContainerY() + this.options.verticalPadding,
maxOffsetX = Math.max(maxX, 0),
maxOffsetY = Math.max(maxY, 0),
minOffsetX = Math.min(maxX, 0) - this.options.horizontalPadding,
minOffsetY = Math.min(maxY, 0) - this.options.verticalPadding;
return {
x: Math.min(Math.max(offset.x, minOffsetX), maxOffsetX),
y: Math.min(Math.max(offset.y, minOffsetY), maxOffsetY)
};
},
/**
* Scale to a specific zoom factor (not relative)
* @param zoomFactor
* @param center
*/
scaleTo: function (zoomFactor, center) {
this.scale(zoomFactor / this.zoomFactor, center);
},
/**
* Scales the element from specified center
* @param scale
* @param center
*/
scale: function (scale, center) {
scale = this.scaleZoomFactor(scale);
this.addOffset({
x: (scale - 1) * (center.x + this.offset.x),
y: (scale - 1) * (center.y + this.offset.y)
});
triggerEvent(this.el, this.options.zoomUpdateEventName);
if(typeof this.options.onZoomUpdate == "function"){
this.options.onZoomUpdate(this, event)
}
},
/**
* Scales the zoom factor relative to current state
* @param scale
* @return the actual scale (can differ because of max min zoom factor)
*/
scaleZoomFactor: function (scale) {
var originalZoomFactor = this.zoomFactor;
this.zoomFactor *= scale;
this.zoomFactor = Math.min(this.options.maxZoom, Math.max(this.zoomFactor, this.options.minZoom));
return this.zoomFactor / originalZoomFactor;
},
/**
* Determine if the image is in a draggable state
*
* When the image can be dragged, the drag event is acted upon and cancelled.
* When not draggable, the drag event bubbles through this component.
*
* @return {Boolean}
*/
canDrag: function () {
return this.options.draggableUnzoomed || !isCloseTo(this.zoomFactor, 1);
},
/**
* Drags the element
* @param center
* @param lastCenter
*/
drag: function (center, lastCenter) {
if (lastCenter) {
// 如果将平移锁定到单个轴
if(this.options.lockDragAxis) {
// lock scroll to position that was changed the most
if(Math.abs(center.x - lastCenter.x) > Math.abs(center.y - lastCenter.y)) {
this.addOffset({
x: -(center.x - lastCenter.x),
y: 0
});
}
else {
this.addOffset({
y: -(center.y - lastCenter.y),
x: 0
});
}
}
else {
// 最后translate的时候取负值，所以这里这么处理
this.addOffset({
y: -(center.y - lastCenter.y),
x: -(center.x - lastCenter.x)
});
}
triggerEvent(this.el, this.options.dragUpdateEventName);
if(typeof this.options.onDragUpdate == "function"){
this.options.onDragUpdate(this, event)
}
}
},
/**
* Calculates the touch center of multiple touches
* @param touches
* @return {Object}
*/
getTouchCenter: function (touches) {
return this.getVectorAvg(touches);
},
/**
* Calculates the average of multiple vectors (x, y values)
*/
getVectorAvg: function (vectors) {
return {
x: vectors.map(function (v) { return v.x; }).reduce(sum) / vectors.length,
y: vectors.map(function (v) { return v.y; }).reduce(sum) / vectors.length
};
},
/**
* Adds an offset
* @param offset the offset to add
* @return return true when the offset change was accepted
*/
addOffset: function (offset) {
this.offset = {
x: this.offset.x + offset.x,
y: this.offset.y + offset.y
};
},
sanitize: function () {
if (this.zoomFactor < this.options.zoomOutFactor) {
this.zoomOutAnimation();
} else if (this.isInsaneOffset(this.offset)) {
this.sanitizeOffsetAnimation();
}
},
/**
* Checks if the offset is ok with the current zoom factor
* @param offset
* @return {Boolean}
*/
isInsaneOffset: function (offset) {
var sanitizedOffset = this.sanitizeOffset(offset);
return sanitizedOffset.x !== offset.x ||
sanitizedOffset.y !== offset.y;
},
/**
* Creates an animation moving to a sane offset
*/
sanitizeOffsetAnimation: function () {
var targetOffset = this.sanitizeOffset(this.offset),
startOffset = {
x: this.offset.x,
y: this.offset.y
},
updateProgress = (function (progress) {
this.offset.x = startOffset.x + progress * (targetOffset.x - startOffset.x);
this.offset.y = startOffset.y + progress * (targetOffset.y - startOffset.y);
this.update();
}).bind(this);
this.animate(
this.options.animationDuration,
updateProgress,
this.swing
);
},
/**
* Zooms back to the original position,
* (no offset and zoom factor 1)
*/
zoomOutAnimation: function () {
if (this.zoomFactor === 1) {
return;
}
var startZoomFactor = this.zoomFactor,
zoomFactor = 1,
center = this.getCurrentZoomCenter(),
updateProgress = (function (progress) {
this.scaleTo(startZoomFactor + progress * (zoomFactor - startZoomFactor), center);
}).bind(this);
this.animate(
this.options.animationDuration,
updateProgress,
this.swing
);
},
/**
* Updates the container aspect ratio
*
* Any previous container height must be cleared before re-measuring the
* parent height, since it depends implicitly on the height of any of its children
*/
updateAspectRatio: function () {
//container高度设为null
this.unsetContainerY();
this.setContainerY(this.container.parentElement.offsetHeight);
},
/**
* Calculates the initial zoom factor (for the element to fit into the container)
* @return {number} the initial zoom factor
*/
getInitialZoomFactor: function () {
var xZoomFactor = this.container.offsetWidth / this.el.offsetWidth;
var yZoomFactor = this.container.offsetHeight / this.el.offsetHeight;
return Math.min(xZoomFactor, yZoomFactor);
},
/**
* Calculates the aspect ratio of the element
* @return the aspect ratio
*/
getAspectRatio: function () {
return this.el.offsetWidth / this.el.offsetHeight;
},
/**
* Calculates the virtual zoom center for the current offset and zoom factor
* (used for reverse zoom)
* @return {Object} the current zoom center
*/
getCurrentZoomCenter: function () {
var offsetLeft = this.offset.x - this.initialOffset.x;
var centerX = -1 * this.offset.x - offsetLeft / (1 / this.zoomFactor - 1);
var offsetTop = this.offset.y - this.initialOffset.y;
var centerY = -1 * this.offset.y - offsetTop / (1 / this.zoomFactor - 1);
return {
x: centerX,
y: centerY
};
},
/**
* Returns the touches of an event relative to the container offset
* @param event
* @return array touches
*/
getTouches: function (event) {
//一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。
// 当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
var rect = this.container.getBoundingClientRect();
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var posTop = rect.top + scrollTop;
var posLeft = rect.left + scrollLeft;
// event.touches:一个 TouchList，其会列出所有当前在与触摸表面接触的 Touch 对象，
// 不管触摸点是否已经改变或其目标元素是在处于 touchstart 阶段。
return Array.prototype.slice.call(event.touches).map(function (touch) {
// touch.pageX:触点相对于HTML文档左边沿的的X坐标
// touch.pageY:触点相对于HTML文档上边沿的的Y坐标.
return {
x: touch.pageX - posLeft,
y: touch.pageY - posTop,
};
});
},
/**
* Animation loop
* does not support simultaneous animations
* @param duration
* @param framefn
* @param timefn
* @param callback
*/
animate: function (duration, framefn, timefn, callback) {
var startTime = new Date().getTime(),
renderFrame = (function () {
if (!this.inAnimation) { return; }
var frameTime = new Date().getTime() - startTime,
progress = frameTime / duration;
if (frameTime >= duration) {
framefn(1);
if (callback) {
callback();
}
this.update();
this.stopAnimation();
this.update();
} else {
if (timefn) {
progress = timefn(progress);
}
framefn(progress);
this.update();
requestAnimationFrame(renderFrame);
}
}).bind(this);
this.inAnimation = true;
requestAnimationFrame(renderFrame);
},
/**
* Stops the animation
*/
stopAnimation: function () {
this.inAnimation = false;
},
/**
* Swing timing function for animations
* @param p
* @return {Number}
*/
swing: function (p) {
return -Math.cos(p * Math.PI) / 2 + 0.5;
},
getContainerX: function () {
return this.container.offsetWidth;
},
getContainerY: function () {
return this.container.offsetHeight;
},
setContainerY: function (y) {
return this.container.style.height = y + 'px';
},
unsetContainerY: function () {
this.container.style.height = null;
},
/**
* Creates the expected html structure
*/
setupMarkup: function () {
this.container = buildElement('<div class="pinch-zoom-container"></div>');
this.el.parentNode.insertBefore(this.container, this.el);
this.container.appendChild(this.el);
this.container.style.overflow = 'hidden';
this.container.style.position = 'relative';
this.el.style.webkitTransformOrigin = '0% 0%';
this.el.style.mozTransformOrigin = '0% 0%';
this.el.style.msTransformOrigin = '0% 0%';
this.el.style.oTransformOrigin = '0% 0%';
this.el.style.transformOrigin = '0% 0%';
this.el.style.position = 'absolute';
},
end: function () {
this.hasInteraction = false;
this.sanitize();
this.update();
},
/**
* Binds all required event listeners
*/
bindEvents: function () {
var self = this;
detectGestures(this.container, this);
window.addEventListener('resize', this.update.bind(this));
Array.from(this.el.querySelectorAll('img')).forEach(function(imgEl) {
imgEl.addEventListener('load', self.update.bind(self));
});
if (this.el.nodeName === 'IMG') {
this.el.addEventListener('load', this.update.bind(this));
}
},
/**
* Updates the css values according to the current zoom factor and offset
*/
update: function (event) {
if (this.updatePlaned) {
return;
}
this.updatePlaned = true;
window.setTimeout((function () {
this.updatePlaned = false;
if (event && event.type === 'resize') {
this.updateAspectRatio();
this.setupOffsets();
}
if (event && event.type === 'load') {
this.updateAspectRatio();
this.setupOffsets();
}
var zoomFactor = this.getInitialZoomFactor() * this.zoomFactor,
offsetX = -this.offset.x / zoomFactor,
offsetY = -this.offset.y / zoomFactor,
transform3d = 'scale3d(' + zoomFactor + ', ' + zoomFactor + ',1) ' +
'translate3d(' + offsetX + 'px,' + offsetY + 'px,0px)',
transform2d = 'scale(' + zoomFactor + ', ' + zoomFactor + ') ' +
'translate(' + offsetX + 'px,' + offsetY + 'px)',
removeClone = (function () {
if (this.clone) {
this.clone.parentNode.removeChild(this.clone);
delete this.clone;
}
}).bind(this);
// Scale 3d and translate3d are faster (at least on ios)
// but they also reduce the quality.
// PinchZoom uses the 3d transformations during interactions
// after interactions it falls back to 2d transformations
if (!this.options.use2d || this.hasInteraction || this.inAnimation) {
this.is3d = true;
removeClone();
this.el.style.webkitTransform = transform3d;
this.el.style.mozTransform = transform2d;
this.el.style.msTransform = transform2d;
this.el.style.oTransform = transform2d;
this.el.style.transform = transform3d;
} else {
// When changing from 3d to 2d transform webkit has some glitches.
// To avoid this, a copy of the 3d transformed element is displayed in the
// foreground while the element is converted from 3d to 2d transform
if (this.is3d) {
this.clone = this.el.cloneNode(true);
this.clone.style.pointerEvents = 'none';
this.container.appendChild(this.clone);
window.setTimeout(removeClone, 200);
}
this.el.style.webkitTransform = transform2d;
this.el.style.mozTransform = transform2d;
this.el.style.msTransform = transform2d;
this.el.style.oTransform = transform2d;
this.el.style.transform = transform2d;
this.is3d = false;
}
}).bind(this), 0);
},
/**
* Enables event handling for gestures
*/
enable: function() {
this.enabled = true;
},
/**
* Disables event handling for gestures
*/
disable: function() {
this.enabled = false;
}
};
var detectGestures = function (el, target) {
var interaction = null,
fingers = 0,
lastTouchStart = null,
startTouches = null,
setInteraction = function (newInteraction, event) {
if (interaction !== newInteraction) {
if (interaction && !newInteraction) {
switch (interaction) {
case "zoom":
target.handleZoomEnd(event);
break;
case 'drag':
target.handleDragEnd(event);
break;
}
}
switch (newInteraction) {
case 'zoom':
target.handleZoomStart(event);
break;
case 'drag':
target.handleDragStart(event);
break;
}
}
interaction = newInteraction;
},
updateInteraction = function (event) {
if (fingers === 2) {
setInteraction('zoom');
} else if (fingers === 1 && target.canDrag()) {
setInteraction('drag', event);
} else {
setInteraction(null, event);
}
},
targetTouches = function (touches) {
return Array.from(touches).map(function (touch) {
return {
x: touch.pageX,
y: touch.pageY
};
});
},
getDistance = function (a, b) {
var x, y;
x = a.x - b.x;
y = a.y - b.y;
return Math.sqrt(x * x + y * y);
},
calculateScale = function (startTouches, endTouches) {
var startDistance = getDistance(startTouches[0], startTouches[1]),
endDistance = getDistance(endTouches[0], endTouches[1]);
return endDistance / startDistance;
},
cancelEvent = function (event) {
event.stopPropagation();
event.preventDefault();
},
detectDoubleTap = function (event) {
var time = (new Date()).getTime();
if (fingers > 1) {
lastTouchStart = null;
}
if (time - lastTouchStart < 300) {
cancelEvent(event);
target.handleDoubleTap(event);
switch (interaction) {
case "zoom":
target.handleZoomEnd(event);
break;
case 'drag':
target.handleDragEnd(event);
break;
}
} else {
target.isDoubleTap = false;
}
if (fingers === 1) {
lastTouchStart = time;
}
},
firstMove = true;
el.addEventListener('touchstart', function (event) {
if(target.enabled) {
firstMove = true;
fingers = event.touches.length;
detectDoubleTap(event);
}
});
el.addEventListener('touchmove', function (event) {
if(target.enabled && !target.isDoubleTap) {
if (firstMove) {
updateInteraction(event);
if (interaction) {
cancelEvent(event);
}
startTouches = targetTouches(event.touches);
} else {
switch (interaction) {
case 'zoom':
if (startTouches.length == 2 && event.touches.length == 2) {
target.handleZoom(event, calculateScale(startTouches, targetTouches(event.touches)));
}
break;
case 'drag':
target.handleDrag(event);
break;
}
if (interaction) {
cancelEvent(event);
target.update();
}
}
firstMove = false;
}
});
el.addEventListener('touchend', function (event) {
if(target.enabled) {
fingers = event.touches.length;
updateInteraction(event);
}
});
};
return PinchZoom;
};
var PinchZoom = definePinchZoom();
export default PinchZoom;
- getTouches函数解读：(图画的比较糙，没空用Visio画，意会吧)
总结一下这个函数：其实就是最终得到的x,y都是触摸点相对于container的x,y偏移量
polyfill
references:
polyfill是什么:
Polyfill是一个js库，主要抚平不同浏览器之间对js实现的差异。可以参考https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
@babel/polyfill
https://www.babeljs.cn/docs/babel-polyfill
babel-polyfill 主要有两个缺点：
- 使用
babel-polyfill会导致打出来的包非常大，因为babel-polyfill是一个整体，把所有方法都加到原型链上。比如我们只使用了Array.from，但它把Object.defineProperty也给加上了，这就是一种浪费了。这个问题可以通过单独使用core-js的某个类库来解决，core-js都是分开的。 babel-polyfill会污染全局变量，给很多类的原型链上都作了修改，如果我们开发的也是一个类库供其他开发者使用，这种情况就会变得非常不可控。
因此在实际使用中，如果我们无法忍受这两个缺点(尤其是第二个)，通常我们会倾向于使用 babel-plugin-transform-runtime。
但如果代码中包含高版本 js 中类型的实例方法 (例如 [1,2,3].includes(1))，这还是要使用 polyfill。
使用babel/polyfill
关于@babel/polyfill – 按需加载:可以稍微规避缺点1
.sh文件
.sh一般就是bash脚本,类似于windows下的命令行shell脚本
Shell脚本（一）---------------Bash简述与基本功能
关于docker
是什么？
Docker 是一个开源的应用容器引擎，基于 Go 语言 并遵从Apache2.0协议开源。
做什么？
Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。
应用场景
- Web 应用的自动化打包和发布。
- 自动化测试和持续集成、发布。
- 在服务型环境中部署和调整数据库或其他的后台应用。
- 从头编译或者扩展现有的 OpenShift 或 Cloud Foundry 平台来搭建自己的 PaaS 环境。
优点
- 1、简化程序：
Docker 让开发者可以打包他们的应用以及依赖包到一个可移植的容器中，然后发布到任何流行的 Linux 机器上，便可以实现虚拟化。Docker改变了虚拟化的方式，使开发者可以直接将自己的成果放入Docker中进行管理。方便快捷已经是 Docker的最大优势，过去需要用数天乃至数周的 任务，在Docker容器的处理下，只需要数秒就能完成。 - 2、避免选择恐惧症：
如果你有选择恐惧症，还是资深患者。那么你可以使用 Docker 打包你的纠结！比如 Docker 镜像；Docker 镜像中包含了运行环境和配置，所以 Docker 可以简化部署多种应用实例工作。比如 Web 应用、后台应用、数据库应用、大数据应用比如 Hadoop 集群、消息队列等等都可以打包成一个镜像部署。 - 3、节省开支：
一方面，云计算时代到来，使开发者不必为了追求效果而配置高额的硬件，Docker 改变了高性能必然高价格的思维定势。Docker 与云的结合，让云空间得到更充分的利用。不仅解决了硬件管理的问题，也改变了虚拟化的方式。
IaaS，PaaS，SaaS 的区别
- IaaS：基础设施服务，Infrastructure-as-a-service
- PaaS：平台服务，Platform-as-a-service
- SaaS：软件服务，Software-as-a-service
一些形象的类比详情看：http://www.ruanyifeng.com/blog/2017/07/iaas-paas-saas.html
TIPS
解决chrome浏览器访问本地json报跨域问题
原因
References:https://www.cnblogs.com/jianxian/p/9069340.html
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
跨源请求仅支持协议方案：http, data, chrome, chrome-extension, https.
说白了就是，由于安全原因浏览器不允许跨域访问，安全机制认为加载本地其他文件是跨域行为。谷歌浏览器会跨域失败，是因为浏览器安全机制不允许，而火狐为了方便允许跨域(虽然这样很不安全)。而且在其他浏览器中，出现跨域问题也是这个原因，就是浏览器安全机制的原因。
解决方法：
1、前端人员使用的一般是JSONP进行跨域。
2、项目中使用nginx反向代理。
3、修改谷歌浏览器的配置。(会导致自己原先的Google插件全没了恢复默认，不建议)
4、在webstrom中打开。
3不推荐，4时webtorm内置本地服务器，会自动为你的文件开一个端口服务。
jsonp跨域
下面介绍3，正好复习一下JSONP跨域：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSON文件的调用</title>
</head>
<body>
<script type="text/javascript" src="BW-JSON.js"></script>
<!--jsonp中 需要注意的是
<script src="car.json?callback=train"></script>
src ? 之前为文件地址，? 之后为回调函数callback名称，
回调函数可以简写为 cb,回调函数名要和JSON文件中的名称一致
-->
<script src="train.json?cb=car"></script>
</body>
</html>
// BW-JSON.js
function car (result){
console.log(result)
}
// train.json
car({
"status": "success",
"trainSystem": [
{
"key": "BX7",
"name": "BX7",
"img": ""
},
{
"key": "BX5",
"name": "BX5",
"img": ""
},
{
"key": "BX6",
"name": "BX6",
"img": ""
}
]
})
请求成功结果：不过又要给json起名字，还是用4最方便
正确使用github上的demo
- 首先看有没有package.json，然后先npm install 安装依赖，查看 scripts里面的脚本命令知识，跑好了则直接Google运行想看的html文件就OK了。
- 没有package.json，说明不是node项目，也就没有模块概念，也就没有描述文件:package.json
Lottie学习
[已更新一篇新博客来讲这部分内容]
CSS代码规范
https://github.com/doyoe/html-css-guide#order
属性书写顺序：
- 定位：
- layout z-index display
- flex layout
- 尺寸盒模型：
- Box
- 浮动
- 文本排印和可视化
1518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
