標籤：mod ons return define char ima 實現 div 簡單
推薦文章：http://www.ruanyifeng.com/blog/2012/11/require_js.html
1、以下例子主要實現功能，
1）引用jq庫擷取dom中元素文本，
2）實現並引用去空格工具類trim，
3）最後擷取文本並去掉空格後輸出，
4）打包js（將所有js檔案打包成main.min.js）
1、下載require檔案
require.js require主檔案r.js require最佳化器檔案
2、檔案結構
index.html --js檔案夾 jquery.js main.js model.js r.js require.js utils.js
3、index.html
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /></head><body> <div id=‘test‘> asdfasdfasdfasdf </div></body><!-- 壓縮js前 --><!-- <script src="js/require.js" data-main="js/main" defer async="true"></script> --><!-- 壓縮js後 --><script src="js/require.js" data-main="js/main.min" defer async="true"></script></html>
4、model.js (擷取ID為test的元素text並返回)
define([‘jquery‘], function($) { var add = function() { return $("#test").text(); }; return { add: add };});
5、utlis.js （定義trim方法）
define(function() { var utils = { trim: function(e) { return e.replace(/(^\s*)|(\s*$)/g, ""); }, ltrim: function(e) { return e.replace(/(^\s*)/g, ""); }, rtrim: function(e) { return e.replace(/(\s*$)/g, ""); } }; return utils;});
6、main.js （配置引入模組、調用模組）
require.config({ paths: { "jquery": "jquery", "model": "model", "utils": "utils" } }); require([‘model‘, ‘utils‘], function(model, utils) { console.log(model.add()); console.log(utils.trim(model.add()));});
7、打包/壓縮js檔案 （main.js中引入的模組jquery、model、utlis打包成main.min.js）
8、運行效果
require.js簡單入門
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
