写给产品经理们的技术分享——前端篇
作为一个产品经理，学习并掌握基础的技术知识是非常重要的。而本篇文章就重点讨论前端部分，讲一讲HTML和CSS、JavaScript的知识要点。
为什么学习技术？我想上面这段话给予了非常好的解释。
在当今时代，职能划分越来越精细，但你仍然可以看到不同行业、领域、职业都密不可分，他们互相融合和渗透。设计和技术亦是如此，产品经理和程序员亦是如此。
不难发现，成功的产品经理有一个共性，那就是在精通设计与使用者体验的基础上，精通技术或者如何运用技术。前者如张小龙，后者如乔布斯。
这并非偶然，而是因为技术和设计原本就是一体的：设计使用当下的技术来解决问题，因此设计中就包含了对技术的考量与使用。
你可能会说，作为一个执行层的产品，并不需要了解这些宏观的问题。你可能还会说，在技术如此成熟的当下，产品可以尽情发挥想象或者直接套用现有设计模式。
可是事实表明，在微观层面设计和技术达成共识可以显著提升合作质量和效率，这也正是各个平台（不管是安卓、iOS，还是小程式、网站）推出设计/开发规范的原因；另一方面，只有深谙设计模式及其背后的技术基础，才能打破模式、迸发创意。
在学习技术的同时，我刚好在看互动设计精髓这本书。书中提到了设计可以分为对内容、形态、行为的设计。我惊喜地发现这些设计领域刚好可以对应一些技术语言或实现方案，例如HTML、CSS、JS，又例如MVC（一种开发模式，下篇文章会提及）。
所以对产品经理而言，学习技术可以帮助你更好地理解产品设计，更好地执行产品工作，更加顺畅地与开发人员合作。
最初我学习技术的动机来自于想写一份好的PRD（我的一篇专栏文章讲述了这个主题，详见文章底部的参考资料），为此，我需要知道前端、后端分别想从需求文件中获取哪些资讯以及他们会如何利用这些资讯进行开发。
由此出发，我看了三本书，分别介绍了HTML和CSS、JavaScript、Python这些程式语言在前端开发、后端开发中的应用。
在这里，简单总结一下这些书中提及的技术原理，并结合自己的思考和实践指出这些技术原理在产品工作中的应用，希望可以对自己以及他人有所帮助。
由于内容较多，这篇文章将重点讨论前端部分，涉及HTML和CSS、JavaScript的内容；关于后端的内容，将在下一篇文章中分享。
下面将分别介绍一下HTML、CSS、JavaScript在web前端开发中的应用。
一、HTML
1.1 简介HTML翻译作“超文字标记语言”，和现在广为使用的markdown一样，作为一种标记语言，HTML通过一套既定的语法来标记文字或者富文字内容，从而为这些内容划定结构。这些HTML格式的档案通常储存在服务器上，浏览器通过互联网向服务器请求这些页面资源，然后解析并呈现出使用者直接看到的页面。
1.2 HTML元素在浏览器中开启任意web页面，并检查其HTML元素，都可以看到其大体的结构：
元素存放网页的基本资讯，元素里的内容就是使用者将在浏览器看到的东西，此外还有许许多多的元素（如：、、、、、、）巢状起来，共同构建了网页的结构。这些元素一般由开始标记、结束标记、内容、属性等部分构成，其中“属性”可以帮助对这些元素进行更加具体的描述。
举例说明：标题元素的写法如下，
为开始和结束标记，中间包围的即为标题元素的内容。这里是标题
表单元素的常见写法如下，其中为开始标记，有action 和method两个属性，为结束标记，省略号的位置放置表单元素包围的所有内容和输入控制元件。 ...
1.3 如何定位HTML页面在同一网站内部，可以通过在元素中使用相对资源路径连结到一个新的页面。
在网站之外，则可以使用URL（统一资源定位符，用档案地址来标识web上的任何资源），通过绝对路径直接向服务器请求页面资源。
URL的结构通常如下：通讯协议（http、https、file等）、服务器名（常见的www）、域名（服务器IP地址的简便记法）、资源的绝对路径、随URL传递的引数。
1.4 产品工作中的应用我们设计出一个页面，页面上每一个元素（包括控制元件、资讯、图片）都由HTML元素（例如、
、）来定义或者说实现。
这些页面控制元件、资讯、图片的属性同样可以由HTML元素属性来实现，例如通过设定placeholder属性值，可以为输入框加入提示文案，通过设定draggable属性，让元素可以拖动。
在页面结构层面了解设计与技术的关联，可以帮助从技术的角度撰写产品方案。
（1）一方面，知道了技术会把页面结构拆解为元素及其属性，我们在写文件时，也应当以这种思路拆解并描述页面，写清楚页面有哪些资讯，哪些输入控制元件，哪些显示控制元件，这些控制元件的属性是否需要自定义，还是直接使用浏览器或操作系统的预设样式。
（2）另一方面，从技术角度了解元素及其基本属性，就可以减少产品方案中对细节描述的遗漏。
二、CSS
2.1 简介CSS翻译作“层叠样式表”，和HTML一样，CSS也是我们用来建立网页的语言，HTML定义页面的内容和结构，而CSS定义了web页面的样式和表现。具体来说，通过在HTML的或中连结到CSS样式表，CSS就可以通过其众多的样式属性，控制HTML中元素的外观表现。
2.2 CSS样式属性CSS的样式属性，例如color、border、font-style等，可以控制HTML元素的字型颜色、边框、字型样式等等。此外，CSS将每个HTML元素看作一个盒子（这也就是“盒模型”），以控制其内外边距、边框等。
还可以使用CSS灵活的对页面进行布局：
（1）流体布局，扩充套件浏览器视窗时，页面中的内容会根据一定规则自动扩充套件以适应页面
（2）冻结布局，通过设定页面宽度，所有页面元素都将固定在页面上，不随浏览器视窗大小而改变布局
（3）凝胶布局，锁定页面内容区域的宽度，但外边距会根据视窗大小进行扩充套件收缩，从而使得页面在浏览器中居中
（4）绝对定位，使得元素相对于页面固定
（5）固定定位，使元素相对于浏览器视窗固定不动
（6）相对定位
（7）表格显示
（8）浮动布局
2.3 CSS适配CSS可以灵活适配，可以为一个HTML页面设定多个样式表（或者在CSS中设定@media规则），用于不同的场景展示、匹配不同的装置或者适应不同的视窗宽度。
2.4 产品工作中的应用（1）在详细的产品设计实现方案中，不仅要定义页面具有哪些元素，也要定义这些元素的样式、外观、动效等。
在技术实现上，这是两个不同的层面，由不同的语言来实现；因而在文件写作中，也应该将元素与其样式区分开来进行描述，而不是将所有说明混杂在一起（虽然这个工作往往需要和设计进行配合）。
例如在描述按钮时，不仅要指明按钮元素的基本属性（例如按钮文字、按钮类别），也应该指出按钮在不同状态的不同样式。
（2）在宏观层面，随着装置形态的多样化，样式适配也变成了一个很大的主题，也应是产品设计中应该考虑的重要方面。
以网站设计而言，同样的内容元素，在手机和PC上往往需要定义不同的样式，对此有很多技术实现方案，产品经理应对样式适配有基本认知，才能与技术共同商定适配方案。
三、JavaScript
3.1 简介前面提到，使用HTML标记和CSS可以帮助搭建web页面，而JavaScript的使用，可以为这些页面增加行为和功能（比如对使用者行为作出响应、处理事件、更新页面、与服务端通讯），从而成为真正意义上的web应用。HTML5是HTML的最新版本，但实际上当我们谈论HTML5时，不仅仅指代标记，而是HTML标记、CSS样式、JavaScript指令码这些技术的结合，这些技术共同帮助构件web应用。
通过在程式码中引用JavaScript档案或者直接将指令码放在元素中，就可以在web页面中增加JavaScript。
3.2 JavaScript的工作方式：通过DOM对页面进行更新浏览器在载入页面时，对于HTML中每一个元素，会建立一个表示该元素的物件，把它与所有其他元素一起放在一个类似树的结构中，这个树即为DOM（文件物件模型 Document Object Model），DOM是浏览器对于页面结构的内部表示。
JavaScript可以通过DOM对页面元素进行访问、修改、增删。例如，可以使用document.getElementById在DOM中查询元素，使用元素的innderHTML属性修改其内容，然后浏览器会近乎实时的对DOM以及页面进行更新。
3.3 处理事件浏览器在显示页面时，会有许多事件发生，例如按钮点选事件、资料到达事件、时间到期事件等，使用JavaScript编写事件处理程式，可以对这些事件进行处理。
以表单的按钮点选事件为例进行说明：使用者在输入框输入资讯，点选按钮提交资讯后，可以在当前页检视已经提交的资讯。
实现思路如下：首先通过DOM获取按钮元素，并为按钮的onclick属性设定一个处理程式。
该处理程式需要通过DOM访问输入元素，并通过输入元素的value属性获取使用者输入值，最后再通过DOM增加到页面中。这样在使用者点选按钮时，就会执行该处理程式，获取使用者输入并增加到页面中，以此实现使用者与系统的互动。
3.4 JavaScript API通过使用JavaScript API（API即应用程序设计界面，提供一组物件、方法和属性，可以用来访问这些技术的所有功能；物件可以理解为是属性的集合）可以为页面增加更多新的功能，如视讯播放、本地储存、地理定位等。
以地理定位为例，通过呼叫地理定位API，使用其getCurrentPosition方法可以获取当前位置资讯（浏览器可以通过IP定位、GPS定位等方式获取位置资讯）并进行处理和显示；使用watchPosition方法可以对位置更新进行实时监控和报告；使用clearWatch以停止监视位置。
3.5 前后端通讯（1）Ajax（XMLHttpRequest）
前端（比如浏览器）向服务器请求页面或者资料资源，服务端接受请求并执行服务端程式，捕获程式的输出作为响应发回前端，前端监测到资料到达后，再执行处理程式对这些资料进行处理，最终更新DOM和页面。
这种获取资料的模式称为Ajax，在应用中可以使用这种方式更新内容，而无需重新载入页面。
那么如何使用JavaScript传送请求？
首先建立一个请求物件，指明请求方法和资源地址，同时提供一个处理程式，然后发出请求，等待资料到达。资料到达时，就会呼叫这个处理程式，在请求物件的responseText属性中获取传回的资料并进行处理。
浏览器主要使用两种方法传送请求：GET和POST
使用POST和GET方法都可以向服务端传送请求，不过采用了不同的方式。POST会打包要传递到服务端的资料，并在后台把他们传送到服务器；GET也会打包资料，但会把这些资料追加到URL的最后，然后向服务器传送请求。
如果要传递的资料应当是私有的，或者资料很多，就应当使用POST；如果返回的页面要支援新增书签，就需要使用GET方法。
（2）JSONP
除了提供HTML和JavaScript的服务器外，浏览器不允许从其他不同的服务器获取资料，这是浏览器的安全策略。如果页面和要请求的资料同在一个服务器上，可以使用Ajax请求资料，如果页面和要请求的资料不在同一服务器上，则可以使用JSONP请求资料。
JSONP是一种使用标记获取资料的方法，通过在请求URL后指定回拨函式，将返回的资料包装在一个函式呼叫中进行处理。
例如，我们的网站从微博获取使用者最近动态，就是一个跨域（服务器）请求资料的应用。
（3）Web Socket
Ajax和JSONP都使用了一个基于HTTP的请求/响应模型。也就是说，每次需要从服务端获取资源时，都要使用浏览器作出请求得到相关页面和资料。
对于一些资料更新比较频繁的应用，浏览器需要不断的传送请求询问服务端是否有新资料，在这种应用场景下，Web Socket或许是一个更佳的通讯方案。
Web Socket是一个新增的API，允许与一个服务器的连线保持开启，这样在有新资料时，服务器就会主动把资料发给前端，就像浏览器与服务器之间的一个接通的电话线。
Web Socket提供了实时互动通讯的能力，允许服务器主动传送资讯给客户端，是一种区别于HTTP的全新双向资料流协议。
3.6 本地储存上面提及页面从服务器获取资料，除此之外，还可以使用本地储存获取资料，从而减少与服务端的通讯，打造更好的使用者体验与更广泛的应用场景。
（1）浏览器cookie
服务器随响应传送一个cookie给浏览器，cookie中以键值对形式储存一些资讯。浏览器在本地储存cookie，下次发出请求时会将cookie发回服务器。cookie是按域储存的，而且只能传送给这个域，因而不同域之间的cookie无法互相访问。使用cookie可以实现个性化的体验、维护游戏状态、储存使用者资料等等。
（2）web储存/local storage（本地储存）、session storage（会话储存）
使用JS的 web storage API，可以在浏览器中更好的储存资料。
每个浏览器都有一些本地储存空间（每个域都有超过5M的空间，储存在一个域的资料对另一个域是不可见的），使用setItem方法可以在localstorage中储存一个键值对，使用getItem方法可以从本地储存中获取某个键对应的值，使用remove方法可以删除本地储存中某一键对应的资料项。
session storage与local storage非常相似，唯一的区别在于：在使用者与浏览器会话期间，session storage可以在本地储存资讯，一旦会话结束（即关闭浏览器视窗），这些资讯将删除；而local storage将永久储存资讯，除非使用者手动删除快取。
3.7 web工作执行绪JavaScript是单执行绪的，如果要执行复杂的运算，可以会花费太多时间以至于无法及时作出页面响应。这时可以使用web工作执行绪，他在一个单独的执行绪处理耗时的任务，所以主程式码可以继续执行以提高页面的响应性。每个工作执行绪在他自己的执行绪中执行，如果你的计算机有一个多核处理器，工作执行绪会并行执行，这回提高运算速度。
下面简单介绍一下web工作执行绪的工作方式。
在主程式码中使用建构函式建立一个或者多个工作执行绪物件，并指定工作执行绪要执行的JavaScript档案。
主程式码和工作执行绪程式码通过讯息通讯，使用postmessage传送资讯，使用onmessage接收资讯。
主程式码通过传送一个讯息让工作执行绪开始工作，即执行其JavaScript档案；工作执行绪完成工作后，会发回讯息，并传入其运算结果。主程式码得到这些结果，执行相应的处理程式，将结果展现在页面中。
3.8 产品工作中的应用软件产品的设计可以分为内容、形态、行为三个领域。前两者是HTML和CSS的主要工作，而软件行为的设计就是JS（JavaScript）的主要工作。
在内容层面，通过JS进行前后端通讯，可以从服务端获取最新的资料并动态的为页面增加内容。
因而在产品设计中，我们应该考虑页面资讯的来源，是写死在前端，还是请求服务端资料界面，是否需要搭建相应的管理后台。通过JS进行前后端通讯，还可以将使用者输入等资讯上报服务端并进行储存，这亦是产品方案中应该考虑的地方。
在功能或行为层面，使用JS进行前后端通讯，一些功能入口也可以通过服务端进行灵活的配置，例如为不同的使用者角色提供不同的功能入口或功能限制。
页面对使用者的响应也都是通过JS来实现，例如对表单输入进行校验并反馈，这些逻辑判断和运算都是通过JS完成。对此，产品经理往往需要通过流程图、状态图等，进行逻辑与运算规则的说明。
四、one more thing
上面分别提及在内容、形态、行为三个设计领域，技术在产品工作中的具体应用。在更加抽象的层面，技术的学习让我更加了解互联网产品的本质–资讯。在团队配合、专案流程上，技术与设计的结合同样具有价值：（1）帮助从技术的角度初步评估产品方案，用于评估方案的成本和价效比，排列优先级和进行版本规划
（2）与技术团队更高效的配合，随着技术发展和不断成熟，有越来越多的工具可以帮助快速开发，懂得技术的开发原理和开发手段，才可以采用更加灵活的方式与技术配合。
总结
本文主要探讨了：产品经理学习技术的价值前端开发的基本知识和原理如何借助前端开发的技术知识更好的进行产品方案设计下一次的分享中将会对后端，以及前后端互动的技术知识和应用进行总结，感兴趣的小伙伴可以关注我或者我的专栏。
写作本文着实花了不少时间，一方面在于其中涉及很多技术语言；但更主要的原因在于写作过程中涉及到技术思维、设计思维的来回切换和融合，自认为本文在这一方面仍然有待提高。
学习技术给我带来很多层面的收获，让我得以层层深入，庖丁解牛似的看清产品的内部构造；也让我可以从不同角度看待技术、设计、产品在软件产业不同阶段中扮演的角色，对团队组织构成有了新的理解。
最后以一句我的名言结尾：对于设计的追问会带你走向技术，对于技术的追问会带你走向设计。
参考资料
《Head First HTML与CSS》《Head First HTML5 Programming》
写了30+产品需求文件后，我对PRD有了新的认知
WebSocket简介及应用例项
本文由 @lemon 原创释出于人人都是产品经理。未经许可，禁止转载
题图来自Unsplash，基于CC0协议
