1# File Organization 2 3## Directory Structure 4 5The 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. 6 7**Figure 1** Directory structure 8 9.png) 10 11**Figure 2** Directory structure for resource sharing<sup>5+</sup> 12 13 14 15Functions of the files are as follows: 16 17- .hml files describe the page layout. 18- .css files describe the page style. 19- .js files process the page logic and user interactions . 20 21Functions of the folders are as follows: 22 23- The **app.js** file manages global JavaScript logics and application lifecycle. For details, see [app.js](js-framework-js-file.md). 24- The **pages** directory stores all component pages. 25- The **common** directory stores public resource files, such as media resources, custom components, and .js files. 26- The **resources** directory stores resource configuration files, for example, for multi-resolution loading. For details, see [Resource Limitations and Access](js-framework-resource-restriction.md). 27- The **share** directory<sup>5+</sup> 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. 28 29>**NOTE** 30> 31>- The **i18n** and **resources** folders cannot be renamed. 32>- 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. 33>- The **share** directory does not support **i18n**. 34>- You should create the optional folders \(shown in the directory structure\) as needed after you create the project in DevEco Studio. 35 36## File Access Rules 37 38Application 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: 39 40- To reference a code file, use a relative path, for example, **../common/utils.js**. 41- To reference a resource file, use an absolute path, for example, **/common/xxx.png**. 42- Store code files and resource files in the **common** directory and access the files in a required fashion. 43- In a .css file, use the url\(\) function to create a URL, for example, **url\(/common/xxx.png\)**. 44 45>**NOTE** 46> 47>When code file A needs to reference code file B: 48> 49>- 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. 50>- 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. 51>- Use an absolute path if you want to dynamically change the resource file path through data binding in a .js file. 52 53## Media File Formats 54 55**Table 1** Supported image formats 56 57| Image Format | File Format | 58| ------------ | ----------- | 59| BMP | .bmp | 60| GIF | .gif | 61| JPEG | .jpg | 62| PNG | .png | 63| WebP | .webp | 64 65**Table 2** Supported video formats 66 67| Video Format | File Format | 68| ------------------------------- | ----------- | 69| H.264 AVC Baseline Profile (BP) | .3gp .mp4 | 70 71
