JavaScript 读代码系列-readmore.js

readmore.js 读码

readmore.js 介绍

主要应用于有大段内容, 太占篇幅, 设置按钮折叠或展开显示

主要思路-个人理解

先获取折叠前和折叠后两种高度并保存(用克隆的方式)

根据配置以及内容高度(考虑不需要折叠的情况)设置新的高度

保留当前状态(是否折叠等)

入口

流程

1. 载入

1.1 主要完成功能:

建立实例

初步配置选项(字符串 or 对象)

$.data()装载数据.

重要细节: 设置selector, 即: options.selector

selector=this.selector;options.selector=selector;

其中 this 可以先理解为一个 jquery 对象

1.2 跳转下一块

1.3 全代码展示

2. Readmore

2.1主要完成功能

将用户自定义的选项与默认选项合并

装载 css 样式 embedCSS (详见3)

初始化readmore

装载事件监听

2.2 全代码展示

3. embedCSS

待查问题详见附录2.1

知识点 详见附录1.1

完整代码4. init

主要完成功能

获取到展开前和展开后的高度

获取默认展开或是折叠

在文章的后添加超链接

添加超链接的点击事件监听

5. setBoxHeights

主要完成功能

将原来的 jquery 对象克隆, 并将高度设为自动(即不折叠)

将克隆后的对象追加到原对象后

删除原对象

保留折叠后的高度, 折叠前的高度, 最大高度

将 css 样式中设置的'最大高度'清空

复杂代码

运行了一下返回的结果是NaN, 进一步运行发现的结果是none 将换成运行结果是50

6. toggle

调用用例

附录

1. 知识点

1.1 #test[data-readmore]

选择器, id为test且含有data-readmore属性的

2. 待查

2.1 dom.stylesheet

用例: