require.js - 詳解

阿新 • • 發佈：2018-09-08

插件 com 配置 return seconds bsp jquer http 就會

測試結構如下

技術分享圖片

index.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     < 
title>Document</title>
 9     <script data-main="js/app.js" src="https://cdn.bootcss.com/require.js/2.3.5/require.js"></script>
10 </head>
11 
12 <body>
13 
14     <!-- 
15         版本優化：默認有引入,例如用了jq,就會默認要求加入jquery.js,無需配置.
16      -->
17 
18     <button id="require" 
>點擊require確定啊</button>
19 
20     <input type="text" id="date3" data-options="{‘type‘:‘YYYY-MM-DD hh:mm‘,‘beginYear‘:2010,‘endYear‘:2088}" style="width:166px;height:19px;">
21 
22 
23 </body>
24 
25 </html>

app.js

 1 requirejs.config({
 2     // 默認項目地址
 3     baseUrl: ‘js/lib‘,
 
 4 
 5     // 路徑(可本地可網絡)-去除後綴(默認.js),數組可填寫多個路徑,為了防止cdn突然失效
 6     paths: {
 7         ‘jquery‘: [‘jquery‘, ‘https://cdn.bootcss.com/jquery/3.3.1/jquery.min‘],
 8         ‘jquery.date‘: [‘jquery.date‘],
 9         ‘math‘: [‘../math‘]
10     },
11 
12 
13     // 依賴(jquery.date就依賴於jquery)
14     shim: {
15         ‘jquery.date‘: {
16             deps: [‘jquery‘],
17             exports: ‘jQuery.fn.date‘
18         }
19     },
20 
21     // 控制插件依賴->jq($)
22     // map: {
23     //     ‘*‘: { ‘jquery‘: ‘jquery.date‘ },
24     //     ‘jquery.date‘: { ‘jquery‘: ‘jquery‘ }
25     // },
26 
27 
28     // 控制版本號
29     urlArgs: ‘ver=0.0.1‘,
30 
31     // 請求等待時間
32     waitSeconds: 10
33 });
34 
35 
36 
37 // app.js可以直接寫function和用.
38 function addCount(x, y) {
39     return x, y;
40 }
41 
42 
43 requirejs(["jquery", "jquery.date"],
44     function ($) {
45         // 邏輯代碼
46         $(‘#require‘).on(‘click‘, function () {
47             console.log(‘hehei‘);
48         });
49         // 初始化日期
50         $.date(‘#date3‘);
51 53 
54         console.log($);
55     }
56 );
57 
58 
59 
60 // 使用外部的js呢?(很抱歉，得另起一行了)
61 　require([‘math‘], function (math) {
62     alert(math.add(1, 1));
63 });

資料參考於：https://blog.csdn.net/bluesky1215/article/details/71079667、http://www.requirejs.cn/

require.js - 詳解

插件 com 配置 return seconds bsp jquer http 就會測試結構如下 index.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <he

[js高手之路]深入淺出webpack教程系列2-配置文件webpack.config.js詳解

基本用法 tle webpack 函數 ges 配置 ref 高手之路 pack 接著上文，重新在webpack文件夾下面新建一個項目文件夾demo2，然後用npm init --yes初始化項目的package.json配置文件，然後安裝webpack( npm inst

[js高手之路]深入淺出webpack教程系列3-配置文件webpack.config.js詳解(下)

json 學習所在 npm chunk target get lan cnblogs 本文繼續接著上文，繼續寫下webpack.config.js的其他配置用法. 一、把兩個文件打包成一個，entry怎麽配置? 在上文中的webpack.dev.config.js中，用數

lazyload.js詳解

django kit 圖片 eight 檢查 web bow failure 加載速度簡介 lazyload.js用於長頁面圖片的延遲加載，視口外的圖片會在窗口滾動到它的位置時再進行加載，這是與預加載相反的。優點：它可以提高頁面加載速度；在某些情況清晰它

JS-詳解算數運算符"+"

沒有 strong fine span 也會結果結合運算符和布爾　　二元加法運算符“+”可以對兩個數字做加法，也可以做字符串連接操作：　　當兩個操作數都是數字或都是字符串的時候，計算結果是顯而易見的。然而對於其他情況來說，則要進行一些必要的類型轉換，並且運算符

vue-cli中的ESlint配置文件eslintrc.js詳解

nds str -a vsc == 環境出錯 allow tom 本文講解vue-cli腳手架根目錄文件.eslintrc.js eslint簡介 eslint是用來管理和檢測js代碼風格的工具，可以和編輯器搭配使用，如vscode的eslint插件當有不

在vue-cli中使用mock.js詳解

r.js The sage eve conf url RoCE code color 引包1. npm install mockjs --save-dev2. npm install axios --save（axios使用不再講）修改配置3. 在config文件夾

JS 詳解 Cookie, LocalStorage 與 SessionStorage

基本概念 Cookie Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右。它的主要用途有儲存登入資訊，比如你登入某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別使用者身份的資料來實現的。 localStorage

Javascript模板引擎mustache.js詳解

mustache.js是一個簡單強大的Javascript模板引擎，使用它可以簡化在js程式碼中的html編寫，壓縮後只有9KB，非常值得在專案中使用。本文總結它的使用方法和一些使用心得，內容不算很高深，純粹是入門內容，看看即可。不過要是你還沒有用過此類的javascript引

微信小程式 js詳解

data - 實現頁面的初始化資料 onLoad - 是生命週期函式,用來監聽頁面載入,一個頁面只會呼叫一次,它的引數可以獲取wx.navigateTo和wx.redirectTo及< navigator/>中的query. onReady - 同樣是生命週

vue-cli中的ESlint配置檔案eslintrc.js詳解

本文講解vue-cli腳手架根目錄檔案.eslintrc.jseslint簡介eslint是用來管理和檢測js程式碼風格的工具，可以和編輯器搭配使用，如vscode的eslint外掛當有不符合配置檔案內容的程式碼出現就會報錯或者警告安裝eslintnpm init -y n

原生js詳解ajax請求

前端請求服務端資源利用ajax進行請求，通常可以藉助jquery等第三方庫完成ajax的請求，此處將詳解原生ajax請求：var xhr = new XMLHttpRequest() xhr.open('GET','./api',false) xhr.onreadystate

JS 詳解 Cookie、 LocalStorage 與 SessionStorage

場景易用 obj 針對 tle 理解 oca span flash 基本概念 Cookie Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通

前端框架vue.js詳解

Vue.js 是一個JavaScriptMVVM庫，是一套構建使用者介面的漸進式框架。摘要 2016年最火的前端框架當屬Vue.js了，很多使用過vue的程式設計師這樣評價它，“vue.js兼具angular.js和react.js的優點，並剔除了它們的缺點”。授予了

Lua require 函式詳解 (轉)

簡介 require函式像dofile一樣載入檔案為一個Chunk並執行。但具有兩個好處：1. 按模式載入檔案 2.不會重複載入相同的檔案 require和package.path的關係典型的package.path值如下（其中D:Bin為lua.exe所在目錄）： .?.lua;D:Binlua?.lua

無線隨機運動-原生JS詳解

//封裝運動函式； function getStylecss(obj,oStyle){ if(obj.currentStyle){ return obj.currentStyle[oStyle]; }else{

Javascript模組化開發2——Gruntfile.js詳解

一、grunt模組簡介 grunt外掛，是一種npm環境下的自動化工具。對於需要反覆重複的任務，例如壓縮、編譯、單元測試、linting等，自動化工具可以減輕你的勞動，簡化你的工作。grunt模組根據Gruntfile.js檔案中的配置進行任務。如果在package.json中定義如下命令： "script

Vue.js 插件開發詳解

js 前言隨著 Vue.js 越來越火，Vue.js 的相關插件也在不斷的被貢獻出來，數不勝數。比如官方推薦的 vue-router、vuex 等，都是非常優秀的插件。但是我們更多的人還只停留在使用的階段，比較少自己開發。所以接下來會通過一個簡單的 vue-toast 插件，來了解掌握插件的開發和使用。

關於JS面向對象中原型和原型鏈以及他們之間的關系及this的詳解

它的 .proto com js面向對象 text doc 技術分享回調函數回調一：原型和原型對象： 1.函數的原型prototype：函數才有prototype，prototype是一個對象，指向了當前構造函數的引用地址。 2.函數的原型對象__proto__：所有

詳解js跨域

-name tor adding code 填充父域 allow mes document 什麽是跨域？概念：只要協議、域名、端口有任何一個不同，都被當作是不同的域。對於端口和協議的不同，只能通過後臺來解決。URL 說明

require.js - 詳解

相關推薦