关于javascript:每周总结-函数方法注释规范jQuery深拷贝js补全函数Vue文档学习

函数阐明正文：在函数申明上方键入 /** , 再按回车键：

/**
* @function 解决表格的行
* @description 合并 Grid 的行
* @param grid {Ext.Grid.Panel} 须要合并的 Grid
* @param cols {Array} 须要合并列的 Index(序号)数组；从 0 开始计数，序号也蕴含。* @param isAllSome {Boolean}：是否 2 个 tr 的 cols 必须实现一样能力进行合并。true：实现一样；false(默认)：不齐全一样
* @return void
* @author polk6 2015/07/21 
* @example
* _________________ _________________
* | 年龄 | 姓名 | | 年龄 | 姓名 |
* ----------------- mergeCells(grid,[0]) -----------------
* | 18 | 张三 | => | | 张三 |
* ----------------- - 18 ---------
* | 18 | 王五 | | | 王五 |
* ----------------- -----------------
*/
function mergeCells(grid: Ext.Grid.Panel, cols: Number[], isAllSome: boolean = false) {// Do Something}

javadoc 参数阐明：

@see 生成文档中的“参见 xx 的条目”的超链接，后边能够加上：“类名”、“残缺类名”、“残缺类名 #办法”。可用于：类、办法、变量正文。
@param 参数的阐明。可用于：办法正文。
@return 返回值的阐明。可用于：办法正文。
@exception 可能抛出异样的阐明。可用于：办法正文。
@version 版本信息。可用于：类正文。
@author 作者名。可用于：类正文。
@deprecated 对类或办法的阐明该类或办法不倡议应用, 引起不举荐应用的正告
@note 示意注解，裸露给源码阅读者的文档
@remark 示意评论，裸露给客户程序员的文档
@since 示意从那个版本起开始有了这个函数
@see 示意穿插参考

jQuery.extend([deep], target, object1 [, objectN] )

$.extend(true, obj1, obj2) 将 obj2 的对象属性深拷贝给 obj1

`substring()` 与 `substr()` 的次要区别

substring() 办法的参数示意起始和完结索引，substr() 办法的参数示意起始索引和要蕴含在生成的字符串中的字符的长度, 示例如下：

vartext = 'Mozilla';
console.log(text.substring(2,5)); // => "zil"console.log(text.substr(2,3)); // => "zil"

对于 `padStart`

padStart 能够在字符串的结尾进行字符补全。
语法如下：

str.padStart(targetLength [, padString])

其中：

targetLength（可选）

targetLength 指指标字符串长度。而后，依据我的测试，targetLength 参数缺省也不会报错，本来的字符串一成不变返回，不过代码没有任何意义，因而，基本上没有应用的理由。

还有，targetLength 参数的类型能够是数值类型或者弱数值类型。在 JavaScript 中，1 == '1'，1 是数值，'1' 尽管实质上是字符串，但也能够看成是弱数值。在 padStart() 办法中，数值类型或者弱数值类型都是能够。例如：

'zhangxinxu'.padStart('5');

因而，咱们理论应用的时候，没必要对 targetLength 参数进行强制的类型转换。

最初，如果 targetLength 设置的长度比字符串自身还要小，则本来的字符串一成不变返回，例如：

'zhangxinxu'.padStart(5);    
// 后果还是 'zhangxinxu'

padString（可选）
padString 示意用来补全长度的字符串。然而，尽管语义上是字符串，然而依据我的测试，任意类型的值都是能够的。无论是 Chrome 浏览器还是 Firefox 浏览器，都会尝试将这个参数转换成字符串进行补全。例如上面几个例子：
```
  'zhangxinxu'.padStart(15, false);
// 后果是 'falsezhangxinxu'
  'zhangxinxu'.padStart(15, null);
// 后果是 'nullnzhangxinxu'
  'zhangxinxu'.padStart(15, []);
// 后果是 'zhangxinxu'，因为 [] 转换成字符串是空字符串
  'zhangxinxu'.padStart(15, {});
// 后果是 '[objezhangxinxu'，只显示了 '[object Object]' 前 5 个字符
```
padString 参数默认值是一般空格' '（U+0020），也就是敲 Space 空格键呈现的空格。

从下面几个案例能够看出，如果补全字符串长度有余，则一直循环补全；如果长度超出，则从左侧开始顺次补全，没有补到的字符串间接就疏忽。
此办法返回值是补全后的字符串。

# 罕用缩写
diff $\rightarrow$ 比拟

patch $\rightarrow$ 批改 / 补丁

# vue 命令的缩写或简写
v-on $\rightarrow$ @

v-bind $\rightarrow$ :

v-slot $\rightarrow$ #

# 可复用 & 组合
## 混入
咱们能够事后设定一套或多套组件设置，能够任意组件选项：data，method，watch，钩子函数等等。如果任何组件想要应用某一套设置，就能够通过 mixins 选项来将它蕴含进来，为本人所用。咱们称这套设置（对象）为 混入对象。

// define a mixin object
const myMixin = {created() {this.hello()
  },
  methods: {hello() {console.log('hello from mixin!')
    }
  }
}

// define an app that uses this mixin
const app = Vue.createApp({mixins: [myMixin]
})

app.mount('#mixins-basic') // => "hello from mixin!"

如果混入对象的某一选项名与组件雷同，则应用组件的选项。不过也能够自定义合并函数。

毛病：混入对象一旦定义就不能批改，短少灵活性。在 Vue3 中能够应用组合式 API 来解决。

## 自定义指令
除了v-on、v-bind、v-slot 外，Vue 反对自定义指令，不便咱们操作 DOM 元素。在组件的 directives 选项中能够自定义指令。留神在 mounted 的参数 el 是 DOM 元素而不是 jquery 元素。

全局注册指令

const app = Vue.createApp({})
// 注册一个全局自定义指令 `v-focus`
app.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  mounted(el) {
    // Focus the element
    el.focus()}
})

部分注册指令

directives: {
  focus: {
    // 指令的定义
    mounted(el) {el.focus()
    }
  }
}

应用自定义指令，该指令使元素主动聚焦。

<input v-focus />

在下面的例子中，咱们应用了 mounted 的钩子函数，实际上，在一个指令定义对象还能够提供如下几个钩子函数：

beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。在这里你能够做一次性的初始化设置。
mounted：在挂载绑定元素的父组件时调用。
beforeUpdate：在更新蕴含组件的 VNode 之前调用。
updated：在蕴含组件的 VNode 及其子组件的 VNode 更新后调用。
beforeUnmount：在卸载绑定元素的父组件之前调用
unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。

除此之外，钩子函数还能够设置动静参数，在模板中以 v-mydirective:[argument]="value" 模式应用，argument为键，value为值。

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>

const app = Vue.createApp({data() {
    return {direction: 'right'}
  }
})

app.directive('pin', {mounted(el, binding) {
    el.style.position = 'fixed'
    // binding.arg is an argument we pass to directive
    const s = binding.arg || 'top'
    el.style[s] = binding.value + 'px'
  }
})

app.mount('#dynamic-arguments-example')

如果自定义指令只关注 mounted 和updated两个钩子函数且内容一样，能够应用箭头函数简写。

app.directive('pin', (el, binding) => {
  el.style.position = 'fixed'
  const s = binding.arg || 'top'
  el.style[s] = binding.value + 'px'
})

### 留神
在具备多个根节点上应用自定义指令时可能呈现问题，这与渲染函数无关，笔者不太理解，具体可查阅文档：自定义指令 | Vue3 中文文档。

## Teleport | 传送
在咱们定义组件的模板的时候，有时候须要模板上的一部分逻辑上属于模板，然而页面上出现进去的成果不像镶嵌在组件中。比方点击呈现一个全屏信息，这须要咱们把这一部分传送到适合的 DOM 节点下，在 Vue 中咱们应用<teleport> 标签来传送到父组件中的 DOM 节点。

app.component('modal-button', {
  template: `
    <button @click="modalOpen = true">
        Open full screen modal! (With teleport!)
    </button>

    <teleport to="body">
      <div v-if="modalOpen" class="modal">
        <div>
          I'm a teleported modal! 
          (My parent is "body")
          <button @click="modalOpen = false">
            Close
          </button>
        </div>
      </div>
    </teleport>
  `,
  data() {
    return {modalOpen: false}
  }
})

## 渲染函数 h()
内容较多，此文章介绍的比 Vue 中文文档分明一点 Vue render 函数 | 简书。

简略总结以下，渲染函数是 Vue 中模板等编译为 DOM 元素的函数。

Vue 在渲染过程中，有三种渲染模式：自定义 render 函数、<template>模板、el均能够渲染页面，对应三种写法如下：

自定义 render 函数

Vue.component('anchored-heading', {render: function (createElement) {
        return createElement (
            'h' + this.level,   // tag name 标签名称
            this.$slots.default // 子组件中的阵列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
})

template写法

let app = new Vue({template: `<div>{{ msg}}</div>`,
    data () {
        return {msg: ''}
    }
})

el 写法

let app = new Vue({
    el: '#app',
    data () {
        return {msg: 'Hello Vue!'}
    }
})

而这三种渲染模式最终都是要失去 render 函数。

接下来讲一下 render 函数的三个参数：

（必选）标签 tag，类型能够是 {String | Object | Function} 三种之一；

<div id="app">
 <custom-element></custom-element>
</div>

Vue.component('custom-element', {render: function (createElement) {return createElement('div')
 }
})

let app = new Vue({el: '#app'})

（可选）属性 prop，类型是对象Object；

<div id="app">
 <custom-element></custom-element>
</div>

Vue.component('custom-element', {render: function (createElement) {
   var self = this
   // 第一个参数是一个简略的 HTML 标签字符“必选”// 第二个参数是一个蕴含模板相干属性的数据对象“可选”return createElement('div', {
       'class': {
           foo: true,
           bar: false
       },
       style: {
           color: 'red',
           fontSize: '14px'
       },
       attrs: {id: 'boo'},
       domProps: {innerHTML: 'Hello Vue!'}
   })
 }
})

let app = new Vue({el: '#app'})

（可选）子节点 children，类型能够是 {String | Array} 两种之一。

<div id="app">
 <custom-element></custom-element>
</div>

Vue.component('custom-element', {render: function (createElement) {
   var self = this

   return createElement(
       'div', // 第一个参数是一个简略的 HTML 标签字符“必选”{
           class: {title: true},
           style: {
               border: '1px solid',
               padding: '10px'
           }
       }, // 第二个参数是一个蕴含模板相干属性的数据对象“可选”[createElement('h1', 'Hello Vue!'),
           createElement('p', '开始学习 Vue!')
       ] // 第三个参数是传了多个子元素的一个数组“可选”)
 }
})

let app = new Vue({el: '#app'})

在模板写法中，v-if、v-on、v-model等等指令或者自定义指令都会造成代码，Vue 的渲染函数就不会提供专有的代替办法，然而咱们也能够本人在渲染函数中实现一样的性能。这样做的长处是能够更加自若地定制指令的成果。具体的代码查看应用 JavaScript 代替模板性能 | Vue3 中文文档。

## 插件
插件 | Vue 中文文档

关于javascript:每周总结-函数方法注释规范jQuery深拷贝js补全函数Vue文档学习

js 代码标准

正文标准

jQuery

jQuery 深拷贝

js

`substring()` 与 `substr()` 的次要区别

对于 `padStart`

Vue 文档学习

Just My Socks（注册教程内含优惠码）

关于javascript:每周总结-函数方法注释规范jQuery深拷贝js补全函数Vue文档学习

js 代码标准

正文标准

jQuery

jQuery 深拷贝

js

substring() 与 substr() 的次要区别

对于 padStart

Vue 文档学习

Just My Socks（注册教程 内含优惠码）

`substring()` 与 `substr()` 的次要区别

对于 `padStart`

Just My Socks（注册教程内含优惠码）