整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Axure RP 8 教程 – 查看原型

Axure RP 8 教程 – 查看原型

xure小白的福利又来了,本教程主要讲述查看原型的一系列基础操作以及相关设置。

希望大家边学边操作,学习效果更佳哦。

Axure RP 8 教程 – 查看原型

1.快速预览查看原型

快速原型的快捷键为“F5”。或者,单击快捷键功能中的预览图标进行预览。导航菜单“发布”-“预 览选项”中进行预览设置。

2.生成HTML查看原型。

生成原型的快捷键为“F8”。或者,单击快捷键功能中生成图标。还可以通过导航菜单“发布”-“生成原型文件”中进行生成。

3.生成部分原型界面

发布原型时,如果不需要将所有页面生成或者发布,可以在生成HTML的设置中打开“页面”的设置,取消“生成所有页面”的勾选,则可以设置生成指定的页面。注意,子级页面无法单独发布,勾选子级页面时会自动勾选父级页面。如果需要单独发布子级页面,需要在页面管理面板将子级页面的级别调整到一级页面。

4.为原型添加标志

在生成HTML的设置中有“标志”的设置,可以为原型添加图片标识或者文字标题。原型发布后会显示在工具栏的页面面板中。

5.发布原型到AxShare

发布原型到AxShare是将做好的原型发布到Axure官方提供的空间中,通过自动生成的网址进行访问。发布到AxShare的快捷键为“F6”。发布到AxShare需要注册相关账号,网址为:http://share.axure.com/

6.移动设备设置

制作移动设备原型需要遵循规范将原型制作成标准尺寸。移动设备原型尺寸计算工具:http://www.iaxure.com/share/yxcc/ (个别移动设备可能会有出入)。

除了制作标准原型尺寸,还需要在生成的HTML文件配置中,进行“移动设备”的设置,让生成的HTMl文件“包含视图接口标记”才可以正常显示。

7.web字体设置

当原型使用一些特殊字体时,在没有安装该字体的设备上将无法正常显示。web字体可以较好的解决这个问题。

方法一

需要网络以及在线CSS文件支持,以FontAwesome字体为例。在web字体设置中,单击“+”添加新的配置,勾选“链接到CSS文件”,将该字体官方网站提供的“.CSS”文件地址填入到超链接中即可。这样只要浏览原型时有网络支持,即可正常显示字体。

方法二

支持在线字体和本地字体,以FontAwesome字体为例,图中的src是在线字体代码。

如果是本地字体代码应该为: font-family:FontAwesome

src:url(’fontawesome-webfont.ttf’)format(‘true-type’)

注:使用本地字体需要将字体文件“.ttf”复制到生成的HTML文件中。

本文由 @Arthur 原创发布于人人都是产品经理。未经许可,禁止转载。

avascript面试重点


什么是执行上下文

执行上下文就是当前 JavaScript 代码被解析和执行时所在环境的抽象概念, JavaScript 中运行任何的代码都是在执行上下文中运行

这是因为当函数执行的时候,首先会形成一个新的私有的作用域,然后依次按照如下的步骤执行

  • 如果有形参,先给形参赋值
  • 进行私有作用域中的预解释,函数声明优先级比变量声明高,最后后者会被前者覆盖,但是可以重新赋值
  • 私有作用域中的代码从上到下执行

闭包是什么

个人理解为,闭包就是函数中的函数,里面的函数可以访问外面函数的变量,外面的变量是这个内部函数的一部分

闭包的作用

  • 使用闭包可以访问函数中的变量
  • 可以长期保存在内存中,声明周期比较长
  • 注意:闭包不能乱用,否则会导致内存泄露,影响网页的性能。闭包使用完之后,要立即释放资源,将引用的变量指向null

闭包的主要应用

  • 函数作为参数传递
  • 函数作为返回值

异步和单线程

JS 需要异步的根本原因是 JS 是单线程运行的,即在同一时间只能做一件事,不能“一心二用”。为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。

一个 Ajax 请求由于网络比较慢,请求需要 5 秒钟。如果是同步,这 5 秒钟页面就卡死在这里啥也干不了了。异步的话,就好很多了,5 秒等待就等待了,其他事情不耽误做,至于那 5 秒钟等待是网速太慢,不是因为 JS 的原因

前端使用异步的场景

  • setTimeout setInterval
  • 网络请求ajax,动态加载
  • 事件绑定

原型和原型链

原型:在JavaScript中原型是一个prototype对象,用于表示类型之间的关系。

原型链:JavaScript万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过prototype对象指向父类对象,直到指向Object对象为止,这样就形成了一个原型指向的链条,专业术语称之为原型链。

 var Person=function(){
 			this.name='匿名',
 			this.age=18 
 		}
 		var Student=function(){}
 Student.prototype=new Person();
 var s1=new Student();
 

DOM操作

  • 新增节点和移动节点
var div1=document.getElementById('div1');
var p1=document.creatElement('p'); //添加新节点
p1.innerHTML="this is p1"; 
div1.appendChild(p1); //添加新创建的元素
var p2=document.getElementById('p2');
div1.appendChild(p2); //移动元素,这里的p2不加引号
  • 获取父元素
var div1=document.getElementById('div1');
var par=div1.parentElement;
  • 获取子元素
var p2=document.getElementById('p2');
var child=p2.childNodes; //返回子元素的标签数组

DOM时间模型和事件流

DOM事件模型氛围捕获和冒泡。 一个事件发生后,会在子元素和父元素之间传播,这种传播分成三个阶段

  1. 捕获阶段 事件从window对象自上而下向目标节点传播的阶段
  2. 目标阶段 真正的目标节点正在处理事件的阶段
  3. 冒泡阶段 事件从目标节点自下而上向window对象传播的阶段

捕获是从上到下,事件先从window对象,然后再到document对象,然后是html标签,(通过document.documentElement获取html标签),然后是body标签,(通过document.body获取body标签),然后按照普通的html结构一层一层往下传,最后到达目标元素

阻止冒泡

ev.stopPropagation()

事件代理(事件委托)

由于事件会在冒泡的阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件,这种方式叫做事件的代理

我们设定一种场景,一个div包含若干个a,而且还能继续增加,那如何快捷方便的为所有a绑定事件呢

如果给每个a标签都绑定一个事件,那对内存的消耗是非常巨大的,借助事件代理,我们只需要给父容器div绑定方法即可,

这样不管是点击的哪一个后代元素,都会根据冒泡传播的传递机制,把父容器的click事件触发,然后把对应的方法执行,根据事件源,

我们可以知道点击的是谁,从而完成不同的事情

a标签的各种属性都可以获取到,取需要的数据就可以了

使用代理的优点

  • 代码简洁
  • 减少浏览器的内存占用

BOM操作

BOM(浏览器对象模型)是浏览器本身的一些信息的设置和获取,例如获取浏览器的宽度、高度、设置让浏览器跳转哪个地址

  1. window.screen 对象,包含有关屏幕的信息
  2. window.location对象,用户获取当前地址的url,并把浏览器定向到新的页面
  3. window.history对象,浏览历史的前进后退
  4. window.navigator对象,常常用来获取浏览器信息,是否移动端访问

获取屏幕的宽高

window.width
window.height

获取网址,协议,path,参数,hash等

// 例如当前网址是 https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.href) // https://juejin.im/timeline/frontend?a=10&b=10#some
console.log(location.protocol) // https:
consloe.log(location.pathname) //timeline/frontend
consloe.log(location.search) //?a=10&b=10
consloe.log(location.hash) // #some

浏览器的前进后退

history.back()
history.forward()

获取浏览器的特性,然后识别客户端,例如判断是不是chrom浏览器

SpringBoot Thymeleaf模板

原理:服务端渲染、模板变量替换。与 Spring Boot,MVC方言完美结合。


优势

  • 传统J2E使用JSP方式开发,但 Spring Boot对JSP支持不好。JSP规范与Servlet规范紧密耦合,使用JSP需要唤起servlet进程。
  • Thymeleaf支持HTML原型,可静态使用。

劣势

  • 传统模板页面基于服务端,需要唤起servlet容器,走springmvc全套流程。
  • 模板渲染IO操作
  • 较难缓存。用户请求在访问到springboot server时,还会经过nginx,如果使用模板渲染,很难在nignx上做缓存。

2 动静请求分离

动静分离的设计原理:区分动静态请求。

  • 动态请求:每次都从服务端获取数据请求。
  • 静态请求:不必每次从服务端获取的页面展示请求。

优势

  • 架构分离:分层优化
  • 缓存策略分离:例如前端做nginx、浏览器、cdn等缓存。
  • 研发框架分离:提高研发效率。

静态资源服务器,例如nignx;动态请求服务器,例如Tomcat;前后端采用Ajax等前端异步化交互技术发起请求,获取数据,填充静态页面。

实现技术

Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

Nginx可以用作动态请求反向代理,也可以用作静态请求使用html resources。

3 静态请求缓存效率化

主要是CDN分发技术和Nginx proxy cache文件缓存。

CDN是内容分发网络,具有高性能、高可用、高扩展性的优点。

  • CDN是带有缓存性质的网络节点。即CDN是web服务器,提供了静态资源缓存机制。
  • 分发能力,请求分发到最近的节点。
  • 具有负载均衡能力,没有单点问题。
  • 需要专门运营维护CDN网络。

未使用CDN技术

使用CDN技术缓存静态资源。

客户端发起请求到DNS,查询ip地址,根据CNAME返回CDN管控节点域名,实现DNS解析权移交。管控节点根据请求ip地址分发到最近的CDN节点(负载均衡与分发)。如果在CDN节点命中缓存,直接返回,否则请求静态资源并备份。

运营厂商CDN实现原理中,HTTP 缓存头起到了重要作用。

Http缓存头 cache-ctrol

private:客户端可以缓存.

public:客户端和代理服务器都可以缓存。

max-age=xxx:缓存的内容将在XXX秒后失效。

no- cache:强制向服务端再验证一次,判断是否生效。

no-store:不缓存请求的任何返回内容。

有效性判断(验证时带上如下参数)

ETag:资源唯一标识

If-None-Match:客户端发送的匹配Etag标识符

Last- modified:资源最后被修改的时间

If- Modified- Since:客户端发送的匹配资源最后修改时间的标识符

4 动态请求缓存

4.1 动态请求前置缓存

前置缓存的使用,提高查询速度,减少数据库访问量。

  • Redis集中式缓存
  • 本地缓存:Tomcat缓存

包括主动失效、被动失效,需要解决缓存击穿、降级等问题。

4.2 使用Nginx proxy cache


Nginx Lua脚本编程定制化:

在nginx生命周期中,Lua通过协程机制在某些环节实现钩子机制。例如master进程创建worker进程时,运行初始化脚本;检测到某个url请求时,直接调用Redis返回response,从而省掉springboot webmvc流程。

Nginx proxy cache使用较少,因为再快的文件读写速度也比不上内存的读写速度。

4.3 Nginx shared dic 本地缓存

原理:nginx服务器的内存缓存,所有worker进程共享,通过lua操作。



lua脚本

获取缓存空间,从中获取list缓存。如果为空则转发请求,获取响应数据并缓存。

5 全页面静态化技术

原理:服务端通过类似爬虫的技术直接完成动态请求加载完成后的静态页面,将HTML、CSS、JS资源全部加载完后的页面生成后部署到CDN上。

我们访问页面,发起静态请求从CDN中获取html资源文件,发起动态请求访问nginx、tomcat获取响应数据,然后在客户端渲染页面。需要三步操作。

如果将渲染好的页面直接放到CDN上,则客户端可以直接获取。

优势:无需加载、无需动态请求、可全部CDN化

实现:

  • 类似爬虫的技术
  • 无头浏览器:类似浏览器,加载HTML文件,运行JavaScript,执行Ajax请求,获取数据,填充到DOM,输出静态资源文件。

HtmlUnit

Httpclient无法搞定动态请求,HtmlUnit可用于爬虫,测试自动化工具等

HtmlUnit是一个无界面浏览器Java程序。为HTML文档建模,提供了调用页面、填写表单、单击链接等操作的APl。提供了对 Javascript的支持,甚至可以使用相当复杂的Ajax库,根据配置的不同模拟 Chrome、 Firefox等浏览器。

上图.test.html书写错误

来源:https://www.cnblogs.com/dtyy/p/15531799.html