登录

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

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、希望能够得到合理的解决方式,相对来说,大家也会遇到这种问题吧

# JavaScript
阿神 阿神 2543 天前 259 次浏览

全部回复(4) 我要回复

  • 阿神

    阿神2017-04-11 11:18:34

    如果说你只是希望一次修改,所有页面生效,那么下面的方法应该是可行的,如果打算完全动态的可能做不到……
    写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

    回复
    0
  • 高洛峰

    高洛峰2017-04-11 11:18:34

    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 来管理依赖。

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-11 11:18:34

    纯前端总归也要获取到根路径,好像也只能用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>
    

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

    回复
    0
  • 高洛峰

    高洛峰2017-04-11 11:18:34

    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这种方式。

    回复
    0
  • 取消 回复 发送