乐趣区

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

作者：

jiezi

在

js代码标准

正文标准

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

/**
* @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

jQuery深拷贝

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

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

js

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$ #

Vue文档学习

# 可复用&组合
## 混入
咱们能够事后设定一套或多套组件设置，能够任意组件选项：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函数的三个参数：

  1. （必选）标签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'
})

  2. （可选）属性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'
})

  3. （可选）子节点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中文文档

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章