关于2020年8月7日—8月29日实习学习到的内容
我是一名大三（准大四）的学生，本专业学习通信工程，从三月份自学前端至今，七月份找到了一份实习，感觉在实习中学习到的内容会比较深入一点叭。关于这篇文章有一些内容是我从网上搜索到的，并不都是个人编写的哈！如有侵权之类的，觉得不太好的可以和我讲。
2020/8/7
任务需求:
H5、PC端答题根据约定返回字段值显示隐藏页面奖励提示（控制按钮两层重叠）；
前期代码v-if一个变化另一个会随着变化，改为v-show：
谦虚、谨慎
一、v-if、和v-show的区别为:
v-show:
1、v-show仅仅控制元素的显示方式，通过display属性的none;
2、当我们需要经常切换某个元素的显示与隐藏时，使用v-show会更加节省性能上的开销
v-if:
1、v-if会控制这个DOM节点的存在与否；
2、运行条件很少改变，使用v-if较好
二、字段对应位置：
本次任务后端给的接口字段不在应该出现的位置，解决思路为为现有字段追加对应属性；
前期还需要判断 1、所需对象是否存在； 2、所需对象是否存在所需属性； 3、Object.keys(xxx).length > 0 判断对象中的属性值的个数大于0
三、为对象增添属性、判断属性是否存在：
1、为对象添加属性： 对象名[‘属性名’]=属性值
awardObj[‘hideRewardPrompt’] = this.wj.hideRewardPrompt
2、判断属性是否存在： 对象名.hasOwnProperty(‘属性值’)
shareObj.hasOwnProperty(‘hideShareRewardPrompt’
四、利用双向绑定获取上次传参：
此次任务需要首先为v-model绑定的值赋初始值，利用接口去获得奖励信息，将奖励信息中对应字段的值赋给v-model绑定的值；然后将v-model绑定的值直接作为保存奖励信息接口的参数传递给后台；
五、计算属性中的方法可直接写在样式中，不需要加()
v-show=“getAwardType === 1”
六、解决冲突（标记为已解决）：
遇到冲突之后先贮藏，解决冲突之后右击文件点击标记为已解决，即可继续提交代码；
七、错误处理信息提示（.catch);
.catch(err=>{
this.$message.error(err.message)
})
八、判断时精简代码：
0转换为布尔值是false，1转换为布尔值是true;
1==true
res:true
九、据说是vue基础：
mixins: [PatchMixins],另一个页面引用之后则可以使用PatchMixins中的全部内容；
2020/8/10
任务需求：发布设置-微信红包页面（增加单选框，进行切换控制）
一、双单选框之间进行切换，默认选中写法：
固定金额
随机金额
增加prop属性绑定，增加v-model双向数据绑定。主要问题涉及paymentInfo.status中的值与:label；
是否匹配，匹配则默认选中，此刻需注意: label=“1”，表示label的值为数字1； label=“1”，表；
示label的值为字符串1。
二、el-input中无法输入的问题：
el-input因层级嵌套太深，导致无法输入，可给其使用v-model进行双向绑定。
三、如何拿到对应验证表单中的值：
let val = this.paymentInfo[rule.fullField]；使用rule.fullField。
2020/8/11
一、二倍图的使用方式：
引入二倍图之后设置宽和高，还需设置background-size
width: 20px;
height: 20px;
background-size: 20px 20px;
vant中van-notice-bar标签中的left-icon不仅可以引入图标，还可以引入图片；
二、font-size: $font-size-large;
font-size:small; 设置文字字体大小为小
font-size:x-large;设置对象字体大小为较大
font-size:larger;设置对象字体大小为大
三、elementUI中表单验证：
template中
data的return中
paymentInfoRules: {
maxNum: [{ validator: checkRandom, trigger: ‘blur’}]
},
const checkRandom = (rule, value, callback) => {
//可以分别打印
let val = this.paymentInfo[rule.fullField]
if (testRandom.test(rule.fullField) || val === ‘’) {
this.disabled = false
} else {
this.disabled = true
callback(‘请输入有效数字’)
}
}
四、Vant使用方式：
vant组件引入，官网有
五、JXS写法：
JSX中不能写指令v-for、v-if等，可以使用三元表达式代替；
{needAuditFlagAward ? ‘并审核通过’ : ‘’}
并且需要用大括号进行包裹
2020/8/12
一、滚动时单个显示的问题，转换思想：
标签包裹转换思维，无需添加多余类名，直接利用现有三元表达式进行判断；
二、移动端文字上下滚动用vant中的组件、PC端自行查找组件：
https://blog.csdn.net/xinzi11243094/article/details/88681511?ops_request_
misc=%257B%2522request%255Fid%2522%253A%2522159715053519724811837046%2522
%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159
715053519724811837046&biz_id=0&utm_medium=distribute.pc_search_result.none
-task-blog-2~all~first_rank_ecpm_v3~pc_rank_v2-2-88681511.first_rank_ecpm_
v3_pc_rank_v2&utm_term=vue+%E5%AE%9E%E7%8E%B0%E6%96%87%E5%AD%97%E4%B8%8A%E
4%B8%8B%E6%BB%9A%E5%8A%A8&spm=1018.2118.3001.4187
三、JSX中：
在export default中利用render(h, context)拿到所需要的属性；
不能够在JSX中使用data,结果还是underfined
四、复习CSS动画animation transition（过渡）：
谁做动画给谁加：
animation: myMove 5s ease-in infinite;
transition:all 3s ease 0s;
animation-fill-mode: forwards;
注意动画名称：
@keyframes myMove {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100px);
}
}
2020/8/13
一、JSX中判断类名写法：
<div class={animation ? 'slideBox animate' : 'slideBox awardAnimate'}>
JSX中多了很多用大括号进行包裹的地方；
二、学习王润泽滚动屏利用类名进行高度判断写法：
.finally(e => {
setTimeout(() => {
this.initInfoHeight && this.initInfoHeight()
})
})
},
他说加setTimeout为了防止不出错，目前未懂。
initInfoHeight() {
let el = this.$refs.infoEl
let oh = el.offsetHeight
let wh = window.innerHeight
if (oh > wh) {
el.style.position = 'static'
el.style.minHeight = '100%'
el.style.height = ''
this.$refs.infoScroll.refresh()
} else {
el.style.height = '100%'
}
},
三、解决方式：采取CSS动画
在PC端尤其JSX中显示页面提示语滚动最后采取的方式仍未CSS动画；单个显示利用判断类名。
四、逻辑思维：
微信红包中的答题红包新增字段前期准备中，自己发现有一个bug，直接进来显示正常而当叉
掉不刷新再次点击会出现问题和对应状态不保存的问题；仔细想想发现在叉掉dialog时，没有
将对应字段数据重置，导致缺少字段造成；
2020/8/14
一、Window open() 方法：
open() 方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
二、setTimeout用法：
setTimeout(function(){ alert("Hello"); }, 3000);
三、float: left;
以为float: left;不起作用，其实是本身float: left；后的元素会占据原有位置；position:
absolute则不会；
垂直居中：
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
四、用v-if控制整个标签的显示与隐藏
五、js中try、catch、finally的执行规则
try:语句测试代码块中的错误；
catch：只有try里面的代码块发生错误时，才执行这里面的代码；
finally：无论有无异常里面的代码都会执行；
六、promise用法：
var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(value) {
// fail
await后面必须跟promise才能产生同步效果；
后面的函数不方便用.then的时候，可以直接在promise函数中写
resolve()这样能够继续执行后续代码；
七、宏任务、微任务；
setTimeout(_ => console.log(4))
new Promise(resolve => {
resolve()
console.log(1)
}).then(_ => {
console.log(3)
})
console.log(2)
//res:1 2 3 4
也就是new Promise在实例化的过程中所执行的代码都是同步进行的，而then中注
册的回调才是异步执行的。在同步代码执行完成后才检查是否有异步任务完成，并
执行对应的回调，而微任务又会在宏任务之前执行。
setTimeout(_ => console.log(4))
new Promise(resolve => {
resolve()
console.log(1)
}).then(_ => {
console.log(3)
Promise.resolve().then(_ => {
console.log('before timeout')
}).then(_ => {
Promise.resolve().then(_ => {
console.log('also before timeout')
})
})
})
console.log(2)
即便继续在Promise中实例化Promise,其输出依然会早于setTimeout的宏任务
八、同步任务与异步任务：
同步任务:会立即执行的任务
异步任务:不会立即执行的任务(异步任务又分为宏任务与微任务)
https://blog.csdn.net/qq_42833001/article/details/87252890
2020/8/17
一、this.$store.dispatch
vuex中的内容：
this.$store.dispatch('setWj', res.data.data)
表示调取setWj方法，并更新；
二、prop
父组件向子组件传值用prop；
prop是单向数据流；
三、elementUI 表单验证：
表单验证理解好了也不是很难；
有关属性绑定：要给el-form增加:rules属性规则:rules="xxx"，xxx来定义验证规则；
其次要给单独表单列表项prop属性设置为需校验的字段名；
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
官网上述内容是为了点击确定按钮的时候对表单整体进行校验；
四、项目搭建
1.使用cnpm install -g @vue/cli安装vue脚手架（cnpm为淘宝镜像，npm为国外地址）
使用vue -V查看安装vue脚手架的版本；
注：在这个过程中，遇到“无法加载文件 C:\Users\28031\AppData\Roaming\npm\
vue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.micro
soft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。”此问题：
解决方式为：
运行powershell（管理员身份）
输入 set-ExecutionPolicy RemoteSigned
指定版本： cnpm install -g @vue/cli@版本号
2.搭建项目：
vue create vue-demo3.0(名字)
接下来可以默认、手动安装；
Babel将ES6语法转换为浏览器能够识别的；
2020/8/18
一、计算属性：
计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处，把新的数据缓存下来，
当其他的依赖数据没有发生改变，它调用的是缓存的数据，极大提高了程序的性能；
二、@：
import logoImg from '@/config/logo/logo.png' @表示进入到对应的根目录下；
三、图片地址：
当将图片地址写在双向绑定的数据中，需要加require,
require("@/assets/img/1.jpg"),
四、window.open()方法：
第一个参数可以写要跳转的地址，第二个参数可以写跳转页面的形式（当前页面打开、新页面打开、......）
_blank新页面打开；
_self当前页面打开；
还有很多巴拉巴拉，可以上网去查；
五、JSX中属性绑定，和事件绑定
属性绑定：v-model={publish}
事件绑定：onChange = {context.listeners.publishToHall}
主要是{}语法，和相关参数的传递；
六、报错：You may have an infinite update loop in a component render function.
https://blog.csdn.net/u011584949/article/details/83821278
2020/8/19
一、$route、$router
$route表示当前路由信息对象；可以获取一些名字啊等等信息；
$router表示路由全局的实例对象，可以实现跳转功能；
二、vuex
在vuex中把对应的辅助函数引进来，import {mapGetters} from 'vuex'
2020/8/20
一、LeetCode:除自身以外数组的乘积：
未优化之前：
var productExceptSelf = (nums) => {
const N = nums.length
const leftOutput = []
const rightOutput = []
const output = []
leftOutput[0] = 1
rightOutput[N-1] = 1
for (let i = 1; i < N; i++) {
leftOutput[i] = leftOutput[i - 1] * nums[i-1]
}
for (let i = N-2; i > 1; i--) {
rightOutput[i] = rightOutput[i-1] * nums[i+1]
}
for (let i = 0; i < N; i++) {
output[i] = leftOutput[i]*rightOutput[i]
}
return output
}
注重复杂度：
var productExceptSelf = (nums) => {
const N = nums.length
const output = []
output[0] = 1
for (let i = 1; i < N; i++) {
output[i] = output[i] * nums[i-1]
}
let rightOutput = 1
for (let i = N-1; i >= 0; i--) {
output[i] = output[i] * rightOutput
rightOutput = rightOutput * nums[i]
}
return output
}
二、括号生成；DFS回溯
const generateParentthesis = (n) => {
const res = []
function dfs(leftRemain, rightRemain, str) {
if(leftRemain === 0 && rightRemain === 0) {
res.push(str)
return
}
if(leftRemain > 0) {
dfs(leftRemain-1, rightRemain, str + '(')
}
if(leftRemain < rightRemain) {
dfs(leftRemain, rightRemain-1, str + ')')
}
}
dfs(n, n, '')
return res
}
三、小偷如何偷最多的money
优化前：
const rob = (nums) => {
const len = nums.length
if (len === 0) return 0
if (len === 1) return nums[0]
let dp = new Array[len]
dp[0] = nums[0]
dp[1] = Math.max(nums[0], nums[1])
let res = dp[1]
for(let i = 0; i < len; i++) {
dp[i] = Math.max(nums[i] + dp[i-2],dp[i-1])
res = Math.max(res, dp[i])
}
return res
}
优化后：
const rob = (nums) => {
const len = nums.length
if (len === 0) return 0
if (len === 1) return nums[0]
let preMax = nums[0]
let curMax = Math.max(nums[0], nums[1])
let res = curMax
for(let i = 0; i < len; i++) {
let temp = curMax
curMax = Math.max(nums[i] + preMax, curMax)
preMax = temp
res = Math.max(res, curMax)
}
return res
}
2020/8/21
一、LRU缓存机制 LRU Cache|双向链表 哈希表JS
class ListNode {
constructor(key, value) {
this.key = key
this.value = value
this.next = null
this.prev = null
}
}
// 内存所接受的容量
class LRUCache {
constructor(capacity) {
this.capacity = capacity
this.hashTable = {}
this.count = 0
this.dummyHead = new ListNode()
this.dummyTail = new ListNode()
this.dummyHead.next = this.dummyTail
this.dummyTail.prev = thi.dummyHead
}
get(key) {
let node = this.hashTable[key]
if (node === null) return -1
this.moveToHead(node)
return node.value
}
put(key, value) {
let node = this.hashTable[key]
if (node === null) {
let newNode = new ListNode(key, value)
this.hashTable[key] = newNode
this.count++
this.addToHead(newNode)
if (this.count > this.capacity) {
this.removeLRUItem()
}
} else {
node.value = value
this.moveToHead(node)
}
}
moveToHead(node) {
this.removeFromList(node)
this.addToHead(node)
}
removeFromList(node) {
let tempForPrev = node.prev
let tempForNext = node.next
tempForPrev.next = tempForPrev
tempForPrev.prev = tempForPrev
}
addToHead(node) {
node.prev = this.dummyHead
node.next = this.dummyHead.next
node.next.prev = node
this.dummyHead.next = node
}
}
二、Webpack 极速配置技巧
三件套：
webpack
webpack-cli
webpack-dev-server
处理JS -> ES6 ES7 ES8 装饰器
六件套：
babel-loader@7
babel-core
babel-preset-env
babel-plugin-transform-runtime
babel-plugin-transform-decorators
babel-plugin-transform-decorators-legacy
处理 sass -> css -> style
四大件
sass-loader
node-sass
css-loader
style-loader
// 需要加前缀
postcss-loader autoprefixer
处理模板
ejs-loader
(ejs tpl后缀)
处理HTML
html-webpack-plugin
--save-dev （-D） :安装在开发环境下
--save （-S）:安装在生产环境下
2020/8/24
一、key关键字的作用：
本次bug是对应地址的视频显示不一致的问题，这个过程中打印了各种url，发现都是正确的。
本次是有一个弹层中有一个组件，在组件中是视频播放控制，由于组件中没有绑定key值，所
以显示有问题；当有了关键字之后可以用完即销毁，则不缓存上次的url。
二、vue中loading组件样式：
https://blog.csdn.net/cuk5239/article/details/107664087
:legend="false" 判断是否显示数字
2020/8/25
一、avue相关内容的使用
avue中的设置表格底色变换，利用方法添加类名的方式；
二、转换思维，td>>>tr
需求：需要点击对应表格后面的按钮致使整行底色发生变化；但是由于表格本身的隔行变色以
及鼠标经过底色变换会覆盖需要变换的颜色，利用avue添加类名的方式给tr设置底色，并不能
实现此效果，此时需要变换td的底色，进行更深层次的变换，能够解决此问题；
2020/8/26
一、toLocaleString()运行环境不一样产生结果不一致
需求：需要将国际时间转换为北京时间：2017-03-31T08:02:06Z ---> 2017-03-31 16:02:06
历经千难万险终于找到的下面这个方法：
var utc_datetime = "2017-03-31T08:02:06Z";
function utc2beijing(utc_datetime) {
// 转为正常的时间格式 年-月-日 时:分:秒
var T_pos = utc_datetime.indexOf('T');
var Z_pos = utc_datetime.indexOf('Z');
var year_month_day = utc_datetime.substr(0,T_pos);
var hour_minute_second = utc_datetime.substr(T_pos+1,Z_pos-T_pos-1);
var new_datetime = year_month_day+" "+hour_minute_second; // 2017-03-31 08:02:06
// 处理成为时间戳
timestamp = new Date(Date.parse(new_datetime));
timestamp = timestamp.getTime();
timestamp = timestamp/1000;
// 增加8个小时，北京时间比utc时间多八个时区
var timestamp = timestamp+8*60*60;
// 时间戳转为时间
var beijing_datetime = new Date(parseInt(timestamp) * 1000).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ");
return beijing_datetime; // 2017-03-31 16:02:06
}
console.log(utc2beijing(utc_datetime));
结果兴高采烈的在Node环境中执行得到了想要的北京时间格式，但是，到项目中的浏览器环境中运
行时就出现了问题，也就是所得格式有点差距；
问了前端大佬说可能是toLocalString()这个方法在不同环境中所得到的结果不同，（虽然我没在
网上查到）
最后的解决方式出奇的气人，由于使用的是element UI组件库，只需要给日期控件加上两个format
方法就可以了，我哭了。
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"
2020/8/27
一、isequal和 == 区别（字符串和数组)
isequal是需要自己定义的一个方法；
都是用来判断是否相等
二、store.dispatch
vuex的状态管理，主要可能是vuex不了解，所以觉得这个地方是个问题，不太明白状态管理的意思，
也不知道啥时候能明白；现在能够记住的是store.dispatch是异步的，store.commit是同步的
三、vue使用.env文件配置全局环境变量
vue项目使用.env文件配置全局环境变量
.env 全局默认配置文件，不论什么环境都会加载合并
.env development开发环境下的配置文件
.env production生产环境下的配置文件
关于文件内容：
属性名必须以VUE_APP_开头
关于文件的加载：
根据启动命令vue会自动加载对应的环境，vue是根据文件名进行加载的，所以上面说“不要乱起名，也无需专门控制加载哪个文件”
比如执行npm run serve命令，会自动加载.env.development文件
但是要注意重启项目之后才会生效。
2020/8/29
一、最小栈 Min Stack辅助栈
var MinStack = function () {
this.stack = []
this.min_stack = []
};
MinStack.prototype.push = function (x) {
this.stack.push(x)
if (x <= this.min_stack[this.min_stack.length-1] || this.min_stack.length === 0) {
this.min_stack.push(x)
}
};
MinStack.prototype.pop = function () {
let out = this.stack.pop()
if(this.min_stack[this.min_stack.length - 1] === out) {
this.min_stack.pop()
}
};
MinStack.prototype.top = function () {
return this.stack[this.stack.length - 1]
};
MinStack.prototype.getMin = function() {
return this.min_stack[this.min_stack.length - 1]
};
二、Pow(x, n)快速幂：
var myPow = function (num, power) {
if (power < 0) return 1 / (num * myPow(num, -(power+1)))
if (power === 0) return 1
if (power === 1) return num
let res = 1
while (power > 1) {
if (power % 2 === 1) {
power--
res = res*num
}
num = num * num
power = power / 2
}
return res * num
}
递归
var myPow = function (num, power) {
if (power < 0) return 1 / (num * myPow(num, -(power+1)))
if (power === 0) return 1
if (power === 1) return num
if (power % 2 === 1) {
return num*myPow(num, power-1)
} else {
return myPow(num*num , power/2)
}
}
二叉树的最近公共祖先
var lowestCommonAncestor = function(root, p, q) {
if(root === null || root === q || root === p) {
return root
}
let left = lowestCommonAncestor(root.left, p, q)
let right = lowestCommonAncestor(root.right, p, q){
if (left && right) {
return root
}
return left ? left : right
}
}
emmm 越学感觉越差的多的样子，希望以后的我有所进步ba！！！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
