V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kokdemo
V2EX  ›  前端开发

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

  •  
  •   kokdemo ·
    kokdemo · 2014-09-23 15:38:34 +08:00 · 3457 次点击
    这是一个创建于 3708 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我之前一直是把js和css分写在两个文件中的,比如main.js和main.css。

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

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

    来讲讲你在开发中怎么组织css和js代码吧!
    14 条回复    2014-09-23 21:36:26 +08:00
    otakustay
        1
    otakustay  
       2014-09-23 16:54:07 +08:00
    标准分层,site -> module -> page,分别放全站通用、某模块通用(如用户模块)、页面专用,这3层都可以有多个css文件组成

    js可以类似
    kokdemo
        2
    kokdemo  
    OP
       2014-09-23 17:42:14 +08:00
    @otakustay 你的意思是site是module的上层?
    jsonline
        3
    jsonline  
       2014-09-23 17:50:47 +08:00
    https://github.com/FrankFang/gulp-html-extend
    你需要用到自动化复制粘贴工具
    jsonline
        4
    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
        5
    jsonline  
       2014-09-23 17:52:48 +08:00
    CSS 按模块分为很多文件,各页面各取所需。
    JS 同理。
    HTML 同理。
    jsonline
        6
    jsonline  
       2014-09-23 17:54:04 +08:00
    把CSS/JS按照HTML的名字来命名一定会悲剧的。
    除非你的代码特别特别少。
    gangsta
        7
    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
        8
    learnshare  
       2014-09-23 18:21:23 +08:00
    参考 Bootstrap 等复杂的前端项目吧。项目复杂了,模块化、自动化等工作是很重要的
    gangsta
        9
    gangsta  
       2014-09-23 18:21:33 +08:00
    我去 缩进被吃掉了...
    otakustay
        10
    otakustay  
       2014-09-23 19:42:43 +08:00
    @kokdemo 我不知道我们2个对上下的理解是不是一致,我的概念里越多地方会用的东西越下层,所以site是最下层……
    guotie
        11
    guotie  
       2014-09-23 20:34:20 +08:00
    duo
    kokdemo
        12
    kokdemo  
    OP
       2014-09-23 21:35:29 +08:00
    @gangsta 用制表符什么的表示一下吧……
    kokdemo
        13
    kokdemo  
    OP
       2014-09-23 21:35:50 +08:00
    @jsonline gulp和grunt区别大吗
    kokdemo
        14
    kokdemo  
    OP
       2014-09-23 21:36:26 +08:00
    @jsonline 复用的部分还是得写到一个公用的css/js中吧
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2778 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 08:25 · PVG 16:25 · LAX 00:25 · JFK 03:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.