1# File Organization<a name="EN-US_TOPIC_0000001115974720"></a> 2 3- [Directory Structure](#en-us_topic_0000001058830797_section119431650182015) 4- [File Access Rules](#en-us_topic_0000001058830797_section6620355202117) 5- [Media File Formats](#en-us_topic_0000001058830797_section79731562617) 6 7## Directory Structure<a name="en-us_topic_0000001058830797_section119431650182015"></a> 8 9The following figure shows the typical directory structure of the JavaScript module \(**entry/src/main/js/module**\) for an application with feature abilities \(FA\) using JavaScript APIs. 10 11**Figure 1** Directory structure<a name="en-us_topic_0000001058830797_fig72881050193012"></a> 12 13 14.png) 15 16**Figure 2** Directory structure for resource sharing <sup>5+</sup><a name="en-us_topic_0000001058830797_fig103221917162010"></a> 17 18 19Functions of the files are as follows: 20 21- **.hml** files describe the page layout. 22- **.css** files describe the page style. 23- **.js** files process the interactions between pages and users. 24 25Functions of the folders are as follows: 26 27- The **app.js** file manages global JavaScript logics and application lifecycle. 28- The **pages** directory stores all component pages. 29- The **common** directory stores public resource files, such as media resources, custom components, and **.js** files. 30- The **resources** directory stores resource configuration files, covering global styles and multi-resolution loading. 31- The **share** directory is used to configure resources shared by multiple instances. For example, images and JSON files in this directory can be shared by **default1** and **default2** instances. 32 33> **NOTE:** 34>- The following reserved folders cannot be renamed: 35> - share 36> - resources 37>- If the same resource name and directory are used under the **share** directory and the instance \(**default**\) directory, the resource in the instance directory will be used when you reference the directory. 38 39## File Access Rules<a name="en-us_topic_0000001058830797_section6620355202117"></a> 40 41Application resources can be accessed via an absolute or relative path. In the JS UI framework, an absolute path starts with a slash \(/\), and a relative path starts with **./** or **../**. The rules are as follows: 42 43- To reference a code file, use a relative path, for example, **../common/utils.js**. 44- To reference a resource file, use an absolute path, for example, **/common/xxx.png**. 45- Store code files and resource files in the **common** directory and access the files in a required fashion. 46- In a **.css** file, use the **url\(\)** function to create a URL, for example, **url\(/common/xxx.png\)**. 47 48> **NOTE:** 49>When code file A needs to reference code file B: 50>- If code files A and B are in the same directory, you can use either a relative or absolute path in code file B to reference resource files. 51>- If code files A and B are in different directories, you must use an absolute path in code file B to reference resource files because the directory of code file B changes during Webpack packaging. 52>Use an absolute path if you want to dynamically change the resource file path through data binding in a **.js** file. 53 54## Media File Formats<a name="en-us_topic_0000001058830797_section79731562617"></a> 55 56**Table 1** Supported image formats 57 58<a name="en-us_topic_0000001058830797_table59058237819"></a> 59<table><thead align="left"><tr id="en-us_topic_0000001058830797_row890542312811"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="en-us_topic_0000001058830797_p1290662316815"><a name="en-us_topic_0000001058830797_p1290662316815"></a><a name="en-us_topic_0000001058830797_p1290662316815"></a>Image Format</p> 60</th> 61<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="en-us_topic_0000001058830797_p390618231583"><a name="en-us_topic_0000001058830797_p390618231583"></a><a name="en-us_topic_0000001058830797_p390618231583"></a>API Version</p> 62</th> 63<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="en-us_topic_0000001058830797_p12906623088"><a name="en-us_topic_0000001058830797_p12906623088"></a><a name="en-us_topic_0000001058830797_p12906623088"></a>File Format</p> 64</th> 65</tr> 66</thead> 67<tbody><tr id="en-us_topic_0000001058830797_row49065231788"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p10906112316811"><a name="en-us_topic_0000001058830797_p10906112316811"></a><a name="en-us_topic_0000001058830797_p10906112316811"></a>BMP</p> 68</td> 69<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p139066231811"><a name="en-us_topic_0000001058830797_p139066231811"></a><a name="en-us_topic_0000001058830797_p139066231811"></a>API Version 3+</p> 70</td> 71<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p590619232813"><a name="en-us_topic_0000001058830797_p590619232813"></a><a name="en-us_topic_0000001058830797_p590619232813"></a>.bmp</p> 72</td> 73</tr> 74<tr id="en-us_topic_0000001058830797_row1690615234816"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p6906122313816"><a name="en-us_topic_0000001058830797_p6906122313816"></a><a name="en-us_topic_0000001058830797_p6906122313816"></a>GIF</p> 75</td> 76<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p1906152319810"><a name="en-us_topic_0000001058830797_p1906152319810"></a><a name="en-us_topic_0000001058830797_p1906152319810"></a>API Version 3+</p> 77</td> 78<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p290662317818"><a name="en-us_topic_0000001058830797_p290662317818"></a><a name="en-us_topic_0000001058830797_p290662317818"></a>.gif</p> 79</td> 80</tr> 81<tr id="en-us_topic_0000001058830797_row5906823580"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p109061423685"><a name="en-us_topic_0000001058830797_p109061423685"></a><a name="en-us_topic_0000001058830797_p109061423685"></a>JPEG</p> 82</td> 83<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p89064231083"><a name="en-us_topic_0000001058830797_p89064231083"></a><a name="en-us_topic_0000001058830797_p89064231083"></a>API Version 3+</p> 84</td> 85<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p109061723488"><a name="en-us_topic_0000001058830797_p109061723488"></a><a name="en-us_topic_0000001058830797_p109061723488"></a>.jpg</p> 86</td> 87</tr> 88<tr id="en-us_topic_0000001058830797_row310155772112"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p17101195717217"><a name="en-us_topic_0000001058830797_p17101195717217"></a><a name="en-us_topic_0000001058830797_p17101195717217"></a>PNG</p> 89</td> 90<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p10102195772114"><a name="en-us_topic_0000001058830797_p10102195772114"></a><a name="en-us_topic_0000001058830797_p10102195772114"></a>API Version 3+</p> 91</td> 92<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p161021157162120"><a name="en-us_topic_0000001058830797_p161021157162120"></a><a name="en-us_topic_0000001058830797_p161021157162120"></a>.png</p> 93</td> 94</tr> 95<tr id="en-us_topic_0000001058830797_row942813247228"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="en-us_topic_0000001058830797_p6428152432218"><a name="en-us_topic_0000001058830797_p6428152432218"></a><a name="en-us_topic_0000001058830797_p6428152432218"></a>WebP</p> 96</td> 97<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="en-us_topic_0000001058830797_p342820248225"><a name="en-us_topic_0000001058830797_p342820248225"></a><a name="en-us_topic_0000001058830797_p342820248225"></a>API Version 3+</p> 98</td> 99<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="en-us_topic_0000001058830797_p04281246226"><a name="en-us_topic_0000001058830797_p04281246226"></a><a name="en-us_topic_0000001058830797_p04281246226"></a>.webp</p> 100</td> 101</tr> 102</tbody> 103</table> 104 105
