2018年某大学生程序员实习报告(JS部分)

2018年某大学生程序员实习报告 （JS部分）前都是使用css媒体查询media，但现在再使用媒体查询已经太老旧了，不仅代码冗余还消耗性能；而用js进行移动端的适配，是个很好的选择。现在较流行的适配方案有网易的rem.js和淘宝的flexible.js。其实对于不同的适配方案，rem与px的换算也是不同的。1)rem.js详情请看：E:/文档/common/index.html2)2)flexible.jsFlexible.js是阿里巴巴团队写的终端适配解决方案。flexible.js的用法非常的简单，在页面的中引入flexible_css.js,flexible.js文件：目前Flexible会将视觉稿分成**100份**（主要为了以后能更好的兼容vh和VW）,而每一份被称为一个单位 a。同时1rem单位被认定为10a。针对我们这份视觉稿可以计算出：换算1a1a=7.5px1rem=75px详情请看：3)ViewPort我们在代码中通常能见到在头部引入这么一个标签：这是一个使页面自适应设备的标签，详情请看：这两篇博文对viewPort的讲解很详细，值得一看三、框架：1.Vue：Vue-cli打包有一个坑，里面的css压缩打包会把css前缀给去掉，导致打包后的文件跟开发环境不同，且会把公共部分重复打包，使得打包过后的css文件非常大。1)组件化：当项目页面中出现多处相同的样式和功能的时候，应把这个重复的部分封装成一个组件出来，并暴露一些属性给外部使得组件可以被定制，方便后续的使用。2)Ajax和axios：ajax是jq的一个异步请求的方法，基本用法为：$.ajax({$.ajax({type:‘POST',//请求类型url:serverUrl[url],//请求接口地址dataType:“json”,//参数类型data:data,//参数发送请求前执async:true,//是否为异步请求beforeSend:function(request){//发送请求前执行的方法请求成功后执行的方法},success:function(msg){//请求成功后执行的方法successFun(msg)successFun(msg)},Error{//请求失败后执行的方法Axios是一个基于promise的HTTP库，用法相对于ajax来说较为简洁。特征：axios.post(api,axios.post(api,{//api ：请求的接口,{请求的参数}从浏览器中创建从浏览器中创建XMLHttpRequest从node.js发出http请求支持PromiseAPI拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止CSRF/XSRF基本用法：

firstName:‘FredlastName:‘Flintstone请求后执行的方法})请求后执行的方法.then(function(response){//console.log(response);3)Vue3)Vue中的Prop：})})异常处理.catch(function(error){//console.log(error);异常处理});Vue中的数据都是只作用于当前组件的，要想在子组件和父组件中传递数据，就得使用prop和emit。Prop是父组件把数据暴露给子组件的一个属性，使用方法为：Props：{Foo：{Type：StringString}}NumberBooleanFunctionObjectArraySymbol}在组件中绑定原生方法应加上.native；Emit是组件向外传递数据的一个属性。Vuex：目前对vuex还没有太深的理解，只知道大概是保存页面状态的一个东西。详情请看：四、时间戳在项目中出现过因为css和js文件缓存出现样式混乱的问题，主要出现在手机使用过老版页面，在更新后进入新版页面会出现样式重叠混乱。这时候应该在引入外部文件的和标签后加入时间戳（时间的毫秒数或一组随机数），最好按照一定格式添加，如：后面v=xxx可表示时间或版本。五、 es6新增Let：用let定义变量。Let是块作用域的，不能在声明前使用，使用let不会造成全局污染。Const：用const声明常量解构赋值constarr=[1,2,3,4,5];const[s,,,,n]=arr;alert(s,n);alert(s,n);}}Class：引入了class关键字来表示一个对象。For...of：使用for...of循环，即可循环数组也可循环字符串。letiterable=[10,20,30];for(constvalueofiterable){console.log(value);promise对象：Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了Promise对象。Promise通常使用的方法是resolve(成功)和reject失败)。Promise.then()的the