实习报告(二)
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_]‘。 更多请看:http://www.runoob.com/regexp/regexp-metachar.html 二、适配方案:在移动端上,每个手机的分辨率都不同,以前都是使用css媒体查询media,但现在再使用媒体查询已经太老旧了,不仅代码冗余还消耗性能;而用js进行移动端的适配,是个很好的选择。现在较流行的适配方案有网易的rem.js和淘宝的flexible.js。其实对于不同的适配方案,rem与px的换算也是不同的。 ? 1)?rem.js ? 详情请看:E:/文档/common/index.html。 ? 2)?flexible.js Flexible.js是阿里巴巴团队写的终端适配解决方案。flexible.js 的用法非常的简单,在页面的<head></head>中引入 flexible_css.js,flexible.js文件: <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> 目前Flexible会将视觉稿分成**100份**(主要为了以后能更好的兼容vh和vw),而每一份被称为一个单位a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出: 换算 1a = 7.5px 1rem = 75px 详情请看:https://www.cnblogs.com/interdrp/p/9042749.html。 ? 3)?ViewPort 我们在代码中通常能见到在头部引入这么一个标签: <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 这是一个使页面自适应设备的标签,详情请看:http://www.cnblogs.com/azhai-biubiubiu/p/5305022.html。 https://www.cnblogs.com/2050/p/3877280.html。 这两篇博文对viewPort的讲解很详细,值得一看。 ? 三、框架:1.Vue: Vue-cli打包有一个坑,里面的css压缩打包会把css前缀给去掉,导致打包后的文件跟开发环境不同,且会把公共部分重复打包,使得打包过后的css文件非常大。 1)组件化: 当项目页面中出现多处相同的样式和功能的时候,应把这个重复的部分封装成一个组件出来,并暴露一些属性给外部使得组件可以被定制,方便后续的使用。 ? 2)Ajax和axios: ???ajax是jq的一个异步请求的方法,基本用法为: $.ajax({ Error{ //请求失败后执行的方法 } ? Axios 是一个基于 promise 的 HTTP 库,用法相对于ajax来说较为简洁。 特征:
? 基本用法: 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:
? } } 在组件中绑定原生方法应加上.native;Emit是组件向外传递数据的一个属性。 ? 4)?Vuex: 目前对vuex还没有太深的理解,只知道大概是保存页面状态的一个东西。 详情请看:https://vuex.vuejs.org/zh/guide/。 ? 四、时间戳在项目中出现过因为css和js文件缓存出现样式混乱的问题,主要出现在手机使用过老版页面,在更新后进入新版页面会出现样式重叠混乱。这时候应该在引入外部文件的<link/>和<script/>标签后加入时间戳(时间的毫秒数或一组随机数),最好按照一定格式添加,如: <link rel="stylesheet" type="text/css" href="../../style/foodCard/css1/common.css?v=20180806"/> 后面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]; 6)promise对象:Promise 是异步编程的一种解决方案,比传统的解决方案——回 调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语 言标准,统一了用法,原生提供了Promise对象。 Promise通常使用的方法是resolve(成功)和reject(失败)。 Promise.then()的then方法一定要在new了一个promise对象后才能使用。 ? 更多请看:http://es6.ruanyifeng.com/。 ? 六、异步请求锁在请求之前声明一个变量为true,使得可以请求接口数据,判断如果变量为true,在接口返回数据(不管是成功还是失败),都给变量赋值false。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |