Vue.js 组件编码规范

所需积分/C币:50 2018-07-09 17:31:32 367KB PDF
202
收藏 收藏
举报

Vue.js 组件编码规范/始终基于模块的方式来构建你的 app,每一个子模块只做一件事情。 Vue.js 的设计初衷就是帮助开发者更好的开发界面模块。一个模块是应用程序中独立的一个部分。
虽然κεjs支持传递复杂的 JavaScript对象通过 props属性,但是你应该尽可能的使用原始类型的数据。尽量只使用 javAscript原始类型(字符串、数字、布尔值)和函数。尽量避免复杂的对象 为什么? 使得组件API清晰直观。 只使用原始类型和函数作为 props使得组件的AP更接近于H「ML(5)原生元素 ·其它开发者更好的理解每一个Prp的含义、作用 传递过于复杂的对象使得我们不能够清楚的知道哪些属性或方法被自定义组件使用,这使得代码难以重构和护。 怎么做? 组件的每一个属性单独使用一个pops,并且使用函数或是原始类型的值 !--推荐 <range-slider values=[10, 20] max= 100 on-slide=updateInputs' on-end=updateResults"> </range-slider> !--避免 <range-slider config="complex configobject"></range-slider> 验证组件的 Props 在∨ejs中,组件的 props即AP’一个稳定并可预测的AP会使得你的组件更容易被其他开发者使用 组件pPS通过自定义标签的属性来传递。属性的值可以是∨ejs字符串(atr=vae"或v- bind: attra="vae")或是不传 你需要保证组件的pops能应对不同的情况。 为什么? 编制:uejs研发群165862199 验证组件pr∞ops可以保证你的组件永远是可用的(防御性编程)。即使其他开发者并未按照你预想的方法使用时也不会出错 怎么做 提供默认值 使川tPe属性校验类型。 使用pops之前先检查该Pop是否存在。 nput ty v-model= value: w > /template <script type="text/javascript"> export default props: i ype:wper,这里添加了致字类型的校验 default i return 10;1 type: Number default return O; F value type: Number default return 4: I 3,3, 1:<script> ↑回到目录 将tis赋值给 component变量 在Vejs组件上下文中,this指向了组件实例a因此当你切换到了不同的上下文时,要确保this指向一个可用的 component变 换句话说,不要在编写这样的代码 const self=this;,而是应该直接使用变量 component 为什么? ·将组件t赋值给变量 component可用让开发者清楚的知道任何一个被使用的地方,它代表的是组件实例。 怎么做? <script type="text/javascript">export default i methods: i hellot return 'hello'; 3, printHelloo console og(this helloO): 1, 3, 3: </script> <!--避免 <script type="text/javascript">export default i methods: i hello()i eturn hel printHelloo)[ const sef=this;//没有必耍 console. log(self helloO));3, 3,3 < </script 组件结构化 按照一定的结构组织,使得绀件使于理解 编制:uejs研发群165862199 为什么? 导出一个清晰、组织冇序的组件,使得代码易于阅读和理解。同吋也便于标准化 ·按首字母排序 properties、aata、 computed、 watches和 ethods使得这些对象内的属性便于查找 合理组织,使得组件易于阅读。(DaMe; extends;pops,data和 computed; components;; watch和 ethods; lifecycle methods等)。 使用nawe属性。借助于 yue devtoo's可以让你更方使的测试。 合理的CSS结构,如BEM或YCSS-详情? 使用单文件vue文件格式来组件代码。 怎么做? 组件结构化 <teplate lana="htm"> <div class="Ranger_Wrapper </div> </temp late> script type="text/ Javascript> export default{/不要忘记了name属性awe: Rangeslider,/组合其它组件 extends:,/组件属性、变量pops: bar:,/按字母顺序 //变量 datao)0, computed:01使用其它组件 components: 方法 watch Meto 生命周期 函数 beforeCreateO, mounted,3</ script> style scoped> Ranger-Wrapper{/x…“//stgl> 个回到目录 组件事件命名 e-js提供的处理函数和表达式都是绑定在 ViewModel上的,组件的每一个事件都应该拔照一个好的命名规范来,这样可 以避免不少的开发问题,只体可见如下为什么。 为什么? 编制:uejs研发群165862199 开发者可以随意给事件命名,即使是原生事件的名字,这样会带来迷惑性 过于宽松的事件命名可能与DOM模板不兼容。 怎么做? 事件名也使用连字符命名 个事件的名字对应组件外的一组意义操作,如:以poad-sces、以poad-eror以及 dropzone- -upload-suce dropz0ne- upload-eor(如果需要前缀的话)。 事件命名应该以动词(如cint-api-a)或是形容词(如arie- upload-sces结尾。(出处) 避免ts中 arent ∨ejs支持组件嵌套,并且子组件可访问父组件的上下文。访问组件之外的上下文违反了基于模块开发的第一原则。因此你应 该尽量避免使用 this parent 为什么? 组件必须相互保持独立,∨Le组件也是。如果组件需要访问其父层的上下文就违反了该原则。 如果一个组件需要访问其父组件的上下文,那么该组件将不能在其它上下文中复用 怎么做? ·通过 props将值传递给子组件 通过pops传回调函数给子组件来达到调用父组件方法的目的。 通过在子组件触发事件来通知父组件。 谨慎使用ts.$efs ∨ejs支持通过ref属性来访间其它组件和HTML元素。并通过thve可以得到组件或HTML元素的上下义。在大多 数情况下,通过t$ve来访问其它组件的上下文是可以避兔的。在使用的的时候你需要注避免调用了不恰当的组件APl, 所以应该尽量避免使用 this frets 为什么? 组件必须是保持独立的,如果一个组件的AP不能够提供所需的功能,那么这个组件在设计、实现上是有问题的。 组件的属性和事件必须足够的给大多数的组件使用。 怎么做? 提供良好的组件APn 总是关注于组件本身的日的 编制:ue」js研发群165862199 拒绝定制代码。如果你在一个通用的组件内部编写特定需求的代码,那么代表这个组件的AP!不够通用,或者你可能 需要一个新的组件来应对该需求。 检查所有的pops是否有缺失的,如果有提一个se或是完善这个组件。 检查所们的事件。子组件向父组件通信一般是通过事件来实现的,但是大多数的开发者更多的关注于pops从忽视了 这点 Props向下传递,事件向上传递!。以此为目标升级你的组件,提供良好的APl和独立性 当遇到pps和 events难以实现的功能时,通过 thisfref来实现。 ·当需要操作DOM无法通过指令来做的时候可使用this:svef而不是√ Query、 documentgetElement document. queryEleent !--推荐,并未使用ths.efs--> <range: ax @current-value="currentvalue step="1“><apge> !--使用this.sefs的适用情况--> <modal ref="basicModal> <h4>Basic Moda(s/h4> <button class="primary"@click=frets. basicModal hide(">Close</button> </modal> <button @click=refs. basicModaL open (">Open modal</button> <!--Modal component --> <teplate> <div v-show= active> </di> </template> 编制:ue」js研发群165862199 <script> export default datao i return i active: false nethods open thisactive true hideo thisactive false I: 4/script !--如果可通过 emited来做则避免通过this.refs直接访问-- <template> ange:wax=“Wax min="min" ref="range step=1></range> <script> export default[ / methods:[ getRangecurrentvalueo)t return this frets. range. currentvalue 3: </script> 使用组件名作为样式作用域空间 ∨ejs的组件是自定义元素,这非常适合用来作为样式的根作用域空间。可以将组件名作为CSS类的命名空间 为什么? 给样式加上作用域空问可以避免组件样式影响外部的样式 保持模块名、日孓名、样式根作用域名一样,可以很好的将其关联起来,便于开发者理解 怎么做? 使用组件名作为样式命名的前级,可基于BEM或 OOCSS范式。同时给sty标签加上 scoped属性。加上 scoped属 性编译后会给组件的 class自动加上唯一的前缀从而避免样式的冲突。 style scope>/*推荐*/ MyExamnple{}M9 Example li t}. My Example_ item3/避免“/Mg- Example}/没有用 组件名或模块名限制作用域,不符合BEM规涫*/</ style> 提供组件AP文档 使用ejs组件的过程中会创建∨e组件实例,这个实例是通过自定义属性配置的。为了便于其他开发者使用该组件,对 于这些白定义属性即组件AP应该在 README. d文件中进行说明 编制:ue」js研发群165862199 为什么? 良好的文档可以让开发者比较容易的村组件有一个整体的认识,而不用去阅读组件的源码,也更方便开发者使用。 组件配置属性即组件的AP,对于组件的用户来说他们更感兴趣的是AP1而不是实现原理。 l式的文档会告诉廾发者组件API变更以及向后的兼容性情况。 README. nd是标准的我们应该首先阅读的文档文件。代码托管网站(比Hb、 Bitbucket、itab等)会默认在仓 所中展示该文件作为仓库的介绍。 怎么做? 在模块目录中添加 README.d文件 range-slider/ range-slidervue H-range-slider.less README. d 在 README文件中说明模块的功能以及使用场景。紂于νe组件来说,比较冇用的描述是组件的自定义属性即APl的 描述介绍。 Range slider 功能 range slider组件可通过拖动的方式来设置一个给定范围内的数值 该模块使用 nouislider来实现垮浏览器和touc厶功能的支持。 如何使用 ider>攴持如下的自定义属性 attribute tupe description Number 可拖动的最小值 ax Number 可拖动的最大值 values Number囗 optiona包含最大值和最小值的数组.如vaes=1O,20]y, Defaults to[ Opts.min, opts.max] Numberoptiona增加减小的数值单位,默认为1 编制:ue」js研发群165862199 attribute 地pe description 用户拖动开始按钮或者结束按钮吋的回调函数,函数接受( values, HANDLE)格式的参 Functionoptional数。如:0 le=t updatelnputs 3, component.updatelnputs =(val, HANDLE) I const value values[HANDLE];3. d Functionoptiona当用户停止拖动时触发的回调函数,函数接受(waes, HANDLE)格式的参数 如需要自定义 slider的样式可参考 noUislider文档 提供组件deMo 添加iκ dex.htw文件作为组件的dewo示例,并提供不同配置情况的效果,说明组件是如何使用的 为什么? dew∽o可以说明组件是独立可使用的 dewo可以让开发者预览组件的功能效果 dewo可以展示组件各种配置参数下的功能 ↑回到日录 对组件文件进行代码校验 代码校验可以保持代码的统一性以及追踪语法错误。、wε文件可以通过使用εsiwt-plgiηtw'插件来校验代码。你可以通过 we-c来开始你的项目,we-cli默认会开启代码校验功能。 为什么? 保证所有的开发者使用同样的编码规泡。 更早的感知到语法错误。 怎么做? 为了校验工具能够校验κwε文件,你需要将代码编写在<scrt标签中,并使件表达式简单化,因为校验工具无法理解行内 表达式,配置校验工具可以访问全局变量we和组件的 props ELInt ELInt需要通过 ESLint HTML插件来抽取组件中的代码n 通过 eslintrc文件来配置 ELint,这样IDE可以更好的理解校验配置项: 编制:uejs研发群165862199

...展开详情
试读 12P Vue.js 组件编码规范
立即下载
限时抽奖 低至0.43元/次
身份认证后 购VIP低至7折
一个资源只可评论一次,评论内容不能少于5个字
您会向同学/朋友/同事推荐我们的CSDN下载吗?
谢谢参与!您的真实评价是我们改进的动力~
上传资源赚钱or赚积分
最新推荐
Vue.js 组件编码规范 50积分/C币 立即下载
1/12
Vue.js 组件编码规范第1页
Vue.js 组件编码规范第2页
Vue.js 组件编码规范第3页

试读结束, 可继续读1页

50积分/C币 立即下载