Home > Article > Web Front-end > requireJS usage guide_others

requireJS usage guide_others

WBOYOriginal: 2016-05-16 15:03:361284browse

Most of the projects use modular development. requireJS is a model of AMD module development, so it is necessary to learn it. By using requireJS to write demos step by step, you can learn the overall development process of requireJS and some of your own feelings about using requireJS.

AMD: A module-based mechanism for asynchronously loading JavaScript code. It recommends developers to encapsulate JavaScript code into modules. The dependence on global objects becomes a dependency on other modules. There is no need to declare a lot. global variables. Resolve individual module dependencies through lazy and on-demand loading. The benefits of modularized JavaScript code are obvious. The loose coupling of each functional component can greatly improve the reusability and maintainability of the code. This non-blocking concurrent fast loading of JavaScript code enables other UI elements on the web page that do not rely on JavaScript code, such as images, CSS and other DOM nodes to be loaded first. The web page loads faster and users get better results. Good experience.

1. Download requireJS

Before modular development with requireJS, we need to prepare some things. Then you must download the require.js file, hahaha, because it is developed based on it.

2. Create an HTML file

After creating an HTML file, you must use the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag when importing requireJS. There is no doubt about this. Then there is a data-main attribute in this tag, which functions as an entrance and exit, that is, after loading requireJS, enter from the data-main attribute.

For example:

 <!DOCTYPE html>
  <head>
    <title>require</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
  </head>
  <body>
    <!--这是requireJS，data-main是作为入口模块，在这里就是js/main-->
    <script data-main="js/main" src="js/require.js"></script>
  </body>
</html>

When I load js/require.js, then execute the js file of js/main. main is also a js file. We can omit its .js suffix and requireJS will add it.

3. data-main

When the program executes e4e68973213230bde45ab37f3eb5d0cc2cacc6d41bbb37262a98f745aa00fbf0, enter main.js through data-main and execute main.js . So what is in main.js?

Please see the code:

/*
  require.config执行baseUrl为'js'，
  baseUrl指的模块文件的根目录，可以是绝对路径或相对路径
*/
require.config({
  baseUrl: 'js',
  paths: {
    jquery: 'jquery-1.8.2.min'
  }
});
/*
  这里通过require，来引入monkey.js，
  然后通过后面的匿名函数给他们分配参数，如这里的
  monkey-->mk
*/
require(['monkey'],function(mk) {
  mk.init();  
});

From the above code, you can see that main.js contains two modules: require.config and require.

The function of require.config is to configure some parameters of requireJS and then reference them publicly.

For example, the above baseUrl, its function is to use it as the base path and search for files under this path. I put all .js files in the js folder. Therefore, after configuring this attribute, future files will search for content under the js path.

As follows:

require(['monkey'], function(monkey){
  monkey.init();
});

When it refers to monkey, it refers to monkey, not js/monkey.

What is the role of paths? Just replace some commonly used js files with common names. For example, jquery-1.8.2.min.js, we cannot write this every time we call it, so for convenience, we will replace jquery-1.8.2.min.js with jquery. From now on we will You can use jquery directly, which is fast and convenient.

Okay, require.config looks familiar. In a word, its function is to configure requireJS.

What about require?

The function of require is execution. For example, here I only need monkey.js to execute, so I imported monkey, and then used the mk parameter to obtain the return value after monkey execution. If there is a return value, then we can handle mk accordingly.

Hey, what’s in the monkey?

Let’s see:

/*
  define的参数为匿名函数，该匿名函数返回一个对象
*/
define(['jquery'],function($){
  var init = function(){
    console.log($.browser);
  };
  return {
    init: init
  };
});

define! Its function is to define a js module for use by other modules or require. The method of referencing other js modules is similar to require. It imports the required js files, and then the parameters correspond one to one. What everyone needs to pay attention to is that the methods or variables defined in define cannot be accessed by other modules. Therefore, if you want other modules to have access, just throw the corresponding method out (return) object or function. . Here, what I return is an object that provides init for other modules to call.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JS component Bootstrap implements pop-up box effect code_javascript skillsNext article：JS component Bootstrap implements pop-up box effect code_javascript skills

See more

requireJS usage guide_others

Related articles