Shulou(Shulou.com)06/03 Report--

This article mainly introduces "what is the core development framework of JS". In daily operation, I believe many people have doubts about what the core development framework of JS is. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts of "what is the core development framework of JS?" Next, please follow the editor to study!

Brief introduction

JS application development framework provides a cross-platform web-like application development framework. Through Toolkit, the HML, CSS and JS files written by developers are compiled and packaged into JS Bundle, parsed and run JS Bundle, generated native UI View component tree and rendered. By supporting three-party developers to use declarative API for application development, data-driven view changes can avoid a large number of view operations, greatly reduce the difficulty of application development, and enhance the developer development experience.

The composition of the JS application framework module is shown below:

Catalogue

The JS application development framework source code is under / foundation/ace, and the directory structure is shown in the following figure:

/ foundation/ace ├── frameworks # framework code │ └── lite │ ├── examples # sample code directory │ ├── include # external exposure file storage directory │ ├── packages # framework JS implementation │ ├── src # source code storage directory │ ├── targets # configuration of each target device File storage directory │ └── tools # tool code storage directory ├── interfaces # external interface storage directory │ └── innerkits # header files exposed to internal subsystems │ └── builtin # JS application framework exposed JS tripartite module API interface storage directory

Constraint

Language version:

Version 11 or above of Clippers

JavaScript ES5.1

The framework running memory is usually divided into the following components:

JS engine runtime memory: adjustable, depending on the application complexity of specific devices, 64K~512K is usually recommended

Native memory of the framework itself: on 100K memory devices, it is recommended to pre-allocate a memory pool shared with native UI for native memory management

The framework has different specifications for different chip platforms and underlying OS capabilities:

Cortex-M RAM/ROM

JS engine memory pool: recommended greater than 48K

RAM: it is recommended to share a memory pool with native UI, greater than 80K

ROM: > 300K (including JS application framework and strongly related subsystems such as native UI and JS engine)

Cortex-A RAM/ROM

JS engine memory pool: recommended greater than 128K

RAM: recommended greater than 512K

ROM: > 2m (including JS application framework and strongly related subsystems such as native UI and JS engine)

Use targets

The implementation of JS application framework mainly consists of two parts:

Native part: written with C++, which is the main implementation of the framework.

JavaScript part: provides the runtime support of JS application framework for user JS files, and supports the interaction between JS runtime and native framework by exposing some global methods and objects to the engine.

The JS application framework uses some feature macros to customize the functional codes that participate in compilation on different platforms. These feature macros are defined in the header file under the foundation/ace/frameworks/lite/targets directory. The directory structure is as follows:

/ foundation/ace/frameworks/lite/targets ├── default/ │ └── acelite_config.h ├── linux/ # linux environment configuration file directory │ └── acelite_config.h ├── liteos_a/ # LiteOS A core environment configuration file directory │ └── acelite_config.h ├── liteos_m/ # LiteOS M core environment configuration file directory │ └── acelite_config.h ├ ── platform_adapter.cpp ├── platform_adapter.h └── simulator/ # Simulator environment configuration file directory └── win/ └── acelite_config.h*

When compiling different platform targets, you need to use the acelite_ config.hheader file in the corresponding platform directory, which can be done by configuring the compile-time search path. Take ninja and cmake build tools as examples:

Ninja:

If (ohos_kernel_type== "liteos_a" | | ohos_kernel_type== "liteos_m" | | ohos_kernel_type== "liteos_riscv") {/ / choose a different header file search path through the target kernel platform include_dirs + = ["targets/liteos-a"]} else if (ohos_kernel_type== "linux") {include_dirs + = ["targets/linux"]}

Cmake:

. Set (ACE_LITE_CONFIG_PATH "${CMAKE_CURRENT_SOURCE_DIR} / targets/simulator/win") # Simulator compiles the search path using targets/simulator/win set (JSFWK_INCLUDE_PATH "${CMAKE_CURRENT_SOURCE_DIR} / include") set (JSFWK_SOURCE_PATH "${CMAKE_CURRENT_SOURCE_DIR} / src/core") set (UIKIT_PATH "${CMAKE_CURRENT_SOURCE_DIR} /.. / ui") set (THIRTY_ PATH "${CMAKE_CURRENT_SOURCE_DIR} /.. / third_party") set (JSFWK_SIMULATOR_PATH "${CMAKE_CURRENT_SOURCE_DIR} /.. / tools/simulator") set (JS_API_PATH "${CMAKE_CURRENT_SOURCE_DIR} /.. / api/emui_band/MoltenCore/application/framework/ace/api") set (JSFWK_SIMULATOR_PATH "${CMAKE_CURRENT_SOURCE_DIR} /.. / tools/") Simulator ") set (AAFWK_PATH" ${CMAKE_CURRENT_SOURCE_DIR} /.. / aafwk ") # header files include_directories (${ACE_LITE_CONFIG_PATH} ${JSFWK_INCLUDE_PATH} / async ${JSFWK_INCLUDE_PATH} / base ${JSFWK_INCLUDE_PATH} / context ${JSFWK_INCLUDE_PATH} / jsi ${JSFWK_SOURCE_PATH}.

Acelite_config.h is mainly used for the characteristic macro switch of the corresponding platform, and can also be used to define some shielding platform differences. If different platforms use different file systems, some fixed directory pathnames may be different. These different constants can be defined here, as follows:

Liteos-a/acelite_config.h

# define JS_FRAMEWORK_PATH "/ / system/ace/bin/"

Simulator/win/acelite_config.h

# define JS_FRAMEWORK_PATH "..\ jsfwk\\ packages\\ runtime-core\\ build"

Use runtime-core

In order to implement the one-way data binding mechanism, the JS application framework implements a simple data hijacking framework called runtime-core using JavaScript language. The directory structure is as follows:

/ foundation/ace/frameworks/lite/packages └── runtime-core ├── .babelrc # babel configuration file ├── .editorconfig # IDE configuration file ├── .eslintignore # ESLint configuration file, you can set the directory or file ├── .eslintrc.js # ESLint configuration file that is not scanned by ESLint You can configure scanning rules ├── .gitignore ├── package.json # NPM package management file ├── package-lock.json # NPM dependent version locking file ├── .prettierrc # code formatting rule configuration file ├── scripts # compilation script storage directory │ ├── build.js # compilation script │ └── configs .js # Rollup configuration file ├──. Size-snapshot.json └── src # Source Code ├── core # ViewModel Core implementation Directory │ └── index.js ├── index.js ├── observer # data hijacking part of the code implements the directory │ ├── index.js │ ├── observer .js │ ├── subject.js │ └── utils.js ├── profiler # profiler directory │ └── index.js └── _ _ test__ # test case directory └── index.test.js

The supported NPM commands are:

Npm run build

The JS engine integrated into the JS application framework only supports ES5.1 syntax, and the runtime-core source code is written using ES6 syntax. Therefore, we choose to use rollup as a packaging tool, together with babel implementation to degrade the syntax. Execute npm run build on the command line, and output the packaging result in the build directory, as shown below:

Framework code used by build/ ├── framework-dev.js / / development environment (uncompressed obfuscation) ├── framework-dev.min.js / / framework code used by development environment (compressed obfuscation) ├── framework.js / / framework code used in production environment (uncompressed obfuscation) └── framework.min.js / / framework code used in production environment (compressed obfuscation)

Npm run test

Runtime-core uses jest for unit testing, which can be triggered by executing npm run test on the command line.

Involving warehouse

Ace_lite_jsfwk

Ace_interfaces_innerkits_builtin

At this point, the study on "what is the core development framework of JS" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.