2018年某大学生程序员实习报告(JS部分)_第1页
2018年某大学生程序员实习报告(JS部分)_第2页
2018年某大学生程序员实习报告(JS部分)_第3页
2018年某大学生程序员实习报告(JS部分)_第4页
2018年某大学生程序员实习报告(JS部分)_第5页
已阅读5页,还剩5页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

2018年某大学生程序员实习报告(JS部分)JS部分:一、正则表达式正则表达式由两个正斜杠/表达式/包裹起来;:匹配字符串的开头;$:匹配字符串的结尾;+:匹配+前面一个或多个的子表达式;*:匹配*前面零个或多个的子表达式;n:限定n字符;n,:限定n个以上的字符;n,m:限定n个至m个的字符;?:匹配前面的子表达式零次或一次d:匹配数字;0-9:匹配数字;a-z:匹配小写字母;A-Z:匹配大写字母;a-zA-Z:匹配所有英文字母;w:匹配字母、数字、下划线。等价于A-Za-z0-9_;W:匹配非字母、数字、下划线。等价于 A-Za-z0-9_。更多请看:二、适配方案:在移动端上,每个手机的分辨率都不同,以前都是使用css媒体查询media,但现在再使用媒体查询已经太老旧了,不仅代码冗余还消耗性能;而用js进行移动端的适配,是个很好的选择。现在较流行的适配方案有网易的rem.js和淘宝的flexible.js。其实对于不同的适配方案,rem与px的换算也是不同的。 1) rem.js 详情请看:E:/文档/common/index.html。 2) flexible.jsFlexible.js是阿里巴巴团队写的终端适配解决方案。flexible.js 的用法非常的简单,在页面的中引入 flexible_css.js,flexible.js文件:目前Flexible会将视觉稿分成*100份*(主要为了以后能更好的兼容vh和vw),而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出:换算1a = 7.5px1rem = 75px详情请看:。 3) ViewPort我们在代码中通常能见到在头部引入这么一个标签:这是一个使页面自适应设备的标签,详情请看:。这两篇博文对viewPort的讲解很详细,值得一看。 三、框架:1.Vue:Vue-cli打包有一个坑,里面的css压缩打包会把css前缀给去掉,导致打包后的文件跟开发环境不同,且会把公共部分重复打包,使得打包过后的css文件非常大。1)组件化:当项目页面中出现多处相同的样式和功能的时候,应把这个重复的部分封装成一个组件出来,并暴露一些属性给外部使得组件可以被定制,方便后续的使用。 2)Ajax和axios: ajax是jq的一个异步请求的方法,基本用法为:$.ajax( type: POST, /请求类型 url: serverUrlurl, /请求接口地址 dataType: json, /参数类型 data: data, /参数 async: true, /是否为异步请求 beforeSend: function (request) /发送请求前执行的方法 . , success: function (msg) /请求成功后执行的方法 successFun(msg) ,Error /请求失败后执行的方法 Axios 是一个基于 promise 的 HTTP 库,用法相对于ajax来说较为简洁。特征:从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF 基本用法:axios.post(api, /api:请求的接口,请求的参数 firstName: Fred, lastName: Flintstone ) . then(function (response) /请求后执行的方法 console.log(response); ) .catch(function (error) /异常处理 console.log(error); ); 3)Vue中的Prop:Vue中的数据都是只作用于当前组件的,要想在子组件和父组件中传递数据,就得 使用prop和emit。Prop是父组件把数据暴露给子组件的一个属性,使用方法为:Props:Foo:Type:StringNumberBooleanFunctionObjectArraySymbol 在组件中绑定原生方法应加上.native;Emit是组件向外传递数据的一个属性。 4) Vuex:目前对vuex还没有太深的理解,只知道大概是保存页面状态的一个东西。详情请看:。 四、时间戳在项目中出现过因为css和js文件缓存出现样式混乱的问题,主要出现在手机使用过老版页面,在更新后进入新版页面会出现样式重叠混乱。这时候应该在引入外部文件的和标签后加入时间戳(时间的毫秒数或一组随机数),最好按照一定格式添加,如:后面v=xxx可表示时间或版本。 五、es6新增1)Let :用let定义变量。Let是块作用域的,不能在声明前使用,使用let不会造成全局污染。2)Const:用const声明常量。3)解构赋值 const arr=1,2,3,4,5; const s,n=arr; alert(s,n);4)Class:引入了class关键字来表示一个对象。5)For.of:使用for.of循环,即可循环数组也可循环字符串。let iterable = 10, 20, 30;for (const value of iterable) console.log(value);6)promise对象:Promise 是异步编程的一种解决方案,比传统的解决方案回 调函数和事件更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语 言标准,统一了用法,原生提供了Promise对象。Promise通常使用的方法是resolve(成功)和reject(失败)。Promise.

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论