2018年某大學(xué)生程序員實(shí)習(xí)報(bào)告(JS部分)

2018年某大學(xué)生程序員實(shí)習(xí)報(bào)告 （JS部分）前都是使用css媒體查詢media，但現(xiàn)在再使用媒體查詢已經(jīng)太老舊了，不僅代碼冗余還消耗性能；而用js進(jìn)行移動(dòng)端的適配，是個(gè)很好的選擇?，F(xiàn)在較流行的適配方案有網(wǎng)易的rem.js和淘寶的flexible.js。其實(shí)對(duì)于不同的適配方案，rem與px的換算也是不同的。1)rem.js詳情請(qǐng)看：E:/文檔/common/index.html2)2)flexible.jsFlexible.js是阿里巴巴團(tuán)隊(duì)寫的終端適配解決方案。flexible.js的用法非常的簡(jiǎn)單，在頁(yè)面的中引入flexible_css.js,flexible.js文件：目前Flexible會(huì)將視覺稿分成**100份**（主要為了以后能更好的兼容vh和VW）,而每一份被稱為一個(gè)單位 a。同時(shí)1rem單位被認(rèn)定為10a。針對(duì)我們這份視覺稿可以計(jì)算出：換算1a1a=7.5px1rem=75px詳情請(qǐng)看：3)ViewPort我們?cè)诖a中通常能見到在頭部引入這么一個(gè)標(biāo)簽：這是一個(gè)使頁(yè)面自適應(yīng)設(shè)備的標(biāo)簽，詳情請(qǐng)看：這兩篇博文對(duì)viewPort的講解很詳細(xì)，值得一看三、框架：1.Vue：Vue-cli打包有一個(gè)坑，里面的css壓縮打包會(huì)把css前綴給去掉，導(dǎo)致打包后的文件跟開發(fā)環(huán)境不同，且會(huì)把公共部分重復(fù)打包，使得打包過后的css文件非常大。1)組件化：當(dāng)項(xiàng)目頁(yè)面中出現(xiàn)多處相同的樣式和功能的時(shí)候，應(yīng)把這個(gè)重復(fù)的部分封裝成一個(gè)組件出來，并暴露一些屬性給外部使得組件可以被定制，方便后續(xù)的使用。2)Ajax和axios：ajax是jq的一個(gè)異步請(qǐng)求的方法，基本用法為：$.ajax({$.ajax({type:‘POST',//請(qǐng)求類型url:serverUrl[url],//請(qǐng)求接口地址dataType:“json”,//參數(shù)類型data:data,//參數(shù)發(fā)送請(qǐng)求前執(zhí)async:true,//是否為異步請(qǐng)求beforeSend:function(request){//發(fā)送請(qǐng)求前執(zhí)行的方法請(qǐng)求成功后執(zhí)行的方法},success:function(msg){//請(qǐng)求成功后執(zhí)行的方法successFun(msg)successFun(msg)},Error{//請(qǐng)求失敗后執(zhí)行的方法Axios是一個(gè)基于promise的HTTP庫(kù)，用法相對(duì)于ajax來說較為簡(jiǎn)潔。特征：axios.post(api,axios.post(api,{//api ：請(qǐng)求的接口,{請(qǐng)求的參數(shù)}從瀏覽器中創(chuàng)建從瀏覽器中創(chuàng)建XMLHttpRequest從node.js發(fā)出http請(qǐng)求支持PromiseAPI攔截請(qǐng)求和響應(yīng)轉(zhuǎn)換請(qǐng)求和響應(yīng)數(shù)據(jù)取消請(qǐng)求自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)客戶端支持防止CSRF/XSRF基本用法：

firstName:‘FredlastName:‘Flintstone請(qǐng)求后執(zhí)行的方法})請(qǐng)求后執(zhí)行的方法.then(function(response){//console.log(response);3)Vue3)Vue中的Prop：})})異常處理.catch(function(error){//console.log(error);異常處理});Vue中的數(shù)據(jù)都是只作用于當(dāng)前組件的，要想在子組件和父組件中傳遞數(shù)據(jù)，就得使用prop和emit。Prop是父組件把數(shù)據(jù)暴露給子組件的一個(gè)屬性，使用方法為：Props：{Foo：{Type：StringString}}NumberBooleanFunctionObjectArraySymbol}在組件中綁定原生方法應(yīng)加上.native；Emit是組件向外傳遞數(shù)據(jù)的一個(gè)屬性。Vuex：目前對(duì)vuex還沒有太深的理解，只知道大概是保存頁(yè)面狀態(tài)的一個(gè)東西。詳情請(qǐng)看：四、時(shí)間戳在項(xiàng)目中出現(xiàn)過因?yàn)閏ss和js文件緩存出現(xiàn)樣式混亂的問題，主要出現(xiàn)在手機(jī)使用過老版頁(yè)面，在更新后進(jìn)入新版頁(yè)面會(huì)出現(xiàn)樣式重疊混亂。這時(shí)候應(yīng)該在引入外部文件的和標(biāo)簽后加入時(shí)間戳（時(shí)間的毫秒數(shù)或一組隨機(jī)數(shù)），最好按照一定格式添加，如：后面v=xxx可表示時(shí)間或版本。五、 es6新增Let：用let定義變量。Let是塊作用域的，不能在聲明前使用，使用let不會(huì)造成全局污染。Const：用const聲明常量解構(gòu)賦值constarr=[1,2,3,4,5];const[s,,,,n]=arr;alert(s,n);alert(s,n);}}Class：引入了class關(guān)鍵字來表示一個(gè)對(duì)象。For...of：使用for...of循環(huán)，即可循環(huán)數(shù)組也可循環(huán)字符串。letiterable=[10,20,30];for(constvalueofiterable){console.log(value);promise對(duì)象：Promise是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6將其寫進(jìn)了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了Promise對(duì)象。Promise通常使用的方法是resolve(成功)和reject失敗)。Promise.then()的the