当前位置: 首页 > Web前端 > vue.js

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

时间:2023-03-31 21:44:20 vue.js

js代码规范注解规范函数说明注意:在函数声明上方输入/**,然后回车:/***@function处理表格的行*@description合并Grid的行*@paramgrid{Ext.Grid.Panel}需要合并的Grid*@paramcols{Array}的Index(序号)数组需要合并的列;从0开始计数,也包括序列号。*@paramisAllSome{Boolean}:2个tr的cols是否必须相同才可以合并。true:完成相同;false(默认):不完全一样年龄|姓名||年龄|名称|*----------------mergeCells(grid,[0])--------------*|18|张三|=>||张三|*-------------------18----------*|18|王五|||五王|*------------------------------*/functionmergeCells(grid:Ext.Grid.Panel,cols:Number[],isAllSome:boolean=false){//DoSomething}javadoc参数说明:@see在文档中生成一个“查看xx的条目”的超链接,后面可以跟:“类名”,“完整的类名”,“完整的类名#method”。适用于:类、方法、变量注释。@param参数的说明。适用于:方法注释。@return返回值的说明。适用于:方法注释。@exception对可能抛出的异常的描述。适用于:方法注释。@version版本信息。适用于:类注释。@author作者姓名。适用于:类注释。@deprecated类或方法的说明不推荐使用该类或方法,导致弃用警告@note表示注解,文档暴露给源代码阅读者@remark表示注释,文档暴露给客户程序员@since表示from该函数已经被使用availablesincethatversion@seemeanscross-referencejQueryjQuerydeepcopyjQuery.extend([deep],target,object1[,objectN])$.extend(true,obj1,obj2)深拷贝obj2的对象属性到mainobj1jssubstring()和substr()的区别substring()方法的参数表示起始索引和结束索引,substr()方法的参数表示起始索引和生成的字符串中要包含的字符长度.例子如下:vartext='Mozilla';console.log(text.substring(2,5));//=>"zil"console.log(text.substr(2,3));//=>"zil"关于padStartpadStart字符补全可以在字符串的开头完成。语法如下:str.padStart(targetLength[,padString])其中:targetLength(可选)targetLength是指目标字符串的长度。那么根据我的测试,targetLength参数默认不会报错,原样返回原字符串,但是代码没有任何意义,所以基本没有理由使用它。另外,targetLength参数的类型可以是数值类型,也可以是弱数值类型。在JavaScript中,1=='1',1是一个值,'1'本质上是一个字符串,但也可以看成是一个弱值。在padStart()方法中,可接受数字或弱数字类型。例如:'zhangxinxu'.padStart('5');因此,我们在实际使用时,并不需要对targetLength参数进行强制类型转换。最后,如果targetLength设置的长度小于字符串本身,则原字符串不变返回,例如:'zhangxinxu'.padStart(5);//结果还是'zhangxinxu'padString(optional)padString表示用来完成长度的字符串。然而,虽然在语义上是一个字符串,但根据我的测试,任何类型的值都可以。Chrome浏览器和Firefox浏览器都会尝试将这个参数转换成字符串来补全。比如下面的例子:'zhangxinxu'.padStart(15,false);//结果是'falsezhangxinxu''zhangxinxu'.padStart(15,null);//结果是'nullnzhangxinxu''zhangxinxu'.padStart(15,[]);//结果是'zhangxinxu',因为[]转成字符串是空字符串'zhangxinxu'.padStart(15,{});//结果是'[objezhangxinxu',只有shows'[objectObject]'padString参数的前5个字符默认值为普通空格''(U+0020),即按下Space键时出现的空格。从以上案例可以看出,如果完成的字符串长度不足,会继续循环完成;如果长度超过,则从左边开始依次补全,没有补全的字符串直接忽略。该方法的返回值是完整的字符串。#常用缩写diff$\rightarrow$比较patch$\rightarrow$Modify/Patch#vue命令的缩写或缩写v-on$\rightarrow$@v-bind$\rightarrow$:v-slot$\rightarrow$#VuedocumentLearning#Reusable&Combination##Mixingin我们可以预先设置一组或多组组件设置,以及任何组件选项:data、method、watch、hookfunction等。如果任何组件要使用某组设置,它可以通过mixins选项包含它供自己使用。我们称这组设置(对象)为mixin对象。//定义一个mixin对象constmyMixin={created(){this.hello()},methods:{hello(){console.log('hellofrommixin!')}}}//定义一个使用这个mixinconst的应用app=Vue.createApp({mixins:[myMixin]})app.mount('#mixins-basic')//=>"hellofrommixin!"如果混合对象的选项名称与组件相同,则使用组件选项。但是,您也可以自定义合并功能。缺点:混入对象一旦定义,就不能修改,缺乏灵活性。在Vue3中,可以使用组合API来解决。##自定义指令除了v-on、v-bind、v-slot,Vue还支持自定义指令,方便我们操作DOM元素。可以在组件的指令选项中自定义指令。请注意,mounted中的参数el是DOM元素而不是jquery元素。全局注册指令constapp=Vue.createApp({})//注册一个全局自定义指令`v-focus`app.directive('focus',{//当绑定元素插入到DOM中时...mounted(el){//聚焦元素el.focus()}})局部注册指令directives:{focus:{//指令定义mounted(el){el.focus()}}}使用自定义指令元素自动对焦。在上面的例子中,我们使用了挂载的钩子函数。事实上,指令定义对象还可以提供以下钩子函数:beforeMount:当指令第一次绑定到元素上,并且在父组件挂载之前被调用。您可以在此处进行一次性初始设置。mounted:绑定元素的父组件挂载时调用。beforeUpdate:在更新包含该组件的VNode之前调用。updated:包含组件的VNode及其子组件的VNode更新后调用。beforeUnmount:在绑定元素的父组件被卸载之前调用unmounted:只调用一次,当指令与元素解除绑定并且父组件被卸载时。另外,钩子函数还可以设置动态参数,在模板中以v-mydirective:[argument]="value"的形式使用,其中argument为key,value为value。

在此部分内向下滚动↓

我固定在页面左侧200像素处。

constapp=Vue.createApp({data(){return{direction:'right'}}})app.directive('pin',{mounted(el,binding){el.style.position='fixed'//binding.arg是我们传递给指令的参数consts=binding.arg||'top'el.style[s]=binding.value+'px'}})app.mount('#dynamic-arguments-example')如果自定义命令只关注内容相同的挂载和更新的钩子函数,可以使用箭头函数简写。app.directive('pin',(el,binding)=>{el.style.position='fixed'consts=binding.arg||'top'el.style[s]=binding.value+'px'})###注意,在多个根节点上使用自定义指令可能会出现问题。这与渲染功能有关。我对此了解不多。详情请参考文档:自定义说明|##传送|传递当我们定义一个组件的模板时,有时需要模板的一部分在逻辑上属于该模板,但呈现在页面上的效果又不像嵌入在组件中。比如点击显示一条全屏消息,这就需要我们把这部分转移到合适的DOM节点上。在Vue中,我们使用标签来传递给父组件中的DOM节点。app.component('modal-button',{template:`打开全屏模态!(使用teleport!)
我是一个传送模态!(我的父母是“身体”)关闭
`,data(){return{modalOpen:false}}})##渲染函数h()的内容比较多。这篇文章比Vue中文文档更清楚的介绍了Vue渲染功能|短书。简单概括,渲染函数就是编译成DOM元素的函数,比如Vue中的模板。在Vue的渲染过程中,一共有三种渲染模式:自定义渲染函数、