V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
Felldeadbird
V2EX  ›  问与答

现在写 JS 代码和 CSS 的正确方式是什么?

  •  
  •   Felldeadbird · 2016-11-10 17:03:31 +08:00 · 1445 次点击
    这是一个创建于 2941 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我是一名后端,不时会接触到 JS 和 CSS 的修改。我是 JQUERY 党,公司的前端只是会做切图,所以最终页面渲染交给了后端。
    还好作为后端更多是在维护内部系统,所以对于前端要求并不高。但是呢,在这个年代像我这样写 JS 和 CSS ,总感觉很落伍:

    例如某个页面我想绑定这个按钮进行 ajax 交互。我会在对应模板的底部写一段 JQ 代码:

      $(function(){
      	$('...').on('...', function(){
          ...交互的代码  
            
          })
          
          //若干绑定事件
      
      })
    

    而 CSS 得写法,例如某个我要定义某个按钮或者某个元素宽高,我会在公用的样式中这样编写代码:

    div.page-button{
       width:100px;
    }
    

    当随着代码量的增加,感觉这也得片段代码会慢慢增多,复用性也不高。网上也稍微去了解过各种当前流行前端的写法,感觉用流行的前端框架编写的成本比我这样写更大。至少对于我这位后端开发来说如此。不知道各位公司现在的流行写法是什么?希望不吝指教,谢谢

    7 条回复    2016-11-11 11:33:59 +08:00
    66beta
        1
    66beta  
       2016-11-10 17:25:49 +08:00   ❤️ 1
    我觉得内部系统、由后端兼干的,还是用各种第三方库比较合适,换个人也容易上手

    JS 代码可以抽离公用方法到一个公用文件里,比如 common.js

    CSS 的复用,简单的可以通过类名的定义复用组件(参考 bootstrap);复杂的可以通过 SASS 或 PostCSS 编译
    pubby
        2
    pubby  
       2016-11-10 17:39:49 +08:00   ❤️ 1
    这种情况 我们都是各种模板文件里面直接写 css + js

    页面输出之前统一处理各种 css 片段,外置到 css 缓存文件中放<head>里加载
    Felldeadbird
        3
    Felldeadbird  
    OP
       2016-11-10 19:52:46 +08:00 via iPhone
    @pubby 这样复用性不高啊
    pubby
        4
    pubby  
       2016-11-10 20:20:05 +08:00
    另外有一个共用的基础样式定义。

    更多的是没啥复用价值的 css 定义
    ryanzyy
        5
    ryanzyy  
       2016-11-11 08:38:45 +08:00   ❤️ 1
    我个人比较倾向用 React.
    但你这样纯 jQuery 也没什么问题
    加个 handlebar 之类的 HTML template 也可以写出复用性高(对公司内部)的组件
    ryanzyy
        6
    ryanzyy  
       2016-11-11 08:40:39 +08:00   ❤️ 1
    另外建议使用一个 build system 比如 webpack, gulp
    css 的话还是建议写 less 或 sass
    ibufu
        7
    ibufu  
       2016-11-11 11:33:59 +08:00   ❤️ 1
    人生苦短,我用 webpack
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2538 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 01:14 · PVG 09:14 · LAX 17:14 · JFK 20:14
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.