V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
daijinming
V2EX  ›  程序员

现在标准的前端项目都是怎么样的

  •  
  •   daijinming · 2018-10-15 11:24:36 +08:00 · 4795 次点击
    这是一个创建于 2265 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有人说:一个标准的前端项目,必定始于 yarn start,它将会经历 babel 编译,webpack 构建,server 启动等流程,然后由浏览器加载页面。 我不知道做前端的兄弟怎么看?

    42 条回复    2018-10-16 23:31:32 +08:00
    cuzfinal
        1
    cuzfinal  
       2018-10-15 11:35:24 +08:00
    可以在慕课网上看看一些前端项目的视频,那上面有这些流程。
    weixiangzhe
        2
    weixiangzhe  
       2018-10-15 11:37:17 +08:00
    没有标准, 太过灵活,
    suzic
        3
    suzic  
       2018-10-15 11:38:12 +08:00 via Android
    如果是一两个简单的展示型活动页,直接裸写代码。如果交互多或者单页应用,就上这一套工具
    learnshare
        4
    learnshare  
       2018-10-15 11:39:06 +08:00
    没有标准,jQuery + gulp 一样可以用
    o0
        5
    o0  
       2018-10-15 11:40:43 +08:00
    css
    images
    js
    index.html
    .....

    完了,我是一只菜鸡
    cexy
        6
    cexy  
       2018-10-15 11:41:35 +08:00
    真正搞清楚啥是前端再说吧,前端到底该学啥,顺便提一点,现在大型电商的前端,基本都是 node 写的
    ZxBing0066
        7
    ZxBing0066  
       2018-10-15 11:43:31 +08:00
    这种事情 哪来的标准之说,当然是看项目而定
    Cbdy
        8
    Cbdy  
       2018-10-15 11:43:38 +08:00
    符合 HTML 标准,代码比较清晰可维护就可以了
    nekoneko
        9
    nekoneko  
       2018-10-15 12:54:19 +08:00
    现在不都是框架+UI 吗。。。。
    Lawlieti
        10
    Lawlieti  
       2018-10-15 15:23:12 +08:00
    没有绝对的标准
    yiFire
        11
    yiFire  
       2018-10-15 15:46:08 +08:00
    @cexy 胸 dei 你这句话是认真的吗。
    whypool
        12
    whypool  
       2018-10-15 15:52:09 +08:00   ❤️ 1
    JQ 一把梭
    vinsony
        13
    vinsony  
       2018-10-15 15:55:29 +08:00
    我偏要 npm start :)
    murmur
        14
    murmur  
       2018-10-15 15:56:03 +08:00
    jQuery 一把梭 要什么 webpack
    mauve
        15
    mauve  
       2018-10-15 16:00:15 +08:00
    Angular 一把梭
    lingo
        16
    lingo  
       2018-10-15 17:34:07 +08:00
    扩充一下 2#的回复。确实没啥标准
    从 jquery 一把梭到 webpack,包括中间的几个阶段
    每个阶段都有各自在当时情况下要解决的问题
    这时候就要考虑自己的项目有怎样的问题
    一味地上大而全的范式,徒增复杂性

    似乎都是废话了。
    TomatoYuyuko
        17
    TomatoYuyuko  
       2018-10-15 17:35:53 +08:00
    Jquery 一把梭就行了,不是大项目玩啥工程化
    rookiebulls
        18
    rookiebulls  
       2018-10-15 17:36:57 +08:00 via iPhone
    @cexy 你指的是通过 node 搭建的各种工具和流程吧?
    zhennann
        19
    zhennann  
       2018-10-15 17:59:17 +08:00
    建议先拿一套 JS 全栈框架粗略看看,里面包含大量的技术点,有利于厘清学习的方向,如 CabloyJS、mk-js、MEAN 等等
    zhennann
        20
    zhennann  
       2018-10-15 18:02:30 +08:00
    如果一开始不考虑工程化,到后面随着功能增多,代码就会越来越复杂
    cexy
        21
    cexy  
       2018-10-15 18:22:25 +08:00
    @rookiebulls 然而并不是,你说的只是一些辅助功能而已,很多做前端的人,都并不知道前端应该学什么,前端需要做什么,你们上面提这么多意见,也就只是省点力气搬砖而已
    charexcalibur
        22
    charexcalibur  
       2018-10-15 18:23:59 +08:00
    vue-cli 一把梭
    zhuangzhuang1988
        23
    zhuangzhuang1988  
       2018-10-15 18:26:21 +08:00
    angularjs 一把梭
    zhuangzhuang1988
        24
    zhuangzhuang1988  
       2018-10-15 18:58:42 +08:00
    一个 angularjs 文件 = requestjs + jquery + vue + axios + promise + vue-router
    webdisk
        25
    webdisk  
       2018-10-15 19:37:43 +08:00
    @murmur 看我做的东西 /t/497773 jQuery 都不用, 前后端加服务器一共 80KB
    zjsxwc
        26
    zjsxwc  
       2018-10-15 20:23:50 +08:00 via Android
    聊一下 jQuery。


    jQuery 的爽点是操纵 dom 非常直接方便,比浏览器提供的 api 爽多了。

    jQuery 不爽的地方在于.click() .on()事件的滥用,导致维护起来就找不到到底是哪个用户行为事件出发了函数,于是很久以前我就学当时亚马逊的做法,要监听处理点击事件等绝不用 jQuery 的.on(),而是通过 html 原生的 onclick=<显式的回调函数名>来处理。


    mvvm 框架的优势在于能够通过数据绑定,把对界面的操作抽象成为对一般数据结构的处理,从而应对逻辑复杂的页面,这个角度上来说,其实这个 jQuery 也能做,因为从数据结构映射到 dom 界面用 jQuery 很简单,这个无非就是写个渲染函数进行 html 拼接而已;但从 dom 变动映射回数据结构就要手动写很多回调函数更新数据,每次更新完数据后重新调用之前的渲染函数一下,这种做法 jQuery 可以处理逻辑复杂的页面。

    当然实际情况是不专业的前端工程师,根本没有数据结构概念,在处理 dom 变动映射回数据结构时,直接操作 dom 就完事了,这种应对小需求可以,稍微需求复杂点就凉了。
    theohateonion
        27
    theohateonion  
       2018-10-15 20:32:46 +08:00
    工程化的前端一般都绕不过 webpack / babel / sass(less)+postcss 预处理器了,即使是写 jQuery 代码,也强烈建议用上 es6,开发体验会好很多。另外 TypeScript 大法好,引入成本也不高。
    zjsxwc
        28
    zjsxwc  
       2018-10-15 20:38:43 +08:00 via Android
    还有 jQuery 自带的 ajax、deferred promise 等足够应对大部分需求,当然要工程化代码复用那么在当时只能用类似 requirejs 的东西,当然在当时为了工程化代码复用出现了些思路清奇的人,他们用 c 语言的 makefile 来合并需要的 js 给相应的页面,每个 url 地址配个 makefile 文件也是贼 6 的,23333
    realkenshinji
        29
    realkenshinji  
       2018-10-15 20:41:17 +08:00 via iPhone
    @cexy node 和前端框架的区别搞清楚了么?
    realkenshinji
        30
    realkenshinji  
       2018-10-15 20:42:46 +08:00 via iPhone
    @zjsxwc 现在主流浏览器的新的 API 把 jq 的那些 dom 操作功能都包进去了
    zjsxwc
        31
    zjsxwc  
       2018-10-15 20:45:40 +08:00 via Android
    @realkenshinji 应该加上关键词是最新的主流,很多人肯定不是最新的主流浏览器,要兼容性考虑
    jsthon
        32
    jsthon  
       2018-10-15 20:54:54 +08:00
    右键->新建文本文档->重命名->开工!

    (开个玩笑!)
    zjsxwc
        33
    zjsxwc  
       2018-10-15 21:11:47 +08:00 via Android
    最后作为一个写后端的,站在我的角度,

    前端求你别用 jQuery 了,给我老实去用 3 大前端框架,前后端分离!别把锅甩给后端来背!以前老是碰到加班排查半天发现是傻逼前端的锅,现在前后端分离了,同样的接口安卓和苹果手机 app 接口没问题,那么肯定是前端的锅!

    也别用你们写的垃圾前端来污染后端项目! git 分支合并冲突你们自己去解决好了,别扯上我!
    KuroNekoFan
        34
    KuroNekoFan  
       2018-10-15 21:13:52 +08:00 via iPhone
    没什么大项目小项目的,github 找个 boilerplate 写起来就行,甚至现在优化好配置好的配置子集也挺多的比如 umijs 这种,只需要遵循一些约定就可以以优化的配置和最新的语法开始开发了
    valentin508
        35
    valentin508  
       2018-10-15 21:44:31 +08:00 via Android
    CREATE-REACT-APP ! EJECT !然后自己看去
    x86
        36
    x86  
       2018-10-15 21:46:36 +08:00
    别问,问就是 Jquery 一把梭.png
    linshuang
        37
    linshuang  
       2018-10-16 09:37:42 +08:00
    不存在什么标准,说一下我脑中的基于 vue 全家桶的一条路子:
    1. 脚手架: vue-cli
    2. 框架: vue+vuex+vue-router
    3. 构建: webpack
    4. 本地服务器: webpack 自带的
    5. es 兼容: babel
    6. css 预编译: scss
    7. 模块化: vue 组件
    aptx4689
        38
    aptx4689  
       2018-10-16 12:12:21 +08:00
    收藏的一个很好的解释文章: https://zhuanlan.zhihu.com/p/38209210
    cexy
        39
    cexy  
       2018-10-16 14:14:08 +08:00
    @realkenshinji 我是主做后台的,所以或许比你更清楚一点 node 是做什么的,了解下 express,koa 再说,当然了你们说这么多页没人聊过 MDN,你们做前端的就仅仅只是为了写个静态页面而已?
    realkenshinji
        40
    realkenshinji  
       2018-10-16 17:28:10 +08:00 via iPhone
    @cexy express 难道不是 http server ?如果你说现在前端框架都用 npm/yarn 之类的做包管理那没问题,但是你说 node 开发前端那是从根本上会产生歧义的,ok ? vue/react/angular 跟 node 完全是两码事,ok ?
    cexy
        41
    cexy  
       2018-10-16 20:27:00 +08:00
    @realkenshinji 说了那么多,你还是在给我扯那些简单的,框架,包管理,需要学几天?你看我有提过这些东西?等你做过几年到了那个深度能理解了在谈吧
    realkenshinji
        42
    realkenshinji  
       2018-10-16 23:31:32 +08:00 via iPhone
    @cexy 言而无物,这个 13 装得我给 5 分
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   956 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:33 · PVG 06:33 · LAX 14:33 · JFK 17:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.