前端开发中怎么组织 css 和 js 代码？

2014-09-23 15:38:34 +08:00
 kokdemo
我之前一直是把js和css分写在两个文件中的，比如main.js和main.css。

但是这显然不适应大一点的项目，于是就按照页面分开，比如page1.js，page1.css.

但是发现其实有很多页面上的组件是可以复用的，那么复用的这部分的js和css又该怎么写？

来讲讲你在开发中怎么组织css和js代码吧！
3457 次点击
所在节点    前端开发
14 条回复
otakustay
2014-09-23 16:54:07 +08:00
标准分层，site -> module -> page，分别放全站通用、某模块通用（如用户模块）、页面专用，这3层都可以有多个css文件组成

js可以类似
kokdemo
2014-09-23 17:42:14 +08:00
@otakustay 你的意思是site是module的上层？
jsonline
2014-09-23 17:50:47 +08:00
https://github.com/FrankFang/gulp-html-extend
你需要用到自动化复制粘贴工具
jsonline
2014-09-23 17:51:44 +08:00
<head>
<!-- @@include = ../partials/meta.html -->

<!-- @@include =../partials/css_base.html -->

<!--build:css(dist) /static/styles/project/master.html.css-->
<link rel="stylesheet" href="/static/styles/project/layout.css"/>
<link rel="stylesheet" href="/static/styles/project/siteHeader.css"/>
<link rel="stylesheet" href="/static/styles/project/siteFooter.css"/>
<link rel="stylesheet" href="/static/styles/project/modal.css"/>
<link rel="stylesheet" href="/static/styles/project/signinForm.css"/>
<link rel="stylesheet" href="/static/styles/floatBar.css"/>
<link rel="stylesheet" href="/static/styles/requirementPopup.css"/>
<!--endbuild-->

<!-- @@placeholder = head -->

<!--[if lte IE 8]>
<script src="/static/vendors/html5shiv.min.js"></script>
<![endif]-->

<!-- @@include = ../partials/favicon.html -->

</head>
jsonline
2014-09-23 17:52:48 +08:00
CSS 按模块分为很多文件，各页面各取所需。
JS 同理。
HTML 同理。
jsonline
2014-09-23 17:54:04 +08:00
把CSS/JS按照HTML的名字来命名一定会悲剧的。
除非你的代码特别特别少。
gangsta
2014-09-23 18:20:51 +08:00
个人习惯:

webRoot/

assets/
bootstrap/
css/
js/
images/
jQuery/
js/
font-awesome/
css/
images/
static/
css/
js/
img/

index.html


大点的库都用一些速度快的CDN了
learnshare
2014-09-23 18:21:23 +08:00
参考 Bootstrap 等复杂的前端项目吧。项目复杂了，模块化、自动化等工作是很重要的
gangsta
2014-09-23 18:21:33 +08:00
我去 缩进被吃掉了...
otakustay
2014-09-23 19:42:43 +08:00
@kokdemo 我不知道我们2个对上下的理解是不是一致，我的概念里越多地方会用的东西越下层，所以site是最下层……
guotie
2014-09-23 20:34:20 +08:00
duo
kokdemo
2014-09-23 21:35:29 +08:00
@gangsta 用制表符什么的表示一下吧……
kokdemo
2014-09-23 21:35:50 +08:00
@jsonline gulp和grunt区别大吗
kokdemo
2014-09-23 21:36:26 +08:00
@jsonline 复用的部分还是得写到一个公用的css/js中吧

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/135179

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX