高效书页滚动切换 “图形”

1 描述

在项目中，需要把很多的图，像Word一样支持一页一页滚动显示，并且页数很多。而显示图的组件相对比较重，不利于一页一个组件，否则将加载缓慢，甚至因内存消耗巨大而崩溃。

2 思路

只需使用三到四个图形组件，可以理解为一个组件池，池中没有资源时创建。图形滚动消失时，图形组件归还给组件池，留给下次使用。每次从组件池获取未使用的组件，然后移动显示在指定位置。

3 代码实现片段

处理哪个区域需要显示和隐藏。

 scrollHeight: function (height) {
            var self = this;
            var pageContainer = $(".contentDiv", this.container);
            var windowHeight = pageContainer.height();
            var windowStart = height;
            var middle = windowStart + windowHeight / 2;
            var windowEnd = windowStart + windowHeight;

            var sumHeight = 0;
            var menuItems = this.findMenuItems();
            for (var i = 0; i < menuItems.length; i++) {
                var menu = menuItems[i];
                var elementHeight = menu.height;
                var elementEnd = sumHeight + elementHeight;

                //终止线低于窗口开始线, 起始线大于窗口
                if ((elementEnd < windowStart) || (sumHeight > windowEnd)) {
                    if (menu.enterShow) {
                        menu.enterShow = false;
                        self.removePageView(menu);
                    }

                } else {
                    if (!menu.enterShow) {
                        menu.enterShow = true;
                        self.showGraphEditor(menu, height);
                    }
                }

                //中间线在本菜单范围中
                if (middle >= sumHeight && middle <= elementEnd) {
                    self.refreshTitle(menu);
                }

                sumHeight = elementEnd;
                sumHeight += 20;
            }
        },

把图形组件重新移动到项目位置。 css 布局使用 float

 showPosition: function () {
            var self = this;
            if (!this.viewList) {
                return;
            }

            var pageContainer = $(".contentDiv", this.container);
            var pre = null;
            for (var i = 0; i < this.viewList.length; i++) {
                var view = this.viewList[i];
                if (!view.show) {
                    continue;
                }

                var height = this.getMenuHeight(view.menu);
                if (!pre) {
                    var $page = $("#" + view.menu.gid, pageContainer);
                    view.graphEditor.container.css({
                        float: "left",
                        "margin-top": height,
                        width: this.pageWidth
                    });
                } else {
                    var $prePage = $("#" + pre.menu.gid, pageContainer);
                    height = height - pre.top - pre.menu.height;
                    view.graphEditor.container.css({
                        float: "left",
                        "margin-top": height,
                        width: this.pageWidth
                    });
                }
                pre = view;
                view.top = height;
            }
        },