获取和设置大小（下）

来源：互联网发布：淘宝短视频服务商编辑：程序博客网时间：2024/05/29 01:56

我们已经拥有了获取和设置大小的通用方法了，接下来，我们还想提供一项服务，即绑定大小。先以宽度来说吧，如果我们需要把宽度，和窗口的宽度或另一 DOM 元素的宽度进行绑定，我们需要一个函数，允许传入这两个元素，外加一个可选的计算函数，方便自定义控制，然后这个我们即将实现的函数，还需要返回一个对象，里面包含 dispose 方法，用于随时解除这个绑定关系。那么，这个函数可能长成下面这个样子。

function adaptWidth(element, target, compute) {     // ToDo: Implement it. 下一行即将被删除并被重写。    return null;}

现在我们开始实现之。先做个参数为空的校验吧！

if (!element || !target) return {    dispose: function () { }};

接下来，我们需要实现一个匿名函数，用于设置宽度。

检查 target 是 window 对象还是 body 内的某一 DOM 对象。
获取 target 当下的宽度。
如果 compute 函数存在的话，使用它进行数值转化。
对 element 设置宽度。

代码如下。

var setWidth = function () {    var width = target.parent ? (window.innerWidth ? window.innerWidth : document.body.clientWidth) : target.offsetWidth;    if (!!compute) width = compute(width);    setSize(element, width, null);};

然后我们立即调用这个匿名函数。

setWidth();

然而，这只是在调用我们写的这个函数时才会执行一次，对于在此之后的页面变化，并不会重新触发。因此，我们还需要针对这种情况，进行后续跟进，即，当 target 的尺寸发生变化时，我们也需要重新调用这个匿名函数，故需要增加一个事件。

target.addEventListener("resize", setWidth, false);

并返回接触绑定的令牌对象。

return {    dispose: function () {        target.removeEventListener("resize", setWidth, false);    }};

同理，绑定高度也是如此。

function adaptHeight(element, target, compute) {     // 参数为空检查。    if (!element || !target) return {        dispose: function () { }    };     // 高度设定的匿名函数。    var setHeight = function () {        var height = target.parent ? (window.innerHeight ? window.innerHeight : document.body.clientHeight) : target.offsetHeight;        if (!!compute) height = compute(height);        setSize(element, null, height);    };     // 调用高度设定。    setHeight();     // 添加一个事件，用于监听变动，并重新设定高度。    target.addEventListener("resize", setHeight, false);     // 返回一个能够取消绑定的对象。    return {        dispose: function () {            target.removeEventListener("resize", setHeight, false);        }    };}

啊哈，一切搞定了！

【完】

文章类型及复杂度：Web 前端开发进阶。

节选翻译自 MSDN 博文 Get and set DOM size，内容有所调整。

http://blogs.msdn.com/b/kingcean/archive/2016/04/14/dom-size.aspx

0 0