JavaScript & Node.js
  • Introduction
  • Chapter1: JavaScript
    • 1.1.筆記
      • 1.1.Some records for problems and issues
        • 1.1.1.Pass array by value
      • 1.2.javacript的this
      • 1.3.apply, call
      • 1.4.Object
      • 1.5.Function
        • 1.4.1.Callback function
        • 1.4.2.函數的優化
          • 1.4.2.1.函數節流
          • 1.4.2.2.函數分時
          • 1.4.2.3.惰性載入函式
      • 1.6.Module
      • 1.7.Closure
      • 1.8.Data Types
      • 1.9.IFrame
        • 1.9.1.IFrame communication
        • 1.9.2.IFrame contentWindow property
    • 1.2.JavaScript 全攻略：克服 JS 的奇怪部分
      • 1.2.1.執行環境與詞彙環境
        • 1.2.1.1.全域環境與全域物件
        • 1.2.1.2.執行環境：創造與提升
        • 1.2.1.3.JavaScript 與 undefined
        • 1.2.1.4.執行環境：程式執行
        • 1.2.1.5.單執行緒、同步執行
        • 1.2.1.6.函數呼叫與執行堆
        • 1.2.1.7.函數、環境與變數環境
        • 1.2.1.8.範圍鏈
        • 1.2.1.9.範圍、ES6 與 let
        • 1.2.1.10.關於非同步回呼
      • 1.2.2.型別與運算子
        • 1.2.2.1.型別與 JavaScript
        • 1.2.2.2.純值
        • 1.2.2.3.運算子
        • 1.2.2.4.強制型轉
        • 1.2.2.5.存在與布林
        • 1.2.2.6.預設值
        • 1.2.2.7.框架小叮嚀：預設值
      • 1.2.3.物件與函數
        • 1.2.3.1.物件與「點」
        • 1.2.3.2.物件與物件實體
        • 1.2.3.3.框架小叮嚀：偽裝命名空間
        • 1.2.3.4.JSON 與物件實體
        • 1.2.3.5.函數就是物件
        • 1.2.3.6.函數陳述句與函數表示式
        • 1.2.3.7.觀念小叮嚀：傳值和傳參考
        • 1.2.3.8.物件、函數與「this」
        • 1.2.3.9.觀念小叮嚀：陣列——任何東西的集合
        • 1.2.3.10.'arguments' 與 spread
        • 1.2.3.11.框架小叮嚀：重載函數
        • 1.2.3.12.觀念小叮嚀：語法解析器
        • 1.2.3.13.危險小叮嚀：自動插入分號
        • 1.2.3.14.框架小叮嚀：空格
        • 1.2.3.15.立即呼叫的函數表示式（IIFEs）
        • 1.2.3.16.框架小叮嚀：IIFEs 與安全程式碼
        • 1.2.3.17.了解閉包(一)
        • 1.2.3.18.了解閉包(二)
        • 1.2.3.19.框架小叮嚀：Function Factories
        • 1.2.3.20.閉包與回呼
        • 1.2.3.21.call()、apply() 與 bind()
        • 1.2.3.22.函數程式設計（一）
        • 1.2.3.23.函數程式設計（二）
      • 1.2.4.JavaScript 的物件導向與原型繼承
        • 1.2.4.1.觀念小叮嚀：古典和原型繼承
        • 1.2.4.2.瞭解原型
        • 1.2.4.3.所有東西都是物件（或純值）
        • 1.2.4.4.Reflection 與 Extend
      • 1.2.5.建立物件
        • 1.2.5.1.函數建構子、「new」與 JavaScript 的歷史
        • 1.2.5.2.函數建構子與「.prototype」
        • 1.2.5.3.危險小叮嚀：「new 」與函數
        • 1.2.5.4.觀念小叮嚀：內建的函數建構子
        • 1.2.5.5.危險小叮嚀：內建的函數建構子
        • 1.2.5.6.危險小叮嚀：陣列與 for in
        • 1.2.5.7.Object.create 與純粹的原型繼承
        • 1.2.5.8.ES6 與類別
      • 1.2.6.雜談
        • 1.2.6.1.初始化
        • 1.2.6.2.「typeof」、「instanceof」與搞清楚這是什麼
        • 1.2.6.3.嚴謹模式
      • 1.2.7.檢驗知名的框架與資源庫
        • 1.2.7.1.深入瞭解原始碼：jQeury（一）
        • 1.2.7.2.深入瞭解原始碼：jQeury（二）
        • 1.2.7.3.深入瞭解原始碼：jQeury（三）
      • 1.2.8.來打造一個框架/資源庫
        • 1.2.8.1.需求
        • 1.2.8.2.打造安全的程式
        • 1.2.8.3.我們的物件與其原型
        • 1.2.8.4.屬性與可鏈結方法
        • 1.2.8.5.增加 jQuery 支援
        • 1.2.8.6.好的註解
        • 1.2.8.7.來使用我們的框架吧
      • 1.2.9.Bonus
        • 1.2.9.1.TypeScript、ES6 與轉譯式語言
    • 1.3.常用前端套件
      • 1.3.1.RequireJS
  • Chapter2: Node.js
    • 2.1.What is Node.js?
    • 2.2.Express
      • 2.2.1.Build Express
        • 2.2.1.1.For Ubuntu
        • 2.2.1.2.For Windows 7
      • 2.2.2.Folder & data in Express
    • 2.3.Node.js debug message
      • 2.3.1.Allow node.js server to output log
      • 2.3.2.Allow node.js perform GC collection
      • 2.3.3.[Debug message]Error: CERT\_UMTRUSTED
      • 2.3.4.[Debug message]Error: npm ERR! network getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs
      • 2.3.5.[Debug message]-bash: /usr/local/bin/npm: No such file or directory
      • 2.3.6.[Debug message]const Hoek = require('hoek'); ^^^^^ SyntaxError: Use of const in strict mode.
    • 2.4.Web server
      • 2.4.1.listen port and simple routing
    • 2.5.Node + Nginx
    • 2.6.Node GC
    • 2.7.Promise
    • 2.8.Create free ssl for express web server
    • 2.9.Node Swagger mock server
    • 2.10.Promise-based ORM for Node.js
Powered by GitBook
On this page
  • 1.Introduction
  • 2.用法
  • 3.參考資料

Was this helpful?

  1. Chapter1: JavaScript
  2. 1.3.常用前端套件

1.3.1.RequireJS

Previous1.3.常用前端套件NextChapter2: Node.js

Last updated 5 years ago

Was this helpful?

1.Introduction

  • RequireJS用於client端的模塊管理, 實現動態加載或異步加載, 模塊管理遵守

2.用法

  • define: 定義模塊, RequireJS要求每個模塊要放在一個獨立的文件中, 模塊可分為兩種:

    • 1.獨立模塊

      • 如果被定義的模塊不需要依賴其他模塊, 則可以用define方法生成

        • 將對象寫成一個, 該函數的回傳值就是輸出的模塊. e.g.,

          define(function () {
   return {
      method1: function() {},
      method2: function() {},
  };
});

    • 2.非獨立模塊

      • 如果被定義的模塊需要依賴其他模塊, 則define必須採用以下方式:

        • 第1個參數: 定義模塊名稱, 是相對於require.js的路徑

        • 第2個參數: 此模塊所需要使用到的模塊

        • 第3個參數: 函數的參數內容需要對應到第2個參數陣列, 該函數的回傳值就是輸出的模塊, 供其他模塊調用

          • e.g.,

            define('login/LogInReact',
  [
      'react',
      'react-dom',
      'strings',
      'knockout',
      'koMapper',
      'LogonService',
      'GAUTH',
  ], function (React, ReactDOM, strings, ko, koMapper, LogonService, GAUTH) {
      var self = this;
      self.init = function (containerId, component, userNameProp, gAuthHostUrlProp, garminOAuthClientIdProp, localeProp, gAuthCSSUrlProp, ssoRedirectUrlProp, languageCodeProp, guidProp) {
      };
      return self;
  })

  • require: 調用模塊

    • 第1個參數: 要調用的模塊, 可以是複數

    • 第2個參數: 函數的參數內容需要對應到第1個參數陣列

      • e.g.,

        require(['login/LogInReact'], function (LogInReact) {
  var userName = getCookie("UserName");
  var guid = getParameterByName("guid");
  var gAuthHostUrl = "@gAuthHostUrl";
  var OAuthClientId = "@OAuthClientId";
  var locale = "@locale";
  var gAuthCSSUrl = "@gAuthCSSUrl";
  var ssoRedirectUrl = "@ssoRedirectUrl";
  var languageCode = "@languageCode";

  LogInReact.init('#LogInBoxWidget', LogInReact.LoginComponent, userName, gAuthHostUrl, OAuthClientId, locale, gAuthCSSUrl, ssoRedirectUrl, languageCode, guid);
});

    • 另一種作法: 將require方法用在define方法内部

      • e.g.,

        define(function ( require ) {
  var isReady = false, foobar;

  require(['foo', 'bar'], function (foo, bar) {
      isReady = true;
      foobar = foo() + bar();
  });

  return {
      isReady: isReady,
      foobar: foobar
  };
});

3.參考資料

AMD規範
函數
RequiredJS
RequireJS和AMD规范
AMD規範