htmlcssjs手机移动网站分享连接一键分享写给产物司理们的技巧分享前端篇

为什么学习技能？我想上面这段话给予了非常好的阐明。

在当今时期，职能划分越来越风雅，但你仍旧可以看到不同行业、领域、职业都密不可分，他们相互领悟和渗透。
设计和技能亦是如此，产品经理和程序员亦是如此。

不难创造，成功的产品经理有一个共性，那便是在精通设计与用户体验的根本上，精通技能或者如何利用技能。
前者如张小龙，后者如乔布斯。

htmlcssjs手机移动网站分享连接一键分享写给产物司理们的技巧分享前端篇 GraphQL

（图片来自网络侵删）

这并非有时，而是由于技能和设计原来便是一体的：设计利用当下的技能来办理问题，因此设计中就包含了对技能的考量与利用。

你可能会说，作为一个实行层的产品，并不须要理解这些宏不雅观的问题。
你可能还会说，在技能如此成熟确当下，产品可以尽情发挥想象或者直接套用现有设计模式。

可是事实表明，在微不雅观层面设计和技能达成共识可以显著提升互助质量和效率，这也正是各个平台（不管是安卓、iOS，还是小程序、网站）推出设计/开拓规范的缘故原由；另一方面，只有深谙设计模式及其背后的技能根本，才能冲破模式、迸发创意。

在学习技能的同时，我刚好在看交互设计精髓这本书。
书中提到了设计可以分为对内容、形态、行为的设计。
我惊喜地创造这些设计领域刚好可以对应一些技能措辞或实现方案，例如HTML、CSS、JS，又例如MVC（一种开拓模式，下篇文章会提及）。

以是对产品经理而言，学习技能可以帮助你更好地理解产品设计，更好地实行产品事情，更加顺畅地与开拓职员互助。

最初我学习技能的动机来自于想写一份好的PRD（我的一篇专栏文章讲述了这个主题，详见文章底部的参考资料），为此，我须要知道前端、后端分别想从需求文档中获取哪些信息以及他们会如何利用这些信息进行开拓。

由此出发，我看了三本书，分别先容了HTML和CSS、JavaScript、Python这些编程措辞在前端开拓、后端开拓中的运用。

在这里，大略总结一下这些书中提及的技能事理，并结合自己的思考和实践指出这些技能事理在产品事情中的运用，希望可以对自己以及他人有所帮助。

由于内容较多，这篇文章将重点谈论前端部分，涉及HTML和CSS、JavaScript的内容；关于后真个内容，将不才一篇文章等分享。

下面将分别先容一下HTML、CSS、JavaScript在web前端开拓中的运用。

一、HTML1.1 简介

HTML翻译作“超文本标记措辞”，和现在广为利用的markdown一样，作为一种标记措辞，HTML通过一套既定的语法来标记文本或者富文本内容，从而为这些内容划定构造。

这些HTML格式的文件常日存储在做事器上，浏览器通过互联网向做事器要求这些页面资源，然后解析并呈现出用户直接看到的页面。

1.2 HTML元素

在浏览器中打开任意web页面，并检讨其HTML元素，都可以看到其大体的构造：

<head>元素存放网页的基本信息，<body>元素里的内容便是用户将在浏览器看到的东西，此外还有许许多多的元素（如：<h>、<p>、<a>、<img>、<div>、<li>、<div>）嵌套起来，共同构建了网页的构造。

这些元素一样平常由开始标记、结束标记、内容、属性等部分构成，个中“属性”可以帮助对这些元素进行更加详细的描述。

举例解释：标题元素的写法如下，<h1></h1>为开始和结束标记，中间包围的即为标题元素的内容。

<h1>这里是标题</h1>

表单元素的常见写法如下，个中<form>为开始标记，有action 和method两个属性，</form>为结束标记，省略号的位置放置表单元素包围的所有内容和输入控件。

1.3 如何定位HTML页面

在同一网站内部，可以通过在<a>元素中利用相对资源路径链接到一个新的页面。

在网站之外，则可以利用URL（统一资源定位符，用文件地址来标识web上的任何资源），通过绝对路径直接向做事器要求页面资源。

URL的构造常日如下：通信协议（http、https、file等）、做事器名（常见的www）、域名（做事器IP地址的简便记法）、资源的绝对路径、随URL通报的参数。

1.4 产品事情中的运用

我们设计出一个页面，页面上每一个元素（包括控件、信息、图片）都由HTML元素（例如<input>、<p>、<img>）来定义或者说实现。

这些页面控件、信息、图片的属性同样可以由HTML元素属性来实现，例如通过设置placeholder属性值，可以为输入框加入提示文案，通过设置draggable属性，让元素可以拖动。

在页面构造层面理解设计与技能的关联，可以帮助从技能的角度撰写产品方案。

（1）一方面，知道了技能会把页面构造拆解为元素及其属性，我们在写文档时，也应该以这种思路拆解并描述页面，写清楚页面有哪些信息，哪些输入控件，哪些显示控件，这些控件的属性是否须要自定义，还是直策应用浏览器或操作系统的默认样式。

（2）另一方面，从技能角度理解元素及其基本属性，就可以减少产品方案中对细节描述的遗漏。

二、CSS2.1 简介

CSS翻译作“层叠样式表”，和HTML一样，CSS也是我们用来创建网页的措辞，HTML定义页面的内容和构造，而CSS定义了web页面的样式和表现。

详细来说，通过在HTML的<link>或<style>中链接到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上每每须要定义不同的样式，对此有很多技能实现方案，产品经理应对样式适配有基本认知，才能与技能共同商定适配方案。

三、JavaScript3.1 简介

前面提到，利用HTML标记和CSS可以帮助搭建web页面，而JavaScript的利用，可以为这些页面增加行为和功能（比如对用户行为作出相应、处理事宜、更新页面、与做事端通信），从而成为真正意义上的web运用。

HTML5是HTML的最新版本，但实际上当我们评论辩论HTML5时，不仅仅指代标记，而是HTML标记、CSS样式、JavaScript脚本这些技能的结合，这些技能共同帮助构件web运用。

通过在代码中引用JavaScript文件或者直接将脚本放在<script>元素中，就可以在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是一种利用<script>标记获取数据的方法，通过在要求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

上面分别提及在内容、形态、行为三个设计领域，技能在产品事情中的详细运用。
在更加抽象的层面，技能的学习让我更加理解互联网产品的实质–信息。
在团队合营、项目流程上，技能与设计的结合同样具有代价：