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>- Reserved folders \(**i18n** and **resources**\) cannot be renamed. 31>- 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. 32>- The **share** directory does not support **i18n**. 33>- You should create the optional folders \(shown in the directory structure\) as needed after you create the project in DevEco Studio. 34 35## File Access Rules 36 37Application 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: 38 39- To reference a code file, use a relative path, for example, **../common/utils.js**. 40- To reference a resource file, use an absolute path, for example, **/common/xxx.png**. 41- Store code files and resource files in the common directory and access the files in a required fashion. 42- In a .css file, use the url\(\) function to create a URL, for example, **url\(/common/xxx.png\)**. 43 44> **NOTE** 45> 46>When code file A needs to reference code file B: 47> 48>- 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. 49>- 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. 50>- Use an absolute path if you want to dynamically change the resource file path through data binding in a .js file. 51 52## Media File Formats 53 54Table 1 Supported image formats 55 56| Image Format | File Format | 57| ------------ | ----------- | 58| BMP | .bmp | 59| GIF | .gif | 60| JPEG | .jpg | 61| PNG | .png | 62| WebP | .webp | 63 64Table 2 Supported video formats 65 66| Video Format | File Format | 67| ------------------------------- | ----------- | 68| H.264 AVC Baseline Profile (BP) | .3gp .mp4 | 69 70
