Используйте Class для написания js-плагина, который запоминает, куда уходит пользователь

предисловие

Обычные плагины js редко используют ES6class, обычно через конструктор, а часто вручнуюCMD,AMDспецификация для инкапсуляции библиотеки, например:

// 引用自：https://www.jianshu.com/p/e65c246beac1
;(function(undefined) {
    "use strict"
    var _global;
    var plugin = {
      // ...
    }
    _global = (function(){ return this || (0, eval)('this'); }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = plugin;
    } else if (typeof define === "function" && define.amd) {
        define(function(){return plugin;});
    } else {
        !('plugin' in _global) && (_global.plugin = plugin);
    }
}());

Но сейчас 9102 года, пора пожертвовать нашим Дафа ES6, можно использовать более элегантный способ написания для реализации библиотеки, например такой:

class RememberScroll {
    constructor(options) {
        ...
    }
}
export default RememberScroll

В этой статье блогер в основном делится недавней статьей, написанной им самим.Запомнить позицию прокрутки страницыНебольшой плагин, подскажите как им пользоватьсяclassсинтаксическая координацияwebpack 4.xа такжеbabel 7.xОбертывает полезную библиотеку.

адрес проекта:Github, Онлайн-демонстрация:Demo

Как друзья надеюсь заказатьStarСохраните, большое спасибо.

источник спроса

Думаю, что многие студенты столкнутся с такой необходимостью:После того, как пользователь просматривает страницу и покидает ее, ее необходимо переместить на последнюю левую позицию, когда она будет открыта снова..

Это требование очень распространено, обычно у нас есть эта функция на странице статьи публичного аккаунта WeChat на нашем мобильном телефоне. Если вы хотите выполнить это требование, добиться этого проще, но блогер немного ленив, и мне интересно, есть ли готовые библиотеки, которые можно использовать напрямую? Итак, я отправился на GitHub, чтобы найти волну, и обнаружил, что нет хорошей волны, отвечающей моим потребностям, поэтому я должен реализовать ее сам.

Для гибкости использования (эта функция нужна только некоторым страницам) блогер инкапсулировал эту библиотеку отдельно в проекте, она изначально использовалась в проекте компании, а потом почему бы не выложить исходники? Так что с этим обменом, это также резюме моей собственной работы.

ожидаемый результат

Блогеры любят смотреть на ожидаемый эффект, прежде чем что-то делать. Блогер надеется, что эта библиотека максимально проста в использовании, лучше всего вставить строку кода, например такую:

<html>
<head>
  <meta charset="utf-8">
  <title>remember-scroll examples</title>
</head>
<body>
  <div id="content"></div>
  <script src="../dist/remember-scroll.js"></script>
  <script>
    new RememberScroll()
  </script>
</body>
</html>

Представьте библиотеку на странице, где вы хотите добавить запоминание местоположения просмотра пользователя, а затемnew RememberScroll()Просто инициализируйте его.

Вот пошаговое руководство для достижения этой цели.

Дизайн

1. Какая хранятся информация?

Место, где пользователь просматривает страницу, в основном должно хранить два поля:哪个页面а также离开时的位置, через эти два поля мы можем перейти на страницу, когда пользователь открывает страницу веб-сайта во второй раз, и автоматически перейти на позицию, оставленную в прошлый раз.

2. Где он существует?

Чтобы запомнить место просмотра, необходимо записать место просмотра до того, как пользователь покинет браузер клиента. Эта информация может храниться в основном в:cookie,sessionStorage,localStorageсередина.

вставитьcookie, размер 4К, места мало, но еле хватает. Однако файлы cookie передаются каждый раз, когда запрашивается сервер, что незаметно увеличивает пропускную способность и нагрузку на сервер, поэтому, как правило, это не подходит.
вставитьsessionStorage, пользователь покидает страницу, потому что она действительна только для текущего сеанса.sessionStorageбудет очищен, поэтому он не может удовлетворить наши потребности.
вставитьlocalStorage, Браузер может сохранить его навсегда, а размер обычно ограничен 5 МБ для удовлетворения наших потребностей.

В заключение, мы должны окончательно выбратьlocalStorage.

3. Вопросы, о которых следует знать

На сайте может быть много страниц,Как определить, какая это страница?

Вообще говоря, вы можете использовать URL-адрес страницы в качестве уникального идентификатора страницы, например:www.xx.com/article/${id}, Разные идентификаторы соответствуют разным страницам.

Но блоггеры принимают во внимание, что многие сайты теперь используют спа, и обычно за ним стоит URL.#xxxхэш-значение, напримерwww.xx.com/article/${id}#tag1а такжеwww.xx.com/article/${id}#tag2В этом случае это могут быть разные анкоры одной и той же страницы, поэтому использование URL-адреса в качестве уникального идентификатора страницы не очень надежно.

Поэтому блогер решил поставить этотуникальный идентификатор страницыВ качестве параметра, чтобы пользователь мог решить, давайте назовем егоpageKey, чтобы пользователи могли гарантировать его уникальность на всем сайте.

Если пользователи посещают много-много страниц нашего сайта из-заlocalStorageсохраняется навсегда,Как предотвратить накопление localStorage и занимать слишком много места?

Наши потребности могут заключаться в том, чтобы помнить только в ближайшем будущем, то есть нам нужно помнить только о местоположении пользователя в течение нескольких дней, и мы можем предпочесть, чтобы срок хранения данных, которые мы храним, истекал автоматически.

ноlocalStorageСам автоматический механизм срока действия не существует. Как правило, вы можете хранить только метку времени, когда данные хранятся, а затем судите, истекает ли он при использовании его. Если он может быть определен только тогда, когда он используется, и новая запись будет сгенерирована, когда доступна новая страница,localStorageВ нем всегда будет хотя бы одна запись, а значит, нельзя добиться автоматического истечения срока действия. Я не могу не чувствовать себя здесь немного лишним, так как они всегда будут вести записи вlocalStorage, то просто не судим, давайте сменим образ мышления:Записывается только ограниченное количество новейших страниц.

Например:

На нашем сайте есть страница статьи:www.xx.com/articles/${id}, каждый изidПредставляя разные статьи, мы записываем только 5 статей, к которым пользователь обращался последним, то есть поддерживаем очередь длиной 5.

Например, текущий веб-сайт имеет идентификатор от1прибыть100статьи, пользователи посещают1,2,3,4,5Когда пользователь открывает шестую статью, шестая запись ставится в очередь, а первая удаляется из очереди.localStorageзаписано в2,3,4,5,6Расположение этих статей, что гарантируетlocalStorageСохраненные данные никогда не накапливаются, а старые записи автоматически «устаревают» при доступе к новым страницам.

Чтобы быть более гибким, блогер решил добавитьmaxLengthпараметр, указывающий максимальное количество последних страниц, записанных под текущим сайтом, по умолчанию установлено значение5, если маленькому партнеру нужно записать больше страниц, это можно настроить через этот параметр.

4. Идеи реализации

Нам нужно постоянно отслеживать положение полосы прокрутки, когда пользователь просматривает страницу.window.onscrollсобытие, чтобы получить текущую позицию полосы прокрутки:scrollTop.
БудуscrollTopи уникальный идентификатор страницыpageKeyсохранить вlocalStorageсередина.
Когда пользователь повторно открывает страницу, которую он посетил ранее, когда страница инициализируется, прочитайтеlocalStorageДанные в , определяют страницуpageKeyНезависимо от того, соответствует ли это, если это соответствует, положение полосы прокрутки страницы будет автоматически прокручиваться до соответствующегоscrollTopстоимость.

Разве это не просто? Однако в процессе реализации нужно обращать внимание на такие детали, как выполнение антивибрационной обработки.

Этапы реализации

После стольких принуждений пришло время начать программировать.

1. Пакет`localStorage`инструментальный метод

Если рабочий хочет хорошо работать, он должен сначала заточить свои инструменты. Чтобы лучше обслуживать следующую работу, давайте просто инкапсулируем вызовlocalStorageнесколько способов, в основномget,set,remove:

// storage.js
const Storage = {
  isSupport () {
    if (window.localStorage) {
      return true
    } else {
      console.error('Your browser cannot support localStorage!')
      return false
    }
  },
  get (key) {
    if (!this.isSupport) {
      return
    }
    const data = window.localStorage.getItem(key)
    return data ? JSON.parse(data) : undefined
  },
  remove (key) {
    if (!this.isSupport) {
      return
    }
    window.localStorage.removeItem(key)
  },
  set (key, data) {
    if (!this.isSupport) {
      return
    }
    const newData = JSON.stringify(data)
    window.localStorage.setItem(key, newData)
  }
}

export default Storage

2. класс Дафа

classто есть класс, хотя по существуfunction, но используяclassБыло бы более интуитивно определить класс. Давайте назовем библиотеку, которую мы собираемся написать, какRememberScroll, начинается так:

import Storage from './storage'
class RememberScroll {
    constructor() {
        
    }
}

1. Обработать входящие параметры

Нам нужно в конструкторе классаconstructorПолучите параметры и переопределите параметры по умолчанию.

Помните наше предполагаемое использование выше? которыйnew RememberScroll({pageKey: 'myPage', maxLength: 10}).

  constructor (options) {
    let defaultOptions = {
      pageKey: '_page1', // 当前页面的唯一标识
      maxLength: 5
    }
    this.options = Object.assign({}, defaultOptions, options)
}

Если параметры не переданы, будут использоваться параметры по умолчанию, а если параметры переданы, будут использоваться переданные параметры.this.optionsЭто последний обрабатываемый параметр.

2. Инициализация страницы

Когда страница инициализирована, нам нужно сделать три вещи:

отloaclStorageПолучить список кеша
Прокрутите полосу прокрутки до записанной позиции (если она есть);
регистрwindow.onscrollСобытия отслеживают поведение пользователя при прокрутке; Поэтому его нужно выполнить в конструктореinitScrollа такжеaddScrollEventЭти два метода:

import Storage from './utils/storage'
class RememberScroll {
  constructor (options) {
    // ...
    this.storageKey = '_rememberScroll'
    this.list = Storage.get(this.storageKey) || []
    this.initScroll()
    this.addScrollEvent()
  }
  initScroll () {
    // ...
  }
  addScrollEvent () {
    // ...
  }
}

Здесь мы будемlocalStorageКлючи в названы как_rememberScroll, он должен максимально избегать конфликта имени ключа с обычным сайтом, использующим localStorage.

3. Прослушивание событий прокрутки: реализация addScrollEvent()

  addScrollEvent () {
    window.onscroll = () => {
      // 获取最新的位置，只记录垂直方向的位置
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 构造当前页面的数据对象
      const data = {
        pageKey: this.options.pageKey,
        y: scrollTop
      }
      let index = this.list.findIndex(item => item.pageKey === data.pageKey)
      if (index >= 0) {
        // 之前缓存过该页面，则替换掉之前的记录
        this.list.splice(index, 1, data)
      } else {
        // 如果已经超出长度了，则清除一条最早的记录
        if (this.list.length >= this.options.maxLength) {
          this.list.shift()
        }
        this.list.push(data)
      }
      // 更新localStorage里面的记录
      Storage.set(this.storageKey, this.list)
    }
  }

ps: здесь лучше всего сделать анти-шейк-обработку

4. Инициализировать положение полосы прокрутки: реализация initScroll()

initScroll () {
    // 先判断是否有记录
    if (this.list.length) {
      // 当前页面pageKey是否一致
      let currentPage = this.list.find(item => item.pageKey === this.options.pageKey)
      if (currentPage) {
        setTimeout(() => {
          // 一致，则滚动到对应的y值
          window.scrollTo(0, currentPage.y)
        }, 0)
    }
}

Внимательные студенты могут обнаружить, что здесь используется setTimeout вместо прямого вызова.window.scrollTo. Это связано с тем, что здесь блогер столкнулся с ямой, связанной с вопросом порядка выполнения загрузки страницы.

в исполненииwindow.scrollToРаньше страница должна была быть загружена, а полоса прокрутки должна существовать перед прокруткой, верно? Если он выполняется непосредственно при загрузке страницы, высота прокрутки в это время может быть равна 0,window.scrollToвыполнение будет недействительным. Если данные страницы извлекаются асинхронно, это также вызоветwindow.scrollToневерный. Поэтому используйтеsetTimeoutбудет более устойчивый подход.

5. Экспортируйте модуль

Наконец, нам нужно экспортировать модуль, общий код выглядит так:

import Storage from './utils/storage'

class RememberScroll {
  constructor (options) {
    let defaultOptions = {
      pageKey: '_page1', // 当前页面的唯一标识
      maxLength: 5
    }
    this.storageKey = '_rememberScroll'
    // 参数
    this.options = Object.assign({}, defaultOptions, options)

    // 缓存列表
    this.list = Storage.get(this.storageKey) || []
    this.initScroll()
    this.addScrollEvent()
  }
  initScroll () {
    // ...
  }
  addScrollEvent () {
    // ...
  }
}

export default RememberScroll

Это в основном завершает функцию всего плагина, не правда ли, это очень просто, ха-ха. Я не буду публиковать конкретный код из-за недостатка места, вы можете перейти непосредственно на GitHub, чтобы увидеть:remember-scroll

Пакет

Следующий шаг должен быть в центре внимания этой статьи.Прежде всего, необходимо понять, зачем нужна упаковка?

Объедините файлы js, используемые в проекте, и выведите наружу только один файл js.
Сделать так, чтобы проекты поддерживали обаAMD,CMD, браузер<script>Введение этикетки, т.е.umdТехнические характеристики.
Сотрудничайте с babel, преобразуйте синтаксис es6 в синтаксис es5, совместимый с браузерами более ранних версий.

PS: из-за высокой скорости обновления webpack и babel многие онлайн-учебники могут быть устаревшими. Текущая (2019-03) версия — babel 7.3.0 и webpack 4.29.6. В этой статье представлены только последние методы настройки. Поэтому эта статья также будет устаревшей, читатели, пожалуйста, обратите внимание на номер версии.

проект инициализации npm

Давайте сначала создадим новый каталог, названный здесь:remember-scroll, а затем написать вышеremember-scroll.jsвставитьremember-scroll/src/Под содержанием.

PS: Ресурсные файлы общих проектов размещаются в каталоге src.Чтобы выглядеть профессионально, лучше поставитьremember-scroll.jsпереименовать вindex.js. )

проекта еще нетpackage.jsonфайл, поэтому выполните команду в корневом каталоге, чтобы инициализировать package.json:

npm init

Вам необходимо заполнить некоторую информацию, связанную с проектом, в соответствии с подсказками.

Установите веб-пакет и веб-пакет-кли

При запуске команды webpack вам необходимо установить ее одновременноwebpack-cli:

npm i webpack webpack-cli -D

настроить webpack.config.js

добавить один в корневой каталогwebpack.config.js,согласно софициальный сайт вебпакаПример кода для настройки:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'remember-scroll.js' // 修改下输出的名称
  }
};

затем вpackage.jsonСкрипт настроен на запускwebpackКоманда:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode=development --colors"
  },

Эта конфигурация завершена, запустите в корневом каталогеnpm run dev, который автоматически генерируетсяdist/remember-scroll.js.

На данный момент наша первая маленькая цель достигнута: сделать 100 миллионов, о нет, это будетstorage.jsа такжеindex.jsОбъединить вывод в одинremember-scroll.js.

Эту простую упаковку можно назвать так:非模块化打包. Так как мы не прошли в файле jsAMDвернуться илиCommonJSЭкспорт или это экспортирует сам модуль, так что при импорте модуля может быть выполнен только код, и модуль не может быть назначен другим модулям после его импорта.

Поддержка спецификации umd

Я думаю, что многие студенты слышалиAMD,CommonJSОн стандартизирован, учащиеся, которые не уверены, могут посмотреть введение учителя Руан Ифэн:Модульное программирование Javascript (2): спецификация AMD.

Для того, чтобы наш плагин поддерживал обаAMD,CommonJS, поэтому нам нужно упаковать наш плагин какumdОбщий модуль.

Я читал статью раньше:Как определить качественный нативный JS-плагин, если он не упакован с помощью веб-пакета, вам нужно вручную написать код для поддержки этих модулей в плагине:

// 引用自：https://www.jianshu.com/p/e65c246beac1
;(function(undefined) {
    "use strict"
    var _global;
    var plugin = {
      // ...
    }
    // 最后将插件对象暴露给全局对象
    _global = (function(){ return this || (0, eval)('this'); }());
    if (typeof module !== "undefined" && module.exports) {
        module.exports = plugin;
    } else if (typeof define === "function" && define.amd) {
        define(function(){return plugin;});
    } else {
        !('plugin' in _global) && (_global.plugin = plugin);
    }
}());

У блогера немного закружилась голова, когда он увидел это, и ему пришлось восхититься тем, что большой парень есть большой парень. К счастью, сейчасwebpack, теперь нам нужно только написать основной код ключа тела,webpackПоможет нам решить эти проблемы с упаковкой.

В webpack4 мы можем упаковать js как библиотеку Подробнее см.:Webpack Expose the Library . Здесь мы просто добавляем атрибут библиотеки к выводу:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'remember-scroll.js',
    library: 'RememberScroll',
    libraryTarget: 'umd',
    libraryExport: 'default'
  }
};

УведомлениеlibraryTargetдляumd, то есть целевая спецификация, которую мы хотим упаковать,umd.

Когда мы представим это JS через тег скрипта в HTML, он будет зарегистрирован под окномRememberScrollЭта переменная (аналогично импортуjQueryрегистрируется глобально, когда$эта переменная). использовать его напрямуюRememberScrollэта переменная.

<script src="../dist/remember-scroll.js"></script>
<script>
  console.log(RememberScroll)
</script>

Здесь есть яма, которая требует внимания, если не добавитьlibraryExport: 'default', так как наш кодexport default RememberScroll, упакованный код будет похож на:

{
    'default': {
        initScroll () {}
    }
}

И что мы ожидаем, так это:

{
    initScroll () {}
}

То есть нам нужен прямой выводdefaultсодержимое, не разделенное слоемdefault. Итак, здесь мы добавляемlibraryExport: 'default', вывод только при упаковкеdefaultСодержание.

PS: англоязычная документация webpack немного запутана, эта яма заставила блогеров долго биться, чтобы встать, поэтому я расскажу о ней отдельно. Студенты, которым просто интересно, могут ознакомиться со следующими документами:output.libraryExport.

На данный момент наша вторая маленькая цель достигнута:Поддержка спецификации umd.

Используйте загрузчик babel

Упакованный выше js может нормально работать в браузерах, поддерживающих синтаксис es6, таких как chrome. Но если вы хотите работать в IE10, IE11, вы должны позволить артефактуBabelДайте нам руку.

PS: Хотя многие говорят, что совместимость с IE не рассматривается, как универсальная библиотека, античные IE7, 8 и 9 могут быть несовместимы, но более новые версии IE10 и 11 все же должны быть совместимы.

BabelЭто переводчик JavaScript, думаю, все о нем слышали. Из-за постоянного развития JavaScript скорость разработки браузеров не поспевает за ним, а новый синтаксис и функции не могут поддерживаться браузерами сразу, поэтому необходим переводчик, который может преобразовывать новый синтаксис и новые функции в синтаксис, понятный современным браузерам. ., а Бабель выступает в роли переводчика.

PS: В прошлом блоггеры всегда думали (я думаю, что многие студенты, которые плохо знакомы с Babel), пока они используют Babel, они могут безболезненно использовать синтаксис ES6, но это не так.Компиляция Babel не выполняет полифилл, чтобы обеспечить правильную семантику, Babel может только преобразовать синтаксис без добавления или изменения исходных атрибутов и методов. Чтобы безболезненно использовать ES6, вам также необходимо сотрудничать с полифиллами. Для тех, кто не понимает, рекомендую прочитать вот эту статью:21 минута, чтобы освоить интерфейсное решение Polyfill, написано очень легко.

В общем, Babel нужно использовать с полифиллами.

BabelОбновления происходят часто Многие учебники по настройке, найденные в Интернете, являются старыми версиями, которые могут не относиться к последним.Babel 7.x, так что давайте бросим сюда последнее решение Babel для конфигурации webpack4:babel-loader. 1. Установкаbabel-loader,@babel/core,@babel/preset-env.

npm install -D babel-loader @babel/core @babel/preset-env core-js

core-js— это модульная стандартная библиотека JavaScript, в которой@babel/preset-envСпрос будет использован при упаковкеcore-jsФункция в , поэтому ее надо установить сюда, иначе при упаковке будет сообщение об ошибке.

2. Измените конфигурацию webpack.config.js и добавьте правила.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'remember-scroll.js',
    library: 'RememberScroll',
    libraryTarget: 'umd',
    libraryExport: 'default'
  },
  module: {
    rules: [
        {
          test: /\.m?js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
  }
};

Код, представляющий .js, используетbabel-loaderПакет.

3. Создайте новый в корневом каталогеbabel.config.js,Ссылаться наофициальный сайт Бабеля

const presets = [
  [
    "@babel/env",
    {
      targets: {
        browsers: [
            "last 1 version",
            "> 1%",
            "maintained node versions",
            "not dead"
          ]
      },
      useBuiltIns: "usage",
    },
  ],
];

browsersКонфигурация — это целевой браузер, то есть с какими браузерами мы хотим быть совместимы.Например, если мы хотим быть совместимыми с IE10, мы можем написать IE10, а затем webpack автоматически добавит полифилл для совместимости нашей библиотеки с IE10 при упаковке.

Здесь блогер использует рекомендуемые параметры из:npm browserslist, который совместим с большинством браузеров.

После настройкиnpm run devПросто упакуйте это. На данный момент мы достигли третьей небольшой цели: совместимость с браузерами более ранних версий.

Упаковка для производственной среды

npm run devУпакованные js будут относительно большими и, как правило, должны быть сжаты, и мы можем использовать производственный режим webpack, который автоматически сжимает js для нас и выводит пакет, пригодный для использования в производственной среде. существуетpackage.jsonдобавить еще одинbuildЗаказ:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode=production -o dist/remember-scroll.min.js --colors",
    "dev": "webpack --mode=development --colors"
  },

Здесь также указывается имя выходного файла:remember-scroll.min.js, общая производственная среда должна использовать этот файл.

Опубликовать в нпм

После вышеперечисленных шагов мы закончили писать эту библиотеку.Студенты, которым она нужна, могут опубликовать библиотеку в npm, чтобы больше людей могли легко пользоваться вашей библиотекой.

Перед публикацией в npm его необходимо изменитьpackage.json, дополняйте описание автора и прочую информацию, самое главное добавляйтеmainВходной файл:

{
    "main": "dist/remember-scroll.min.js",
}

Таким образом, когда другие используют вашу библиотеку, они могут напрямую передаватьimport RememberScroll from 'remember-scroll'использоватьremember-scroll.min.js.

Шаги публикации:

первый пришелwww.npmjs.com/Зарегистрируйте учетную запись и подтвердите свою электронную почту.
Затем в командной строке введите:npm adduser, введите пароль учетной записи и адрес электронной почты для входа.
бегатьnpm publishЗагрузите пакет, и через несколько минут вы сможете найти свой пакет в npm.

На этом процесс разработки и выпуска плагина в основном завершен.

Тем не менее, отличный проект с открытым исходным кодом также должен иметь подробную документацию, примеры использования и т. д. Вы можете обратиться к проекту блоггера.README.md,Китайский README.md.

наконец

Статья писалась несколько дней, ее можно охарактеризовать как кропотливую, хотя она и довольно многословна, но ее следует объяснить более четко.Как использовать синтаксис ES6 для написания js-плагина с нуля, который запоминает, куда ушел пользователь, а также очень подробно объясняет, как использовать последнююwebpackСобирая нашу библиотеку, я надеюсь, что каждый сможет что-то получить, и я надеюсь, что каждый сможет прийтиGitHubНажмите на звезду, чтобы поощрить его.

remember-scrollНа самом деле, этот плагин был выпущен для npm несколько месяцев назад, и я был занят (ленив), не написав ни одной главы, чтобы поделиться. Хотя функция простая, но очень искренняя, она совместима с IE9.

Он также очень удобен и прост в использовании, и его можно напрямую пройти черезscriptЭтикеткаcdnПредставлено также во vueimport RememberScroll from 'remember-scroll'использовать. Подробные примеры использования есть в документации:

Как использовать теги сценария
Как использовать в вью
Как использовать vue для асинхронного получения данных

адрес проектаGithub, онлайнDemo.

Вы можете комментировать и обмениваться мнениями, а также приветствуется PR. В то же время я надеюсь, что вы можете щелкнуть звезду, чтобы поощрить это.