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