js代碼規(guī)范

注釋規(guī)范

函數(shù)說明注釋：在函數(shù)聲明上方鍵入 /** ,再按回車鍵：

/**
* @function 處理表格的行
* @description 合并Grid的行
* @param grid {Ext.Grid.Panel} 需要合并的Grid
* @param cols {Array} 需要合并列的Index(序號(hào))數(shù)組；從0開始計(jì)數(shù)，序號(hào)也包含。
* @param isAllSome {Boolean} ：是否2個(gè)tr的cols必須完成一樣才能進(jìn)行合并。true：完成一樣；false(默認(rèn))：不完全一樣
* @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參數(shù)說明：

@see 生成文檔中的“參見xx 的條目”的超鏈接，后邊可以加上：“類名”、“完整類名”、“完整類名#方法”?？捎糜冢侯?、方法、變量注釋。
@param 參數(shù)的說明?？捎糜冢悍椒ㄗ⑨尅?/p>
@return 返回值的說明?？捎糜冢悍椒ㄗ⑨?。
@exception 可能拋出異常的說明。可用于：方法注釋。
@version 版本信息?？捎糜冢侯愖⑨?。
@author 作者名?？捎糜冢侯愖⑨?。
@deprecated 對(duì)類或方法的說明該類或方法不建議使用,引起不推薦使用的警告
@note 表示注解，暴露給源碼閱讀者的文檔
@remark 表示評(píng)論，暴露給客戶程序員的文檔
@since 表示從那個(gè)版本起開始有了這個(gè)函數(shù)
@see 表示交叉參考

jQuery

jQuery深拷貝

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

$.extend(true, obj1, obj2) 將 obj2 的對(duì)象屬性深拷貝給 obj1

js

`substring()` 與 `substr()` 的主要區(qū)別

substring() 方法的參數(shù)表示起始和結(jié)束索引，substr() 方法的參數(shù)表示起始索引和要包含在生成的字符串中的字符的長(zhǎng)度,示例如下：

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

關(guān)于 `padStart`

padStart 可以在字符串的開頭進(jìn)行字符補(bǔ)全。
語法如下：

str.padStart(targetLength [, padString])

其中：

targetLength （可選）

targetLength 指目標(biāo)字符串長(zhǎng)度。然后，根據(jù)我的測(cè)試，targetLength 參數(shù)缺省也不會(huì)報(bào)錯(cuò)，原本的字符串原封不動(dòng)返回，不過代碼沒有任何意義，因此，基本上沒有使用的理由。

還有，targetLength 參數(shù)的類型可以是數(shù)值類型或者弱數(shù)值類型。在JavaScript中，1 == '1' ，1 是數(shù)值，'1' 雖然本質(zhì)上是字符串，但也可以看成是弱數(shù)值。在 padStart() 方法中，數(shù)值類型或者弱數(shù)值類型都是可以。例如：
js 'zhangxinxu'.padStart('5');
因此，我們實(shí)際使用的時(shí)候，沒必要對(duì)targetLength參數(shù)進(jìn)行強(qiáng)制的類型轉(zhuǎn)換。

最后，如果 targetLength 設(shè)置的長(zhǎng)度比字符串本身還要小，則原本的字符串原封不動(dòng)返回，例如：

'zhangxinxu'.padStart(5);    
// 結(jié)果還是'zhangxinxu'

padString （可選）
padString 表示用來補(bǔ)全長(zhǎng)度的字符串。然而，雖然語義上是字符串，但是根據(jù)我的測(cè)試，任意類型的值都是可以的。無論是Chrome瀏覽器還是Firefox瀏覽器，都會(huì)嘗試將這個(gè)參數(shù)轉(zhuǎn)換成字符串進(jìn)行補(bǔ)全。例如下面幾個(gè)例子：

    'zhangxinxu'.padStart(15, false);
// 結(jié)果是'falsezhangxinxu'
    'zhangxinxu'.padStart(15, null);
// 結(jié)果是'nullnzhangxinxu'
    'zhangxinxu'.padStart(15, []);
// 結(jié)果是'zhangxinxu'，因?yàn)閇]轉(zhuǎn)換成字符串是空字符串
    'zhangxinxu'.padStart(15, {});
// 結(jié)果是'[objezhangxinxu'，只顯示了'[object Object]'前5個(gè)字符

padString 參數(shù)默認(rèn)值是普通空格' '（U+0020），也就是敲Space空格鍵出現(xiàn)的空格。

從上面幾個(gè)案例可以看出，如果補(bǔ)全字符串長(zhǎng)度不足，則不斷循環(huán)補(bǔ)全；如果長(zhǎng)度超出，則從左側(cè)開始依次補(bǔ)全，沒有補(bǔ)到的字符串直接就忽略。
此方法返回值是補(bǔ)全后的字符串。

常用縮寫

diff $\rightarrow$ 比較

patch $\rightarrow$ 修改/補(bǔ)丁

vue命令的縮寫或簡(jiǎn)寫

v-on $\rightarrow$ @

v-bind $\rightarrow$ :

v-slot $\rightarrow$ #

Vue文檔學(xué)習(xí)

可復(fù)用&組合

混入

我們可以預(yù)先設(shè)定一套或多套組件設(shè)置，可以任意組件選項(xiàng)：data，method，watch，鉤子函數(shù)等等。如果任何組件想要使用某一套設(shè)置，就可以通過mixins選項(xiàng)來將它包含進(jìn)來，為自己所用。我們稱這套設(shè)置（對(duì)象）為混入對(duì)象。

// 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!"

如果混入對(duì)象的某一選項(xiàng)名與組件相同，則使用組件的選項(xiàng)。不過也可以自定義合并函數(shù)。

缺點(diǎn)：混入對(duì)象一旦定義就不能修改，缺少靈活性。在Vue3中可以使用組合式API來解決。

自定義指令

除了v-on、v-bind、v-slot外，Vue支持自定義指令，方便我們操作DOM元素。在組件的directives選項(xiàng)中可以自定義指令。注意在mounted的參數(shù)el是DOM元素而不是jquery元素。

全局注冊(cè)指令

const app = Vue.createApp({})
// 注冊(cè)一個(gè)全局自定義指令 `v-focus`
app.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  mounted(el) {
    // Focus the element
    el.focus()
  }
})

局部注冊(cè)指令

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

使用自定義指令，該指令使元素自動(dòng)聚焦。

<input v-focus />

在上面的例子中，我們使用了mounted的鉤子函數(shù)，實(shí)際上，在一個(gè)指令定義對(duì)象還可以提供如下幾個(gè)鉤子函數(shù)：

beforeMount：當(dāng)指令第一次綁定到元素并且在掛載父組件之前調(diào)用。在這里你可以做一次性的初始化設(shè)置。
mounted：在掛載綁定元素的父組件時(shí)調(diào)用。
beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。
updated：在包含組件的VNode及其子組件的VNode更新后調(diào)用。
beforeUnmount：在卸載綁定元素的父組件之前調(diào)用
unmounted：當(dāng)指令與元素解除綁定且父組件已卸載時(shí)，只調(diào)用一次。

除此之外，鉤子函數(shù)還可以設(shè)置動(dòng)態(tài)參數(shù)，在模板中以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')

如果自定義指令只關(guān)注mounted和updated兩個(gè)鉤子函數(shù)且內(nèi)容一樣，可以使用箭頭函數(shù)簡(jiǎn)寫。

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

注意

在具有多個(gè)根節(jié)點(diǎn)上使用自定義指令時(shí)可能出現(xiàn)問題，這與渲染函數(shù)有關(guān)，筆者不太了解，具體可查閱文檔：自定義指令 | Vue3中文文檔。

Teleport | 傳送

在我們定義組件的模板的時(shí)候，有時(shí)候需要模板上的一部分邏輯上屬于模板，但是頁面上呈現(xiàn)出來的效果不像鑲嵌在組件中。比如點(diǎn)擊出現(xiàn)一個(gè)全屏信息，這需要我們把這一部分傳送到合適的DOM節(jié)點(diǎn)下，在Vue中我們使用<teleport>標(biāo)簽來傳送到父組件中的DOM節(jié)點(diǎn)。

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
    }
  }
})

渲染函數(shù) h()

內(nèi)容較多，此文章介紹的比Vue中文文檔清楚一點(diǎn) Vue render函數(shù) | 簡(jiǎn)書。

簡(jiǎn)單總結(jié)以下，渲染函數(shù)是Vue中模板等編譯為DOM元素的函數(shù)。

Vue在渲染過程中，有三種渲染模式：自定義render函數(shù)、<template>模板、el均可以渲染頁面，對(duì)應(yīng)三種寫法如下：

自定義render函數(shù)

Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement (
            'h' + this.level,   // tag name標(biāo)簽名稱
            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函數(shù)。

接下來講一下render函數(shù)的三個(gè)參數(shù)：

（必選）標(biāo)簽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，類型是對(duì)象Object；

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

Vue.component('custom-element', {
    render: function (createElement) {
        var self = this
        // 第一個(gè)參數(shù)是一個(gè)簡(jiǎn)單的HTML標(biāo)簽字符 “必選”
        // 第二個(gè)參數(shù)是一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對(duì)象 “可選”
        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'
})

（可選）子節(jié)點(diǎn)children，類型可以是{String | Array}兩種之一。

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

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

        return createElement(
            'div', // 第一個(gè)參數(shù)是一個(gè)簡(jiǎn)單的HTML標(biāo)簽字符 “必選”
            {
                class: {
                    title: true
                },
                style: {
                    border: '1px solid',
                    padding: '10px'
                }
            }, // 第二個(gè)參數(shù)是一個(gè)包含模板相關(guān)屬性的數(shù)據(jù)對(duì)象 “可選”
            [
                createElement('h1', 'Hello Vue!'),
                createElement('p', '開始學(xué)習(xí)Vue!')
            ] // 第三個(gè)參數(shù)是傳了多個(gè)子元素的一個(gè)數(shù)組 “可選”
        )
    }
})

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

在模板寫法中，v-if、v-on、v-model等等指令或者自定義指令都會(huì)形成代碼，Vue的渲染函數(shù)就不會(huì)提供專有的替代方法，但是我們也可以自己在渲染函數(shù)中實(shí)現(xiàn)一樣的功能。這樣做的優(yōu)點(diǎn)是可以更加自如地定制指令的效果。具體的代碼查看使用 JavaScript 代替模板功能 | Vue3中文文檔。

插件

插件 | Vue中文文檔

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

每周總結(jié) 函數(shù)方法注釋規(guī)范/jQuery深拷貝/js補(bǔ)全函數(shù)/Vue文檔學(xué)習(xí)

每周總結(jié) 函數(shù)方法注釋規(guī)范/jQuery深拷貝/js補(bǔ)全函數(shù)/Vue文檔學(xué)習(xí)

js代碼規(guī)范

注釋規(guī)范

jQuery

jQuery深拷貝

js

`substring()` 與 `substr()` 的主要區(qū)別

關(guān)于 `padStart`

常用縮寫

vue命令的縮寫或簡(jiǎn)寫

Vue文檔學(xué)習(xí)

可復(fù)用&組合

混入

自定義指令

注意

Teleport | 傳送

渲染函數(shù) h()

插件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

每周總結(jié) 函數(shù)方法注釋規(guī)范/jQuery深拷貝/js補(bǔ)全函數(shù)/Vue文檔學(xué)習(xí)

js代碼規(guī)范

注釋規(guī)范

jQuery

jQuery深拷貝

js

substring() 與 substr() 的主要區(qū)別

關(guān)于 padStart

常用縮寫

vue命令的縮寫或簡(jiǎn)寫

Vue文檔學(xué)習(xí)

可復(fù)用&組合

混入

自定義指令

注意

Teleport | 傳送

渲染函數(shù) h()

插件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

`substring()` 與 `substr()` 的主要區(qū)別

關(guān)于 `padStart`