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
函数的三个参数:
-
(必选)标签 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 中文文档