在 Svelte 中导入工作的 javascript 文件答案

【问题标题】：Import a working javascript file in Svelte在 Svelte 中导入工作的 javascript 文件
【发布时间】：2021-11-22 18:19:54
【问题描述】：

我正在 Svelte 中构建一个应用程序，并尝试向其中添加一个以前编写的 .js 文件。我试图将它导入main.js 文件，但给我一个错误： Cannot read properties of null (reading 'offsetHeight') 这是.js 文件：

[...]
function colorSubheadings() {
    // Replace subheading background colors
    var redStart = 255;
    var greenStart = 255;
    var blueStart = 255;
    var redEnd = 249;
    var greenEnd = 250;
    var blueEnd = 251;

    var redDiff = redEnd - redStart;
    var greenDiff = greenEnd - greenStart;
    var blueDiff = blueEnd - blueStart;

    var page = document.querySelector('.page');
    var pageHeight = page.offsetHeight;

    var subheadings = document.getElementsByClassName('.chapter');
    for (var i = 0; i < subheadings.length; i++) {
        // Get the position relative to .page
        var span = subheadings[i].querySelector('span');
        var factor = span.offsetTop / pageHeight;

        var r = Math.floor(redDiff * factor + redStart);
        var g = Math.floor(greenDiff * factor + greenStart);
        var b = Math.floor(blueDiff * factor + blueStart);
        var color = 'rgb(' + r + ',' + g + ',' + b + ')';

        // Color background based on position
        span.style.backgroundColor = color;
        span.style.boxShadow = '11px 0 0 ' + color + ', -13px 0 0 ' + color;
    }
}
[...]

这是 .svelte 文件：

<script>
 //some functions
</script>
<div class="page">
[...]
<div class="chapter-sidebar">
    <div class="sidebar js-sidebar">
        <div class="sidebar__wrapper">
            <ul class="sidebar__list">
            {#each files as { file } (file.name)}
                <li class="sidebar__list-item">
                    <a class="sidebar__link" href="#temp">{file.name.split('.').slice(0, -1).join('.')}</a>
                </li>
            {/each}
            </ul>
        </div>
    </div>

在.svelte 文件中有一个横向导航栏，就像this。在 vanilla html 中它工作得很好，但是对于 svelte 有一些错误，比如 navBar 不会“粘”在一个地方：如果我向下滚动它仍然在页面的顶部，insted 保持在一个特定的位置屏幕，“跟随”用户的滚动。那么，我该怎么做才能在我的 svelte 项目中使用这个 .js 文件？我也尝试了this 解决方案，但它对我不起作用。提前致谢。

【问题讨论】：

标签： javascript html svelte

【解决方案1】：

colorSubheadings() 函数在哪里调用？
（我看到了var subheadings = document.getElementsByClassName('.chapter')，但在 Svelte 文件中没有“章节”类的元素）

我建议你要么尝试

在yourproject/puplic文件夹中的index.html中导入.js文件在<script src="/build/bundle.js"></script>之后（如果函数在同一个.js文件中调用）
在.svelte 组件中运行onMount 内的函数（.js 文件夹内的yourproject/src 文件，导出函数export colorSubheadings() {...}）

    import {onMount} from 'svelte'
    import {colorSubheadings} from './xy.js'
        
    onMount(()=> {
         colorSubheadings()
    })

【讨论】：

【解决方案2】：

您需要先将函数导出到您的 js 文件中，然后才能将其导入到您的 .svelte 文件（或其他 JS 文件）中。

export function colorSubheadings() {
...
}

【讨论】：