xure小白的福利又来了,本教程主要讲述查看原型的一系列基础操作以及相关设置。
希望大家边学边操作,学习效果更佳哦。
快速原型的快捷键为“F5”。或者,单击快捷键功能中的预览图标进行预览。导航菜单“发布”-“预 览选项”中进行预览设置。
生成原型的快捷键为“F8”。或者,单击快捷键功能中生成图标。还可以通过导航菜单“发布”-“生成原型文件”中进行生成。
发布原型时,如果不需要将所有页面生成或者发布,可以在生成HTML的设置中打开“页面”的设置,取消“生成所有页面”的勾选,则可以设置生成指定的页面。注意,子级页面无法单独发布,勾选子级页面时会自动勾选父级页面。如果需要单独发布子级页面,需要在页面管理面板将子级页面的级别调整到一级页面。
在生成HTML的设置中有“标志”的设置,可以为原型添加图片标识或者文字标题。原型发布后会显示在工具栏的页面面板中。
发布原型到AxShare是将做好的原型发布到Axure官方提供的空间中,通过自动生成的网址进行访问。发布到AxShare的快捷键为“F6”。发布到AxShare需要注册相关账号,网址为:http://share.axure.com/
制作移动设备原型需要遵循规范将原型制作成标准尺寸。移动设备原型尺寸计算工具:http://www.iaxure.com/share/yxcc/ (个别移动设备可能会有出入)。
除了制作标准原型尺寸,还需要在生成的HTML文件配置中,进行“移动设备”的设置,让生成的HTMl文件“包含视图接口标记”才可以正常显示。
当原型使用一些特殊字体时,在没有安装该字体的设备上将无法正常显示。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 中运行任何的代码都是在执行上下文中运行
这是因为当函数执行的时候,首先会形成一个新的私有的作用域,然后依次按照如下的步骤执行
个人理解为,闭包就是函数中的函数,里面的函数可以访问外面函数的变量,外面的变量是这个内部函数的一部分
JS 需要异步的根本原因是 JS 是单线程运行的,即在同一时间只能做一件事,不能“一心二用”。为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。
一个 Ajax 请求由于网络比较慢,请求需要 5 秒钟。如果是同步,这 5 秒钟页面就卡死在这里啥也干不了了。异步的话,就好很多了,5 秒等待就等待了,其他事情不耽误做,至于那 5 秒钟等待是网速太慢,不是因为 JS 的原因
原型:在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();
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事件模型氛围捕获和冒泡。 一个事件发生后,会在子元素和父元素之间传播,这种传播分成三个阶段
捕获是从上到下,事件先从window对象,然后再到document对象,然后是html标签,(通过document.documentElement获取html标签),然后是body标签,(通过document.body获取body标签),然后按照普通的html结构一层一层往下传,最后到达目标元素
阻止冒泡
ev.stopPropagation()
由于事件会在冒泡的阶段向上传播到父节点,因此可以把子节点的监听函数定义在父节点上,由父节点的监听函数统一处理多个子元素的事件,这种方式叫做事件的代理
我们设定一种场景,一个div包含若干个a,而且还能继续增加,那如何快捷方便的为所有a绑定事件呢
如果给每个a标签都绑定一个事件,那对内存的消耗是非常巨大的,借助事件代理,我们只需要给父容器div绑定方法即可,
这样不管是点击的哪一个后代元素,都会根据冒泡传播的传递机制,把父容器的click事件触发,然后把对应的方法执行,根据事件源,
我们可以知道点击的是谁,从而完成不同的事情
a标签的各种属性都可以获取到,取需要的数据就可以了
使用代理的优点
BOM(浏览器对象模型)是浏览器本身的一些信息的设置和获取,例如获取浏览器的宽度、高度、设置让浏览器跳转哪个地址
获取屏幕的宽高
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浏览器
原理:服务端渲染、模板变量替换。与 Spring Boot,MVC方言完美结合。
优势
劣势
动静分离的设计原理:区分动静态请求。
优势
静态资源服务器,例如nignx;动态请求服务器,例如Tomcat;前后端采用Ajax等前端异步化交互技术发起请求,获取数据,填充静态页面。
Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
Nginx可以用作动态请求反向代理,也可以用作静态请求使用html resources。
主要是CDN分发技术和Nginx proxy cache文件缓存。
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:客户端发送的匹配资源最后修改时间的标识符
前置缓存的使用,提高查询速度,减少数据库访问量。
包括主动失效、被动失效,需要解决缓存击穿、降级等问题。
Nginx Lua脚本编程定制化:
在nginx生命周期中,Lua通过协程机制在某些环节实现钩子机制。例如master进程创建worker进程时,运行初始化脚本;检测到某个url请求时,直接调用Redis返回response,从而省掉springboot webmvc流程。
Nginx proxy cache使用较少,因为再快的文件读写速度也比不上内存的读写速度。
原理:nginx服务器的内存缓存,所有worker进程共享,通过lua操作。
lua脚本
获取缓存空间,从中获取list缓存。如果为空则转发请求,获取响应数据并缓存。
原理:服务端通过类似爬虫的技术直接完成动态请求加载完成后的静态页面,将HTML、CSS、JS资源全部加载完后的页面生成后部署到CDN上。
我们访问页面,发起静态请求从CDN中获取html资源文件,发起动态请求访问nginx、tomcat获取响应数据,然后在客户端渲染页面。需要三步操作。
如果将渲染好的页面直接放到CDN上,则客户端可以直接获取。
优势:无需加载、无需动态请求、可全部CDN化
实现:
Httpclient无法搞定动态请求,HtmlUnit可用于爬虫,测试自动化工具等
HtmlUnit是一个无界面浏览器Java程序。为HTML文档建模,提供了调用页面、填写表单、单击链接等操作的APl。提供了对 Javascript的支持,甚至可以使用相当复杂的Ajax库,根据配置的不同模拟 Chrome、 Firefox等浏览器。
上图.test.html书写错误
来源:https://www.cnblogs.com/dtyy/p/15531799.html
*请认真填写需求信息,我们会在24小时内与您取得联系。