我的函数 Slider 采用一个窗口对象，但它不包含主体。我的代码仅适用于移动屏幕 View 。 在我的函数中，在调试下面的代码时，
console.log(windows.document);
if (!mySlider) {console.log(windows.document.body);}
第一个控制台日志显示正文包含信息；然而，第二个表明 body 是空的。 我猜这是相关的
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
/*
* Created by Waltor on 20181018.
*/
var Slider = (function(windows) {
var mySlider;
var point = {
start: 0,
end: 0
};
function Slider(targetId, widthOfDisplayBlock, ImageSize, imageSrcArrays) {
mySlider = document.getElementById(targetId);
console.log(windows.document);
if (!mySlider) {
console.log(windows.document.body);
console.log("mySlider >> " + mySlider);
return;
}
createContainer(widthOfDisplayBlock, imageSrcArrays, ImageSize);
createPhoneEvents(ontouchmove_, ontouchstart_);
}
function createContainer(widthOfDisplayBlock, imageSrcArrays, ImageSize) {
var result = mySlider;
var ImageSizeNumber = ImageSize.match(/\d/g).join("");
var div = document.createElement("div");
var dash = document.createElement("div");
var dashWidth;
var preSpace;
result.style.overflow = "hidden";
result.style.width = widthOfDisplayBlock;
dashWidth = ((result.offsetWidth) - (ImageSizeNumber * 2)) / 2;
ImageSize = ImageSize ? ImageSize : "100px";
div.style = "width:" + ((imageSrcArrays.length + 1) * (ImageSizeNumber * 1 + dashWidth)) + "px;";
dash.style = "float:left;position:relative;width:" + (ImageSizeNumber / 2) + "px;height:10px;top:" + (ImageSizeNumber / 2) + "px;";
div.appendChild(dash);
preSpace = dash.cloneNode(true);
preSpace.style.width = dashWidth + "px";
preSpace.style.background = "#ccc";
div.appendChild(preSpace);
for (var i = 0; i < imageSrcArrays.length; i++) {
var img = document.createElement("img");
img.src = imageSrcArrays[i];
img.style = "float:left;width:" + ImageSize + ";height:" + ImageSize + ";";
div.appendChild(img);
div.appendChild(preSpace.cloneNode(true));
}
div.appendChild(dash.cloneNode(true));
result.appendChild(div);
return result;
}
function createPhoneEvents(ontouchmove, ontouchstart) {
var result = mySlider;
result.ontouchmove = ontouchmove;
result.ontouchstart = ontouchstart;
result.ontouchend = touchend;
}
function touchend() {
point.start = 0;
point.end = 0;
console.log('clear!');
}
var count = 0;
function ontouchmove_(event) {
return touchmove(event, caculation);
function caculation(start, end) {
if (start && end) return end - start;
return 0;
}
function touchmove(event, caculation) {
console.log(count + " > " + event.touches[0].clientX);
count++;
var move = 0;
var result = mySlider;
var limit = {
left: result.offsetLeft,
right: result.offsetLeft + result.offsetWidth
};
point.end = event.touches[0].clientX;
if (point && (point.end > limit.left) && (point.end < limit.right)) move = caculation(point.start, point.end);
mySlider.scrollLeft -= move * 2;
point.start = point.end;
document.getElementById("test").innerHTML =
"point.start >> " + point.start +
"<br/>point.end >> " + point.end +
"<br/>move >> " + move;
}
}
function ontouchstart_(event) {
}
return Slider;
})(window);
var src = [
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg",
"http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg"
];
function loading() {
console.log(this);
Slider("targetId", "60vw", "150px", src);
}
</script>
<script>
window.addEventListener('load', loading);
window.addEventListener('load', Slider("targetId", "60vw", "150px", src));
</script>
</head>
<body>
<hr/>
<div id="targetId" style="margin:0 auto;"></div>
<hr/>
<div id="test" style="font-szie:30px;"></div>
</body>
</html>了解 javascript 如何加载信息。 谁能帮助我理解我的代码中发生了什么 以及如何传递窗口对象？
最佳答案
首先，window对象是全局的。只要您在浏览器中运行此代码，代码中的任何函数都可以访问它。
接下来，您的错误是您调用代码的地方: 你有
<script>
window.addEventListener('load', loading);
window.addEventListener('load', Slider("targetId", "60vw", "150px", src));
</script>
什么时候应该是:
<script>
window.addEventListener('load', loading);
window.addEventListener('load', function() {
Slider("targetId", "60vw", "150px", src);
})
</script>
这是因为你的“函数” slider 实际上是一个通过闭包的构造函数。 在顶部有 var Slider = (function () { ... })(window) 所以 Slider 会自动被调用。调用它后，它实际上返回一个您在闭包内部定义的名为 Slider 的函数。 该函数返回 null 或未定义。因此，当您添加事件监听器时，您不是给它一个在窗口完成加载时调用的函数，而是给它一个值。
关于javascript 如何将窗口对象传递给函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52885554/