• 关于 js 带参数定义 的搜索结果

回答

js的语法问题,调用函数写对名字即可,你可以不管它的函数在定义时是否定义了参数。它定义了一个参数,你可以不带参数调用它,可以带一个参数调用它,你甚至可以带两个参数或者更多参数去调用它。其实,即使它不定义任何参数,你也照样可以带一个,两个乃至N个参数去调用。可以了解一下函数中arguments变量就会明白了。

a123456678 2019-12-02 03:08:11 0 浏览量 回答数 0

回答

上诉方式分享后的用户进入不会带上参数。实现分享后用户进入带参,可以使用自定义分享在 Page.js 中定义 onShareAppMessage 函数,设置该页面的分享信息。在onShareAppMessage 函数分享的path参数地址的?后面加上自定义参数,然后用户通过分享进来可以在onload中获取这个参数。

保持可爱mmm 2020-05-05 18:20:32 0 浏览量 回答数 0

回答

静态页面的话不用加时间戳也能阻止缓存的,在<head>段加入以下代码: <meta HTTP-EQUIV="pragma" CONTENT="no-cache"> <meta HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate"> <meta HTTP-EQUIV="expires" CONTENT="0"> ######我不是要阻止它缓存,修改后统一不使用缓存,否则使用缓存###### 什么叫修改统一不使用缓存,否则使用缓存? 你把时间戳加载哪里?是script里面?还是script的src的URL后面带一个URL参数,参数为时间戳? ###### freemarker有自定义标签,定义个时间戳标签,时间来自config文件。在css和js文件后加一个${date}。修改css和js后修改config的时间就可以了######挖坟,grunt可以

kun坤 2020-06-07 17:01:53 0 浏览量 回答数 0

海外云虚拟主机包年25元/月起

海外独享虚拟主机全面上线,助力构建海外网站,提升公司国际形象;全球有效覆盖,超高性价比;建站入门首选,助力出口,适合跨境贸易企业。

回答

新手除了多读多看以外还要学会简化问题,多个问题混合成一个问题别人不容易理解,也不容易给你说明白。1- 跳转问题:当用户发送特定信息时你可以总是返回带参数的地址b如 /redirect.php?code=305 这个页面会根据code的值取得地址A并在页面中显示出来2- 微信识别:应该是有专门的微信JS端的sdk或者自行搜索类似的东西,是有办法识别用户是不是通过微信跳转过来的,非法打开后具体显示什么是自定义的。3- 网址A30秒后失效:对于一个固定的网址你不可能让它一会儿能用一会儿不能用,所以你可以让显示网址A的这个页面打开后用js的 setTimeout 过30秒把网址删掉就行了。

杨冬芳 2019-12-02 02:56:09 0 浏览量 回答数 0

回答

新手除了多读多看以外还要学会简化问题,多个问题混合成一个问题别人不容易理解,也不容易给你说明白。1- 跳转问题:当用户发送特定信息时你可以总是返回带参数的地址b如 /redirect.php?code=305 这个页面会根据code的值取得地址A并在页面中显示出来2- 微信识别:应该是有专门的微信JS端的sdk或者自行搜索类似的东西,是有办法识别用户是不是通过微信跳转过来的,非法打开后具体显示什么是自定义的。3- 网址A30秒后失效:对于一个固定的网址你不可能让它一会儿能用一会儿不能用,所以你可以让显示网址A的这个页面打开后用js的 setTimeout 过30秒把网址删掉就行了。

杨冬芳 2019-12-02 02:42:55 0 浏览量 回答数 0

问题

【javascript学习全家桶】934道javascript热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:22 6202 浏览量 回答数 1

回答

在 /pages 目录的 .js 文件中,定义 Page(),用于注册一个小程序页面,接受 一个 object 作为属性,用来指定页面的初始数据、生命周期回调、事件处理等。 以下为一个基本的页面代码: Page({ data: { title: "Alipay", }, onLoad(query) { // 页面加载 }, onShow() { // 页面显示 }, onReady() { // 页面加载完成 }, onHide() { // 页面隐藏 }, onUnload() { // 页面被关闭 }, onTitleClick() { // 标题被点击 }, onPullDownRefresh() { // 页面被下拉 }, onReachBottom() { // 页面被拉到底部 }, onShareAppMessage() { // 返回自定义分享信息 }, // 事件处理函数对象 events: { onBack() { console.log('onBack'); }, }, // 自定义事件处理函数 viewTap() { this.setData({ text: 'Set data for update.', }); }, // 自定义事件处理函数 go() { // 带参数的跳转,从 page/ui/index 的 onLoad 函数的 query 中读取 type my.navigateTo({url:'/page/ui/index?type=mini'}); }, // 自定义数据对象 customData: { name: 'alipay', }, }); 内容来源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library

KaFei 2020-04-27 14:09:39 0 浏览量 回答数 0

问题

模拟登录163邮箱

游客bnlxddh3fwntw 2020-04-25 14:23:37 14 浏览量 回答数 1

回答

概述 App() 代表顶层应用,管理所有页面和全局数据,以及提供生命周期回调等。它 也是一个构造方法,生成 App 实例。 一个小程序就是一个 App 实例。 每个小程序顶层一般包含三个文件。  app.json:应用配置  app.js:应用逻辑  app.acss:应用样式(可选) 简单示例 一个简单的 app.json 代码如下: "pages": [ "pages/index/index", "pages/logs/logs" ], "window": { "defaultTitle": "Demo" } } 这段代码配置指定小程序包含两个页面(index 和 logs),以及应用窗口的默认 标题设置为 “Demo”。 一个简单的 app.js 代码如下: onLaunch(options) { // 第一次打开 }, onShow(options) { // 小程序启动,或从后台被重新打开 }, onHide() { // 小程序从前台进入后台 }, onError(msg) { // 小程序发生脚本错误或 API 调用出现报错 console.log(msg); }, globalData: { // 全局数据 name: 'alipay', }, }); 26 app.json 全局配置 app.json 用于对小程序进行全局配置,设置页面文件的路径、窗口表现、多 tab 等。 以下是一个基本配置示例: "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "defaultTitle": "Demo" } } 完整配置项如下: 属性 类型 是否必填 描述 pages Array 是 设置页面路径 window Object 否 设置默认页面的窗 口表现 tabBar Object 否 设置底部 tabbar 的表现 pages app.json 中的 pages 为数组属性,数组中每一项都是字符串,用于指定小程序 的页面。在小程序中新增或删除页面,都需要对 pages 数组进行修改。 pages 数组的每一项代表对应页面的路径信息,其中,第一项代表小程序的首 页。 页面路径不需要写任何后缀,框架会自动去加载同名的 .json、.js、.axml、.acss 文件。举例来说,如果开发目录为: │ ├──index │ │ ├── index.json │ │ ├── index.js │ │ ├── index.axml │ │ └── index.acss │ ├──logs │ │ ├── logs.json │ │ ├── logs.js │ │ └── logs.axml ├── app.json ├── app.js └── app.acss app.json 中应当如下配置: { "pages":[ "pages/index/index", "pages/logs/logs" ] } window window 用于设置小程序的状态栏、导航条、标题、窗口背景色等。 示例代码: { "window":{ "defaultTitle": "支付宝接口功能演示" } } 属性 类型 是否必 填 描述 最低版本 defaultTitle String 否 页面默认标题 - pullRefresh String 否 是否允许下拉刷新。默认 NO, 备注:下拉刷新生效的 前提是 allowsBounceVertical 值 为 YES allowsBounceV ertical String 否 是否允许向下拉拽。默认 YES, 支持 YES / NO 28 transparentTitl e String 否 导航栏透明设置。默认 none,支持 always 一直透 明 / auto 滑动自适应 / none 不透明 titlePenetrate String 否 是否允许导航栏点击穿透。 默认 NO,支持 YES / NO showTitleLoadi ng String 否 是否进入时显示导航栏的 loading。默认 NO,支持 YES / NO titleImage String 否 导航栏图片地址 - titleBarColor HexCol or 否 导航栏背景色,十六进制颜 色值(0-255) - backgroundCol or HexCol or 否 页面的背景色,十六进制颜 色值(0-255) - backgroundIm ageColor HexCol or 否 下拉露出显示的背景图底 色,十六进制颜色值(0- 255) - backgroundIm ageUrl String 否 下拉露出显示的背景图链接 - gestureBack String 否 iOS 用,是否支持手势返 回。默认 NO,支持 YES / NO enableScrollBa r Boolea n 否 Android 用,是否显示 WebView 滚动条。默认 YES,支持 YES / NO onReachBotto mDistance Number 否 页面上拉触底时触发时距离 页面底部的距离,单位为 px。相关文档页面事件处理 函数 1.19.0 ,目前 iOS 在 page.json 下设 置无效,只能全 局设置。 29 tabBar 如果你的小程序是一个多 tab 应用(客户端窗口的底部栏可以切换页面),那么 可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页 面。 注意:  通过页面跳转(my.navigateTo)或者页面重定向(my.redirectTo)所到达的页面,即使 它是定义在 tabBar 配置中的页面,也不会显示底部的 tab 栏。  tabBar 的第一个页面必须是首页。 tabBar 配置项有以下: 属性 类型 是否必填 描述 textColor HexColor 否 文字颜色 selectedColor HexColor 否 选中文字颜色 backgroundColor HexColor 否 背景色 items Array 是 每个 tab 配置 每个 item 配置: 属性 类型 是否必填 描述 pagePath String 是 设置页面路径 name String 是 名称 icon String 否 平常图标路径 activeIcon String 否 高亮图标路径 icon 图标推荐大小为 60×60 px 大小,系统会对传入的非推荐尺寸的图片进行非 等比拉伸或缩放。 示例代码: "tabBar": { 30 "textColor": "#dddddd", "selectedColor": "#49a9ee", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首页" }, { "pagePath": "pages/logs/logs", "name": "日志" } ] } } app.acss 全局样式 app.acss 作为全局样式,作用于当前小程序的所有页面。 ACSS 是一套样式语言,用于描述 AXML 的组件样式,决定 AXML 的组件的显 示效果。 为适应广大前端开发者,ACSS 和 CSS 规则完全一致,100% 可以用。同时为更 适合开发小程序,对 CSS 进行了扩充。 ACSS 支持 px,rpx,vh,vw 等单位。 rpx rpx(responsive pixel)可以根据屏幕宽度进行自适应,规定屏幕宽为 750rpx。以 Apple iPhone6 为例,屏幕宽度为 375px,共有 750 个物理像 素,则 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。 设备 rpx 换算 px(屏幕宽度 / 750) px 换算 rpx(750 / 屏幕宽 度) iPhone5 1rpx = 0.42px 1px = 2.34rpx iPhone6 1rpx = 0.5px 1px = 2rpx iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx 样式导入 使用 @import 语句可以导入外联样式表,@import 后需要加上外联样式表相对 路径,用;表示结束。 示例代码: .sm-button { padding: 5px; } /** app.acss **/ @import "./button.acss"; .md-button { padding: 15px; } 导入路径支持从 node_modules 目录载入第三方模块,例如 page.acss: @import "./button.acss"; /相对路径/ 32 @import "/button.acss"; /项目绝对路径/ @import "third-party/page.acss"; /第三方 npm 包路径/ 内联样式 组件上支持使用 style、class 属性来控制样式。 style 属性 用于接收动态样式,样式在运行时会进行解析。行内样式不支持!important 优先 级规则。 class 属性 用于接收静态样式,属性值是样式规则中类选择器名(样式类名)的集合,样式类 名不需要带上.,多个类名间以空格分隔。请静态样式写进 class 中,避免将静态 样式写进 style 中,以免影响渲染速度。 选择器 同 CSS3 保持一致。 注意:  .a-, .am- 开头的类选择器为系统组件占用,不可使用。  不支持属性选择器。 全局样式与局部样式  app.acss 中的样式为全局样式,作用于每一个页面。  页面文件夹内的 .acss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.acss 中相同的选择器。 本地资源引用 ACSS 文件里的本地资源引用请使用绝对路径的方式,不支持相对路径引用。例 如: /* 支持 / background-image: url('/images/ant.png'); / 不支持 */ background-image: url('./images/ant.png'); 33 app.js 注册小程序 App(object: Object) App() 用于注册小程序,接受一个 Object 作为属性,用来配置小程序的生命周 期等。 App() 必须在 app.js 中调用,必须调用且只能调用一次。 object 属性说明 属性 类型 描述 触发时机 onLaunch Function 生命周期回调:监 听小程序初始化 当小程序初始化完 成时触发,全局只 触发一次 onShow Function 生命周期回调:监 听小程序显示 当小程序启动,或 从后台进入前台显 示时触发 onHide Function 生命周期回调:监 听小程序隐藏 当当前页面被隐藏 时触发,例如跳 转、按下设备 Home 键离开 onError Function 监听小程序错误 当小程序发生 js 错误时触发 onShareAppMessage Function 全局分享配置 - 前台/后台定义:  小程序用户点击右上角关闭,或者按下设备 Home 键离开支付宝时,小程序并不会直接销 毁,而是进入后台。  当用户再次进入支付宝或再次打开小程序时,小程序会从后台进入前台。  只有当小程序进入后台 5 分钟后,或占用系统资源过高,才会被真正销毁。 onLaunch(object: Object) 及 onShow(object: Object) object 属性说明: 属性 类型 描述 34 query Object 当前小程序的 query,从启动参数的 query 字段解析而来 scene number 启动小程序的 场景值 path string 当前小程序的页面地址,从启动参数 page 字段解析而来,page 忽略时默认为首页 referrerInfo Object 来源信息 比如,启动小程序的 schema url 如下: alipays://platformapi/startapp?appId=1999&query=number%3D1&page=x%2Fy%2 Fz  小程序首次启动时,onLaunch 方法可获取 query、path 属性值。  小程序在后台被用 schema 打开,也可从 onShow 方法中获取 query、path 属性值。 App({ onLaunch(options) { // 第一次打开 console.log(options.query); // {number:1} console.log(options.path); // x/y/z }, onShow(options) { // 从后台被 schema 重新打开 console.log(options.query); // {number:1} console.log(options.path); // x/y/z }, }); referrerInfo 子属性说明: 属性 类型 描述 最低版本 appId string 来源小程序 - sourceServiceId string 来源插件,当处于插件运行模式时可见 1.11.0 35 extraData Object 来源小程序传过来的数据。 - 注意:  不要在 onShow 中进行 redirectTo 或 navigateTo 等操作页面栈的行为。  不要在 onLaunch 里调用 getCurrentPages(),因为此时 page 还未生成。 onHide() 小程序从前台进入后台时触发 onHide() 。 示例代码: App({ onHide() { // 进入后台时 console.log('app hide'); }, }); onError(error: String) 小程序发生脚本错误时触发。 示例代码: App({ onError(error) { // 小程序执行出错时 console.log(error); }, }); onShareAppMessage(object: Object) 全局分享配置。当页面未设置 page.onShareAppMessage 时,调用分享会执行 全局的分享设置,具体见 分享 。 globalData 全局数据 App() 中可以设置全局数据 globalData。 示例代码: // app.js App({ globalData: 1 }); getApp 方法 小程序提供了全局的 getApp() 方法,可获取当前小程序实例,一般用于在子页 面中获取顶层应用。 var app = getApp(); console.log(app.globalData); // 获取 globalData 使用过程中,请注意以下几点:  App() 函数中不可以调用 getApp(),可使用 this 可以获取当前小程序实例。  通过 getApp() 获取实例后,请勿私自调用生命周期回调函数。  请区分全局变量及页面局部变量,比如: // app.js App({ //定义全局变量 globalData,在整个 App 中有效 globalData: 1 }); // a.js // 定义页面局部变量 localValue,只在 a.js 有效 var localValue = 'a'; // 获取 app 实例 var app = getApp(); // 拿到全局数据,并改变它 app.globalData++; // b.js // 定义页面局部变量 localValue,只在 b.js 有效 var localValue = 'b'; // 如果 a.js 先运行,globalData 会返回 2 console.log(getApp().globalData); a.js 和 b.js 两个文件中都声明了变量 localValue,但并不会互相影响,因为各 个文件声明的局部变量和函数只在当前文件下有效。 内容来源:https://developer.aliyun.com/article/756818?spm=a2c6h.12873581.0.dArticle756818.26162b70Su1GZy&groupCode=tech_library

KaFei 2020-04-27 13:54:36 0 浏览量 回答数 0

问题

TypeScript:拥有超能力的 JavaScript

茶什i 2020-01-20 15:15:47 3 浏览量 回答数 0

问题

支持自定义皮肤的 HTML5 音乐播放器

寒喵 2019-12-01 21:51:19 926 浏览量 回答数 0

回答

你是想要静态资源的权限控制? @Anur回复 @Anur:shiro是啊... springboot和spring毕竟不一样,SpringBoot自己配置了很多信息比如: 自动配置的静态资源:在自动配置类的addResourceHandlers方法中定义了一下静态资源的自动配置     ①类路径文件:把类路径下的/static、/public、/resources和/META-INF/resources文件夹下的静态文件直接映射为/**,可以通过http://localhost:8080/**来访问。     ②webjar:webjar就是将我们常用的脚本框架封装在jar包中的jar包。把webjar的/META-INF/resources/webjars/下的静态资源文件映射为/webjars/**,可以通过http://localhost:8080/webjars/**来访问。     ③自动配置的Formatter和Converter。我们可以看一下WebMvcAutoConfiguration类中的定义addFormatters(FormatterRegistry)方法。从代码中可以看出,只要我们定义了Converter、GenericConverter和Formatter接口的实现类的Bean,这些Bean就会自动注册到SpringMVC中。     ④自动配置的HttpMessageConverter:在WebMvcAutoConfiguration中,我们注册了messageConverters,在configureMessageConverters方法,在这里直接注入了HttpMessageConverter的Bean,而这个Bean是在HttpMessageConverterAutoConfiguration类中定义的,我们自动注册的HttpMessageConverter除了SpringMVC默认的ByteArrayMessageConverter、StringHttpMessageConverter、SourceHttpMessageConverter、ResourceHttpMessageConverter、 AllEncompassingFormHttpMessageConverter外,在我们的HttpMessageConverterAutoConfiguration的自动配置文件里还引入了JacksonHttpMessageConverter Configuration和GsonHttpMessageConverter Configuration,使得我们获得了额外的HttpMessageConverter。         若jackson的jar包在类路径上,则SpringBoot通过JacksonHttpMessageConverters Configuration增加MappingJackson2HttpMessage Converter和MappingJackson2XmlHttpMessage Converter。         若gason的jar包在类路径上,则SpringBoot通过GsonHttpMessageConverter Configuration增加GsonHttpMessage。     ⑤静态首页的支持:把静态index.html文件放置在如下目录:         classpath:META-INF/resources/index.html         classpath:/resources/index.html         classpath:/static/index.html         classpath:/publik/index.html 当我们访问应用根目录http://localhost:8080/时,会直接映射。     自然了如果你想自己增加也是可以的,类似下面的写法就行,自己再改改吧,SpringBoot其实默认有上面的那些了 程序的静态文件(js、css、图片)等需要直接访问,这时我们需要在配置里重写addResourceHandlers方法来实现。@Configuration@EnableWebMvc//1会开启一些默认配置,比如ViewResolver或者MessageConverter等,开启SpringMVC支持,没有这个注释,重写WebMvcConfigurerAdapter无效@EnableScheduling//开始计划任务的支持@ComponentScan("com.wisely.highlight_springmvc4")publicclassMyMvcConfigextendsWebMvcConfigurerAdapter{//2重写其方法可以对SpringMVC进行配置   @Bean   publicInternalResourceViewResolverviewResolver(){      InternalResourceViewResolverviewResolver=newInternalResourceViewResolver();      viewResolver.setPrefix("/WEB-INF/classes/views/");      viewResolver.setSuffix(".jsp");      viewResolver.setViewClass(JstlView.class);      returnviewResolver;   }   /**   *程序的静态文件需要直接访问,重写该方法即可   */   @Override   publicvoidaddResourceHandlers(ResourceHandlerRegistryregistry){      //addResourceLocations指的是文件放置的目录,addResourceHandler指的是对外暴露的访问路径      registry.addResourceHandler("/assets/**").addResourceLocations("classpath:/assets/");//3   }   @Bean   //1配置拦截器的Bean   publicDemoInterceptordemoInterceptor(){      returnnewDemoInterceptor();   }   @Override   publicvoidaddInterceptors(InterceptorRegistryregistry){//2重写addInterceptors方法,注册拦截器      registry.addInterceptor(demoInterceptor());   }   /**   *快捷的ViewController,适用于无任何业务处理,只是简单的页面跳转   */   @Override   publicvoidaddViewControllers(ViewControllerRegistryregistry){      registry.addViewController("/index").setViewName("/index");//快捷的ViewController      registry.addViewController("/toUpload").setViewName("/upload");      registry.addViewController("/converter").setViewName("/converter");      registry.addViewController("/sse").setViewName("/sse");      registry.addViewController("/async").setViewName("/async");   }   /**   *路径匹配参数设置   *在SpringMVC中,路径参数如果带"."的话,"."后面的值将会忽略,重写此方法可以不忽略"."后面的参数   */   @Override   publicvoidconfigurePathMatch(PathMatchConfigurerconfigurer){      configurer.setUseSuffixPatternMatch(false);   }   /**   *文件上传的配置   */   @Bean   publicMultipartResolvermultipartResolver(){      CommonsMultipartResolvermultipartResolver=newCommonsMultipartResolver();      multipartResolver.setMaxUploadSize(1000000);      returnmultipartResolver;   }   /**   *配置自定义的HttpMessageConverter的Bean,在SpringMVC里注册HttpMessageConverter有两个方法   *①configureMessageConverters:重载会覆盖掉SpringMVC默认注册的多个HttpMessageConverter   *②extendMessageConverters:仅添加一个自定义的HttpMessageConverter,不覆盖默认注册的HttpMessageConverter   */   @Override   publicvoidextendMessageConverters(List<HttpMessageConverter<?>>converters){      converters.add(converter());   }   @Bean   publicMyMessageConverterconverter(){      returnnewMyMessageConverter();   }}   继承,重写方法我感觉可行

爱吃鱼的程序员 2020-06-07 22:43:08 0 浏览量 回答数 0

问题

【分享】WeX5的正确打开方式(3)——绑定机制

小太阳1号 2019-12-01 21:23:54 5393 浏览量 回答数 3

问题

钉钉开发入门前端Nowa脚手架篇

钉友 2019-12-01 21:33:36 6369 浏览量 回答数 0

问题

【分享】html5 开发工具——WeX5中的各种绑定方式

小太阳1号 2019-12-01 21:25:48 4942 浏览量 回答数 3

回答

1、对已有对象进行扩充方法和属性 var object = new Object(); object.name = "zhangsan";//每个对象需要写这些语句 object.sayName = function(name){//每个对象需要写这些语句 this.name = name; }; object.sayName("lisi"); alert(object.name); 2、工厂方式创建对象 function createObject() { var object = new Object(); object.username = "zhangsan"; object.password = "123456"; object.get = function(){ alert(this.username + "," + this.password); } return object; } var object1 = createObject(); var object2 = createObject(); object1.get(); object2.get(); // 带参数的构造方法 function createObject(username, password){ var object = new Object(); object.username = username; object.password = password; object.get = function(){//缺点是,多少个对象则方法就有多少个 alert(this.username + ", " + this.password); } return object; } var object1 = createObject("zhangsan",123456); object1.get(); // 最佳改进方式 function get(){//使该函数被多个对象共享 alert(this.username + ", " + this.password); } function createObject(username, password){//创建对象 var object = new Object(); object.username = username; object.password = password; object.get = get; return object; } var object1 = createObject("zhangsan", "123456"); var object2 = createObject("wangwu", "654321"); object1.get(); object2.get(); 3、构造函数方式创建对象 function Person(){ //在执行第一行代码欠,js引擎会为我们生成一个对象 this.username = "zhangsan"; this.password = "123"; this.getInfo = function(){ alert(this.username + ", " + this.password); } //此处有一个隐藏的return语句,用于将之前生成对象返回。 } var p1 = new Person(); p1.getInfo(); //带参数 function Person(username, password){ this.username = username; this.password = password; this.getInfo = function(){ alert(this.username + ", " + this.password); } } var p1 = new Person("zhangsan","1234546"); p1.getInfo(); 4、原型(“prototype”)方式 function Person(){} Person.prototype.username = "zhangsan"; Person.prototype.password = "123456"; Person.prototype.getInfo = function(){ alert(this.username + ", " + this.password); } var person = new Person(); var person2 = new Person(); person.username = "haha"; person.getInfo(); person2.getInfo(); //单纯使用原型方式定义对象无法在构造函数中为属性赋值,只能在对象生成后再去改变属性值 function Person(){} Person.prototype.username = new Array(); Person.prototype.password = "123456"; Person.prototype.getInfo = function(){ alert(this.username + ", " + this.password); } var person = new Person(); var person2 = new Person(); person.username.push("zhangsan"); person.username.push("lisi"); person.password = "321"; person.getInfo(); person2.getInfo(); 5、综合方式(原型+构造函数方式搭配) function Person(){ this.username = new Array();//不被多个对象共享 this.password = "123"; } Person.prototype.getInfo = function()//被多个对象共享 { alert(this.username + "," + this.password); } var p1 = new Person(); var p2 = new Person(); p1.username.push("zhangsan"); p2.username.push("lisi"); p1.getInfo(); p2.getInfo(); 6、动态原型方式 function Person(){ this.username = "zhangsan"; this.password = "123"; //通过标志量让所有的对象共享方法 if(typeof Person.flag == "undefined"){ alert("prototype"); Person.prototype.getInfo = function() { alert(this.username + ", " + this.password); } Person.flag = true; } } var p = new Person(); var p2 = new Person(); p.getInfo(); p2.getInfo(); ps:来源网络

元芳啊 2019-12-02 00:54:49 0 浏览量 回答数 0

回答

1.1 认识视图界面 和大多编辑器一样,该有的基本都有。 1.2 文件夹和文件的打开 文件——>打开文件夹/打开文件 1.3 新建文件/文件夹 新建文件: a. 文件——>新建文件; b. 按Ctrl+n; c. 点文件夹名后面的+号图标。 新建文件夹: 点文件夹名后面的+号图标。 1.4 拆分编辑器(分列) 快加键:Ctrl+\ 点击拆分编辑器图标(右上角)进行拆分编辑器。拆分完毕之后,可以通过鼠标点击拖动文件到相应的列。多列同时浏览免去多文件来回切换。 1.5 集成终端 终端对开发者来说不可或缺,Visual Studio code 自然也自带终端视窗。 可按快捷键Ctrl+`快速调出终端,也可以 查看——>集成终端 调出。 需要注意的是:如果当前的文件夹的路径名称包含中文,会出现终端打开失败(待验证)。 1.6 安装/卸载扩展(插件) a. 进入扩展视图界面安装/卸载 a1.快捷键:Ctrl+shift+x; a2.查看——>扩展; a3.点左侧边框的扩展图标按钮进入。 在顶部搜索框输入你需要的扩展插件,找到之后在扩展插件后面的选项中点击【安装】即可,需要卸载扩展只需要点【卸载】即可。 扩展下载安装完毕之后需要点击【启用】才生效,有些扩展需要重启编辑器才生效。 b. 如何选择扩展(插件)呢? 其实也不难,扩展的名称一般都暴露了它的功能,基本如下: 1.带snippets 一般是代码提示类扩展; 2.带viewer 一般是代码运行预览类扩展; 3.带support 一般是代码语言支持; 4.带document 一般是参考文档类扩展; 5.带Formatt 一般是代码格式化整理扩展; 当然有的snippets 也自带support功能,并不是以上面的关键词作为唯一标准。 1.7 文件图标主题设置 之前写的有一篇经验,链接附上。 0Visual Studio Code 怎么设置文件图标主题? END 2.VS code用户设置 2.1 用户设置入口 VS code支持用户自定义设置编辑器,包括快加键修改、代码高亮、以及扩展插件配置等,点击文件——>首选项——>用户设置。 编辑器会拆分为两列,一个文件是【默认设置】,一个是【settings.json】,用户设置是空的【settings.json】这个文件(之前没有设置的话),需要自定义的设置项就在settings.json文件里写入json代码即可。 2.2 自定义的设置方法为: 1、在【默认设置】里找到相关的设置json代码段,复制该设置完整的json块,例如:【"editor.fontSize": 14,】。 2、到【settings.json】粘贴。不过记得加上外层(前后)“{}”符号,不然不是完整的json,会出错或者设置无效。 例如: { "editor.fontSize": 20} 完后按Ctrl+s保存关掉窗口,编辑器的文字的大小就变成20了。 需要注意的是,【settings.json】的代码必须符合json格式,且名称(如上面的editor.fontSize)和值对(如上面的20)是【默认设置】里有的或者是扩展中支持的,不然不会有任何作用。 END 3.插件推荐及使用配置 VS code的扩展还是比较丰富的,具体选择方法在前面的步骤1.6已经教大家了,下面介绍几个对基本web前端编辑比较实用的扩展插件(我个人认为)。 3.1 HTNL Snippets 为HTML文档提供代码提示功能,包含HTML5。 3.2 easyless为less文档提供提示,错误警告,以及把less文档编译为css文件。可自定义设置。开发者给出的配置例子: "less.compile": {"compress": true,"sourceMap": true,"out":false} 可以粘贴到用户设置的【默认设置】里,也可以粘贴到用户设置settings.json里。后面的懂json的同学自动忽略:如果settings.json是空的,应该写成: {"less.compile": {"compress": true,"sourceMap": true,"out":false}} 如果之前已有写入json代码,你应该在前面的名称/值对块后面加上“,”(新手容易多加或者少加","符号,个人觉得是这样的)。 ****提示:**** 在写的时候,代码内最好不要加注释。"sourceMap": true, 这个地方最好设置成false ,因为当你实际使用的时候浏览器找不到sourceMap 可能会报错或者浏览器一直去找,还没遇到过(我碰到jQuery.js因为这个报错的),入门的同学还是设置成false 比较好。 3.3 VS color Picker 为css文档和HTML文档提供颜色选择,当输入“#”后会出现颜色选择器浮窗,点击相应颜色之后会插入文档中,默认用16进制表示。若想用其他格式的颜色,如RGB等则推荐扩展:Color Picker (Color Picker缺点是需要配置,安装nodejs,并且添加node到全局环境变量中。而且在插入时需要使用命令调出提色板,有点麻烦) 3.4 live HTML Previewer 为html文档提供预览功能,需要用命令或者快捷键调出,会在编辑器中新增一列,用于运行html文件。 a. 按F1在命令框中输入:Show side preview 新增一列显示html,能边写边看到效果,实时预览。 b. 可以在html文档中右键选择:Open in browser 在系统默认浏览器中打开,该模式下不能提供实时预览,保存时不自动刷新浏览器。 3.5 SVG Viewer 为SVG 文档在编辑器中提供预览。 a. 按F1在命令框中输入:SVG b. 选择SVG Viewer,新增一列显示SVG运行结果。 END 4.VS code 用户代码片段 4.1 用户代码片段 设置入口及示例 用户代码片段 是用来提示代码提示及快捷插入的,那么怎么做呢? 1.文件——>首选项——>用户代码片段 2.选择代码语言 3.按固定格式写json代码 示例格式: "Print to console": {"prefix": "log", "body": ["console.log('$1');","$2"],"description": "Log output to console"} 4.2 片段json示例写法详解 可变区域(这里用XXXX表示)如下:A. "Print to XXXX": { //仅作为标识和目的用途,区别于其他代码块(有多个相同值时会报错),不会插入。 B."prefix": "XXXX", //触发提示的关键字符,也就是输入什么时弹出提示窗。例如:当希望输入a的时候就弹出,这里就写a。在提示窗显示。 C. "body": ["XXXX $1 XXXX"], //在编辑器中插入的代码块,例如当在提示窗中选择a的时候就插入【<a>a</a>】那么这里就写:<a>a</a> D. "description": "XXXX" // 这里是相关描述,比如说明插入的代码块内容、用途、代码结构、参数等,仅在提示窗显示不会插入} E. 上面示例中的$1和$2是初始定位光标位置,用于插入后需要修改的值、参数等。还是上面的例子: "body":["<a>$1</a>"] 那么在插入<a></a>之后,光标的位置将处于<a>和</a>的中间。再如: "body":["<a>$1</a>", "<span>$2GBK</span>"] 那么在插入 <a></a> <span>GBK</span> 之后,光标首先在a标签内,输入完内容之后,光标跳到<span>和GBK中间。输入或者移动光标之后光标恢复正常 4.3 怎么使插入的代码块符合格式化标准? 代码格式化主要就是缩进和换行了。 1.要缩进的地方按下TAB键即可,例如:[" <a>$1</a>"] 2.怎么在"body":[]中插入带双引号的内容?因为注释带有特殊符号尤其是带有双引号("")的内容会导致json报错,解决方法是用反斜杠“\”对特殊符号进行转义。 例如: 那么"body":[]那里应该这样写: 这里在"description": "XXXX"那里同样适用。 总的来说,碰到json报错的字符或者符号就用反斜杠“\”进行转义。当然你要考虑插入之后会不会影响程序文档报错或者出现异常,也就是要先确定插入的代码块是正确的完整的,这是自定义代码块存在的意义 4.4 下面是我写的一段完整的示例(XXXX都匿了):自定义的json{ "Print to authorInfo": { "prefix": "au", "body": [ "-----By Ray-----", "mail:XXXXXXX", "description:$1", " Step 1:", " Step 2:", "<a href=\"XXXX/\">凯玩网</a>"], "description": "author info" 来源于网络,供您参考

保持可爱mmm 2019-12-02 02:20:23 0 浏览量 回答数 0

回答

详细信息 Linux系统的ECS实例中添加Tomcat站点 提示:本文的配置路径以如下云市场的阿里云linux一键安装web环境链接为例,如果您在自定义环境下添加Tomcat站点,请根据实际安装路径进行配置。 https://market.aliyun.com/products/56014009/cmgj000262.html 执行如下命令,进入绑定域名所在目录,找到配置文件。 cd /alidata/server/nginx/conf/vhosts/ 执行如下命令,拷贝文件。 cp test.conf new.conf 执行如下命令,单击键盘上的 i,编辑文件。 vim new.conf 添加如下配置。 listen 80 default; server_name www.XXX.com ; # 绑定的网站域名 index index.html index.htm index.jsp; # 设置默认首页 root /alidata/www/webb/; # 指定网站的目录,需要和 TomCat 设置的一致 location ~ .php$ { proxy_pass http://127.0.0.1:8080; } location ~ ..(gif|jpg|jpeg|png|bmp|swf)$ { expires 30d; } location ~ ..(js|css)?$ { expires 1h; } access_log /alidata/log/nginx/access/default.log; } 单击键盘上的 Esc,退出编辑模式,然后保存退出。 执行如下命令, 重启Nginx。 /alidata/server/nginx/sbin/ngins -s restart 进入/alidata/server/tomcat7/conf/目录,修改server.xml文件。 单击 shift 和 g,跳转至页面底部,大约在124行。将 Host name=“localhost" 中的 “localhost” 修改为目标域名,使用docBase参数指定Web根目录,同时添加一组host,然后保存退出。 提示:docbase参数指定的Web根目录需要与Nginx配置保持一致。当您只配置一个站点的时候,无须设置docBase,设置多个站点的时候需要分别指定Web根目录。 执行如下命令,重启Tomcat。 restart Tomcat 在浏览器中输入网站域名,确认访问成功。 Linux系统的ECS实例中添加Apache站点 Apache的配置文件一般在/etc/httpd/conf目录下,httpd.conf是Apache的主配置文件,当您进行配置时,可以将虚拟主机的配置文件单独配置,如取名为vhost.conf。然后在http.conf中加入“Include /etc/httpd/conf/vhost.conf”,即可包含vhost.conf的配置文件。 提示:如果您在自定义环境下添加Apache站点,请根据实际安装路径进行配置。 基于IP地址 适用场景 适用于一台服务器有多个IP地址的情况。 提示:目前阿里云的云服务器 ECS只允许绑定一个公网IP地址和一个私网IP地址,故此方法不适用。 基于端口号 适用场景 适用于利用不同的端口识别不同的网站的情况。 适用于网站域名短缺但服务器的端口号充足的情况。 具体实现 访问站点时,使用网址加端口号的方式实现。配置该方式后需要在网站域名末尾加上端口号来访问不同的网站。如下所示。 http://port.XXX.cn:80 http://port.XXX.cn:81 http://port.XXX.cn:82 提示:此方式存在缺点,网站后需要加上端口号,不利于用户访问。 基于主机名 适用场景 适用于多个网站运行在一台服务器上的情况。 具体实现 使用不同的域名来区分不同的网站,所有的域名解析都指向同一个IP地址。Apache通过在HTTP头中附带的host参数来判断用户需要访问哪一个网站。如下所示。 http://test1.XXX.cn http://test2.XXX.cn http://test3.XXX.cn 实例讲解 以CentOS 6.5系统为例,为您详细说明如何配置基于主机名的Apache虚拟主机。 开启Apache的vhost模块。在http.conf配置文件中,找到如下信息,删除前面的“#”号,并开启vhost模块。 #LoadModule vhost_alias_module modules/mod_vhost_alias.so 在Apache的配置文件夹下新建vhost.conf文件,用以作为虚拟主机的配置文件。 编写虚拟主机的内容,先加入默认的文件头。 NameVirtualHost *:80 ServerName * DocumentRoot /www/html # 为默认情况下网站的目录 根据实际情况添加以下的配置。 在任意地址上,监听80端口上的HTTP请求。 ServerAdmin test@huigher.cn #网站管理员的联系方式? DocumentRoot "/var/www/html/test1" #网站的目录 ServerName test1.huigher.cn #主机名,apache就是通过这个地址来识别不同的网站 ErrorLog "logs/test1.huigher.cn-error_log" #错误日志路径 CustomLog "logs/test1.huigher.cn-access_log" common #访问日志路径 如果访问报错提示403,主要是由于访问的目录没有权限所致,需要添加以下代码。 <Directory /var/www/html/test1> Options FollowSymLinks AllowOverride None Order deny,allow Deny from all 服务器上有多少个网站,就分别配置多少份以上信息,并根据实际情况修改其中的内容。在服务器的页面配置类似如下。 在http.conf文件中加入如下配置,包含vhost.conf文件内容。 Include /etc/httpd/conf/vhost.conf 在/etc/hosts文件中,将网站的域名绑定到本地环回地址,如下所示。 127.0.0.1 test1.XXX.cn 127.0.0.1 test2.XXX.cn 127.0.0.1 test3.XXX.cn 执行如下命令,重新加载配置文件。 service httpd reload 注:或者执行如下命令,重启Apache进程。 service httpd restart 进行测试,确认访问不同的域名,返回不同的网站内容。

KB小秘书 2019-12-02 02:06:56 0 浏览量 回答数 0

问题

Activiti 工作流项目源码 代码生成器 websocket即时通讯 springmvc SS

游客egqjd4t7mlyom 2019-12-01 19:54:26 50 浏览量 回答数 0

问题

Activiti6.0 java项目框架 spring5 SSM 工作流引擎 审批流程

游客ydre72cd7ywew 2019-12-01 20:01:08 10 浏览量 回答数 0

问题

Activiti6.0 java项目框架 spring5 SSM 工作流引擎 审批流程

游客q6uipubrszn5g 2019-12-01 19:59:18 27 浏览量 回答数 0

问题

Activiti6.0 java项目框架 spring5 SSM 工作流引擎 审批流程

游客ydre72cd7ywew 2019-12-01 19:53:06 30 浏览量 回答数 0

问题

Activiti6.0 工作流引擎 websocket即时聊天发图片文字 好友群组 SSM源码

游客q6uipubrszn5g 2019-12-01 19:57:13 37 浏览量 回答数 0

回答

Vue 相对不于 React 的一个优点是它易于理解和学习,且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 Web 应用程序。 因此,时时了解一些新出现又好用的Vue 开源项目也是挺重要,一方面可以帮助咱们更加高效的开发,另一方面,咱们也可以模范学习其精华部分。 接下来看看新出的有哪些好用的开源项目。 uiGradients 网址: http://uigradients.com/ GitHub: https://github.com/ghosh/uiGradients GitHub Stars: 4.6k 彩色阵列和出色的UX使是这个项目的一个亮点,渐变仍然是网页设计中日益增长的趋势。 咱们可以选择所需的颜色,并可以获得所有可能的渐变,并获取对应的 CSS 代码, 赶紧收藏起来吧。 CSSFX CSS 过度效果的集合 网址: https://cssfx.dev GitHub: https://github.com/jolaleye/cssfx GitHub Stars: 3.5k CSSFX 里面有很多 CSS 过滤效果,咱们可以根据需求选择特定的动画,点击对应的效果即可看到生成的 CSS 代码,动手搞起来吧。 Sing App Vue Dashboard 一个管理模板 网址: https://flatlogic.com/templat... GitHub: https://github.com/flatlogic/sing-app-vue-dashboard GitHub Stars: 254 事例:https://flatlogic.com/templates/sing-app-vue-dashboard/demo 文档:https://demo.flatlogic.com/sing-app/documentation/ 这是基于最新 Vue 和 Bootstrap 免费和开源的管理模板,其实跟咱们国内的 vue-admin-template 差不多。咱们不一定要使用它,但可以研究学习源码,相信可以学到很多实用的技巧,加油少年。 Vue Storefront 网址: https://www.vuestorefront.io GitHub: https://github.com/DivanteLtd/vue-storefront GitHub Stars: 5.8k 这是一个PWA,可以连接到任何后端(或几乎任何后端)。这个项目的主要优点是使用了无头架构。这是一种全面的解决方案,为咱们提供了许多可能性(巨大的支持稳步增长的社区,服务器端渲染,将改善网页SEO,移动优先的方法和离线模式。 Faviator 图标生成的库 网址: https://www.faviator.xyz GitHub: https://www.faviator.xyz/playground GitHub Stars: 94 如果需要创建一个图标增加体验度。 可以使用任何 Google 字体以及任何颜色。只需通过首选的配置,然后选择PNG,SVG或JPG格式即可。 iView Vue UI 组件库 网址: https://iviewui.com/ GitHub: https://github.com/iview/iview GitHub Stars: 22.8k 不断迭代更新使这组UI组件成为具有任何技能水平的开发人员的不错选择。 要使用iView,需要对单一文件组件有充分的了解,该项目具有友好的API和大量文档。 Postwoman API请求构建器 网址: https://postwoman.io/ GitHub: https://github.com/liyasthomas/postwoman GitHub Stars: 10.5k 这个与 Postman 类似。 它是免费的,具有许多参与者,并且具有多平台和多设备支持。 这个工具真的非常快,并且有大量的更新。 该工具的创建者声称在不久的将来会有更多功能。 Vue Virtual Scroller 快速滚动 网址: https://akryum.github.io/vue-virtual-scroller/#/ GitHub: https://github.com/Akryum/vue-virtual-scroller GitHub Stars: 3.4k Vue Virtual Scroller具有四个主要组件。 RecycleScroller可以渲染列表中的可见项。 如果咱们不知道数据具体的数量,最好使用DynamicScroller。 DynamicScrollerItem将所有内容包装在DynamicScroller中(以处理大小更改)。 IdState简化了本地状态管理(在RecycleScroller内部)。 Mint UI 移动端的 UI 库 网址: http://mint-ui.github.io/#!/en GitHub: https://github.com/ElemeFE/mint-ui GitHub Stars: 15.2k 使用现成的CSS和JS组件更快地构建移动应用程序。使用此工具,咱们不必承担文件大小过大的风险,因为可以按需加载。动画由CSS3处理,由此来提高性能。 V Calendar 用于构建日历的无依赖插件 网址: https://vcalendar.io GitHub:https://github.com/nathanreyes/v-calendar GitHub Stars: 1.6k 您可以选择不同的视觉指示器来装饰日历。 V Calendar还为咱们提供了三种日期选择模式: 单选 多选 日期范围 Vue Design System 一组UI工具 网址: https://vueds.com/ GitHub: https://github.com/viljamis/vue-design-system GitHub Stars: 1.7k 这是一种组织良好的工具,对于任何web开发团队来说,它的命名都很容易理解。其中一个很大的优点是使用了更漂亮的代码格式化器,它可以在提交到Git之前自动排列代码。 Proppy UI组件的功能道具组合 网址: https://proppyjs.com GitHub: https://github.com/fahad19/proppy GitHub Stars: 856 ProppyJS 是一个很小的库,用于组合道具,它附带了各种集成包,让您可以自由地使用它流行的渲染库。 我们的想法是首先将Component的行为表达为props,然后使用Proppy的相同API将其连接到您的Component(可以是React,Vue.js或Preact)。 API还允许您访问其他应用程序范围的依赖项(如使用Redux的商店),以方便组件树中的任何位置。 Light Blue Vue Admin vue 后台展示模板 网址: https://flatlogic.com/templates/light-blue-vue-lite GitHub: https://github.com/flatlogic/light-blue-vue-admin GitHub Stars: 79 事例: https://demo.flatlogic.com/light-blue-vue-admin/#/app/dashboard 文档: https://demo.flatlogic.com/light-blue/documentation/ 模板是用Vue CLI和Bootstrap 4构建的。从演示中可以看到,这个模板有一组非常基本的页面:排版、地图、图表、聊天界面等。如果咱们需要一个扩展的模板,可以看看Light Blue Vue Full,它有60多个组件,无 jquery,有两个颜色主题。 Vue API Query 为 REST API 构建请求 GitHub: https://github.com/robsontenorio/vue-api-query GitHub Stars: 1.1k 关于这个项目没什么好说的。它所做的与描述行中所写的完全一样:它帮助咱们构建REST API的请求。 Vue Grid Layout Vue 的网格布局 Website: https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html GitHub: https://github.com/jbaysolutions/vue-grid-layout GitHub Stars: 3.1k 所有网格相关问题的简单解决方案。它有静态的、可调整大小的和可拖动的小部件。还是响应和布局可以恢复和序列化。如果还需要再添加一个小部件,则不必重新构建所有网格。 Vue Content Loader 创建一个占位符加载 Website: http://danilowoz.com/create-vue-content-loader GitHub: https://github.com/egoist/vue-content-loader GitHub Stars: 2k 当咱们开发网站或者 APP 时,遇到内容过多加载速度慢时,会导致用户打开页面有大量空白页,vue-content-loader正是解决这个问题的一个组件,使加载内容之前生成一个dom模板,提高用户体验。 Echarts with Vue2.0 数据可视化 Website: https://simonzhangiter.github.io/DataVisualization/#/dashboard GitHub: https://github.com/SimonZhangITer/DataVisualization GitHub Stars: 1.3k 在图片中,咱们可以看到非常漂亮的图表。这个项目使任何数据都更具可读性,更容易理解和解释。它允许咱们在任何数据集中轻松地检测趋势和模式。 Vue.js Modal 高度可定制的模态框 Website: http://vue-js-modal.yev.io/ GitHub: https://github.com/euvl/vue-js-modal GitHub Stars: 2.9k 可以在该网站上查看所有不同类型的模态。 有15个按钮,按任意一个按钮,看到一个模态示例。 Vuesax 框架组件 Website: https://lusaxweb.github.io/vuesax/ GitHub: https://github.com/lusaxweb/vuesax GitHub Stars: 3.7k 这个项目在社区中很受欢迎。 它使咱们可以为每个组件设计不同的风格。 Vuesax的创建者强调,每个Web开发人员在进行Web设计时都应有选择的自由。 Vue2 Animate vue2.0 —使用animate.css 构建项目和创建组件 Website: https://the-allstars.com/vue2-animate/ GitHub: https://github.com/asika32764/vue2-animate GitHub Stars: 1.1k 这个库是跨浏览器的,咱们可以选择从5种类型的动画: rotate,slide,fade,bounce和zoom。在网站上有一个演示。动画的默认持续时间是1秒,但是咱们可以自定义该参数。 Vuetensils Vue.js的工具集 Website: https://vuetensils.stegosource.com/ GitHub: https://github.com/stegosource/vuetensils GitHub Stars: 111 这个UI库有一个标准的功能,但是最酷的是它没有额外的样式。你可以让设计尽可能的个性化,应用所有的需求。只需编写需要的样式,将其添加到项目中,并包含需要的尽可能多的组件。

茶什i 2020-01-09 10:39:02 0 浏览量 回答数 0

问题

【精品问答】python百大常见问题与答案详解

祖安文状元 2020-02-24 17:56:41 363 浏览量 回答数 1

问题

什么是云服务器 ECS Linux Web 环境添加站点

boxti 2019-12-01 21:54:57 1520 浏览量 回答数 0

问题

某政务网站性能优化

猫饭先生 2019-12-01 21:25:38 1412 浏览量 回答数 0

问题

【精品问答】大数据计算技术1000问

问问小秘 2019-12-01 21:57:13 3431 浏览量 回答数 1

回答

浅谈Flutter框架原理及其生态圈 Flutter的锋芒 跨平台高性能的渲染引擎逐渐成为移动端、大前端领域的一个热点,作为其中的明星框架Flutter,经过近几年来的迅速发展,由极大的可能成为下一代跨端终端解决方案。自从2017 年 5 月,谷歌公司发布的了 Alpha 版本的 Flutter; 2018 年底 Flutter Live 发布的 1.0 版本;2019年7月发布1.5版本,截止今日(2020年2月)已经发布了v1.14.6 Beta版本。 在Flutter诞生之前,已经有许多跨平台UI框架的方案如Cordova、ReactNative、weex、uni-app、Hippy等,常见的需要处理兼容的终端平台也包括android、ios、web、Iot等,但是在大前端的浪潮下,对于企业和开发者来说开发效率和使用体验都十分重要,传统的做法莫过于分不同的团队开发不同的终端项目,如果还要继续向其他平台,拓展的话,我们需要付出的成本和时间将成倍增长。正因为如此,在这样的背景下,Flutter等跨端框架的兴起,从本质上讲,帮助开发者增加业务代码的复用率,减少因为要适配多个平台带来的工作量,从而降低开发成本、提高开发效率。 纵观已有的跨端方案,可以分为三类:Web 容器、泛 Web 容器、自绘引擎框架。 基于web容器即基于浏览器的跨平台也做得越来越好,自然管线也越来越短,与native的一些技术手段来实现性能上的相互补充。比如Egret、Cocos、Laya这些游戏引擎,它们在跨平台方面的做法多以Typescript编写,在iOS和安卓平台的各种浏览器中轻松的运行HTML5游戏,并在不同平台浏览器里提供近乎一致的用户体验,比如Egret还会提供高效的 JS-C Binding 编译机制,以满足游戏编译为原生格式的需求,不过大多数HTML游戏引擎也属于web容器这个范畴内。web容器框架也有一个明显的致命(在对体验&性能有较高要求的情况下)的缺点,那就是WebView的渲染效率和JavaScript执行性能太差。再加上Android各个系统版本和设备厂商的定制,很难保证所在所有设备上都能提供一致的体验。 泛 Web 容器框架比如ReactNative和Weex,即上层通过面向前端友好的UI,下层通过native的渲染形式,虽然同样使用类HTML+JS的UI构建逻辑,但是最终会生成对应的自定义原生控件,以充分利用原生控件相对于WebView的较高的绘制效率,同时H5与native相互补充来达到更好的用户体验,这也是一种很好的解决方案。缺陷也很明显,随着系统版本变化和API的变化,开发者可能也需要处理不同平台的差异,甚至有些特性只能在部分平台上实现,这样框架的跨平台特性就会大打折扣。 自绘引擎框架这里专指Flutter框架,从底层就承担跨端的任务和渲染方式,从目前来看,从技术的实现和方案的成熟度、产品的性能方面比较,Flutter有很大可能成为下一代主流跨平台框架。 Flutter与其他跨端框架的不同点之一就是自带渲染引擎,Flutter渲染引擎依靠跨平台的Skia图形库来实现,Skia引擎会将使用Dart语言构建的抽象的视图结构数据加工成GPU数据,交由 OpenGL 最终提供给 GPU 渲染,至此完成渲染闭环,因此可以在最大程度上保证一款应用在不同平台、不同设备上的体验一致性。 而开发语言选用的是同时支持 JIT和 AOT的 Dart语言,Dart本身提供了三种运行方式,应对web环境,用Dart2js编译成JavaScript代码,运行在常规浏览器中;使用DartVM直接在命令行中运行Dart代码;AOT方式编译成机器码,例如Flutter App框架。而且Dart 避免了抢占式调度和共享内存,可以在没有锁的情况下进行对象分配和垃圾回收,在性能方面表现相当不错,不仅保证了开发效率,代码性能和用户体验也更卓越。因此,Flutter在各类跨平台移动开发方案中脱颖而出。同时在去年2019的Google IO大会上,备受关注的Fuchsia系统虽然并没有发布,但是宣布了 Flutter除了支持开发 Android 和 iOS 程序之外,现在还支持开发Web程序了,在 I/O 大会上,谷歌发布了 Web 版 Flutter 的首个技术预览版,宣布 Flutter 将为包括 Google Home Hub 在内的 Google Smart Display 平台提供技术支持,并迈出利用 Chrome 操作系统支持桌面级应用的第一步。 很多JS开发者会思考Google Flutter团队至于为啥选择Dart而不是JS,其实Google 公司给出的原因很简单也很直接:Dart 语言开发组就在隔壁,对于 Flutter 需要的一些语言新特性,能够快速在语法层面落地实现;而如果选择了 JavaScript,就必须经过各种委员会(TC39等)和浏览器提供商漫长的决议。 Flutter绘制原理 在计算机系统中,图像的显示需要 CPU、GPU 和显示器一起配合完成:CPU 负责图像数据计算,GPU 负责图像数据渲染,而显示器则负责最终图像显示。 CPU 把计算好的、需要显示的内容交给 GPU,由 GPU 完成渲染后放入帧缓冲区,随后视频控制器根据垂直同步信号(VSync)以每秒 60 次的速度,从帧缓冲区读取帧数据交由显示器完成图像显示。 操作系统在呈现图像时遵循了这种机制,而 Flutter 作为跨平台开发框架也采用了这种底层方案。下面有一张更为详尽的示意图来解释 Flutter 的绘制原理。可以看到,Flutter 关注如何尽可能快地在两个硬件时钟的 VSync 信号之间计算并合成视图数据,然后通过 Skia 交给 GPU 渲染:UI 线程使用 Dart 来构建视图结构数据,这些数据会在 GPU 线程进行图层合成,随后交给 Skia 引擎加工成 GPU 数据,而这些数据会通过 OpenGL 最终提供给 GPU 渲染。 Skia原理 Skia 是一款用由C++ 开发的2D 图像绘制引擎。在2005 年被 Google 公司收购后被广泛应用在 Android和其他等核心产品上,Skia 目前是Android 官方的图像渲染引擎,因此 Flutter Android SDK 无需内嵌 Skia 引擎就可以获得天然的 Skia 支持;而对于 iOS 平台来说,由于 Skia 是跨平台的,因此它作为 Flutter iOS 渲染引擎被嵌入到 Flutter 的 iOS SDK 中,替代了 iOS 闭源的 Core Graphics/Core Animation/Core Text,这也正是 Flutter iOS SDK 打包的 App 包体积比 Android 要大一些的原因。 底层渲染能力统一了,上层开发接口和功能体验也就随即统一了,开发者再也不用操心平台相关的渲染特性了。也就是说,Skia 保证了同一套代码调用在 Android 和 iOS 平台上的渲染效果是完全一致的。 Flutter架构 Framework底层是Flutter引擎,引擎主要负责图形绘制(Skia)、文字排版(libtxt)和提供Dart运行时,引擎全部使用C++实现,Framework层使我们可以用Dart语言调用引擎的强大能力。Flutter 架构采用分层设计,从下到上分为三层,依次为:Embedder、Engine、Framework。 Embedder 是操作系统适配层,实现了渲染 Surface 设置,线程设置,以及平台插件等平台相关特性的适配。从这里我们可以看到,Flutter 平台相关特性并不多,这就使得从框架层面保持跨端一致性的成本相对较低。 Engine 层主要包含 Skia、Dart 和 Text,实现了 Flutter 的渲染引擎、文字排版、事件处理和 Dart 运行时等功能。Skia 和 Text 为上层接口提供了调用底层渲染和排版的能力,Dart 则为 Flutter 提供了运行时调用 Dart 和渲染引擎的能力。而 Engine 层的作用,则是将它们组合起来,从它们生成的数据中实现视图渲染。 Framework 层则是一个用 Dart 实现的 UI SDK,包含了动画、图形绘制和手势识别等功能。为了在绘制控件等固定样式的图形时提供更直观、更方便的接口,Flutter 还基于这些基础能力,根据 Material 和 Cupertino 两种视觉设计风格封装了一套 UI 组件库,开发者可以直接使用这些组件库。 Flutter运行流程 页面中的各界面元素(Widget)以树的形式组织,即控件树。Flutter 通过控件树中的每个控件创建不同类型的渲染对象,组成渲染对象树。在Flutter界面渲染过程分为三个阶段:布局、绘制、合成,布局和绘制在Flutter框架中完成,合成则交由引擎负责。 Flutter 采用深度优先机制遍历渲染对象树,决定渲染对象树中各渲染对象在屏幕上的位置和尺寸。在布局过程中,渲染对象树中的每个渲染对象都会接收父对象的布局约束参数,决定自己的大小,然后父对象按照控件逻辑决定各个子对象的位置,最终完成布局过程。这里只需要注意一点,无论布局还是绘制,都是父子间的遍历关系:父Widget的布局需要依赖子Widget的布局结果;而绘制则反过来(子Widget需要盖在父Widget上),布局是后续遍历,绘制是前序遍历,他们都是深度优先遍历。 Flutter生命周期 可以看到,Flutter中State 的生命周期可以分为 3 个阶段:创建(插入视图树)、更新(在视图树中存在)、销毁(从视图树中移除)。接下来,我们一起看看每一个阶段的具体流程。 第一步创建 State 初始化时会依次执行 :构造方法 -> initState -> didChangeDependencies -> build,随后完成页面渲染。构造方法是 State 生命周期的起点,Flutter 会通过调用StatefulWidget.createState() 来创建一个 State。我们可以通过构造方法,来接收父 Widget 传递的初始化 UI 配置数据。这些配置数据,决定了 Widget 最初的呈现效果。 initState,会在 State 对象被插入视图树的时候调用。这个函数在 State 的生命周期中只会被调用一次,所以我们可以在这里做一些初始化工作,比如为状态变量设定默认值。 didChangeDependencies 则用来专门处理 State 对象依赖关系变化,会在 initState() 调用结束后,被 Flutter 调用。 build,作用是构建视图。经过以上步骤,Framework 认为 State 已经准备好了,于是调用 build。我们需要在这个函数中,根据父 Widget 传递过来的初始化配置数据,以及 State 的当前状态,创建一个 Widget 然后返回。 第二步更新 Widget 的状态更新,主要由个方法触发:setState、didchangeDependencies、didUpdateWidget。 setState:我们最熟悉的方法之一。当状态数据发生变化时,我们总是通过调用这个方法告诉 Flutter:“我这儿的数据变啦,请使用更新后的数据重建 UI!” didChangeDependencies:State 对象的依赖关系发生变化后,Flutter 会回调这个方法,随后触发组件构建。哪些情况下 State 对象的依赖关系会发生变化呢?典型的场景是,系统语言 Locale 或应用主题改变时,系统会通知 State 执行 didChangeDependencies 回调方法。 didUpdateWidget:当 Widget 的配置发生变化时,比如,父 Widget 触发重建(即父 Widget 的状态发生变化时),热重载时,系统会调用这个函数。一旦这三个方法被调用,Flutter 随后就会销毁老 Widget,并调用 build 方法重建 Widget。 第三步销毁 比如组件被移除,或是页面销毁的时候,系统会调用 deactivate 和 dispose 这两个方法,来移除或销毁组件。 Flutter生态圈及其常用框架 一项技术一个框架是否流行,最直观的体现就是它的生态圈是否活跃,下面列举了一些Flutter开发中常用的库工具。 参考文献 1、[Flutter原理与实践](https://tech.meituan.com/2018/08/09/waimai-flutter-practice.html) 少杰 2、[Flutter框架技术概览](https://flutter.dev/docs/resources/technical-overview) 3、[Flutter中文官网](https://pub.dartlang.org/flutter/) 4、[Flutter插件仓库](https://pub.dev/flutter/packages)

罗思雨 2020-02-27 11:47:50 0 浏览量 回答数 0

问题

【python学习全家桶】263道python热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:21 7217 浏览量 回答数 2
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 云栖号物联网 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 云栖号弹性计算 阿里云云栖号 云栖号案例 云栖号直播