Require.js
2013-07-25 11:28
232 查看
前言
前段时间粗略的扫过一次require.js，当时没怎么在意，结果昨天看到index里面的代码就傻了，完全不知道从哪开始看啦，所以require与backbone的学习还要加紧才行。由于前端所占业务越来越重，所以出现了模块化编程，但是js加载的先后顺序可能会给我们带来麻烦。
有时候我们为了解决页面堵塞会采用异步加载js的方式，这种方式往往带来了一些不确定因素。
为了解决这些问题，James Burke 便搞了一个AMD（Asynchronous Module Definition 异步模块定义）规范
异步加载模块，模块加载不影响后续语句执行。
我们这里要学习的require.js就是一个实现了AMD的库，他的提出解决了以下问题：
① 实现javascript异步加载，避免页面假死
② 管理模块之间的依赖性，便于代码编写与维护（这是重点啊）
于是我们一起来学习require.js吧
惊鸿一瞥
首先看一看我们的项目文件目录：<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
img { min-height: 100px; min-width: 100px; border: 1px solid gray; padding: 1px; margin: 10px; }
#con { width: 600px; height: 400px; overflow: auto; }
</style>
</head>
<body>
<div id="con">
<img src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQeA7IcDOwfPFo9jkqGY6z7_x8QvbRhKISjz_mBbHpzibsFHRU4aQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQ0675UvBjhuBSL2reu9MNtbD2gsyhXfKHff4rWoeWTl9s6tBtT"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcT5fFjlkPbN6HyDdFH-ABGFv1KFf0Z-GLQjauUkYDnU6BLlJWlR"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQgCYMj83ZKBreRc6Eo7M83nBuvBH7a8OoD50gy0kjcXt_MrdES"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcQaRBgWXVLp_jZsOja2CTwvUtvGY0kpbukMuoHVt4aOVt-bQAQTaA"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcT4QFYpMjmUg-ojALNGHZi1deHhima5XCg22_2vEGPfG1ii65kA"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcRYsKunQTWsOI_fivyDvl2ODIi-nVmmLC5hUMN0Gwn8rfExmoil"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcSNjna95u1rkQeIIzUZt4e-ig-cQVL3zlDF52Ahy0CG6RiIYPl-"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcRhfmowfsxnOPE2h1eFzVde_cdbMXuco-3n0hU5CaMcWDo68fb0Ww"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcTKg-uX2br5cEY0CgW9BrQBSvcu_wTMldPDmCjAXgU-Mom3qOPQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcRJ1Y9ok2h6msyQgVDZ2yxEpEALNYQ9zLH3oO4rAcbuS6Q36Kg33w"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcQfzRcM1gOeqzKim5v7tjRYgR5vKFYmMq7Okeiqx2Eptod7CczB"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcQ7352IR-71m2lD8yO-E-b6N1MtSSX3SXnSNYrPiqhVc2DCuxQunQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcSouivtDehuJmrKQ3QNJh9THm6XabMl8bIJ_-EphoVsiQYUwkN3"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcQXnAMu3mNTPSC3wLZx_8qkHF0u1k5u21l3_p2U2mDPrf4GkqWv-g"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcRxXxuf9a_mca-dBpxPIazHGZh8qZS36cN_eTYJMnBSDIczSFboyw"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcSLJ_POtfB-QCh98uMwl_2RjyKFnMF4uBAFYZoTobd0qghzNKav"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcTOUW0fs-Y9VDf5hMPkhBj7ElNyIFn0CCcwKrpWwDOyfqGAuhgx"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcTHyfvCdXrPeeD4Q020IA7L5dTBj71ZFlaqPSdUwWVua90IIEIe"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcTgtSEb3lTAgMNKOhVtESFeXYmdyQs-Qtol6qaNxKgOfXCorc_n2w"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcT7yTxBO1cgnOMhZPGTTz8qnWybHBy7KKPgi3LPwXLwUpx4jOa1"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcRyueSS4jvdD3KL0RRA1_gjWs1t_SYXjz3scpEtZLfaU81jM6LY"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcQcHBwxi0TOcT4Qq12l5C3qTpNk1FxufGXThU9TzobI6gtjLuuh"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQh9QHMSyHhz_qClSm52oSArs0PHD79Fu3tJFkK5XUmPxb1s92W"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcTZ0sffw1KlEzasC_BJG2lC3FlEqhcoRUFNi1izZfihFLu1TYZy"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcRBX1qNvA_hdOyQ9d8YSxtXX8NJR8i0psiXRhGPcmBWof8Mbo8iCw"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcTcb5tgRiVigR0qBayAJ5CFpTD79tevc4BvQpbTo2B9J9BE1uluHw"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcRaScH10Znz-gGpDQZuPcW9wf8sUH0r6fIbQNWQyCQ5jEt_Dsrotg"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcQLhXHVnYBKDfWxyQbX2gmmnv2YOUeapwMgC5MQBxpOMCulCsGntw"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcSHnShgQRvdXGduPbZFmil3u9WaMtzQ83bSmbwNzZumXivi0fKz"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcS-2GvOWqaOjed6WQusocYWIfeuPxgfIsi_I3J3B8ION4NahWNd4g"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcSR6Y5P-0zcPKWz0TOyKa-mYusyKXU8RLx8jwCKhoZ8j3VZaTq-"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQelQTt105pzmvK_yrjy2AXyWhnLPCuCEtUeO13V1119xe9whKA"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcR2TYDtbatDPKnor_I91SlVFxqJsRaXShVgWC0s3iTx22uMjB8T"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQ_A96SHx2bQi5T9rFftdeEl7jsuu7fM8Kj47d-rekkf4S9a2HX"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ3DCK9OcuvYUbiG1AnLTmMMuADsWXraPsegkMZu8OGeNy6GThk"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcRvcDRTnNqMKtsOysJSYrzqMdC_NC5Q5t0iB84IPy6gN8Nz93XI"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcTUVomS-U4Guzmvom6pG-8SmDcnL0anyD3x2WWrxPy51uY6wkUcrw"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcRS77pydsLeKDekA8sTr7gJMJakN_l42TMGCBt5AK5GRuId2W61TA"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcSc1O1OYU8HkTUKXzUADyc5OU3AwTi74f-OXEHAHlKzo-QWhvzMDQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcTqFcZfLgjLCnwZGa5gicji9pPjbbJo5vdc3Ktmb1c5o-ied6wSJg"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcTiIa88meODgGZa3FujShj-84aJ1T1MYnMq04WB6aW9limmIVJMNQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcTwjG00KVvctaJUvTNZ0QBww7ioYRELKvKGOseddZiby4HCcAdByg"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcTDSV9OzhZMfsAHdMX2aqxVsy2KcjwHfNuv56YkRnLxWShCi27b"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcQ94MVzNxNF4mQVNNFXSvSt2muXooVcAk1D4IUmVIpBJl_9ZTY4cQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcT6aSnAUDzkXWruDZWYIGIl7Ikst2Dov1O5FfQGrUfJxMEMMaz_"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcT6nPA8A0iLsPl2fHH7W0cOuCvJnA1neUKDkg-vlrr_yH2U1Cpvp1fufBmP"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcTGQ7xTXdxehbb4SX094U2giAEzX8IOk8tMuibYB-2azPCIB2Wi1Q"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcTD-f2XxNcbfKTyQlpqYVdpCDt0z81BCqejXVw9V4XIn9SE-eQ77w"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcT_3jasordROFjB9IBvnHe9cL46DHDHDyJDJySi-g-bu1jA2H7f"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcQSOTVBnsLGlHNC2Al7NquIAy0r3zcLXAF__UZTp-QSzBJMduEs"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcTCDCCh2p7_QrY1Y3CnFh7PMi9osBRtmATk1YzXd9qLrD8ZBJtt8g"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ1gcyhJgqz35t2LOERYe03F0uFe2VDLiQR-MrjODoidcOXhgwk"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcR38iRko3Y5E0tI7YepiepfyGZAZulSvtaYFkRbxJ2X59-gBzIX"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcR0a4-W7f25CEcMqhAY_76VwFQFsRdOBCTMBinrhuOmdzAOzjNM"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcSx9lIYUcNC6Uw6P183m17EGKLAlrn2ydq7e78mC2jNfhEeQTIiGQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcTyBUvV-QlkOQyUJmGEgutJzt5psfFdFD057helEC87Xcg-AG5B"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcTR4QMBicgPpp6Egk5wydx_BLQucGV6jn_WeiFdVriF60QMT9Le"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcSPeBHuvVsJioGCvsHN3djDYUHkTSJUX0ScGuO4VdmYzGBgymdoNw"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcRiGpcV-N7xYtszT6gxoeHHYzltVQGfUWsWHggiU_777pwjdzqJ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcQ7cLJuBBcrbCY3Km9WIlor8dYz1gegOeNaPVqtanPdWPuOQv-xHw"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcSXwpsNg5wTvLtLuEukc_MHK-l-lz378nrq82WThURBhap55GHpsQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcR65Z_S0Eg0k3x_bNi7xZVY5LnArt8zi_-08mCDJynFKhw_V8KWMA"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcSQEFH9BT-cHykSaHJUSvGbn9KHEmjeUJusIgBnLRZb-A6XaWpJ1A"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQiuTGk8qE2WKeSuxPk48QVoCkw0bSVmE1kA8StS2j7B5nSGm_x"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcSmmPUnkYwObYg7p2BW3JjnDucW-0DEk7FFFYSwmEoI7oio3WZx"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcTXyl_Rcz3T2sM_IvauMA7Fj_ymV81eEAg2OHTx6R_cPDxtUCOc"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcTn5SlTHwQQ7Srl1hpzLuhjNPS4KK7P4FLUpKWCEgqT6Ade9dr9wQ"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcTl_DOFBO9A6aM3pnKI2Phk1WFGgMpKOF-IEWZooAc2STSuXdux"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcSs6I2i44EO0fisjBDWgqiT6REPIZnXoGgX5W_Pz8SYgDk5Flqu"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcRhJJI92CsLtzgb_0HITayU9fIQlnec_bzKVJxqiCzgsOYCkjHuKA"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t1.gstatic.com/images?q=tbn:ANd9GcRtGEcXY778tAjvnhJ__nu4zpF3QLMsQkxmEUDjTBlcLFxAzwtL"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcS_-MsXrXo55ERoAbg3W5QWH-mkPgcjW_cxVeXv74nCoQ4MPsmT"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcQEocE8m_VLuFzbuyVZusMGS9iU4Pvfimrp9HLLzXy9B8oZ_GtD"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcRZiTczfYDzdQzPSo9kVN7_tFTz9MEPshs74lk4hxQOnrpS-lCB"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcSDSQ7C0C4fz91OfBaNnLUp5B9N92cIQH1FODxHfzVXqXEv6YAKww"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t2.gstatic.com/images?q=tbn:ANd9GcQVlLoeddH-avr0CIKFNn6i1lVR-lVJkLxZ6IzlB-uTdoCI_XgVLg"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcTDuNZrC1K-Xfb0AJXfrLhZP3r-enBcGh--6MYAwjle9GWHDdcN"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcSPW0FEG1cFEzu5X2J-dHIBPeOP3o5-po2QN4JXlnzcMVCAiCdU"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcRmL2w4FgQoo0ocQcuGR-OVkQDYFbPFF1WM1ohOJy8CdcZa1mbTZw"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQ5mkoQqjiE9IjbjD2Pq3ezHqNF6YAdFaV3jRhUtfZuiInbHxAo3Q"><img
src="http://images.cnitblog.com/blog/294743/201306/06135832-3df80351f11d4eb7a701e69ddcfca7aa.png" lazy-src="http://t3.gstatic.com/images?q=tbn:ANd9GcQg-A4WM5vY_1RwVVlYsEi3KDwf7bBdZIK4YiuPh0zIkWBdoUf25Q">
</div>
<script src="js/require.js" type="text/javascript" data-main="main"></script>
</body>
</html>html
核心代码：
<script src="js/require.js" type="text/javascript" data-main="main"></script>
main代码：
require.config({
baseUrl: 'js'
});
require(['jquery', 'test'], function ($, imgLazyLoad) {
imgLazyLoad($('#con')); //图片延迟加载
});test.js：
define(function () {
function imgLazyLoad(container) {
var imgLazyLoadTimer = null;
var resetImglazy = null;
container = container || $(window); //需要时jquery对象
var imgArr = {};
initImg();
lazyLoad();
autoLoad();
container.scroll(function () {
lazyLoad();
});
$(window).resize(function () {
initImg();
});
$(document).mousemove(function () {
clearTimeout(imgLazyLoadTimer);
if (resetImglazy) clearTimeout(resetImglazy);
resetImglazy = setTimeout(function () {
autoLoad();
}, 5000);
});
function initImg() {
$('img').each(function () {
var el = $(this);
if (el.attr('lazy-src') && el.attr('lazy-src') != '') {
var offset = el.offset();
if (!imgArr[offset.top]) {
imgArr[offset.top] = [];
}
imgArr[offset.top].push(el);
}
});
}
function lazyLoad() {
var height = container.height();
var srollHeight = container.scrollTop();
for (var k in imgArr) {
if (parseInt(k) < srollHeight + height) {
var _imgs = imgArr[k];
for (var i = 0, len = _imgs.length; i < len; i++) {
var tmpImg = _imgs[i];
if (tmpImg.attr('lazy-src') && tmpImg.attr('lazy-src') != '') {
tmpImg.attr('src', tmpImg.attr('lazy-src'));
tmpImg.removeAttr('lazy-src');
}
}
delete imgArr[k];
}
}
} //lazyLoad
function autoLoad() {
var _key = null;
for (var k in imgArr) {
if (!_key) {
_key = k;
break;
}
}
var _imgs = imgArr[_key];
for (var i = 0, len = _imgs.length; i < len; i++) {
var tmpImg = _imgs[i];
if (tmpImg.attr('lazy-src') && tmpImg.attr('lazy-src') != '') {
tmpImg.attr('src', tmpImg.attr('lazy-src'));
tmpImg.removeAttr('lazy-src');
}
}
delete imgArr[_key];
if (imgLazyLoadTimer) {
clearTimeout(imgLazyLoadTimer);
}
imgLazyLoadTimer = setTimeout(autoLoad, 3000);
}
} //imgLazyLoad
return imgLazyLoad;
});演示地址，效果类似而已
http://sandbox.runjs.cn/show/7vpjps1r【阶段总结】
这里我们使用了一个新的东西：define
define的参数是一匿名函数，他会有一个返回值，我这里直接返回了函数本身，然后在回调函数中调用之。 我们可以在define中定义一个对象然后返回对象名那么用法就更多了
补充
刚刚看到了一个shim，于是我们这里简单补充一下吧shim: {
$: {
exports: 'jQuery'
},
_: {
exports: '_'
},
B: {
deps: [
'_',
'$'
],
exports: 'Backbone'
}
},shim参数用于解决使用非AMD定义的模块载入顺序问题。
PS：这个是神马意思，我还没完全理解，大概是使用jquery插件时候需要先保证jquery下载才行吧？这里后面再补充。
需要翻译的地方
Supported configuration options:baseUrl: the root path to use for all module lookups. So in the above example, "my/module"'s script tag will have a src="/another/path/my/module.js". baseUrl is notused when loading plain .js files (indicated by a dependency string starting with a slash, has a protocol, or ends in .js), those strings are used as-is, so a.js and b.js will be loaded from the same directory as the HTML page that contains the above snippet.
If no baseUrl is explicitly set in the configuration, the default value will be the location of the HTML page that loads require.js. If a data-main attribute is used, that path will become the baseUrl.
The baseUrl can be a URL on a different domain as the page that will load require.js. RequireJS script loading works across domains. The only restriction is on text content loaded by text! plugins: those paths should be on the same domain as the page, at least during development. The optimization tool will inline text! plugin resources so after using the optimization tool, you can use resources that reference text! plugin resources from another domain.
paths: path mappings for module names not found directly under baseUrl. The path settings are assumed to be relative to baseUrl, unless the paths setting starts with a "/" or has a URL protocol in it ("like http:"). Using the above sample config, "some/module"'s script tag will be src="/another/path/some/v1.0/module.js".
The path that is used for a module name should not include an extension, since the path mapping could be for a directory. The path mapping code will automatically add the .js extension when mapping the module name to a path. If require.toUrl() is used, it will add the appropriate extension, if it is for something like a text template.
When run in a browser, paths fallbacks can be specified, to allow trying a load from a CDN location, but falling back to a local location if the CDN location fails to load.
shim: Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.
Here is an example. It requires RequireJS 2.1.0+, and assumes backbone.js, underscore.js and jquery.js have been installed in the baseUrl directory. If not, then you may need to set a paths config for them:
requirejs.config({
//Remember: only use shim config for non-AMD scripts,
//scripts that do not already call define(). The shim
//config will not work correctly if used on AMD scripts,
//in particular, the exports and init config will not
//be triggered, and the deps config will be confusing
//for those cases.
shim: {
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['underscore', 'jquery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'foo': {
deps: ['bar'],
exports: 'Foo',
init: function (bar) {
//Using a function allows you to call noConflict for
//libraries that support it, and do other cleanup.
//However, plugins for those libraries may still want
//a global. "this" for the function will be the global
//object. The dependencies will be passed in as
//function arguments. If this function returns a value,
//then that value is used as the module export value
//instead of the object found via the 'exports' string.
//Note: jQuery registers as an AMD module via define(),
//so this will not work for jQuery. See notes section
//below for an approach for jQuery.
return this.Foo.noConflict();
}
}
}
});
//Then, later in a separate file, call it 'MyModel.js', a module is
//defined, specifying 'backbone' as a dependency. RequireJS will use
//the shim config to properly load 'backbone' and give a local
//reference to this module. The global Backbone will still exist on
//the page too.
define(['backbone'], function (Backbone) {
return Backbone.Model.extend({});
});In RequireJS 2.0.*, the "exports" property in the shim config could have been a function instead of a string. In that case, it functioned the same as the "init" property as shown above. The "init" pattern is used in RequireJS 2.1.0+ so a string value for
exportscan be used forenforceDefine, but then allow functional work once the library is known to have loaded.
For "modules" that are just jQuery or Backbone plugins that do not need to export any module value, the shim config can just be an array of dependencies:
requirejs.config({
shim: {
'jquery.colorize': ['jquery'],
'jquery.scroll': ['jquery'],
'backbone.layoutmanager': ['backbone']
}
});Note however if you want to get 404 load detection in IE so that you can use paths fallbacks or errbacks, then a string exports value should be given so the loader can check if the scripts actually loaded (a return from init is not used for
enforceDefinechecking):
requirejs.config({
shim: {
'jquery.colorize': {
deps: ['jquery'],
exports: 'jQuery.fn.colorize'
},
'jquery.scroll': {
deps: ['jquery'],
exports: 'jQuery.fn.scroll'
},
'backbone.layoutmanager': {
deps: ['backbone']
exports: 'Backbone.LayoutManager'
}
}
});Important notes for "shim" config:
The shim config only sets up code relationships. To load modules that are part of or use shim config, a normal require/define call is needed. Setting shim by itself does not trigger code to load.
Only use other "shim" modules as dependencies for shimmed scripts, or AMD libraries that have no dependencies and call define() after they also create a global (like jQuery or lodash). Otherwise, if you use an AMD module as a dependency for a shim config module, after a build, that AMD module may not be evaluated until after the shimmed code in the build executes, and an error will occur. The ultimate fix is to upgrade all the shimmed code to have optional AMD define() calls.
The init function will not be called for AMD modules. For example, you cannot use a shim init function to call jQuery's noConflict. See Mapping Modules to use noConflict for an alternate approach to jQuery.
Shim config is not supported when running AMD modules in node via RequireJS (it works for optimizer use though). Depending on the module being shimmed, it may fail in Node because Node does not have the same global environment as browsers. As of RequireJS 2.1.7, it will warn you in the console that shim config is not supported, and it may or may not work. If you wish to suppress that message, you can pass
requirejs.config({ suppress: { nodeShim: true }});.总结
RequireJs还有许多东西需要学习，今天暂时到这，后面学习时会与backbone整合。我们现在再回过头看看require解决了什么问题？
因为我们程序的业务由服务器端逐步转到了前端，所以我们的javascript开发变得越发庞大了。
我们需要模块化编程维护着一个个小的单元，比如我们一个复杂的逻辑可能分为几个js。
然后一个复杂的项目结束后可能会有上百个小文件，RequireJS提供了.js进行压缩。
关于压缩相关知识我们后面点再学习啦。。。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- require.js使用步骤
- 解决JS 模块之前的异步按需加载问题 框架 （Sea.js ，require.js）
- 如何使用require.js?
- Javascript模块化编程（三）：require.js的用法
- js模块化编程二：require.js的介绍
- nodejs require 加载机制
- require.js的用法
- Javascript模块化编程（三）：require.js的用法
- require.js的用法
- Javascript模块化编程（三）：require.js的用法
- 初学习require.js
- TodoMVC中的Backbone+MarionetteJS+RequireJS例子源码分析之三 Views
- JavaScript中Require调用js的实例
- 利用require.js与angular搭建spa应用的方法实例
- 简单解决——使用Clipboard实现剪切板，用require引入js资源，会报错Clipboard is not defined的问题
- undercore & Backbone对AMD的支持（Require.js中如何使用undercore & Backbone）
- Require.js
- Karma +Jasmine+ require JS进行单元测试并生成测试报告、代码覆盖率报告
- 学习笔记-require.js
- Javascript模块化编程（三）：require.js的用法【转】