zoukankan      html  css  js  c++  java
  • RequireJS的简单应用

    一、RequireJS的主要作用与优点

    主要作用:js模块化、编写复用js代码

    优点:

    1、防止命名冲突

    2、声明不同js文件之间的依赖

    3、代码模块化

    (1)一个文件一个模块:每个js文件应该只定义一个模块

    (2)define()中注意相对模块名

    二、常用方法

    1、require.config  为模块指定别名

    2、require           引入写好的模块

    3、define            编写模块

    三、使用方法+一个小例子

    模块js写在html外面,由一个js进行模块加载

    例如我的工程目录结构

    |  src

    |   |——  js

                 |—— main.js

                 |—— test.js

    |  vender

    |   |——  js

                 |—— require.min.js

                 |—— jquery.min.js

    |

    |  test.html

    一个 Demo test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>一个Require Test</title>
        <style>
    
            #myTest{
                height: 50px;;
                width: 50px;
                background-color: #28a4c9;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="myTest">Test</div>
        <script src="vender/js/require.min.js" data-main="src/js/main"></script>
    </body>
    </html>

    |—— main.js

    require.config({
        paths:{
            jquery: '../../vender/js/jquery.min'
        }
    });
    require(['jquery','test'],function($,test){
        test.fun1();
        $('#myTest').click(function(){
            console.log('myTest click2');
        });
    });

    |—— test.js

    define(['jquery'],function($){
        return {
            fun1:function(){
                $('#myTest').click(function(){
                    console.log('myTest click');
                });
            }
        }
    })
  • 相关阅读:
    _mysql.c(42) : fatal error C1083: Cannot open include file: 'config-win.h':问题的解决
    pycharm 插件的升级
    机器学习
    Python三大神器
    印记中文
    Emacs, Nano, or Vim 编辑器“三剑客”
    码云-中国的github
    代码质量管控的四个阶段
    <<创新之路>> 纪录片观后感
    API (Application Programming Interface) 文档大全
  • 原文地址:https://www.cnblogs.com/vanstrict/p/5715589.html
Copyright © 2011-2022 走看看