产品经理从0到1：不懂技术也能愉快地与开发相处

时间：2021-01-27 09:35|来源：网络整理|编辑：采集侠|点击：次

这篇文的起因来自NEXT主办的keynote，主讲是墨刀的张元一。听完照着笔记梳理了下这次演讲的逻辑，基本可以给0基础的产品科普下技术常识。但邀请程序员来科普有两大问题：一是有些入门门槛，小白问题被生生忽略了（也可能是我太弱了T.T）；二是表述能力短板，后来我整理笔记时，发现大神的思路其实很清晰，演讲时硬是没听出来也是醉了T.T

感谢大神的分享，按照大神的分享框架，我又补充了一些资料，整理了这份尽量通俗易懂的普及文，供如我一样0技术基础的产品补课。

0 什么是前端？什么是后端？

其实这个部分，元一没有讲的特别通俗易懂（大概是高手不屑于普及这种小白问题T.T），我倒是在知乎上看到一个很赞的说法：在你手机（电脑）上跑的代码是前端，在机房里跑的代码是后端。……太形象了！

说得正经点：现在的网站都是MVC（Model View Controller）架构，就是业务模型(model)－用户界面(view)－控制器(controller)。这三个层次共同组建了一个网站。

MVC

业务模型（model）指的是数据和业务规则，就是在数据库中存储这些数据，并处理这些数据间的逻辑。

用户界面（view）就是呈现在用户眼前的这些界面，标题在什么位置，用什么字体，右下角要放个什么图片，之类的。

控制器（controller）处理用户交互，从界面（view）读取数据，向业务模型（model）发送数据。
前端工程师，一般负责VC的部分；后端工程师，则负责M的部分。但各个公司对前端和后端的工作划分并不完全一致，有些工作前后端都可以做。

1 前端

1.1 前端主要语言

1）Html：全称HyperText Markup Language，搭建网页的基础语言。文档写起来并不复杂，但是功能很强大，而且什么平台都能用，什么电脑都能用。

2）CSS：但是想网页更精美更酷炫，就需要用到CSS语言了。CSS能够对网页中对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。

3）Javascript：如果想要网页有更酷炫的交互，就要用到Javascript。它是通过嵌入到html中来实现自身功能，主要用于添加交互行为，可以在多平台下运行（如Windows、Linux、Mac、Android、iOS等）,还可以控制cookies，等等吧。

4）jQuery：这是一个时下最流行的Javascript库，主要面向查询（Query）。简单理解，就是javascript里面那些需要用一行行代码实现的体力活，在jQuery里面可以直接打包成模块，调取对应的接口使用，解放了开发者更多的时间。这种模块化的使用方式让开发者可以很快就开发出酷炫的页面。

5）Bootstrap：Bootstrap也是对Javascript进行封装，它在jQuery的基础上进行更加人性化的完善，其实就是更方便了。它有很多现成的组件，比如导航栏、下拉菜单、按钮，都定义好了样式和交互，直接成套拿来用就行了。

这么看上去，前端语言的内在关系就比较好理解了，举个栗子：好比一个互联网产品就是一个妹纸，html是搭建了她的身体，这个是基础（要先有个妹纸）；CSS是给她穿上漂亮衣服；Javascript是教会她化妆，先隔离后粉底，先眼线后睫毛；jQuery是把化妆进行整合，主要负责实现“一个步骤无瑕底妆”；Bootstrap也是对化妆进行整合，主要负责实现“一个步骤清纯大眼妆”和“一个步骤性感唇妆”，渐渐地，html搭建出来的妹纸就变成女神了……

（我怀疑这么写程序猿们会看不懂哈哈哈哈哈）

1.2 如何评估前端的能力？

此段完全copy元一的PPT,从初阶到高阶分别为：

•只会基本的HTML/CSS, 可以将设计图转化为HTML/CSS, 俗称切图

•懂一些Javascript，主要是使用现成的框架，jQuery，Bootstrap等等

•知道jQuery，Bootstrap的局限，在需要时可以直接编写原生JS/CSS

•对JS/CSS非常了解，热衷于利用浏览器的各种最新特性实现各种炫酷效果

•可以根据需要写出封装良好的JS类库或者开发框架

恩，非技术出身的CEO们可以心里有谱了……

2 后端

2.1 后端语言

1） C#/Java：这两者都是名声显赫的程序设计语言，功能强大且完善。但入门难度也比较高，复杂。