On the issue of require modular loading, the great gods asked for help.

  node.js, question

Modularization is the trend of front-end development, but it has encountered such problems.

<script type="text/javascript" src="js/require.js"></script>
 //I introduced require in the head section of the page
 //There are also four JS files respectively
 <script type="text/javascript" src="js/jquery-1.12.1.min.js"></script>
 <script type="text/javascript" src="js/unslider.js"></script>
 <script type="text/javascript" src="js/common.js"></script>
 <script type="text/javascript" src="js/index.js"></script>
 //dependency jq is at the top level, followed by unslider.js, common.js, index.js

Unslider is a carousel plug-in of JQ, common is some common methods, index is some JS used on the front page.

//common.js file method is as follows
 /* = = = Back to Top start===*/
 $('#footer span').click(function(){
 $('body').animate({
 scrollTop:0
 },500)
 });
 
 /* = = = Back to Top end===*/
 
 /* = = = Next, Previous Count = = */
 //window.calculateNumber={};
 
 function CalculateNumber(btn,bumberbox,target){
 //Parameter btn parameter is the button on the previous or next button
 //parameter bumberbox is a numeric tag that needs to be modified.
 //Parameter target is a total of several pictures
 this.btn=btn;
 this.bumberbox=bumberbox;
 this.target=target;
 };
 CalculateNumber.prototype={
 Calculate:function(){
 var noteNum=this.bumberbox.text();
 if(this.btn.hasClass('next'))
 bracket
 if(parseInt(noteNum)<this.target)
 bracket
 this.bumberbox.text(function(){
 Return parseInt(noteNum) plus 1
 });
 bracket
 else{
 this.bumberbox.text(1);
 bracket
 bracket
 else
 bracket
 if(parseInt(noteNum)<=1)
 bracket
 this.bumberbox.text(this.target);
 bracket
 else{
 this.bumberbox.text(function(){
 return parseInt(noteNum)-1
 });
 
 bracket
 bracket
 bracket
 };
 /* = = = Next, Previous Count = = = */
//index.js is as follows
 (function(){
 //Bind the following methods (there are some similar ones, so I won't post the code)
 $('#product .product-content li').hover(function(){
 $(this).find('.orange').addClass('hide').siblings().removeClass('hide');
 },function(){
 $(this).find('.black-warp').addClass('hide').siblings().removeClass('hide');
 });
 
 $('#joinus .jionus-content>div').hover(function(){
 $(this).addClass('cur');
 },function(){
 $(this).removeClass('cur');
 });
 })(jQuery);

So what should I do when doing modular loading with require? I wrote the following code on the page again

require.config({
 baseUrl:"./js",
 paths:{
 "jquery":"jquery-1.12.1.min",
 "unslider":"unslider",
 "common":"common"
 bracket
 });
 require(['jquery','unslider','common'],function(){
 Alert ("load complete")
 })
 //A dialog box will pop up, but the effect of the page will not come out at all.
requirejs(['jquery', 'canvas', 'app/sub'],
 function   ($,        canvas,   sub) {
 //jQuery, canvas and the app/sub module are all
 //loaded and can be used here now.
 });
 //This is a piece of official code of require. The files conmmon.js and index.js only provide calls and do not return them.

What should I do under such circumstances? After reading some regulations about conmmonjs and requeire officials did not understand them very well. Is it true that JS cannot be loaded modularly when I write like this? Do I have to return a value to the outside world?
If you don’t return to the outside, how should such codes be loaded modularly? after looking at the method of module interdependence defined by require.js, you don’t quite understand what is going on.
I, Xiao Bai, hope there is a great god to answer.

Since you know the concept of the return value of require, you should understand about it. Config file of your require has less declaration of dependency.

require.config({
 baseUrl:"./js",
 paths:{
 "jquery":"jquery-1.12.1.min",
 "unslider":"unslider",
 "common":"common"
 },
 shim:{
 "unslider": {
 deps: ["jquery"],
 exports:'unslider'
 },
 "common": {
 deps: ["jquery"],
 exports:'common'
 bracket
 bracket
 });

You can try this first.