实习报告（二）
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({
type: 'POST', //请求类型
url: serverUrl[url], //请求接口地址
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：
-
- String
- Number
- Boolean
- Function
- Object
- Array
- Symbol
}
}
在组件中绑定原生方法应加上.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];
for (const value of iterable) {
console.log(value);
}
6）promise对象：Promise 是异步编程的一种解决方案，比传统的解决方案——回 调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语 言标准，统一了用法，原生提供了Promise对象。
Promise通常使用的方法是resolve（成功）和reject（失败）。
Promise.then()的then方法一定要在new了一个promise对象后才能使用。
更多请看：http://es6.ruanyifeng.com/。
六、异步请求锁
在请求之前声明一个变量为true，使得可以请求接口数据，判断如果变量为true，在接口返回数据（不管是成功还是失败），都给变量赋值false。
