现在标准的前端项目都是怎么样的 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
daijinming
V2EX    程序员

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

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

    有人说:一个标准的前端项目,必定始于 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 +8: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  
    PRO
       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     Solana     3472 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 27ms UTC 04:43 PVG 12:43 LAX 21:43 JFK 00:43
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86