# camera-manage-font-web

**Repository Path**: camera-manage-font/camera-manage-font-web

## Basic Information

- **Project Name**: camera-manage-font-web
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 4
- **Created**: 2019-12-17
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 摄像web

## 代码规范

### 命名
* 文件夹命名-**业务**
  1. 组织结构：依据导航菜单主次结构组织文件夹结构，以业务名命名文件夹
  2. 名称选择：使用通用单词，抽象为实体，避免生疏单词，特殊业务除外
  3. 名称结构：尽量使用单个单词，若单个词无法表明业务含义，可以使用单词组合，多个单词用中划线连接，全部小写
* 文件夹命名-**组件**
  1. 使用组件名命名文件夹名称
  2. 使用帕斯卡命名法
* 文件命名
  1. 业务类文件：使用帕斯卡命名法
  2. 业务样式文件：名称和业务文件名保持一致，采用小写
  3. 组件文件：使用帕斯卡命名法
  4. 配置文件：使用小写单词，多个词用中划线链接，如`api-config.js`
* 变量命名
  1. 单词选择：要能表明当前变量的使用意义，***避免使用缩写***，通用缩写除外
  2. 常量：统一大写，多个单词用下划线连接，如：`GET_USER_REQUEST`
  3. 变量：使用驼峰命名法，尽量保持简洁，如：`currentTab`
    * 普通变量，表明含义
    * 布尔值变量：使用`is`开头，如`isVisible, isNew, isDisabled`等
  4. 函数名：使用驼峰命名法，名称要能清楚表达该函数的**行为**
    * 接口函数：如列表：`list()`，详情`detail()`，新增`add()`，编辑`edit() || update()`，删除`delete(id)`等，类似函数，需要包装在业务名称下，如:
      ```javascript
      customer: {
      	list(){},
      	detail(id){},
      	add(){},
      	edit(){},
      	delete(){},
      }
      ```
    * 请求数据函数：统一使用`get`开头，如:`getCustomers(), getCustomer(id), getCustomerAutos(customerId)`
    * 事件处理函数：统一使用`handle`开头，如：`handleStatusChange(status), handleGenderChange(gender)`
    * 数据计算处理函数：使用`calculate`开头，一般返回一个计算后的数值，`calculateTotalCost()`，其余场景，根据实际情况确定
    * 数据组装函数：如处理一个map中的值，最后返回一个数据结构，可以使用`assemble`开头
    * dom渲染函数：统一使用`render`开头，如：`renderHeader()`
    * 布尔值判断函数：统一使用`is`开头，如：`isDisabled(value), isEmpty(value)`

### 类文件
1. 代码顺序

  ```javascript
  // redux,react-redux
  import { bindActionCreators } from 'redux';
  import { connect } from 'react-redux';
  
  // react及antd,项目骨架
  import React from 'react';
  import { Button, Tabs } from 'antd';
  
  // 第三方库
  import { Link } from 'react-router-dom';
  
  // 自定义组件
  import GuideViewModal from '../../components/GuideViewModal';
  
  // 业务组件
  import Table from './Table';
  
  // redux actions
  import {
    getOrderDetail,
    getDealInfo,
  
    setApplicationDownloadInfo,
    setDealDownloadInfo,
    setInsuranceListMap,
  
    submitCarInfo,
    submitFinancingInfo,
    submitInsuranceInfo,
    submitProfitInfo,
  } from youche;
  
  // 引用样式
  require('./index.less');
  
  // 声明变量
  const TabPane = Tabs.TabPane;
  
  /**n
  * 类说明注释
  * @desc 如：用户列表
  */
  class Index extends React.Component {
  	// 构造器函数
  	constructor(props){
  		super(props);
  
  		this.state = {
  			isVisible: false,
  		};
  
  		this.handleSubmit = this.handleSubmit.bind(this);
  		// 函数太多，可以使用数组绑定
  		[
  			'handleSubmit',
  			'handleNameChange',
  		].map(method => this[method] = this[method].bind(this));
  	}
  
  	// react 生命周期函数
  
  	componentDidMount(){
  		// do something
  	}
  
  	componentWillUnmount(){
  		// do something
  	}
  
  	/**
  	* 事件处理函数
  	* 依据从dom结构中出现的顺序从上往下排列，bind this时同下面定义的顺序保持一致
  	*/
  	handleCompanyChange(company){
  		this.setState({company});
  	}
  
  	handleSubmit(){
  		// submit form
  	}
  
  	// 其余函数
    
  	calculateTotalCost(value){
  		let total = 0;
  		// do calculate
  		return total;
  	}
  
  	// dom渲染函数
  
  	renderHeader(){
  		return (
  			<div>
  				<h3>Header</h3>
  			</div>
  		);
  	}
  
    // DOM结构块之间使用空行分割，以提高可读性
  	render(){
        	// 使用this.state，或this.props请在这里统一定义
          const { isFetchingDetail, detail } = this.props;
          const { isVisible } = this.state;
  
        	/**
        	* 组件属性名顺序
        	* 1. 名称
        	* 2. 样式
        	* 3. 数据
        	* 4. 事件函数
        	*/
  		return (
  			<div>
  				{this.renderHeader(detail)}
  
  				<Modal
            title="添加用户"
            className="modal"
  	        visilbe={isVisible}
            user={detail}
            footer={null}
            onOk={this.handleSubmit}
          >
  					<p>modal content</p>
  				</Modal>
  			</div>
  		);
  	}
  
  	// redux react 映射函数
  	function mapStateToProps(state) {
  		return {user: state.user.detail};
  	}
  
  	function mapDispatchToProps(dispatch){
  		return {
  			actions: bindActionCreators({
  				getUsers(),
  				getUser(),
  				editUser(),
  				deleteUser(),
  			}, dispatch);
  		};
  	}
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(Detail)；
  // 末尾保持一个空行
  ```
### 组件文件

1. 目录结构示例

   ```shell
   Loading 		// 组件名
   ├── Loading.js  // 组件主体
   ├── index.js    // 组件入口文件
   └── styles.js   // 组件样式文件
   ```

2. index.js

   ```javascript
   import Loading from './Loading';

   export default Loading;
   ```

3. Loading.js

   ```javascript
   import React, { PropTypes } from 'react';
   import { Platform, View } from 'react-native';
   import Spinner from 'react-native-spinkit';

   import colors from '../../styles/colors'; // todo margite to styles
   import styles, { colors } from './styles';

   function Loading(props) {
     const { type, isLoading } = props;

     if (isLoading) {
       return (
         <View style={styles.loadingOverlay}>
           <Spinner
   				  style={styles.spinner}
             color={colors.yellow}
             isVisible={isLoading}
             type={type}
           />
         </View>
       );
     }

     if (Platform.OS === 'ios') {
       return null;
     }

     return <View style={{ width: 0, height: 0 }} />;
   }

   Loading.propTypes = {
     type: PropTypes.string.isRequired,
     isLoading: PropTypes.bool.isRequired,
   };

   Loading.defaultProps = {
     type: 'FadingCircleAlt',
     isLoading: false,
   };

   export default Loading;
   ```

4. styles.js

   ```javascript
   import { StyleSheet } from 'react-native';

   export default StyleSheet.create({
     loadingOverlay: {
       position: 'absolute',
       top: 0,
       right: 0,
       bottom: 0,
       left: 0,
       zIndex: 999,
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },

     spinner: {
       flex: 0,
     },
   });
   ```



## 项目说明