DOM-11【自动阅读插件开发】

最新推荐文章于 2023-07-11 11:18:25 发布

小管打天下

最新推荐文章于 2023-07-11 11:18:25 发布

阅读量218

点赞数

分类专栏： # DOM 文章标签： dom

本文链接：https://blog.csdn.net/qq_42647547/article/details/117395039

版权

DOM 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

本文介绍了前端开发中的HTML和CSS规范，如结构化命名、级联样式使用及互联网标准黑色。讨论了两栏布局的两种实现方式，重点讲解了如何避免样式冲突和元素塌陷。在JavaScript部分，探讨了插件设计模式、事件处理函数中的this指向问题，以及为何需要实时获取滚动距离等信息。此外，还提供了兼容性良好的事件绑定、滚动距离获取和窗口尺寸获取的代码示例。

摘要由CSDN通过智能技术生成

一、HTML、CSS部分

（1）标签命名

不能直接写用一个单词名称，而是有结构化的命名
（比如：list-hd，就指list的header）

（2）标签样式初始化

文件命名：
reset.css
common.css
normalize.css

（3）写级联样式的目的

为了更好的维护css样式代码，才会写级联样式

（4）a标签和li标签

如果a在列表li里边，最好占满整个li

（5）两栏布局

在这里插入图片描述

方案一：float
如果浮动的盒子宽度大于了视口宽度，就会被挤下去，所以这种方法并不好

方案二：
在这里插入图片描述
li里面两个盒子，盒子1定位absolute，盒子2宽度100%，然后给盒子2margin-left盒子1的宽度距离，这种才是企业级写法

（6）互联网标准黑色

#424242

（7）显示省略号

三大件：

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

（8）塌陷解决方法

1.border-top
2.触发bfc：absolute、overflow-hidden

二、JS部分

（1）插件标配

立即执行构造函数原型
在这里插入图片描述
插件所有方法都写在原型上面

（2）熟练掌握封装的兼容方法

// 添加事件处理函数兼容写法
function addEvent(el, type, fn) {
    if (el.addEventListener) {
        el.addEventListener(type, fn, false)
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, function () {
            fn.call(el);
        })
    } else {
        el['on' + type] = fn;
    }
}

// 获取滚动条距离
function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
    } else {
        return {
            left: document.body.scrollLeft + document.documentElement.scrollLeft,
            top: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

// 获取窗口宽高
function getViewportSize() {
    if (window.innerWidth) {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    } else {
        if (document.compatMode === 'BackCompat') {
            return {
                width: document.body.clientWidth,
                height: document.body.clientHeight
            }
        }
        else {
            return {
                width: document.documentElement.clientWidth,
                height: document.documentElement.clientHeight
            }
        }
    }
}

// 获取文档宽高
function getScrollSize() {
    if (document.body.scrollWidth) {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        }
    } else {
        return {
            width: document.documentElement.scrollWidth,
            height: document.documentElement.scrollHeight
        }
    }
}

（3）this指向

new执行this指向实例对象

var AutoReader = function (opt) {    
    var _self = this; // 指向实例对象
}

谁调用指向谁

var AutoReader = function (opt) {
    addEvent(window, 'scroll', function () {
        _self.sTopBtnShow()  // 指向_self
    })
}

AutoReader.prototype = {
    sTopBtnShow: function () {
        var sTop = getScrollOffset().top,
            sTopBtn = this.sTopBtn;
            
        sTopBtn.style.display = sTop ? 'block' : 'none';
    }
}

事件处理函数this指向绑定对象

var AutoReader = function (opt) {
    addEvent(this.playBtn, 'click', function () {
        console.log(this)  // this.playBtn  
        _self.setAutoPlay.call(this)  // this指向this.playBtn 
    })
}