hueke学习

347 阅读5分钟
不错的写法:  
 let errorCode = errors && errors.length && errors[0].errorCode; 
 onkeyup="value=value.replace(/[^\d]/g,'')"
let { responseStatusType: { ack, errors }, boundUserId } = response;

2.element ui 输入框的改造,最多字数区分汉字和数字,并且解决在复制和一次输入多个汉字的时候,字体超出限制的问题

3.高德地图选点使用、

4.颜色取色器

5.单元测试的编写

git reset --soft HEAD^ 软回退,只回退commit,代码改动不变

HEAD^ 表示上一个版本,即上一次的commit,也可以写成HEAD~1
如果进行两次的commit,想要都撤回,可以使用HEAD~2
--soft
不删除工作空间的改动代码 ,撤销commit,不撤销git add file
--hard
删除工作空间的改动代码,撤销commit且撤销add

删除分支: 
git push origin --delete dev20181018

基于release分支克隆出新的本地分支issue66
git checkout -b issue66
4、将新建的本地分支issue66push到远程仓库
git push origin issue66
把dev合并到当前分支
git  merge dev

//将commit_id的提交合并到当前分支
git cherry-pick commit_id 

vue中如何引入css样式
 // 1.使用两个style标签,一个全局一个局部,
 // 2.引入全局的注意顶层的类名唯一,防止css污染
 // 3.引入一个局部,使用scoped
 我感觉1,3 好一点,
<style lang="less" scoped>
@import "./index.less";
</style>
<style lang="less" scoped>
/deep/ .el-form .el-form-item .el-form-item__content {
  height: auto;
}
</style>
  <style lang="less">
      .el-form .el-form-item .el-form-item__content {
      height: auto;
    }
</style>

1.  css中& 代表 同级类名
.bordered {                
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
 }
 等同:
.bordered.float {
  float: left; 
}
.bordered .top {
  margin: 5px;
}
  
  
 2. yarn 和npm 相似 ,是一个包管理器,但是yarn更快,
 yarn init : 初始化一个新项目
 添加依赖包
yarn add [package]
yarn add [package]@[version]
yarn add [package]@[tag]
升级依赖包
yarn upgrade [package]
移除依赖包
yarn remove [package]
安装项目的全部依赖
yarn install

npm 与他相似: 
快速生成 package.json : npm init
运行 npm uninstall jquery 与 npm uninstall jquery --save 的效果相同
(npm 以前的版本需要指定 --save)
安装依赖 :npm install <Module Name> 例子: npm install jquery 
安装全局: npm install -g jshint
卸载模块: npm uninstall <package_name>
更新模块:  npm update

package-lock.json 最重要的作用是锁定版本。在 package-lock.json 中明确写明 jquery 的版本是 3.6.0,而 package.json 中的是 ^3.6.0。

image.png

npm i -D jest ,-D -S 的作用和区别 image.png

数组filter方法会改变原始数组,foreach不会,

xshell 进入编辑文件
vim 1.js 进入文件里面
按键 i  进入编辑模式
编辑结束 按键 esc 退出编辑
按键‘ : ’ 输入命令 
:wq 保存关闭,
:q! 删除改动关闭
这里的‘ :’ 可以输入一些命令,和git 提交解决冲突一样

我想了下,应该是微前端沙箱导致的,微应用无法向window注册内容,而地图又需要注册window,所以需要在父应用也引用下高德

vue 中监听这样可以监听对象中某一个属性的变化,不用监听整个对象,也可以监听$store中的变化或路由的变化

image.png

节流函数总是执行一段时间内最后一次触发的那个事件,可能请求接口用节流函数导致接口触发的会慢一段时间,这个看看有什么节流函数是先触发的这个事件,然后后面时间内不触发


this.$forceUpdate() 当改变数组数据,页面没有响应,可以执行vue的方法强制执行刷新

v-if 中不能使用过滤器,会报错,可以使用method方法来代替

比百度好点的搜索: (cn.bing.com/?FORM=Z9FD1) , 感觉是谷歌搜索的国内版

乾坤微服务的坑: 2.4.2 开开发者工具点击跳转很慢,但是2.4.9的问题没有,相对可以接受 2.4.9 子应用跳主应用,主应用页面css 不加载 2.4.6 跳转速度还行,

host配置的作用: 写法: 127.0.0.1 login-fat.vocust.com
代表 请求login-fat.vocust.com服务时先映射到本地,127.0.0.1代表本地服务,可以在后面加端口应该 192.168.1.148:443 login-dev.vocust.com
代表请求login-dev.vocust.com服务时先映射到192.168.1.148:443这里, 这样微信开发者工具调试 直接请求login-dev.vocust.com 网址,这样这个网址有白名单,而访问这个网址其实映射到的是我们本地的代码,来实现,本地调试公众号页面 注意浏览器使用login-dev.vocust.com/ 地址过不去,加上https:// 就好了, login-dev.vocust.com/#/ 注意清除缓存,要不然总是指向不过去

image.png

微信中存在缓存,有些打包加hash值,有些加版本号1.js?v=23,还有的向下图增加nginx缓存时间: 设置方法: add_header 'Cache-Control' 'max-age=30';

image.png image.png

极联云:187人 研发部: 101 极联云项目: 37

vue 中watch有deep和immediate 属性 ,注意immediate的使用,有些对象数组一开始页面初始化不监听,导致页面没响应
这样使用watch时有一个特点,就是当值第一次绑定的时候,不会执行监听函数,只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数,则就需要用到immediate属性。

js 中delete全局方法可以删除某些对象和属性,比如:
var a = {name:"zhang",age:123}; delete a.name
a ====> {age:123}

地图的文件每次刷新都会加载,而且没缓存,换成html引入或放在微服务中??
公共组件抽离到xagent,子应用来使用
问题一:在子应用中 index.html 引入 的 外部 资源 被 qiankun replaced by import-html-entry 在 子引用中怎么样使用
问题二:在子应用挂在到 window 中的一些属性 在 主应用显示 不 能在window 访问

10.vue中event事件创建要记得手动清除,要不然容易内存泄漏:

image.png

所以vue中一般造成内存泄露的可能会有以下几种情况:

(1)监听在window/body等事件没有解绑

(2)绑在EventBus的事件没有解绑

(3)Vuex的$store watch了之后没有unwatch

(4)模块形成的闭包内部变量使用完后没有置成null

(5)使用第三方库创建,没有调用正确的销毁函数
文章: 一个Vue页面的内存泄漏分析 - 简书 (jianshu.com)

双指针算法应用:

给定一个已按照 升序排列  的整数数组 numbers ,请你从数组中找出两个数满足相加之和等于目标数 target 。
函数应该以长度为 2 的整数数组的形式返回这两个数的下标值。numbers 的下标 从 0 开始计数 ,所以答案数组应当满足 0 <= answer[0] < answer[1] < numbers.length 。
假设数组中存在且只存在一对符合条件的数字,同时一个数字不能使用两次。

解题如图:
image.png

console.log([[-1,-1,2],[-1,0,1],[-1,0,1]].indexOf([-1,0,-1])) 结果为 -1

插槽两种写法:

image.png

.gitignore 里面可以设置对部分文件不上传 image.png

for(let j = 0;j<10;j++){
        console.log(j,'dayin')
        if(j>4){
                break;
        }
}

这里break仅仅是从if中出来  for循环没有打断

如何实现vue 的v-model :
<input v-model="sth">  相当于
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

    v-bind ,v-on修饰符可以实现双向改变。,
    比如在父组件传给子组件一个值,子组件想要改变并且父组件响应,
    可以通过v-bind:ceshi ="12" 这种传输方式,省略了子组件触发父组件来改变父组件的值