6174 / 6174.github.io

keep calm & carry on
https://6174.github.io
19 stars 0 forks source link

欢迎来这里交流学习前端相关的话题 #1

Open 6174 opened 8 years ago

6174 commented 8 years ago
  1. 前端学习
  2. 前端框架
    • react
    • ember
    • jquery .....
  3. 前端游戏开发
  4. 前端性能优化
  5. css
    • 兼容
    • css3
  6. 前端难题
    • 实现
    • bug
  7. 前端架构
  8. 前端工作流
  9. 前端兼职求职
  10. 前端工具

其他任何和前端相关的问题 。。。。

gaoryrt commented 8 years ago

请问调试js用什么比较好?
本人现在用webstorm,把script写在html上
然后在网页上调,感觉很麻烦

6174 commented 8 years ago

@gaoryrt

js 调试的话个人觉得 chrome 开发者工具应该是很好的, 你现在在 webstorm 上开发,script 写在 html 中麻烦的点可能是每次修改代码都需要到浏览器去刷新, 你可以试一下 借助 livereload 工具,每次保存会自动刷新浏览器

nightire commented 8 years ago

tmall 的主项目用的是 ember 吗?

6174 commented 8 years ago

@nightire 现在我已经没在天猫了,天猫大多数核心页面应该会以 React 来开发, 现在的公司项目主要用 Ember 在开发

nightire commented 8 years ago

@6174 了解,谢谢。Ember 是一个好框架,我们也一直在用,我自己用 Ember 已经两年多了,有兴趣参与贡献官方的文档翻译工作么?

6174 commented 8 years ago

@nightire 愿意啊,有相关计划吗?

nightire commented 8 years ago

@6174 当然有,官方牵头已经开启了 crowdin 的多语言翻译项目了,现在正在进行中。我正在到处替 Ember 招揽中文化贡献者,这个工作将来会直接体现在官方网站上并且会记录所有贡献者。

https://crowdin.com/project/emberjs?auto_accepted=12858931

这是该项目的邀请地址,注册一个 crowdin 账户就可以直接开始国际化了

如果遇到问题,可以在 Ember Community Slack 的文档频道里询问:https://embercommunity.slack.com/messages/dev-translations/details/

问我(如果我在线的话)或者问项目负责人 @lock 都可以

6174 commented 8 years ago

@nightire in

sky-admin commented 8 years ago

问个问题……jQuery框架有什么高级用法么?我感觉它好像只是封装了一些原生的操作啊?为什么看到很多人提到在angular和jQuery中最后还是选jQuery框架等等……感觉jQuery和angular完全不一样啊。。jQuery写大项目可以玩出什么样的花样么难道……?有没有什么样例工程……?

nightire commented 8 years ago

@sky-admin there is nothing wrong with jQuery but just not good enough. the basic one is jQuery is not a framework, I think you might not be aware what's important differentiates between frameworks and jQuery, so try to do a project twice, use jQuery and another framework (angular for example) in each of them, then you will know the answer more specific and clear. this is the best way to feel it by yourself.

sky-admin commented 8 years ago

@nightire thank you~唔,我英语还不够好,还是用中文表述算了……我写过,jQuery的,angular的,都是很小的项目,我就是觉得,jQuery好像只是简化了js的写法,为什么知乎里有时看到有人说他们的产品最后还是选择的jQuery框架(他们这么表述的,我明白你说jQuery不是个framework的意思),这东西能玩出什么高级花样么?

6174 commented 8 years ago

@sky-admin 你在比较 jQuery 和 Angular 说明你可能对前端还算是刚入门,就像 @nightire 说的一样,jQuery 不算是一个框架。 jQuery , Angular 这些的发展都是伴随着前端的发展出现的

  1. 最开始的时候只有 DOM, 那为了做一下封装复杂的 dom 操作,以及处理浏览器兼容问题, 出现了许多工具函数,这个应该就是 jQuery 出现的时代,jQuery 也在伴随着前端成长,比如出现了 animation, defered ,并且在效率上也很棒,所以基本上算是前端的默认工具库(只是工具库),伴随 jQuery 的生态体系也是很庞大,最出名的几个基于 jQuery 的 UI 框架如 bootstrap, foundation 等。
  2. 对于大多数的网页内容来说,基本的需求只有一些少量的动画和展示内容,所以利用 jQuery 绰绰有余,同时对于javascript 比较熟悉的前端,能够利用 jQuery 完成想要做的任何 web app。 同时现阶段来说,绝大多数的网站都是基于 jQuery 构建的。 这也就是你问 “为什么看到很多人提到在angular和jQuery中最后还是选jQuery框架” 的原因。
  3. 然后回到现代化的前端开发,现在的web应用越来与复杂,已经不只是动画,交互这么简单,出现了前后端解耦,单页面应用,MVVM ,Flux 这些架构,现代化前端应用注重工程化,效率,规范。 基于 jQuery 构建大型应用越来越复杂, 这也是为什么会出现 Angular, React, Vue 这些框架的原因。(注意这里说的是框架,因为你看看这些框架的使用文档就会发现,大多数情况,框架规定你的应用架构,书写规范,组织模式。 不像 jQuery ,你可以基于 jQuery 设计出任何的架构,也没有任何限制。)
  4. 回到你的问题 jQuery 有什么高级用法, 我觉得 jQuery 的作用在于帮助你对于 DOM 做了简化封装,能够高效的兼容的简单的基于css query 的方式查询 dom,并对 dom 做属性,样式,动画相关的任何处理。同时 jQuery 支持插件模式能够扩展出组件体系,也兼容了 ajax 相关的处理,同时支持 defered 异步话,这些功能支持已经是你需要处理前端的全部了,我觉得这些都挺高级的。学习这些方法的实现能够让你对 javascript 的理解更加深入。
  5. jQuery写大项目可以玩出什么样的花样么难道,这个问题的问法应该是有误的,因为 jQuery 原本就是一个工具,用它完整大型项目本质就是问 javascript 组织大型项目有哪些模式和架构, 结合 jQuery 的一些架构设计大多是 MVC 的方式, Backbone 应该算是比较优秀的框架了。至于其他的一些方式或者源码,你可以看看 http://todomvc.com/
  6. 最后是选 Angular 还是 jQuery, 我的观点是因项目而定,如果只是公司展示型网站,jQuery 绰绰有余,Angular 反而影响性能和效率。 但是对于复杂的数据和交互处理的应用,jQuery 的代码量会远比 Angular 大。 如果考虑兼容性需求,如 ie6789, 那可能 Angular 就是不可选的。
sky-admin commented 8 years ago

@6174 明白了,,感谢你的长篇回答,,很棒。。最近也在关注你写的React的教程,知乎上那篇。。我的困惑就是我觉得jQuery只是一些小工具为什么有人说jQuery框架并在产品里作为主要支撑,还以为是其实jQuery有更高级的用法。你们都这样表示了我觉得应该是我想多了。

nightire commented 8 years ago

@sky-admin 很抱歉昨天还在休假中,用手机打中文没有那么方便所以就简略概括了一下。@6174 已经把我想说的都说了,我再补充几句。

jQuery 不是框架,但它可以是框架的一部分,甚至是最重要的一部分(取决于这个框架的设计)。当大家谈话的 level 都是差不多的时候,有时也会直接用“jQuery 框架”来涵盖“以 jQuery 为主的框架设计”这样的意思。但如果直接拿 jQuery 和其他 well known 的框架,比如 Angular 来做横向对比的话,这种“缩略式”的说法就有问题了。

这就带出一个话题:究竟什么是框架?框架其实就是一套约定,如何组织代码,如何分层,层与层之间如何通信,如何隔离,使用框架的人如何编写代码等等一系列的约定共同组成了所谓的框架。最开始的时候并没有框架,但总有一些人具备高人一筹的架构设计能力,他们会吸收实践的经验不断精炼上述那些“点”,然后把它们梳理成型,最终形成一套解决方案,这就成了框架。而 jQuery 只是一个工具,一个库,你怎么用这个工具并没有任何约束,所以 jQuery 是一些特定问题场景的解决方法,而不是解决方案。

换句话说当我们谈到 jQuery 或某种框架的时候,我们考虑问题的规模和层次是不一样的,这就是为什么不能横向对比的原因。当然,任何项目都可以用这两种方式完成,只不过因为项目的规模和性质不同,分别使用二者给你带来的感受及其优缺点也是明显不同的。

这也是为什么我之前建议你把相同的项目做两遍,jQuery 和某种框架分别做一遍,用心体会两者的差别,多问问自己 why 而不只是 how。这样的事情多做几次你就会知道什么样的场景适合用什么,在这方面其实没有必要听从别人的选择,因为每一个人遇到的问题都不一样,如果你只会依赖锤子,那么所有的问题在你眼里就都成了钉子——这样的人只能是工匠,永远成不了气候。

那么为什么这些年会有那么多的框架涌现出来呢?这主要是因为 jQuery 顶多解决了 UI 编程上面一些常见的问题,但是随着 web 应用的规模和复杂性逐年上升,前端已不仅仅限于 UI 编程了(但 UI 编程还是非常重要的,并且是区别于服务端编程的最重要因素)。过去以 jQuery 为主的开发是“面向 DOM”的,所有的思路都是冲着 DOM 对象来的,开发者无法想象如果不考虑 DOM 对象的话怎么来做 web 应用;但现在人们逐渐意识到这种抽象层次还是太低了,不利于开发大型的 web 应用程序,于是逐渐转向了“面向数据”的 web 应用开发思路。所以你在使用现代的一些 web 前端框架的时候会很少需要考虑 DOM 了,jQuery 是以 DOM 操作为中心的,它不适合用于以数据为主要驱动的 web 应用开发,这就是为什么现代框架逐渐脱离 jQuery 的缘故。

然而还是那句话,不管是以 DOM 驱动还是以数据驱动,同样的一件事情两种方式都可以做到,只是根据事情本身的特点选用某种方式会利大于弊罢了。这不是能够一概而论的事情,因此必须要自己亲自动手,用心体会才能作出明智的选择。

记住,jQuery 不是框架,但它可以是框架的组成部分甚至是最重要的组成部分;jQuery 是以 DOM 为中心的设计思想,所以如果它是框架的主要组成部分,那么这种框架也应该是以 DOM 为中心的。现代的框架主要是以数据为中心来驱动应用开发的,两者各有利弊,但后者显然在更复杂的大规模 web 应用开发里要胜于前者。以上算是比较公认的共识,更具体的就等待你自己体会吧。

如果有兴趣的话,我在 segmentfault ruby-china 等社区都写过很多关于前端开发的东西,特别是一些回复里面都有涉及于此的回答,你不妨搜搜看吧。

sky-admin commented 8 years ago

@nightire thx~感谢两位大神~我现在开始对你们上面讨论的ember有点兴趣了……现在在使用yeoman、gulp、bower这套东西,我可以尝试入门ember么或者该学什么东西呢?

gaoryrt commented 8 years ago

@sky-admin vue上手快

sky-admin commented 8 years ago

@gaoryrt vue和angular的功能、用法什么的都是类似的吗?是不是只是因为是中国人做的所有文档完备上手快么?还是有什么别的好处么?

nightire commented 8 years ago

@sky-admin 如果你想尝试一下 ember,那么最开始需要知道两件事情:

  1. ember 有自己项目构建工具 ember-cli,实际上它已不仅仅是构建工具了,它是一整套围绕 ember 的工具集合(如果你用过 Rails,应该能体会到 rails 命令有多么强大,ember-cli 是类似的东西),在前端的领域里,ember-cli 代替了 yeoman + grunt + gulp + ... 等很多东西。我的建议是从 https://guides.emberjs.com/v2.6.0/ 开始,官方的文档非常详细,提供了一步一步的教程。
  2. 学习和使用 ember 是一个漫长的旅程,因为它是大而全的框架,抽象层次也很高,它不适合做那些简单的中小规模的应用(因为杀鸡焉用牛刀),没有一定的功力会很难驾驭,需要做好心理准备。但从个人角度来说,我认为学习 ember 绝对不会吃亏,花点心思在上面会让你的水平产生质的飞跃。

另外,vue.js 和 angular 有很多相似之处,事实上 vue.js 和很多框架都有相似之处,因为它吸收了很多前辈的优点;但从量级的角度来说,它依然算是轻量级的,适合相对简单的中小型应用(其实也算是覆盖了现实中的大部分场景)。要说有什么特别的好处:并没有。须知万变不离其宗,架构只是“如何写代码”的约定,但不会改变语言,也不会改变语言运行的环境。

sky-admin commented 8 years ago

@nightire 那个文档的翻译工作还在继续么?我可以参与么?顺便学学英语了……随便找个文件开始翻就行了么?

nightire commented 8 years ago

@6174 链接就在上面,你自己试试就知道了。

sky-admin commented 8 years ago

陈大大。。就业方面的问题也可以问么……?普通211大学野生程序猿一枚,本科出来应该考虑大公司还是小公司呢?目标薪酬可以考虑谈到多少呢?看实习生的工资都很低的样子啊……有没有实习公司推荐啥的……

6174 commented 8 years ago

@sky-admin

  1. 首先个人建议如果可以进大公司就先进大公司吧,对职业发展和个人成长都会有很大帮助
  2. 工资基本都是标配,除非是小公司会在这个问题上跟你砍,实习工资能够满足生活就行,没必要要求太高,而且如果是大公司也不会太低的
  3. 话说你在哪个城市?大几了?
sky-admin commented 8 years ago

@6174 青岛 大三,唔,这个暑假一完就是大四。就该找工作了……

TracerLee commented 8 years ago

请教一下,nodejs项目是如何部署的呢,怎么解决node_module的上传问题?

6174 commented 8 years ago

@TracerLee 假设是以一台 阿里云 ECS 服务器

  1. Nginx -> nodejs 作为基本的服务配置
  2. PM2 来管理 nodejs 的运行
  3. node_modules 难道不是直接 npm install 吗?
  4. 为了方便持续的维护,可以通过 git hook + 脚本的方式做自动部署
  5. 你也可以将项目打包成为 rpm 包,然后通过 rpm 的 hook 实现 nginx 、mysql、mongo 这些依赖的自动安装

google 一下有很多文章的,如:

  1. https://cnodejs.org/topic/53fec0d97c1e2284788983d6
  2. https://sfantasy.gitbooks.io/node-in-action/content/zh/express/deploy.html
LuckyMona commented 7 years ago

请教大大,可以分享一下学习新技术的过程方法吗?

比如我自己学AngularJS、ReactJS的过程,感觉自己总是会走很多弯路,有时候看教程上别人很顺利的过程,自己跟着做的时候总是出问题,卡住好久,比如我现在用webpack,然后使用webpack-dev-server,怎么搞都不能自动刷新,报错“getting ERROR - Incompatibile SockJS! Main site uses: “1.0.3”, the iframe: “1.0.0””,搜索也没有搜到有效的解决方法。卡了一个下午,跟着各种教程一遍遍检查配置。然后我现在打算按照你的精益学习React里面的webpack部分从头开始写一个demo,看行不行。

每到这种时候就觉得:啊,感觉别人都很快上手,自己老是遇到报错老是卡住,是不是自己智商不够用(ಥ_ಥ),什么时候才能变成大牛TㅅT

想问,学新技术的过程中,你也有遇到这种情况的时候吗?怎么解决?

我遇到这种情况一般都是靠各种搜索,看各种教程,我这样是因为我知识面太窄,还是debug技能不够,怎么提升?谢谢大大!!!

6174 commented 7 years ago

@LuckyMona sorry 这么晚才看到回复。

就你说的走弯路这一点儿,个人的评价是,感觉这个并不算是走弯路,所谓的走弯路是技术大方向上的事情,不如选择前端还是选择后端,而你遇到的更多的应该是 “填坑的路” 。

第一:想说的核心观点是这种“填坑的路” 走的越多其实越好,这些技术的细枝末节只有自己亲自体会过后才能真正掌握,如果遇到这些问题,唯一能够说明的是你还并不是很了解你所用的技术。这应该是个好消息才对,至少你知道了什么你不会,什么你不能解决。

第二:知识面和 debug 技术其实都是对技术的深度了解才能孰能生巧,没有什么捷径,但是每解决一个问题就是一种提升,所以这是心态的问题

第三:学习技术肯定是有一定的方法论的,但对应到每个人的情况可能都不同,得因人而异,我个人而言:

  1. 对所用技术相关的所有知识点画出一个 mindmap
  2. 然后对各个知识点进行系统性学习,如果有书籍肯定先看书,相比博客只是零散的知识
  3. 然后是实际使用技术, 遇到问题不断的解决
  4. 还有就是善于接受挑战吧。

希望对你有帮助 :- )

LuckyMona commented 7 years ago

谢谢大大回复!!好道理不怕晚'◡'

自己确实太心急了,而且现在自己也总结出一个规律,就是学新技术的时候遇到卡住的问题就先放放,过两天再看,往往就解决了

方法论很有启发,以前自己都是做项目要用新框架了就用到哪算哪,缺少系统性学习,今后会吸取这个好观点。

再次感谢大大忙中抽闲回复我,祝您一切顺意 :)

sisiea commented 7 years ago

你在LeanReact中的 《Redux TodoApp》 这篇文章,有没有对应的源码共享出来呀。有源码对照着看,感觉会更好,比如有个项目目录,会更加清晰。