抓猹吃瓜
抓猹吃瓜

2020-04 技术汇总

2020/04/29 周三

#UI设计视觉差问题，总感觉没有居中对齐时怎么办

放大n倍，截图画框，看是否在一条水平线上。

关于UI设计视觉差相关知识点

测量面积和视觉面积

  • 视觉体量是人眼如何察觉物体的大小和感觉，不需要等同于物体的实际像素值
  • 圆、菱形、三角形和其他非方形形状为了与方形形状保持一样的视觉大小，应适当放大
  • 图标区域应为视觉平衡保留一定的空间，这一点对保持同系列图标视觉平衡很重要。(这也是iconfont上为什么有的图标周围有留白，而有的图标没有留白的原因)

不同形状之间的对齐

  • 具有锐利边缘的形状应该更大，以便于其相邻的矩形对象保持视觉平衡
  • 大写字母对齐是一种有效且被广泛运用的方法，用于文本和按钮背景对齐
  • 将三角型图标正确放置按钮中的一种有效办法是，将其圈住并使此圈与背景对齐。

视觉圆角

  • 几何圆角看起来假是因为人眼可以清楚地看到直线突然变成曲线的点
  • 视觉正确的圆角需要一些特殊的算法或手动调整形状

参考：设计师必须知道，什么是视觉差对比？(opens new window)

#关于商品价格有小数点时精度异常的问题

在价格显示时，如果有小数位，由于js浮点数的缺陷，累加的价格可能会有经度差，我们直接 toFixed(2) 即可。一般不会超过3位小数点，且精度异常一般都是小数点很多位以后，注意js小数点运算时一定要注意这个问题，确定要保留几位小数点

37998.91 + 0.01
// 37998.920000000006

0.1+0.2
0.30000000000000004

#0-9数字中，每个数字的宽度是多少

什么数字最宽，以字体PingFangSC-Regular，大小12px为例

10个0 72
10个1 48.13
10个2 72
10个3 72
10个4 72
10个5 72
10个6 72
10个7 65.64
10个8 72
10个9 72

总结，一般宽度 1 < 7 < 0,2,3,4,5,6,8,9 但不排除其他字体没有差异，同理我们可以使用这种方法看26个字母里每个字母的占用宽度为多少

#使用ssh方式提交或拉取代码的步骤

# 使用git平台邮箱账号生成公钥和私钥，全部默认、回车
ssh-keygen -t rsa -C "[email protected]"

# 执行成功过后会在 ~/.ssh 目录下生成 id_rsa.pub 和 id_rsa 两个文件，一个公钥、一个私钥

# 查看公钥，并配置到对应的git平台里
cat ~/.ssh/id_rsa.pub

# 测试配置是否成功
ssh -T [email protected] 

# 拉取 
git clone [email protected]/xxxproject

参考：GitHub如何配置SSH Key(opens new window)

#2020/04/27 周一

#git删除远程分支与本地分支

删除远程仓库的分支，可以先查看当前所有分支

git branch -a # 查看当前分
# file_backup
# master
# remotes/origin/HEAD -> origin/master
# remotes/origin/file_backup

删除远程的file_backup分支

git push origin --delete file_backup

删除本地分支

git branch -d file_backup

参考：git删除远程分支和本地分支(opens new window)

#2020/04/26 周日

#Object.observe()与Proxy

Object.observe()是js实现观察者设计模式的一个API，现在已废弃，由Proxy取代，但Proxy不支持IE。

它用于异步地监视一个对象的修改。当对象属性被修改时，方法的回调函数会提供一个有序的修改流。

在vue2.0的双向绑定的实现里，会遍历data对象，通过建立对应的getter/setter访问器属性来追踪属性变化。Vue 3.0里已使用Proxy来追踪属性变化

// 截取至vue 3.0相关代码
// https://github.com/vuejs/vue-next/blob/40bdd51bf5ec24b8e3faab3e1cb4d91b076e456a/packages/reactivity/src/reactive.ts#L99
function createReactiveObject(
  target: unknown,
  toProxy: WeakMap,
  toRaw: WeakMap,
  baseHandlers: ProxyHandler,
  collectionHandlers: ProxyHandler
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // target already has corresponding Proxy
  let observed = toProxy.get(target)
  if (observed !== void 0) {
    return observed
  }
  // target is already a Proxy
  if (toRaw.has(target)) {
    return target
  }
  // only a whitelist of value types can be observed.
  if (!canObserve(target)) {
    return target
  }
  const handlers = collectionTypes.has(target.constructor)
    ? collectionHandlers
    : baseHandlers
  observed = new Proxy(target, handlers)
  toProxy.set(target, observed)
  toRaw.set(observed, target)
  return observed
}
  • Object.observe() | MDN(opens new window)
  • Proxy | MDN(opens new window)
  • vue2.0 深入响应式原理 | vue官网(opens new window)
  • vue3.0 数据响应式相关源码 | github (opens new window)

#vscode ESLint插件新版本保存自动fix配置变更

最近换了个办公电脑，重装了vscode，发现eslint的配置和以前不一样了，新版本废弃了原先的一些配置，配置更简洁了，先来看看老的配置

{
  "edit.formatOnSave": false,   // 取消自带fix，使用eslint自动保存fix
  "eslint.autoFixOnSave": true, // 每次保存的时候将代码按eslint格式进行修复
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "vue",
      "autoFix": true
    },
    "html"
  ]
}

最新配置vscode自动fix

{
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  }
}

The old eslint.autoFixOnSave setting is now deprecated and can safely be removed

ESLint插件检测、自动修复机制，依赖当前目录下的package.json对应的eslint配置，vue项目、node项目、react项目、ts支持都对应不同的npm依赖包，比较难以理解，我打算研究一下这一块的内容，题目已取好："彻底理解ESLint在vscode中的检测机制/自动fix机制"，待有时间好好研究下

当我们从远程仓库拉取vue项目代码后，在没有npm install的情况下，vscode的eslint插件不会起任何作用，需要npm install 安装必要的插件后，重启vscode，才会生效

#2020/04/24 周五

#v-model的理解

在前面讨论过，使用v-model的场景，来看一个实例，假如我们需要封装一个弹窗组件需要引入el-dialog组件

首先，我们来看看我们写好这个组件后应该怎么调用，通过show这个参数来控制dialog显示或隐藏

来看看实现，这里看element官方demo里在visible属性上用了.sync修饰符，有什么用呢？

看来看源码

可以看到关闭弹窗时，使用了

this.$emit('update:visible', false);

修改了父组件传入的visible的值，没有使用v-model, 所以在el-dialog传入visible属性的时候加了.sync修饰符

vue里面有介绍这种方法可以使子组件可以修改父组件的值，而不用多加一个事件参数，参见文档 .sync修饰符(opens new window)

但感觉这个接口设计的有点鸡肋，v-model不香吗？

子组件封装dialog的特殊之处在于，通过showDialog显示子组件的dialog后，子组件点击关闭后会自己关闭弹窗，这时 父组件的showDialog还是true，因此并不能通过show参数来控制显示，我们需要在子组件点击dialog关闭时，触发一个事件给父组件，从而修改对应的值

这里当子组件关闭dialog时$emit一个close事件来手动将showDialog设置为false，以到达父组件可以通过showDialog来打开或关闭dialog的目的，我们可以来看看子组件的实现

上面的例子已经实现了功能，但缺点是，要使用两个参数，一个show属性，一个close事件。v-model就是一种简化参数的语法糖

关于v-model的文档，参考 v-model | Vue API(opens new window)

综上，v-model比.async更优雅，而在vue的refs里，也有建议使用v-model代替.async修饰符，且已经merge到了vue 3.0版本，相关文档 Replace v-bind's .sync with a v-model argument(opens new window)

#腾讯云慧眼架构相关设计

昨晚看了一个关于腾讯云慧眼架构相关的分享，由于之前参与过该项目的一些开发，对业务比较了解。结合业务场景再来看构架设计，会有一种豁然开朗的感觉，下面对一些构架方面比较好的点做一个总结

  • 高可用，两地三中心、异常监控上报、弹性伸缩
  • 资源有限时服务降级来提高QPS：例如，常规情况会抽取视频的10个帧图片，QPS的瓶颈在这，如果资源有限，通过服务降级，减少抽取的帧，每次抽取3-4帧，极大提高QPS
  • 单个客户流量暴增时，分配独立资源池，不影响其他客户服务
    • 客户提前告知，提前分配独立资源池
    • 未提前告知，就需要服务具备自动告警功能，怎么检测流量异常，什么时候提前通知，需要根据情况使用特定的策略。客户流量激增时，告警邮件、短信通知相关负责人，找客户确定是正常流量还是异常流量，如果异常流量，限制QPS，拒绝大部分服务。如果是正常流程，分配资源、快速扩容
  • 高扩展，可配置化服务，满足各种差异化需求
  • 低耦合，服务拆分。新增功能特性时，减少各个服务需要做的改动；发布某个模块的功能时，对其他模块不会有干扰
  • 低成本方式，服务兜底，便宜的证照库可能缺少一些用户身份信息，当出现这种情况会兜底去查询价格高一点的证照库，节约成本的情况下，保证了体验
  • 提高成功率，多引擎融合策略，多个验证引擎识别成功率不一样，取多个引擎综合结果成功率会上升4-5个点
  • 引擎服务接口hang，怎么保证服务ok，监测引擎异常次数，切换处理引擎

新引擎功能接入线上前怎么测试？

  • 灰度策略，为某个客户灰度5%的流量，看识别结果
  • 旁路策略，比灰度更好，直接copy一份某个用户的流量请求新引擎版本的服务，得出结果，就是用户请求发送到后台后，后台除了正常响应当前稳定版本验证的结果外，再把请求转发一份给测试引擎，这个结果是不会给到用户的。仅用来比对成功率。

引擎自动化评测策略

  • 正、负样本(手工标注)，多纬度评测
  • 引擎在不同地域样本里的表现

#2020/04/22 周三

#箭头函数和普通的函数指向问题

这里复习下基础知识

  1. 普通函数 在执行函数的时候 绑定this
  2. 箭头函数 在函数定义的时候 绑定this，this继承自父执行上下文

#element 最多只能选择一个月范围

点击某个时间后会触发 pickerOptions里的 onPick函数，获取当前点击的时间，然后计算时间disabled前后一个月的时间

// 
// 
export default {
  data() {
    const pickerOptions = {
      // 选中时间时触发 element第一次选中后会赋值给minDate
      onPick: ({ maxDate, minDate }) => {
        this._curClickDate = minDate.getTime()
        // 第二次选中后，按两次点击的时间顺序依次赋值给 minDate、maxDate
        // 且面板会关闭，这时要清空_curClickDate，供下一次使用
        maxDate && (this._curClickDate = '')
      },
      disabledDate: time => {
        const { _curClickDate } = this
        const gap = 31 * 24 * 3600 * 1000 // 一个月，按31天算
        const t = time.getTime()
        let start = _curClickDate - gap
        let end = _curClickDate + gap
        return t > Date.now() || (_curClickDate && (t > end || t < start))
      }
    }
    return {
      date: '',
      pickerOptions,
    }
  }
}

具体demo：在线体验 (opens new window)github demo源码地址(opens new window)

#2020/04/20 周一

#nginx配置二级域名解析目录

最近看百度统计，有100多个河南的新ip访问，有些异常，而且都是访问的api.zuo11.com，最近两周明细里看到的ip段很有规律

111.7.100.16 - 111.7.100.27
36.99.136.131 - 36.99.136.143

百度统计有个缺点，就是仅提供两周内的访问明细，最多5000条，后面有必要做一个自己的用户行为记录系统

之前我将 https://api.zuo11.com 解析到了一个node服务用于https接口，但发现 http://api.zuo11.com 走的80端口，会直接访问zuo11.com，我仿照zuo11.com 301重定向到 www.zuo11.com 的方式写了下面的配置，但发现不生效，当时也没管。

if ($host = 'api.zuo11.com') {
  rewrite ^/(.*)$ https://api.zuo11.com/$1 permanent;
}

现在暴露出问题来了，就必须解决，让 http://api.zuo11.com 指向其他目录，发了好长时间才配置ok，以下是相关具体配置，省略了https配置

server {
  listen       80;
  server_name  zuo11.com www.zuo11.com;
  charset utf-8;

  if ($host = 'zuo11.com') {
    rewrite ^/(.*)$ http://www.zuo11.com/$1 permanent;
  }

  location / {
      root   C:\Users\Administrator\Desktop\dist;
      index  index.html index.htm;
  }
}

server {
  listen   80;
  server_name  demo.zuo11.com;
  charset  utf-8;
  location / {
        root  C:\Users\Administrator\Desktop\demo_dist;
        index  index.html index.htm;
    }
}

server {
  listen   80;
  server_name  api.zuo11.com;
  charset  utf-8;
  location / {
        root  C:\Users\Administrator\Desktop\api_dist;
        index  index.html index.htm;
    }
}

其实就是多写一个server，把二级域名指向其他目录。中间有个坑的地方就是windows使用nginx时，关闭nginx运行的terminal后，进程不一定关闭，需要打开任务管理器，找nginx相关进程删掉，这样才彻底。

#2020/04/19 周日

#向百度站长主动推送站点url

之前提交链接都是手动将url粘贴到输入框提交。这次试了下curl方式提交还是很方便的

# 先将要提交的url存放到 urls.txt 里
vi urls.txt

# 查看
cat urls.txt 
http://www.zuo11.com/blog/2019/11/v-if_filters.html
http://www.zuo11.com/blog/2019/12/web_storage.html
http://www.zuo11.com/blog/2019/12/phantomjs-prebuilt.html
http://www.zuo11.com/blog/2019/12/node_sleep_module.html
http://www.zuo11.com/blog/2019/12/git_clone_timeout.html
http://www.zuo11.com/blog/2019/11/git_push_branch.html
http://www.zuo11.com/blog/2019/12/npm_resource.html

# 确定内容没问题后提交，对应的链接在百度站长提交链接哪里会自动生成
curl -H 'Content-Type:text/plain' --data-binary @urls.txt "http://data.zz.baidu.com/urls?site=www.zuo11.com&token=xxxxxxx"

# 执行后返回推送接口，实时推送成功
{"remain":99993,"success":7}

#uni-app跨域问题接口代理配置

在uni-app中有一个manifest.json配置文件，里面的h5配置下有默认的devServer选项，和vue.config.js里的代理配置一致，都是使用的webpack的代理功能，默认配置为

"h5": {
  "devServer" : {
      "https" : false,
      "port" : 80
  }
}

根据具体情况，具体配置，下面是一个示范配置

"h5": {
  "devServer": {
    "port": 8086,
    "disableHostCheck": true,
    "proxy": {
      "/": {
          "target": "http://xxxx:8086/",
          "changeOrigin": true,
          "secure": false
      }
    }
  }
}

这里要注意的是，要在manifest.json文件配置，而不是pages.json里，每次修改配置后记得点击重新运行到浏览器，如果不生效关闭再开启HBuildeX，多试试

#uni.request封装为类似axios的请求对象

在uni-app中为了抹平各平台的差异，官方提供了uni.request方法，和微信小程序的请求方法类似，一般这类请求是比较通用的，如果直接使用会有大量的重复代码，于是做了简单的封装，来看看代码

axios.js

/**
 * @description 将uni.request封装成简单的aixos 
 * @author guoqzuo
 * @example
 * axios.create(config) 根据配置，创建axios实例
 * axios.get(url[, config]) get请求
 * axios.post(url[, data[, config]]) post请求
 * config支持配置项
 * baseURL: "https://some-domain.com/api/", // baseURL
 * timeout: 1000, // 超时时间 
 * headers: { "X-Custom-Header": "foobar" }, // 请求头
 * method: '' // 请求方法
 * url: '', // 请求url
 * data: '' // post 请求的data
 * toastErrorMsg 是否用toast显示错误信息，默认为是
 * showLoading  是否显示loading，默认为是
 */
class Axios {
  constructor() {
    this.config = {}
  }

  // 全局配置，返回一个axios实例
  create(config = {}) {
    Object.assign(this.config, config);
    return this
  }

  get(url = '', config = {}) {
    // 暂不支持params
    Object.assign(this.config, config, { url, method: 'GET' })
    return this._request()
  }

  post(url = '', data = {}, config = {}) {
    Object.assign(this.config, config, { url, method: 'POST', data })
    return this._request()
  }

  // uni.request 封装
  _request() {
    return new Promise(async (resolve, reject) => {
      let { baseURL, timeout, headers, method, url, data, toastErrorMsg, showLoading, successCode = 0 } = this.config
      showLoading && uni.showLoading({
        mask: true
      })

      let [error, res] = await uni.request({
        data,
        method,
        header: headers,
        timeout,
        url: baseURL + url
      })

      // 请求完成后做 complete 该执行的内容
      showLoading && uni.hideLoading();

      // 判断请求是否成功，这里很奇怪，官方把error直接返回了，类似于node的callback
      if (error) {
        this._showToast(toastErrorMsg, error.errMsg)
        reject(error.errMsg);
        return
      }

      // statusCode === 200
      let { statusCode, header, data: resData } = res;
      if (!resData || typeof resData !== 'object') {
        let msg = "接口异常，data数据出错"
        this._showToast(toastErrorMsg, msg)
        reject(msg);
        return;
      }

      let { code = '', msg = '' } = resData;
      // 请求成功，且状态码ok
      if (Number.parseInt(code) === successCode) {
        resolve(resData.data);
      } else {
        this._showToast(toastErrorMsg, msg)
        reject(msg);
      }
    });
  }

  // 根据toastErrorMsg判断是否需要显示错误信息
  _showToast(toastErrorMsg, msg) {
    toastErrorMsg && uni.showToast({
      title: msg,
      icon: 'none',
      image: '',
      duration: 1500,
      mask: false,
    });
  }
}

const axios = new Axios();
export default axios;

配置axios service.js

// service.js
import axios from './utils/axios'

const axiosInstance = axios.create({
  baseURL: "/index.php",
  successCode: 0, // 后端自己定义的成功或的错误码
  toastErrorMsg: true, // 是否用toast显示错误信息，默认为是
  showLoading: true  // 是否显示loading
});

export default axiosInstance

模块 modules/user.js

import createServiceFromConfig from '../utils/createServiceFromConfig'

// 用户模块service
export default createServiceFromConfig([
  ['login', '/user/login', 'post'] // 登录
])

根据配置生成接口服务 createServiceFromConfig.js

import service from '../service'

function createServiceFromConfig(configList) {
  let serviceObj = {}
  configList.forEach(item => {
    let [apiName, url, method = 'get'] = item
    serviceObj[apiName] = (payload = {}, config = {}) => {
      let url = item[1] // url 是第二位
      let params = method === 'get' ? [config] : [payload, config]
      return service[method](url, ...params); // 等价于 return axios.get(..)
    }
  })
  return serviceObj
}

export default createServiceFromConfig

调用接口

import userService from "@/service/modules/user";
async login() {
  try {
    let data = await userService.login({
      mobile: "xxx",
      password: "xxx"
    });
    console.log(data);
  } catch (e) {
    console.error(e);
  }
}

#2020/04/17 周五

#text-align: justify 两端对齐不生效的问题

一般直接设置text-align: justify是不会生效的。但你改为text又会立即居中对齐。我们需要注意的是我们需要将子元素设置一个after的属性或者后面放置一个空的占位标签，设置 display: inline-block; width: 100%，当出现高度占位间隙时，设置占位元素的height没用，需要设置元素的height。css 确实有点毫无逻辑的感觉....

text_align_justify.png 

  



  

    

      我是较长

    

    

      我是较长的

    

    

      我是较长的文字

    

  

  

  

    
我是较长

    
我是较长的

    
我是较长的文字

参考：使用text-align:justify，让内容两端对齐，兼容IE及主流浏览器的方法(opens new window)

#2020/04/16 周四

#vue-router 跳转的问题

编程方式跳转路由

router.push(location, onComplete?, onAbort?)
router.push(location).then(onComplete).catch(onAbort)
router.replace(location, onComplete?, onAbort?)
router.replace(location).then(onComplete).catch(onAbort)
router.go(n)
router.back()
router.forward()

push跳转页面

// 知道路由名称，跳转
this.$router.push({
  name: '路由name',
  params: { userId: '123' } // 参数，url上面不可见
  query: { plan: 'private' } // 查询参数 url上可见
})

// 知道路由path，跳转 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})
// 注意：如果提供了 path，params 会被忽略，只能使用query参数

replce跳转页面，push会在history添加一条记录，而replce不会，他只会改变当前页面

// router.replace(location, onComplete?, onAbort?)
this.$router.replace({
  name: '路由name',
  params: { userId: '123' } // 参数，url上面不可见
  query: { plan: 'private' } // 查询参数 url上可见
})

在新的tab页打开，可以用 this.$router.resolve() 来处理路由信息，也可以直接使用相对路径，注意hash、history跳转方式的区别

const resolved: {
  location: Location;
  route: Route;
  href: string;
} = router.resolve(location, current?, append?)
window.open('#/user/info') 
// ‘_blank’为默认，在新的窗口打开，'_self' 为在当前页打开

#element 时间选择器限制选中日期

一般使用 picker-options 这个属性来disable某些时间段，注意 如果设置了default-time 00:00:00 - 23:59:59 会影响对应的日期判断，必要时可以去掉，逻辑可以由后端处理

#2020/04/14 周二

#css 利用 perspective 画梯形

今天看小伙伴的代码，发现有一个梯形的实现居然是css写的，我以为需要UI提供icon。这里用到了 perspective 远景这个参数

/*  
 */
.tx {
  width: 100px;
  height: 40px;
  margin: 100px;
  border: 1px solid #ccc;
  transform: perspective(2em) rotateX(-10deg);
}

CSS 属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。 z>0 的三维元素比正常大，而 z<0 时则比正常小，大小程度由该属性的值决定。

参考:

  • css perspective | MDN(opens new window)
  • css transfrom | MDN(opens new window)

#git无法检测到文件名大小写的更改

今天把开发分支合并到月底分支后，发现之前修改过文件名没有提交上去，手动改文件名后，git status 提示没有任何改动。

于是百度了下，发现git默认配置为忽略大小写，因此无法正确检测大小写的更改。

解决办法在当前项目：git config core.ignorecase false，关闭git忽略大小写配置即可

参考: Git无法检测到文件名大小写的更改(opens new window)

#2020/04/12 周日

#vue页面中监听路由改变的几种方法

// 1.单页面组件中，使用 beforeRouteEnter
created() {
},
beforeRouteEnter(to, from, next) {
    next(vm => {
        // vm就是this了
    })
},

// 2.使用watch监听$route
watch: {
    $route(to, from) {
        // xxx
    }
}

更多详情参数之前的笔记：vue-router 笔记(opens new window)

#全局引入组件Vue.use()与Vue.component()

之前的笔记里有将Vue.use()全局引入组件的方法，其实用 Vue.compoennt()也可以全局引入组件。

alert
├── src
│   └── main.vue  # 组件实现
└── index.js # install方法，供全局引入
index.js 提供install方法，供Vue.use()使用


import Alert from './src/main';

/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};

export default Alert;

main.js全局引入组件的两种方式

// 1\. Vue.use()
import Alert from '@/components/alert/index.js'
Vue.use(Alert)

// 2\. Vue.component()
import Alert from "@/components/alert/src/main.vue"
Vue.component('alert', Alert)

Vue.use 和Vue.component 全局引入组件之间的区别：

  1. Vue.component 只是单纯的引入组件、不需要额外写支持的js文件
  2. Vuew.use 除组件外，需要写额外的js实现install方法，但它不仅可以注入组件，还可以注入很多其他东西，比如全局实例属性等。

#2020/04/11 周六

#iconfont通过设置class来显示图标内部做了那些操作

注意我们在用class使用iconfont图标时，为什么可以使用，主要是iconfont.css里面做了三步操作:

  1. 定义iconfont的 font-familay
  2. 为.iconfont设置默认样式，指定为font-family字体
  3. 为每个图标的class设置before的content

来看具体的demo，示例

@font-face {
  font-family: "iconfont";
  src: url('iconfont.eot?t=1586579952536'); /* IE9 */
  src: url('iconfont.eot?t=1586579952536#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,省略...') format('woff2'),
  url('iconfont.woff?t=1586579952536') format('woff'),
  url('iconfont.ttf?t=1586579952536') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('iconfont.svg?t=1586579952536#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iconok:before {
  content: "\e63c";
}

.iconerror1:before {
  content: "\e651";
}

#2020/04/10 周五

#JSON.stringify的非常规用法以及内部执行顺序

JSON.stringify我们一般用于将JSON对象转为字符串，但他不仅仅只有一个参数，而是三个，除最常用的用法外，还可以用来做三种实用功能

  1. 利用第三参数在console里更好的展示对象
// 1\. 对于像这种多层级的数据，console到控制台时，会不好查看需要一层层点击，很麻烦
let obj = { list: [ {a: 1}, {a: 2}], total: 100 }
console.log(obj)

// 更好的展现，第三参数可以在转JSON字符串时，在json对象的缩进位置填充字符并加上换行符
// 缩进位置填充的内容，根据第三参数的类型决定：
// 如果是整数，填充对应的空格数(最大为10)，如果是字符串，填充充对应的字符串
JSON.stringify(obj, null, 2)
json_stringify.png
  1. 有选择性的过滤字段
let obj = { list: [ {a: 1}, {a: 2} ], total: 100 }
// 如果我们想深拷贝obj，但只深拷贝其total字段，其他的字段不需要，就可以用第二个参数
let newObj = JSON.parse(JSON.stringify(obj, ['total']))
// newObj 值为 { total: 100 }

// 实例：在vue项目中，用js删除当前url query参数中的id参数
let query = this.$route.query
this.$router.replace({ 
  path: this.$route.path, 
  query: JSON.parse(JSON.stringify(query, Object.keys(query).filter(item => item !== 'id'))) 
})
  1. 详细处理没有字段序列化的值
let obj = { list: [ {a: 1}, {a: 2} ], total: 100 }
let new = JSON.stringify(obj, (key, value) => {
  return key === 'list' ? '改写list序列化的值' : value
}) 
// new 的值为 {"list":"改写list序列化的值","total":100}

JSON.stringify(obj)时，其实内部调用的是 obj 的 toJSON()方法，如果我们重写该方法，就可以改变序列化后返回的值

JSON.stringify()执行顺序

  1. 如果对象中存在toJSON方法，且能通过它获取有效的值，则调用该方法，返回对应的值用于下一步，否则返回对象本身。
  2. 如果提供了第二个参数，根据对应的参数过滤第(1)步得到的值
  3. 对第(2)步返回的每个值进行进行相应的序列化
  4. 如果提供了第三个参数，执行相应的格式化

详情参考之前的笔记: JSON.stringify() - JS高程3笔记(opens new window)

#2020/04/09 周四

#Array.prototype.fill()填充引用类型值时的坑

在mock表格list数据时，我一般为了简洁会先创建一个对象info，然后new Array(10).fill(info) 来生成10条数据的数组

但这次发现一个问题，由于表格有一个字段是状态值0 - 5，我想随机设置下值，发现修改后的值都一样，来看看例子

let a = {a: 1}
let b = Object.assign({}, a) // {a: 1}
let c = Object.assign({}, a) // {a: 1}
b.b = 2 // 尝试修改值，看看a和c是否修改，发现只有b修改了，a,c没变说明地址不一样

// 来看看fill
let list = new Array(5).fill(Object.assign({}, a))
// 乍一看，貌似每个填充的地址都不一样，我们修改数组中的一个元素试试
list[0].b = 2

再打印list，发现list所有数组对象的值都变了，因此fill填充的对象都指向同一个地址

用 Array.prototype.fill() mdn查权威文档，发现里面确实有这一块的描述

// Objects by reference.
var arr = Array(3).fill({}) // [{}, {}, {}];
// 需要注意如果fill的参数为引用类型，会导致都执行都一个引用类型
// 如 arr[0] === arr[1] 为true
arr[0].hi = "hi"; // [{ hi: "hi" }, { hi: "hi" }, { hi: "hi" }]

那么遇到这种情况不能用fill要怎么处理呢

let a = {a: 1}
// 这里还是用了fill 如果不fill内容到数组，map遍历时会忽略所有空的元素
let list = new Array(5).fill({}).map(item => {
  item = Object.assign({}, a)
  item.xxx = Math.round(Matn.random() * 5)
  return item
})

参考: Array.prototype.fill() - MDN(opens new window)

#2020/04/08 周三

#Failed to resolve directive: infinite-scroll

在element InfiniteScroll无限滚动功能里，使用了v-infinite-scroll指令，但直接使用会发现提示 Failed to resolve directive: infinite-scroll，后面查了下，发现要使用该指令需要安装一个vue-infinite-scroll npm包，并且在main.js里引入才行

// 安装vue-infinite-scroll
// npm install vue-infinite-scroll --save

// 在main.js里引入
import infiniteScroll from "vue-infinite-scroll";
Vue.use(infiniteScroll);

这样就能正常使用了，注意加载数据 v-infinite-scroll="load" 指定的load函数里，获取数据后，每次push到列表list即可。首次进入会自动加载一次，无需在created钩子里手动请求一次数据，注意当在load里要加个判断，如果获取数据长度为0，或超出数据页数时，就不再继续load了

参考：

  • [Vue warn]: Failed to resolve directive: infinite-scroll(opens new window)
  • 无限滚动指令 v-infinite-scroll - Element(opens new window)

#2020/04/07 周二

#怎么将Date数据转为TZ格式的字符串

后台要求的数据格式 "2020-04-10T04:01:00.000Z" 为TZ格式的字符串。Date对象toString为 "Fri Apr 10 2020 12:00:00 GMT+0800 (中国标准时间)" 这种格式，那怎么转TZ字符串格式呢？用 Date.prototype.toJSON() 方法即可

a = new Date('2020/04/10 12:00:00') 
Fri Apr 10 2020 12:00:00 GMT+0800 (中国标准时间)

a.toJSON() //"2020-04-10T04:01:00.000Z"

参考：Date.prototype.toJSON() - MDN(opens new window)

#Date.prototype.toLocaleString()的坑

注意在把Date转为字符串时，需要额外注意时间为 '00:00:00' 的情况，会被转为 上午12:00:00

a = new Date('2020/04/10 00:00:00') 
// Fri Apr 10 2020 00:00:00 GMT+0800 (中国标准时间)

a.toLocaleString() // "2020/4/10 上午12:00:00"
a.getHours() // 0
a.getMinutes() // 0
a.getSeconds() // 0

那我们来试试 '12:00:00' 的情况

a = new Date('2020/04/10 12:00:00') 
// Fri Apr 10 2020 12:00:00 GMT+0800 (中国标准时间)
a.toLocaleString() // "2020/4/10 下午12:00:00"
a.getHours() // 12

？？？怎么变下午12点了，综上虽然Date对象的toLocaleString()比较好用，但还是仅用日期方面的toLocaleDateString()吧，时间方面的还是尽量不要使用，12点和00点傻傻分不清楚

参考：Date.prototype.toLocaleString() - MDN(opens new window)

#2020/04/06 周一

#xx.com重定向到www.xx.com方式

今天帮一个同学测试网络，使用curl来请求百度，发现baidu.com到www.baidu.com的重定向使用的是 html 的meta元素

curl -v baidu.com
# 
# 
#

当访问 baidu.com时，0秒后刷新页面到 http://www.baidu.com，以后如果在不依赖nginx配置的情况下，可以使用这种方式。meta元素使用方法可以参考之前的笔记：http-equiv改写http标头字段(opens new window)

之前我有处理过 zuo11.com 跳转到 www.zuo11.com 的情况，配置了nginx，具体方法参见 nginx 访问不带www的域名，自动切到www(opens new window)

curl -v zuo11.com nginx响应内容如下：

curl -v zuo11.com
* Rebuilt URL to: zuo11.com/
*   Trying 47.107.190.93...
* TCP_NODELAY set
* Connected to zuo11.com (47.107.190.93) port 80 (#0)
> GET / HTTP/1.1
> Host: zuo11.com
> User-Agent: curl/7.54.0
> Accept: */*
> 
< HTTP/1.1 301 Moved Permanently
< Server: nginx/1.16.1
< Date: Mon, 06 Apr 2020 12:56:22 GMT
< Content-Type: text/html
< Content-Length: 169
< Connection: keep-alive
< Location: http://www.zuo11.com/
< 

301 Moved Permanently


301 Moved Permanently


nginx/1.16.1

也就是当访问zuo11.com时，nginx会用301重定向到www.zuo11.com。我们可以做一个测试，当接收到一个请求后，修改状态码为301，然后设置Location响应头为 http://www.zuo11.com 看是否可以重定向页面，来写个koa例子

const Koa = require('koa')
const app = new Koa()

app.use((ctx) => {
  console.log(ctx.url)
  if (ctx.url === '/test') {
    // 当访问 /test 时 301重定向到 http://www.zuo11.com
    ctx.status = 301
    ctx.set({
      'Location': 'http://www.zuo11.com'
    })
    return
  }
  // 非 /test 时，页面显示 welcome
  ctx.body = 'welcome'
})

app.listen('9000', () => { console.log('服务已开启，9000端口') })

通过测试上面的例子，发现只要响应的状态码设置为301，且响应头Location设置为要重定向的网页，就可以301跳转到对应的页面，新技能get

#什么是BFC

虽然做前端好几年了，但只是听说个这个名词，一直不清楚具体是什么意思，今天来研究下

BFC是 Block Formatting Context 的缩写，字面意思是 块格式化上下文

字面意思很难理解，我们先来看几个例子

1. margin塌陷问题

下面的例子中A、B两个元素的margin都为10px，理论上A、B上下间的距离为 20px，但实际却是 10px


  
123

  
456

利用BFC解决塌陷的问题，用父元素包裹并设置overflow为hidden，这样间隔就是20px了


  
123

  

    
456

2. float父级元素高度为0的问题

wrapper的子元素使用了float，其高度为100px，但他的父级元素wrapper高度为0


  
123

解决方案如下,给wrapper添加一个BFC属性，这时wrapper的高度就是子元素的高度


  
123

3. float高度超出父元素容器区域的问题

box元素为父元素，float元素高度为150，此时，float会超出父元素范围


  

    I am a floated box!
  

  
I am content inside the container.

利用BFC，使浮动内容和周围的内容等高，给box元素加一个overflow:hidden即可


  

    I am a floated box!
  

  
I am content inside the container.

通过上面两个例子，我们会很好奇，为什么加个overlfow:hidden就能解决问题，BFC 块级格式化上下文到底是什么？

BFC 块级格式化上下文主要和float、clear、margin塌陷问题有关联

一般情况下BFC只存在于根级元素(html)，但设置某些CSS属性时也会让产生BFC。但是前提是必须是块级元素。

以下属性声明会产生BFC：

  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
  • 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素（该属性safari不支持）
  • contain 值为 layout、content或 paint 的元素
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
  • 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

BFC布局规则

  • 垂直方向的间隔由margin决定，同一个BFC里同级别的两个元素之间的margin会产生坍塌（问题1）
  • BFC计算高度时，float元素的高度也参与计算 （问题 2/3）
  • 每个BFC区域是隔离的，它里面元素不会影响外层，外层的各种变化也不会影响BFC区域。

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats don't affect the layout of the content inside other block formatting contexts, and clear only clears past floats in the same block formatting context. Margin collapsing also occurs only between blocks that belong to the same block formatting context.

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

参考：

  • BFC深入理解(opens new window)
  • Block formatting context - MDN(opens new window)
  • css clear - MDN(opens new window)
  • css float - MDN

#怎么用一行css代码将整个站点变灰

前天4月4号全国哀悼日，各大网公司网站的风格都变灰了，是怎么实现的呢？其实很简单，一行代码就搞定。

/* 将html下的所有内容置灰 grayscale为灰度 */
html {
  filter: grayscale(100%);
}

css filter是什么属性？用css filter mdn关键字查了下，这里filter翻译为 滤镜，他可以将模糊或色相等图形效果应用于元素，来看一些例子

/* 模糊，类似于马赛克效果 */
filter: blur(5px); 
/* 对比度 */
filter: contrast(100%);
/* 色相 */
filter: hue-rotate(90deg);
/* 阴影 */
filter: drop-shadow(16px 16px 20px red) invert(75%);

兼容性除了IE4-9，其他基本都兼容。Internet Explorer 4 to 9 implemented a non-standard filter property. The syntax was completely different from this one.

css_filter.png

更多filter文档及用法，参考：css filter - MDN(opens new window)

#2020/04/05 周日

#uni-app开发体验怎么样？

如果你习惯开发vue，再来写uni，你会发现有很多问题

  1. vue-router非常不方便、使用vant组件用不了
  2. img标签到app上显示不了，需要使用image标签
  3. 路由页面要在pages.json里设置，js跳转需要使用uni.navigator等内置API

感觉开发体验很差。但如果你开发过小程序，你会发现

  1. template里UI组件部分基本类似于小程序开发
  2. script、style方面基本和vue开发体验保持一致，uni提供了许多类似于小程序的内置api，比如跳转路由、通用请求等

综上：uni开发就是小程序开发和vue开发的结合，碰巧我在小程序开发和vue开发方面都有一定的开发经验，所以感觉还算得心应手，但对于没有开发过小程序的开发人员来讲，刚开始会觉得不怎么习惯。另外我个人不喜欢这种开发方式，有点乱，能少碰就尽量少碰，感觉整体代码很乱，强依赖uni框架与HBuilderX开发工具。

#2020/04/04 周六

#uni 设置tabbar后没显示

在pages.json里设置了tabbar配置，但设置成功后，在chrome运行却没效果，需要注意两点

  1. pages.json配置中tabBar参数设置的页面同时也需要在pages参数里设置
  2. pages数组中的第一项，必须是tabBar配置里的页面

#uni-app开发需要了解的事情

uni-app 读法为 u ni ai po，官网：uni-app 官方文档(opens new window)

  1. uni-app开发需要下载HBuilderX开发工具
  2. 需要注册ucloud账号，打包安卓、iOS时需要有证书。安卓的证书免费，iOS证书需要花钱
  3. uni开发和通常vue-cli搭的脚手架开发方式还是有一定区别的，更像是vue + 小程序开发的结合
  4. 默认不支持 vue-router
  5. 默认hello word打包安卓的apk包为 16M 左右

#常用的.gitignore 配置

.DS_Store
node_modules
/dist

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

package-lock.json

#2020/04/03 周五

#vue-cli项目使用@开头的路径

我们在vue-cli创建的vue项目，可以使用@ 开头的路径，表示从src目录开始，比如

() => import('../../../components/xxx/xx')  // bad 
() => import('@/components/xxx/xx')  // good 对应 src/components/xxx/xx

require('../../assets/img/xxx.png') // bad
require('@/assets/img/xxx.png') // good 对应 src/assets/img/xxx.png

这样如果某个文件夹下为一个功能模块的代码，那我们将这个目录移动到src下任意层级的目录都不会有影响，更健壮

#mac pro retina屏两倍图

之前在处理canvas绘制模糊的问题时了解到，retina是两倍像素屏，50 x 50像素的图会绘制在 100 x 100 像素区域，会导致绘制模糊。同理，如果需要在retina屏上显示50 x 50的图，需要提供两倍图 100 * 100，然后设置样式宽高为50，这样才会清晰。最好的方式还是使用矢量图、iconfont等不会失真的图。这样就不会模糊。

#2020/04/01 周三

#grid布局问题

grid适用于网格化布局，对于各个模块按百分比来的情况比较好，如果多个模块有的固定宽高有的非固定宽高就不怎么好分了, IE下支持需要加前缀，详情参见之前的笔记: grid网格布局(opens new window)

2020/04/17 更新，grid的某些属性不兼容IE，最开始我使用了grid发现IE怎么都兼容不了，有几个属性加了-ms-都没用，最后为了不必要的麻烦和风险，还是换成flex布局了，改成flex后的代码居然比grid还简单...

参考: CSS网格布局即使带有前缀也不能在IE11中工作(opens new window)

#canvas怎么绘制环形进度条

有4个重点:

  1. 怎么画圆弧, ctx.arc函数里开始角度、结束角度以PI为基准，取值范围时：0 ~ 2PI，PI就是π值约等于3.14，圆心正上方位置为1.5PI，圆心右侧为 0 或 2*PI，圆心正下方为0.5PI，选定义额开始位置和结束位置就可以绘制任意一个弧形，详情参见: 之前的canvas笔记 - 绘制路径(opens new window)

  2. 画圆环使用的是ctx.stroke，一般默认画圆大概是1px的宽度，线的宽度可以使用 ctx.lineWidth 调整，这样就成圆环了

  3. 用ctx.arc画一个完整的圆，再画一个进度圆弧，重叠在一起，颜色设置不一样，就是一个标准的圆环进度条了。

  4. 进度圆环怎么设置圆角，可以使用 ctx.lineCap = "round";

canvas_progress.png 
A draw of something.

参考:

  • 用初中数学知识撸一个canvas环形进度条(opens new window)
  • 用canvas画一个进度条为圆角的环形图（圆环图）

你可能感兴趣的:(2020-04 技术汇总)

  • develop技术汇总 cmn83251 数据库
    ********************************************1、自定义”快码设置“界面：直接定义功能，然后挂菜单就可以了********************************************Functionname,自己取，Type:Form,Formname:定义代码，参数：VIEW_APPLICATION="PO"HELP_TARGET="PO/F
  • windows驱动开发-内核编程技术汇总(二) sului windows驱动开发
    使用NTSTATUS值许多内核模式标准驱动程序例程和驱动程序支持例程使用NTSTATUS类型返回值。此外，在完成IRP时，驱动程序在IRP的IO_STATUS_BLOCK结构中提供NTSTATUS类型的值。NTSTATUS类型在Ntdef.h中定义，系统提供的状态代码在Ntstatus.h中定义。供应商还可以定义专用状态代码，尽管他们很少需要。NTSTATUS值分为四种类型：成功值、信息值、警告和
  • 从零到一建设数据中台 - 关键技术汇总 我码玄黄 数据中台数据挖掘数据分析大数据
    一、数据中台关键技术汇总语言框架：Java、Maven、SpringBoot数据分布式采集：Flume、Sqoop、kettle数据分布式存储：HadoopHDFS离线批处理计算：MapReduce、Spark、Flink实时流式计算：Storm/SparkStreaming、Flink批处理消息队列：Kafka查询分析：Hbase、Hive、ClickHouse、Presto搜索引擎：Elast
  • 大数据开源框架技术汇总 浪尖聊大数据-浪尖 数据仓库hiveflume分布式scipymakefilecrmlighttpd
    主要基于对现阶段一些常用的大数据开源框架技术的整理，只是一些简单的介绍，并不是详细技术梳理。可能会有疏漏，发现再整理。参考的太多，就不一一列出来了。这只是作为一个梳理，对以后选型或者扩展的做个参考。目录系统平台（Hadoop、CDH、HDP）监控管理（CM、Hue、Ambari、Dr.Elephant、Ganglia、Zabbix、Eagle）文件系统（HDFS、GPFS、Ceph、Gluster
  • CH-87——矿井水除氟的技术汇总 C-158 7636 413O 大数据全文检索
    矿井水除氟的要求一般是处理后水中的含氟量≤1.0mg/L。氟化物含量高的原水往往呈偏碱性，pH值常大于7.5。利用阴离子交换树脂上的可交换阴离子，去交换水中的氟离子，达到除氟目的。氟离子的选择交换性较大，树脂上的SO42-、Cl-等阴离子很容易被水中的F-交换下来而去除。矿井水除氟的几种方法：1.化学沉淀法钙盐沉淀法是除氟工艺中应用广泛的一种方法。对于高浓度含氟废水，一般采用钙盐沉淀法，即向废水中
  • 快速计算距离Annoy算法原理及Python使用 召唤师的峡谷 机器学习算法
    快速计算距离Annoy算法基本原理高维稀疏数据进行快速相似查找，可以采用learningtohash参考：Minhashing&LSH&Simhash技术汇总,但高维稠密数据查找则采用annoy如何从海量文本中快速查找出相似的TopN文本Annoy（ApproximateNearestNeighborsOhYeah）快速算法,在实际应用中发现无论计算速度和准确性都非常不错。原始2D数据分布图：1.
  • 黑帽SEO技术汇总 王生28
    劫持：域名劫持、网页劫持、PR劫持、公关劫持、蜘蛛劫持、服务端劫持、客户端劫持、快照劫持站群：常规站群、泛站群、目录站群、寄生站群、ip站群、端口站群刷站：刷百度排名、刷百度下拉框/相关搜索关键词、刷流量、刷点击、刷指数、刷口碑、刷百度分享斗蓬法、入侵法、非入侵泛解析、sql注入、寄生虫、蜘蛛池、网站镜像、桥页/门页、shell、泛目录自动繁殖文章、隐藏页面、诱饵替换、买卖链接、链接工厂/链轮、蜘
  • 2020-07 前端技术汇总 抓猹吃瓜
    2020/07/30周四#什么是好的代码？在web前端方面，什么是好的代码？好的代码应该包含以下两个特性高性能，低时延（性能优化）熟悉数据结构与算法，减少时间复杂度或空间复杂度熟悉浏览器渲染基本原理、熟悉HTTP请求与响应细节、熟悉前端框架源码、减少不必要的渲染开销，提高加载速度可读性、可维护性、可扩展性熟悉设计模式，封装变化。代码高内聚、低耦合、指责单一、高度复用。写出好维护、好迭代、好扩展的代
  • IPoE技术汇总 姜亚轲 网络技术网络IPoEIPv6tunnel
    在国内并没有遇到这么多的IPoE（IPoverEthernet）技术，可能也是因为我来日本多年了，没有接触国内的IPv4overIPv6的技术，感觉国内IPv4地址紧张，用的传统NAT和PPPoE非常多，大多数设备还是建立在IPv4网络中，而来到日本之后，发现日本这边有很多IPv4overIPv6的技术，比如MAP-E、DS-Lite或者IPIP，技术点也挺多，我在这里也并不是RFC级别的总结，而
  • 分布式环境下流控技术汇总 隐墨星辰 百图解码支付系统设计与实现分布式图解支付系统设计与实现流量控制限流
    本篇主要是对分布式环境流控技术、原理、使用场景做个简要的汇总，包括：固定时间窗口算法，滑动时间窗口算法，漏桶算法，令牌桶算法，分布式消息中间件，流控与熔断利器Sentinel。1.前言在流量控制系列文章中的前六篇，分别介绍了固定时间窗口算法、滑动时间窗口算法、漏桶原理、令牌桶、消息中间件、Sentinel如何应用到分布式环境下的流量与并发控制。这里再次对这几个做一个简单回顾，知道工具箱里面的不同工
  • 中原焦点秦皇岛站第五期，每日分享第303天 Vivian_c8c7
    常用技术汇总1.通用技术（1）赞美1）一个目的创造改变的动能赋能：看到优势资源，提升自尊感建立正向、合作的咨询关系2）两大素材重新建构，找到难能可贵的地方（重新建构是心里有，赞美是嘴上说）停止做错也是赞美的向度3）三个条件真诚、具体、叫出名字4）四种形式直接赞美：点出优势所在自我赞美：意识化后续行动间接赞美：巩固人际力量背后赞美：提升赞美效能5）五个步骤叫出名字具体的好行为赞美人的感受你是怎么做到
  • 基于SpringBoot的SSM整合 .HTT. SpringBootspringbootvue.js后端
    目录1.案例不同模块的开发以所用技术汇总=================================================2.模块创建3.实体类开发3.1创建数据库3.2创建对应的实体类LomBok4.数据层开发4.1相关配置配置MP与druid4.2创建数据层接口——————Ctrl+F12查看当前类的方法——————————4.3效果测试4.3.1查询4.3.2添加4.3.3修
  • 大数据技术汇总 转身成为了码农 大数据hadoophivespark数据仓库
    HadoopHadoop入门概述Hadoop运行模式介绍HadoopHDFS的运行流程HadoopMapReduce的运行流程Hadoopyarn的运行流程Hadoop内HDFS、MapReduce和YARN交互过程HadoopHDFS常用命令HadoopYARN常用命令Hive大数据工具Hive介绍大数据工具Hive架构设计原理大数据之Hive常用命令大数据之Hive常用聚合函数大数据之Hive
  • 常见的传感器技术汇总简介 成都亿佰特电子科技有限公司 传感器传感器技术
    传感器技术是现代信息技术的关键组成部分之一，涉及到物理学、化学、生物学等多个学科领域，其应用范围广泛，包括工业自动化、环境监测、医疗保健、智能家居等领域。下面将介绍一些常见的传感器技术：温度传感器：用于测量温度和温差。最常见的温度传感器有热敏电阻和热电偶，它们广泛应用于温度控制、温度补偿和热量测量等方面。湿度传感器：用于测量空气或其他气体的湿度。常见的湿度传感器有电容式湿度传感器、电阻式湿度传感器
  • 【研究僧毕业总结】第1024个创作日 码农研究僧 推广合作创作日总结
    目录前言1.机缘2.收获3.憧憬前言收到这封来信，代表从创作至今刚好满足1024天1024，程序员的记忆1.机缘从学生到社会，都在需求一个记录笔记的软件，而作为程序员，CSDN可云同步又可直接在云平台上看到选择了CSDN作为笔记平台，生活或者工作中遇到的技术问题或者Bug等疑难杂症都会记录在博客中，记录日常的学习。最后通过成形的文章以及技术汇总成一个大纲，慢慢发现也有人喜欢看我的文章，对大家也有帮
  • HIL(硬件在环)技术汇总梳理 Mr.Cssust 未来发展HIL硬件在环dSPACENIVectorspeedgoat
    HIL（Hardware-in-the-Loop）测试领域的知名公司有dSPACE、NI、Vector和speedgoat等，以下是针对这几家HIL技术的对比分析：文章目录dSPACENIVectorspeedgoat总结dSPACEdSPACE成立于1988年，起源自德国的帕德博恩大学，是HIL概念的发明者之一，中国分公司在2009年成立。dSPACE的HIL系统主要针对复杂的多域集成系统。它提
  • Windows下反反调试技术汇总 A. 木头 windowsbigdata编辑器安全
    Windows下反反调试技术汇总Windows下反反调试技术汇总一、前言二、静态反调试技术2.1进程状态检测2.2调试环境检测三、动态反调试技术3.1时钟检测3.2异常处理3.30xCC探测3.4硬件断点检测3.5单步检测3.6自调试四、总结一、前言对于安全研究人员来说，调试过程中经常会碰到反调试技术，原因很简单：调试可以窥视程序的运行“秘密”，而程序作者想要通过反调试手段隐藏他们的“秘密”，普通
  • 散射成像相关原理的数学理论推导与证明 翼达口香糖 笔记经验分享
    散射技术汇总1.平面波2.传输损耗3.光学记忆效应4.菲涅尔衍射5.菲涅尔衍射-凸透镜成像6.光的传输过程7.传输矩阵8.波前整形调制9.光与物体的相互作用10.反卷积成像11.自相关成像12.相位恢复算法散射技术汇总散射成像技术汇总散射成像技术先验信息散射复杂度利用的光子FOV应用场景利用介质空域特征波前整形；反馈信号反卷积；PSF相关性高弹道和散射光受限于记忆效应，小于±3°磨砂玻璃或者生物组
  • macOS进程间通信的常用技术汇总 jimboRen macos
    macOS进程间通信的常用技术汇总命令行传参。yyds管道(pipe),匿名管道，c++的技术，可以跨平台使用只能在父子进程间通信，由于是单向的管道，只能单方面传输数据。如果需要双向传输，需要建立双向的两条管道才行共享内存shm（SharedMemory）适合大容量频繁数据进行传输，比如音视频数据。如果临时传输tag标记，也可以在跨平台使用。Qt：QSharedMemory,Mac:Socket,
  • 12个让您震撼的Linux终端命令 夜空_2cd3
    来自：Linux公社作者：醉落红尘链接：https://www.linuxidc.com/Linux/2020-04/162889.htmLinux命令行提供了一种比图形界面使用更简单更轻松、跨版本的方法来完成常见的任务。今天我们与您分享12个让您震撼的Linux终端命令。1、有用的命令行快捷键以下快捷键很有用，可以节省你的时间:CTRL+U:从光标处删除文本直到行首。CTRL+K:从光标处删除文
  • 2020-04月检视 捉不住的呼吸
    没有反思的人生，不值得过---苏格拉底。我是一切的根源，所有的发生都是来成就我的。【4月计划】完成情况1、（健康#）第12届百日跑每日打卡，每天马甲线训练，月跑量120公里✔2、（家庭#）定期给父母打电话✔3、（成长#）每天阅读半小时。✘下月阅读《疯子在左，天才在右》，超级笔记术的运用。坚持每日列清单✘、周检视✘、月检视✔听混沌大学研习社课程✔。4、（工作#）工作月报的总结，2020年4月重点口罩
  • ULAM公链第九十六期工作总结 ULAM（乌拉姆）公链 清链华识
    迈入12月，接下来就是雪花，圣诞，新年和更好的我们！愿生活不拥挤，笑容不必刻意，愿一切美好如期而至！2023年11月01日—2023年12月01日关于ULAM这期工作汇报，我们通过技术板块，推广板块，运营板块进行汇总.ULAM公链技术汇总1.ULAM2.0升级方案，多模态网络区块链浏览器2.底层dapp垮链性能测试3.垮链借贷dapp模块设计4.医疗病历加密存储加密性能分析ULAM公链推广汇总1.
  • 2020-06 前端技术汇总 鸢尾天下无双 前端技术分享javascriptcssvue.jshtml5node.js
    2020/06/30周二#为什么有效的URI不能包含空格等其他字符，URI编码方法详解在JS高程3里介绍URI编码方法时，有这样一个描述：有效的URI中不能包含某些字符，比如空格。使用URI编码方法可以把所有无效的字符替换为特殊的utf-8编码，从而让浏览器能够接受和理解#为什么有效的URI不能包含空格等其他字符？在《HTTP权威指南》第2章URL与资源-各种令人头疼的字符(p38)里有介绍原因：
  • Swift 周报 第十八期 ｜技术汇总 网罗开发 #Swift集swift开发语言ios
    前言本期是Swift编辑组自主整理周报的第九期，每个模块已初步成型。各位读者如果有好的提议，欢迎在文末留言。欢迎投稿或推荐内容。目前计划每两周周一发布，欢迎志同道合的朋友一起加入周报整理。蝴蝶的生命之所以如此短暂，因为它的翅膀太过精致了。Swift社区之所以浩瀚汹涌，因为它总想牵动起每一位读者的心！周报精选新闻和社区：苹果70亿收购曼联消息不实提案：Package注册表认证Swift论坛：讨论数组
  • LLM系列-大模型技术汇总 GeekPlusA 人工智能深度学习机器学习
    LLM系列-大模型技术汇总1.大模型技术汇总-参数高效迁移学习方法2.千亿模型并行训练技术2.1.数据并行（DataParallelism，DP）2.2.模型并行（ModelParallelism，MP）2.2.1.流水线并行（PipelineParallelism，PP）2.2.2.张量并行（TensorParallelism，TP）3.大模型面试高频问题整理3.1.GPT和Bert的区别？3.
  • AV/EDR 免杀逃避技术汇总 菜鸟m号 EDR免杀windowswindows
    这篇文章重在分享bybass的方法,循序渐进分为12种方案。并给出了详细的参考项目和一些案例，这些都是经过实战对抗检测的。目录1.shellcode加密2.降低程序的熵值逃离本地沙箱导入表混淆禁用ETW避免“恶意API调用模式”直接调用系统函数，规避“系统调用hook”删除或覆盖ntdll里面的hook欺骗线程调用堆栈（hooksleep）beacon/shellcode内存加密（读写权限）反射加
  • JavaScript 开发者的 10 款必备工具！——爱创课堂 qq_40255935
    划重点JavaScript几乎每年都会受到来自众多开发人员的关注......以下是开发基于浏览器的Web应用程序的JavaScript开发人员工具包中最必要的技术汇总。JavaScript，一种所有主流浏览器都支持的语言，是开发基于浏览器的Web应用程序的主力，几乎每年都会受到来自众多开发人员的关注。自然地，框架和库的生态系统自然而然地围绕着JavaScript而努力，以简化和增强JavaScri
  • 【可视化开发】数据大屏可视化技术汇总 马哥python说 python数据可视化可视化大数据可视化大屏大屏可视化数据大屏
    由于工作原因，需要用到一些大屏可视化技术，于是通过网上整理、自我学习等多途径，汇总了一份大屏可视化技术的思维导图，如下：这里主要汇总的是：大屏可视化技术！大屏可视化技术！大屏可视化技术！重要的事情讲三遍。即，适合投放于大屏的可视化技术。基础的图表工具和开发类库不在本次讨论范围内。本次汇总，包含了商用收费的、开源免费的，以及不同版本的阶梯收费情况。获取思维导图原文件，vx公众号搜索“老男孩的平凡之路
  • 教练没教完的驾驶技术都在这里了——看懂的都是老司机（1/3） 丹牛文读书
    教练没教的驾驶技术汇总！驾驶技术系列文章包括以下内容，文章虽长，但干货满满。分3次推文发送，这是第一次推文：一、了解车的性能二、不同车型的认识三、安全驾驶意识四、驾驶心态五、起步六、制动刹车七、倒车八、停车九、跟车十、转向拐弯十一、变道十二、超车十三、灯光使用十四、夜间和雨雪天气驾驶十五、高速道路行车十六、城市道路行车十七、山路行车十八、坡道十九、特殊情况的处理二十、组团开车一、了解车的性能所谓要
  • 2020-04 技术汇总 抓猹吃瓜
    2020/04/29周三#UI设计视觉差问题，总感觉没有居中对齐时怎么办放大n倍，截图画框，看是否在一条水平线上。关于UI设计视觉差相关知识点测量面积和视觉面积视觉体量是人眼如何察觉物体的大小和感觉，不需要等同于物体的实际像素值圆、菱形、三角形和其他非方形形状为了与方形形状保持一样的视觉大小，应适当放大图标区域应为视觉平衡保留一定的空间，这一点对保持同系列图标视觉平衡很重要。(这也是iconfon
  • java杨辉三角 3213213333332132 java基础
    package com.algorithm; /** * @Description 杨辉三角 * @author FuJianyong * 2015-1-22上午10:10:59 */ public class YangHui { public static void main(String[] args) { //初始化二维数组长度 int[][] y
  • 《大话重构》之大布局的辛酸历史 白糖_ 重构
    《大话重构》中提到“大布局你伤不起”，如果企图重构一个陈旧的大型系统是有非常大的风险，重构不是想象中那么简单。我目前所在公司正好对产品做了一次“大布局重构”，下面我就分享这个“大布局”项目经验给大家。   背景         公司专注于企业级管理产品软件，企业有大中小之分，在2000年初公司用JSP/Servlet开发了一套针对中
  • 电驴链接在线视频播放源码 dubinwei 源码电驴播放器视频ed2k
    本项目是个搜索电驴（ed2k）链接的应用,借助于磁力视频播放器（官网： http://loveandroid.duapp.com/ 开放平台），可以实现在线播放视频，也可以用迅雷或者其他下载工具下载。 项目源码： http://git.oschina.net/svo/Emule,动态更新。也可从附件中下载。 项目源码依赖于两个库项目，库项目一链接： http://git.oschina.
  • Javascript中函数的toString()方法 周凡杨 JavaScriptjstoStringfunctionobject
    简述     The toString() method returns a string representing the source code of the function.     简译之，Javascript的toString()方法返回一个代表函数源代码的字符串。 句法     function.
  • struts处理自定义异常 g21121 struts
    很多时候我们会用到自定义异常来表示特定的错误情况，自定义异常比较简单，只要分清是运行时异常还是非运行时异常即可，运行时异常不需要捕获，继承自RuntimeException，是由容器自己抛出，例如空指针异常。 非运行时异常继承自Exception，在抛出后需要捕获，例如文件未找到异常。 此处我们用的是非运行时异常，首先定义一个异常LoginException: /** * 类描述：登录相
  • Linux中find常见用法示例 510888780 linux
    Linux中find常见用法示例 ·find   path   -option   [   -print ]   [ -exec   -ok   command ]   {} \; find命令的参数；
  • SpringMVC的各种参数绑定方式 Harry642 springMVC绑定表单
    1. 基本数据类型(以int为例，其他类似)： Controller代码： @RequestMapping("saysth.do") public void test(int count) { } 表单代码： <form action="saysth.do" method="post&q
  • Java 获取Oracle ROWID aijuans javaoracle
    A ROWID is an identification tag unique for each row of an Oracle Database table. The ROWID can be thought of as a virtual column, containing the ID for each row. The oracle.sql.ROWID class i
  • java获取方法的参数名 antlove javajdkparametermethodreflect
    reflect.ClassInformationUtil.java package reflect; import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifier; import javassist.bytecode.CodeAtt
  • JAVA正则表达式匹配 查找 替换 提取操作 百合不是茶 java正则表达式替换提取查找
    正则表达式的查找;主要是用到String类中的split();       String str;      str.split();方法中传入按照什么规则截取,返回一个String数组   常见的截取规则: str.split("\\.")按照.来截取 str.
  • Java中equals()与hashCode()方法详解 bijian1013 javasetequals()hashCode()
    一.equals()方法详解     equals()方法在object类中定义如下：  public boolean equals(Object obj) { return (this == obj); }    很明显是对两个对象的地址值进行的比较（即比较引用是否相同）。但是我们知道，String 、Math、I
  • 精通Oracle10编程SQL(4)使用SQL语句 bijian1013 oracle数据库plsql
    --工资级别表 create table SALGRADE ( GRADE NUMBER(10), LOSAL NUMBER(10,2), HISAL NUMBER(10,2) ) insert into SALGRADE values(1,0,100); insert into SALGRADE values(2,100,200); inser
  • 【Nginx二】Nginx作为静态文件HTTP服务器 bit1129 HTTP服务器
     Nginx作为静态文件HTTP服务器 在本地系统中创建/data/www目录，存放html文件(包括index.html) 创建/data/images目录，存放imags图片 在主配置文件中添加http指令   http { server { listen 80; server_name
  • kafka获得最新partition offset blackproof kafkapartitionoffset最新
    kafka获得partition下标，需要用到kafka的simpleconsumer   import java.util.ArrayList; import java.util.Collections; import java.util.Date; import java.util.HashMap; import java.util.List; import java.
  • centos 7安装docker两种方式 ronin47
          第一种是采用yum 方式              yum install -y docker           
  • java-60-在O(1)时间删除链表结点 bylijinnan java
    public class DeleteNode_O1_Time { /** * Q 60 在O(1)时间删除链表结点 * 给定链表的头指针和一个结点指针(!!)，在O(1)时间删除该结点 * * Assume the list is: * head->...->nodeToDelete->mNode->nNode->..
  • nginx利用proxy_cache来缓存文件 cfyme cache
    user  zhangy users; worker_processes 10; error_log  /var/vlogs/nginx_error.log  crit; pid        /var/vlogs/nginx.pid; #Specifies the value for ma
  • [JWFD开源工作流]JWFD嵌入式语法分析器负号的使用问题 comsci 嵌入式
        假如我们需要用JWFD的语法分析模块定义一个带负号的方程式，直接在方程式之前添加负号是不正确的，而必须这样做：     string str01 = "a=3.14;b=2.71;c=0;c-((a*a)+(b*b))"     定义一个0整数c,然后用这个整数c去
  • 如何集成支付宝官方文档 dai_lm android
    官方文档下载地址 https://b.alipay.com/order/productDetail.htm?productId=2012120700377310&tabId=4#ps-tabinfo-hash 集成的必要条件 1. 需要有自己的Server接收支付宝的消息 2. 需要先制作app，然后提交支付宝审核，通过后才能集成 调试的时候估计会真的扣款，请注意
  • 应该在什么时候使用Hadoop datamachine hadoop
    原帖地址：http://blog.chinaunix.net/uid-301743-id-3925358.html 存档，某些观点与我不谋而合，过度技术化不可取，且hadoop并非万能。 --------------------------------------------万能的分割线-------------------------------- 有人问我，“你在大数据和Hado
  • 在GridView中对于有外键的字段使用关联模型进行搜索和排序 dcj3sjt126com yii
    在GridView中使用关联模型进行搜索和排序 首先我们有两个模型它们直接有关联: class Author extends CActiveRecord { ... } class Post extends CActiveRecord { ... function relations() { return array( '
  • 使用NSString 的格式化大全 dcj3sjt126com Objective-C
    格式定义The format specifiers supported by the NSString formatting methods and CFString formatting functions follow the IEEE printf specification; the specifiers are summarized in Table 1. Note that you c
  • 使用activeX插件对象object滚动有重影 蕃薯耀 activeX插件滚动有重影
      使用activeX插件对象object滚动有重影   <object style="width:0;" id="abc" classid="CLSID:D3E3970F-2927-9680-BBB4-5D0889909DF6" codebase="activex/OAX339.CAB#
  • SpringMVC4零配置 hanqunfeng springmvc4
    基于Servlet3.0规范和SpringMVC4注解式配置方式，实现零xml配置，弄了个小demo，供交流讨论。     项目说明如下： 1.db.sql是项目中用到的表，数据库使用的是oracle11g 2.该项目使用mvn进行管理，私服为自搭建nexus,项目只用到一个第三方 jar，就是oracle的驱动； 3.默认项目为零配置启动，如果需要更改启动方式，请
  • 《开源框架那点事儿16》：缓存相关代码的演变 j2eetop 开源框架
    问题引入 上次我参与某个大型项目的优化工作，由于系统要求有比较高的TPS，因此就免不了要使用缓冲。 该项目中用的缓冲比较多，有MemCache，有Redis，有的还需要提供二级缓冲，也就是说应用服务器这层也可以设置一些缓冲。 当然去看相关实现代代码的时候，大致是下面的样子。 [java] view plain copy print ? public vo
  • AngularJS浅析 kvhur JavaScript
    概念 AngularJS is a structural framework for dynamic web apps. 了解更多详情请见原文链接：http://www.gbtags.com/gb/share/5726.htm Directive 扩展html，给html添加声明语句，以便实现自己的需求。对于页面中html元素以ng为前缀的属性名称，ng是angular的命名空间
  • 架构师之jdk的bug排查(一)---------------split的点号陷阱 nannan408 split
    1.前言.    jdk1.6的lang包的split方法是有bug的,它不能有效识别A.b.c这种类型,导致截取长度始终是0.而对于其他字符,则无此问题.不知道官方有没有修复这个bug. 2.代码 String[] paths = "object.object2.prop11".split("'"); System.ou
  • 如何对10亿数据量级的mongoDB作高效的全表扫描 quentinXXZ mongodb
      本文链接:  http://quentinXXZ.iteye.com/blog/2149440 一、正常情况下，不应该有这种需求 首先，大家应该有个概念，标题中的这个问题，在大多情况下是一个伪命题，不应该被提出来。要知道，对于一般较大数据量的数据库，全表查询，这种操作一般情况下是不应该出现的，在做正常查询的时候，如果是范围查询，你至少应该要加上limit。 说一下，
  • C语言算法之水仙花数 qiufeihu c算法
    /** * 水仙花数 */ #include <stdio.h> #define N 10 int main() { int x,y,z; for(x=1;x<=N;x++) for(y=0;y<=N;y++) for(z=0;z<=N;z++) if(x*100+y*10+z == x*x*x
  • JSP指令 wyzuomumu jsp
    jsp指令的一般语法格式： <%@ 指令名 属性 =”值 ” %> 常用的三种指令： page,include,taglib page指令语法形式： <%@ page 属性 1=”值 1” 属性 2=”值 2”%> include指令语法形式： <%@include file=”relative url”%> (jsp可以通过 include
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他