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

    项目结构目录:

    Html页面

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript" data-main="/Jquery/require/app.js" src="/Jquery/require/require.js"></script>
    
        <div>
            春江潮水连海平,海上明月共潮生。
            滟滟随波千万里,何处春江无月明!
            江流宛转绕芳甸,月照花林皆似霰;
            空里流霜不觉飞,汀上白沙看不见。
            江天一色无纤尘,皎皎空中孤月轮。
            江畔何人初见月?江月何年初照人?
            人生代代无穷已,江月年年只相似。
        </div>
        <div id="best">
    
        </div>
    
    </body>
    </html>

    参数配置:

    requireJS 常用的方法与命令也就两个,因此requireJS使用起来非常简单

    • require
    • define

    define是用于定义模块,而require是用于载入模块以及载入配置文件。

    require.config() 是用于配置参数的核心方法,它接收一个有固定格式与属性的对象作为参数,这个对象便是我们的配置对象。
    在配置对象中 baseUrl 定义了基准目录,它会与 paths中模块的地址自动进行拼接,构成该模块的实际地址,并且当配置参数是通过script标签嵌入到html文件中时,baseUrl默认的指向路径就是该html文件所处的地址。
    paths 属性的值也是一个对象,该对象保存的就是模块key/value值。其中key便是模块的名称与ID,一般使用文件名来命名,而value则是模块的地址,在requireJS中,当模块是一个JS文件时,是可以省略 .js 的扩展名,比如 “index.js” 就可以直接写成 “index” 而当定义的模块不需要与 baseUrl 的值进行拼接时,可以通过 "/" 与 http:// 以及 .js 的形式来绕过 baseUrl的设定。

    app.js

    require.config({
        // baseUrl: '/jquery/bs/'       //另一个同名文件夹
    
        baseUrl: '/jquery/require/',
    
       paths: {
           'jquery': 'http://cdn.webfont.youziku.com/wwwroot/js/jquery-1.10.2.min'
       }
    });
    //确定引用,没有这句代码,没法使用jquery
    require(["jquery"]); 

    require 提供的 data-main 属性,该属性是直接写在引入require.js的script标签上,在require.js 加载完毕时,会自动去加载配置文件 app.js。

    require(['BjTest'], function (a) {
        var name = "小明";
        alert(a.addName(name));
    });
    require(['BjTest', 'TjTest'], function (a, b) {
        var name = "小明";
        alert(a.addName(name));
        alert(b.Apple(name));
    });

    通过 data-main 去加载入口文件,便会使配置对象中的 baseUrl 属性默认指向地址改为 app.js 所在的位置,相比之下我更加推荐这种方式,因为它更可能的方便快捷。

    当我们的项目足够的庞大时,我也会推荐将入口文件作为一个普通的模块,然后在这个模块中,根据业务的不同再去加载不同的配置文件。

    BjTest.js

    define({
        addName: function (n) {
         
            $("#best").text("人生得意须尽欢");
            return "今天的测试用户名字是:" + n;
        },
    
        fang: function (a, b, c) {
            return "京津新城:" + a + "小区,高铁站:" + b + "到北京:" + c + "分钟!";
        }
    });

    详细内容请点击

  • 相关阅读:
    转 linux下ClamAV使用
    oraagent.bin High Memory Usage as Dependent Listener was Removed/Renamed
    转 zabbix 优化方法 以及 后台数据库查询方法 两则
    转 mysql awr 报告
    转 zabbix 优化方法 以及数据库查询方法 两则
    转 检查rac服务时,发现ons服务offline
    转:HR schema
    Spring MVC初始化
    Spring MVC入门的实例
    Spring MVC 设计概述
  • 原文地址:https://www.cnblogs.com/xiaoyaodijun/p/8665169.html
Copyright © 2011-2022 走看看