🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# action.js中常用方法简介 说明:data.js为json格式易于开发人员理解,data.js为dom结构以及数据结构的描述文件。 #### 1、meta结构简述 1、默认从name为root开始,通常是header、content、footer的结构 ![](//upload-images.jianshu.io/upload_images/17067702-9eb171c18eb8c382.png?imageMogr2/auto-orient/strip|imageView2/2/w/926/format/webp) image.png 如图实例:name为名称标识符,component为其引用组件名称(根据组件来定义dom展示元素),className为元素的class名儿(根据它在less.js文件进行样式优化),children字面意思理解为子集元素。 ###### 注:root的className尽量与app名称保持一直或自行定义规则,便于区分。因为项目在webpack进行打包的时候会将所有的less文件打包到一起,启动项目时一次加载提升性能;如果app名称混淆会给后续优化页面展示以及代码维护产生大量的额外工作量。 2、关于function、大致有两种写法如下图: ![](//upload-images.jianshu.io/upload_images/17067702-fc351ed11fee9cff.png?imageMogr2/auto-orient/strip|imageView2/2/w/1049/format/webp) image.png 第一种根据$符来定义方法(推荐)逻辑在action.js中编写; 第二种直接根据参数来用sf方法更新data(不推荐,IE兼容性不好(箭头函数它不认识),如果项目将来支持IE浏览器只能返工改写成第一种形式); 3、关于组件的选取以及组件的属性用法建议到ant.design官网自行查询,选中左侧组件可以查看演示效果,拉到最底部有属性API供读者查询 链接:[https://ant.design/docs/react/introduce-cn](https://links.jianshu.com/go?to=https%3A%2F%2Fant.design%2Fdocs%2Freact%2Fintroduce-cn)