2. 程式人生 > >我的第一個requirejs例子，簡單的demo

我的第一個requirejs例子，簡單的demo

阿新 • • 發佈：2019-01-12

看介紹是很簡單的，但是我做這個簡單的demo，過程還是很曲折的。引進jquery，老是沒引到，後來加上shim好了，再後來，去掉shim也是好的，我崩潰了。。。
二話不說上程式碼，給初學者看看。因為我在網上沒找到一個完整的程式碼。要是有一個簡單的demo就好了。我是看文件一步一步來的。

1、目錄結構，

WebRoot
           js
                 config.js
                 require.js
                 jquery-3.0.0.min.js
                 a.js
           MyHtml.html

2.檔案，
MyHtml.html

<!DOCTYPE html>
<html>
<head>
<title>jQuery+RequireJS Sample Page</title>
</head>
<body>
    <h1>jQuery+RequireJS Test Page</h1>
    <p>Tests loading of jquery plugins with require.</p>
    <script src
 
="js/require.js" data-main="js/a.js"></script>
</body>
</html>

a.js


require(['config'],function(config){
    require(['jquery'], function($) {
        debugger;
        alert($("body").css("background"));
    }); 
});

config.js

require.config({
    baseUrl: 'js',
    paths: {
        // the left side is the module ID,
 

        // the right side is the path to
        // the jQuery file, relative to baseUrl.
        // Also, the path should NOT include
        // the '.js' file extension. This example
        // is using jQuery 1.9.0 located at
        // js/lib/jquery-1.9.0.js, relative to
        // the HTML page.
        'jquery': 'jquery-3.0.0.min'
    }/*,
    shim: {
        'jquery': {
            exports: '$'
        }
    }*/
});

簡單說一下，
html 裡面的 data-main=”js/a.js 指的是入口檔案，就是require第一個要引進的檔案。

a.js 先引進一些配置檔案，然後再引進 jquery。當初不加shim是訪問不了jquery的，後面什麼也沒改就好了，我也搞不懂，而且我確定不是快取問題。
shim 指的是 載入一些不是 define 定義的js，如

test.js

define(function(){
return {}
);
或者
define([‘jquery’],function($){
return {}
);

然後可以這樣使用
require([‘test’],function(){
//do something
);

相關推薦

我的第一個requirejs例子，簡單的demo

看介紹是很簡單的，但是我做這個簡單的demo，過程還是很曲折的。引進jquery，老是沒引到，後來加上shim好了，再後來，去掉shim也是好的，我崩潰了。。。 二話不說上程式碼，給初學者看看。因為我在網上沒找到一個完整的程式碼。要是有一個簡單的demo就好了

USTCOJ程式碼檢視功能的實現（我的第一個Chrome外掛，UstcOjSourceView）

因工作需要，會不時的在USTCOJ上產看程式原始碼。檢視原始碼的流程通常是這樣的： 1，根據指定題號、賬號，或許相關的RunID。 3，在如下所示的輸入框中輸入RunID號，點選View按鈕檢視程式碼。 （圖片一） 採用這種方式檢視原始碼是相當痛苦的，因為judge.p

我的第一個Python程式（簡單的使用者名稱密碼登入程式）

話說啊，所謂的C語言1000行，Java100行，Python20行呢。。。光一個登入就30行了。、  一個輸入使用者名稱密碼的登入程式： init_usrname=input('Please en

第一個JAVA程序，Hello World

hello world 第一個 第一部分 JDK的安裝 JAVA_HOME的配置 PATH 配置 bin ClassPath配置 第二部分 第三部分附： java 註釋 /**/ //本文出自 “13089009” 博客，請務必保留此出處http:/

2。創建第一個angular應用，已經開發前的一些配置

規範 編輯 com alt 基本 web ebs local 新的 現在我們開始新建一個angular5的腳手架 。 到想要建項目的目錄下。比如我的 在 D:\JsProjects 進入cmd或者powershell cd 進入該文件夾下 然後開始新建，ng

滲透測試，form對象類型轉換，簡單demo

urn etc pac lang exceptio obj string tostring treemap 最近公司的項目在進行國家某行業的安全檢測，涉及到項目安全滲透等方面的問題； 參與項目的滲透等改造，是一個機遇與挑戰，今後對與項目安全等方面會思考更多； 下面說說for

第一個smarty例子－－分頁顯示數據

nbsp oca AS com tr1 xhtml 建立 xmlns set 模板頁index.tpl: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

08 集合[11,22,33,44,55,66,77,88,99]，將所有<66的值保存至字典的第一個key中，將所有>=66的值保存至字典的第二個key中。即：{'k1':<66的所有值，'k2':>=66的所有值}

pen nbsp print bsp [] dict 集合 key app li = [11,22,33,44,55,66,77,88,99]dict = {‘k1‘:[],‘k2‘:[]}for i in li: if i < 66: dict[

《Python入門》第一個Python Web程式——簡單的Web伺服器

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

第一遍部落格，我還是一個萌新，最近在學py

print("輸入你喜歡吃的五樣水果")name1 = input("輸入第一個:")name2 = input("輸入第二個:")name3 = input("輸入第三個:")name4 = input("輸入第四個:")name5 = input("輸入第五個:")name6 = [name1,name2

iOS開發：第一個iOS程式，加法計算器

相信很多學習程式設計的人，不管是學習C，C++，JAVA，還是iOS開發用的Objective－C，入門不久就迫切地想寫點看得見的介面玩玩。當然瞭解諸如iOS架構，系統層次這些是非常必要的，但是作為入門案例，我們不妨從最直觀的地方入手！！ 下面開始編寫我們的第一個iOS程式： 1.使用的

第一個hibernate例子

package com.hibernate.zhang; import java.sql.Date; public class News { private Integer id; private String title; private String author; priv

mongodb 中的 map reduce 的快速入門例子，簡單操作和理解。

先看下mongodb官方給出的例子的圖。 個人理解的解釋： 這個圖，有四列資料。 第一列：原始資料。通常對應的mongodb裡面的一個表collection。 第二列：經過某些條件過濾過的資料，這個圖裡面就是按{"status":"A"}過濾資料。這個過濾的條件對應上面程式

第一個Hibernate示例，使用Maven來管理jar包

注意：不同版本好像會有點不一樣，特別是在後續跟spring整合時要注意版本問題。這裡用的是Hibernate 3 版本的。。。 1.SQL指令碼 //SQL指令碼 CREATE TABLE USER ( USER_ID INT PRIMARY KEY AUTO_IN

我是一個小菜雞，從來也不放棄努力

Rational Sum (20) 時間限制 1000 ms 記憶體限制 65536 KB 程式碼長度限制 100 KB 判斷程式 Standard (來自 小小) 題目描述 Given N rational numbers in the form "numer

第一個AndroidStudio外掛，一鍵建立Activity

前言 之前寫過一個建立Activity的Gradle外掛CreateActivityPlugin，但是使用起來並非像使用AndroidStudio自帶的功能new Activity一樣方便。 而且我也做了一些思考，覺得建立Activity這個過程，其實和Grad

使用postman傳送第一個api請求，可以使用這個api進行測試！!

使用postman傳送第一個api請求？ https://www.v2ex.com/p/7v9TEc53 v2ex是個論壇，技術人員經常會去看的一個論壇 是一個彙集各類奇妙好玩的話題和流行動向的網站。V2EX 提供了特別有用的小工具 [ ZEN ]，幫助你掌握自己的時

如何寫第一個Python程式，30萬年薪Python工程師經驗之談

在正式編寫第一個Python程式前，我們先複習一下什麼是命令列模式和Python互動模式。 命令列模式 在Windows開始選單選擇“命令提示符”，就進入到命令列模式，它的提示符類似C:>： ┌───────────────────────────────

建立第一個fabric網路，合約部署

以下文章中以$ 開頭的皆是終端命令。以下終端命令不報錯，出現ERROR就繼續。                   $ cd cd first-network 1、關閉相關網路服務         $  ./byfn.sh -m down ,輸入y繼續。不用關Warin

Python入門 第一個Python Web程式——簡單的Web伺服器

  上一篇講了《Python入門》Windows 7下Python Web開發環境搭建筆記，接下來講一下Python語言Web服務的具體實現：第一個Python Web程式——簡單的Web伺服器。 與其它Web後端語言不同，Python語言需要自己編寫Web伺服器。 如果你使用一