css - JavaScript动态添加样式表和请求路径的合理规划-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

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

[JavaScript讨论组]

561

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

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

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

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

阿神

闭关修行中......

全部回复(4)

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

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

相对路径绝对不要使用，坑很多
纯前端开发是指后端只提供接口吗？后端是否还有渲染模板，如果有渲染模板，拿这些变量可以在渲染模板中引入。
如果是只提供接口这种，那么可以通过动态插入脚本的方式来完成，页面的初始化脚本只负责传变量，css同理。

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

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

赞 +0

添加回复

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

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

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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>