HTML编码和PHP或Javascript代码的混合

Question

我被分配了修改网站的任务,目前我正在开发index.html页面.之前的编码器在其间混合了大量的javascript和CSS代码,并且变得难以阅读.

我想知道是否有必要在两者之间包含标签和CSS代码？PHP代码怎么样？每个人必须住在哪里？

编辑:

如果要引用多个javascript和CSS文件,如何包含在单个或标记中？

Answer 1

将您的javascript保存在单独的文件中,将您的css保存在单独的文件中,并在HTML中引用它们.这些引用文件相对于HTML的顺序无关紧要.至于PHP,我不会太担心它与HTML混合(只是将你的函数,类和其他脚本保存在单独的文件中,并在头文件中包含它们).

如果每个页面上的CSS相同,则拥有缓存的外部文件有助于节省带宽.如果对于不同的元素类型存在与HTML混合的不同规则,则可能存在一些冲突,但是如果重写它,则最终会更清晰,更容易维护.

我喜欢保持这样的文件结构:

index.php
/css
   main.css
   othercssfiles.css
/javascript
   main.js
   otherjsfiles.js
/template
   header.php
   footer.php
/scripts
   functions.php
   otherscripts.php

然后在我的头文件中,我将放置引用css和javascript目录中的文件的HTML代码.在根目录下,我的index.php文件将包含(); 顶部的标题和底部的页脚.

"otherjsfiles.js"和"othercssfiles.css"可用于单个页面可能具有特定要求的情况,需要大量其他页面不需要的css和javascript.这意味着其他页面不需要获取不必要的数据,并且它使页面特定的代码与整个站点代码分开.

我发现这是一种简单的方法来跟踪组成HTML页面的代码的各个方面,但自然你会找到组织它的方法,这对你来说很有意义.

编辑:

如果要引用多个javascript和CSS文件,如何包含在单个或标记中？

最好将它们组合到一个文件中以保存HTTP请求(这需要时间).然后你就像普通的那样包含那些css和javascript文件.

<script type="text/javascript" src="/javascript/main.js"></script>
<link rel="stylesheet" href="/css/main.css">

此外,您似乎可以使用CSS美化器的可读性服务,可读性的JavaScript美化器和用于阅读它的JavaScript缩小器(保持可读版本)并希望节省带宽.当您正在维护未创建的网站时,这些工具特别有用.