问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

JavaScript动态添加样式表和请求路径的合理规划

头像
liuming_music
    41732532

    1、公司刚搭建的spring mvc+mybatis+spring项目，所以对于项目的请求路径还没有制定，就如http://localhost:8080/JXNY;可能前期是这样，但是这个名字很有可能会改成http://localhost:8080/jxny;所以对于项目的请求地址是不可控制的
    2、前端没有使用jsp所以无法获取请求路径，
    3、纯前端开发，所以对于前端鞋样式或者脚本的引用如

    <link rel="icon"href="http://localhost:8080/JXNY/css.css">

    这种路径就不可控制，明天可能就变成了

    <link rel="icon"href="http://localhost:8080/jxny/css.css">

    4、目前有一种方式可以解决，就是相对路径（但是太低级了，不想考虑）如

    <link rel="icon"href="../../../../../css.css">

    5、同样的问题，js脚本也有
    6、多个页面之间有共同的样式表，想使用js脚本动态生成，这种方式可采取吗？
    7、希望能够得到合理的解决方式，相对来说，大家也会遇到这种问题吧

    javascriptcsshtmlhtml5java
    阅读 5.4k
    4 个回答
    得票最新
    头像
    iceprosurface
      19416

      如果说你只是希望一次修改，所有页面生效，那么下面的方法应该是可行的，如果打算完全动态的可能做不到……
      写public目录比如你把需要引入的css写一起命名为commcss.html，以后只要改commcss.html里面的内容就可以了

      <link rel="icon"href="http://localhost:8080/JXNY/css.css">

      使用的时候这样

      @@include('public/commcss.html')

      然后通过gulp写个task，类似于这样

      var gulp = require('gulp');
var fileinclude = require('gulp-file-include');
var rev = require('gulp-rev-append');
//替换成你的config设置
var config = require('../config').html;

gulp.task('html', function(){
    gulp.src(config.src)
        .pipe(fileinclude())
        .pipe(gulp.dest(config.dest))
        .pipe(rev())
        .pipe(gulp.dest(config.dest));
});

      ，具体的可以参见gulp-file-include

      头像
      紅白
        1.9k1110

        1. 相对路径绝对不要使用，坑很多

        2. 纯前端开发是指后端只提供接口吗？后端是否还有渲染模板，如果有渲染模板，拿这些变量可以在渲染模板中引入。

        3. 如果是只提供接口这种，那么可以通过动态插入脚本的方式来完成，页面的初始化脚本只负责传变量，css同理。

        var path = 'xxx'; // your resource path
var script = document.createElement('script');
script.src = 'xxx';
document.boby.appendChild(script);

        1. 第6点，共享样式表好像和用js脚本动态生成没什么关系，这是属于模块化的范畴。如果是说某个模块会有样式依赖的话，推荐使用 requireJS 或者 webpack 来管理依赖。

        头像
        magooxx
          4924

          纯前端总归也要获取到根路径，好像也只能用javascript了吧，举个例子：

          <head>
    ...
    <script>
        var projectName = /\/[^\/]+/.exec(location.pathname)[0]; // 第一种方式使用正则从location获取
        // var projectName = ...; // 也可以通过Ajax从后台获取
        
        var cssList = ['a.css','b.css'];
        cssList.forEach(function(css){
            document.write('<link rel="stylesheet" href="'+ projectName+ '/' + 'css' +'">');
        });
        
        var icons = ...
        var scripts = ...
        
    </script>
</head>

          可以抽象成一个公共方法
          开发阶段这样写写还行，发布时最好都用静态形式。

          头像
          incNick
            6.3k2613

            1- 通常这样写<link href="<?php echo baseUrl()?>/css.css" /> baseUrl是你自己定义的方法，复杂的实现可以自动计算绝对路径，简单的话返回硬编码地址就行了，以后就算修改也只要修改baseUrl函数而不是修改所有页面。
            2- js也一样，直接声明<script>var BASE_URL = '<?php echo baseUrl()?>';</script>，后面js中用到的url可以基于这个去做。
            3- css和js文件能合并就合并，因为缓存、连接效率的关系，大文件的性能并不比多文件差，所以实际开发中并不推荐不同页面调用不同的css这种方式。

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题