-
Notifications
You must be signed in to change notification settings - Fork 0
/
hexo_san_require.html
5 lines (4 loc) · 40.9 KB
/
hexo_san_require.html
1
2
3
4
5
<!-- build time:Mon Mar 04 2019 16:34:52 GMT+0800 (CST) --><!DOCTYPE html><script src="/js/src/pjax/jquery_min_js.js"></script><script src="/js/src/pjax/jquery_pjax_min_js.js"></script><script src="/js/src/pjax/pjaxMain.js"></script><html class="theme-next muse use-motion" lang="en"><head><meta name="generator" content="Hexo 3.8.0"><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"><meta name="theme-color" content="#222"><meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp"><link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css"><link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css"><link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css"><link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4"><link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222"><meta name="keywords" content="hexo,"><link rel="alternate" href="/atom.xml" title="Leesin's Blog" type="application/atom+xml"><meta name="description" content="一篇关于next主题中加入require.js的文章，让你的文章如闪电般迅捷。"><meta name="keywords" content="hexo"><meta property="og:type" content="article"><meta property="og:title" content="hexo next主题深度优化(三)，引入require.js,适配pjax"><meta property="og:url" content="http://mmmmmm.me/hexo_san_require.html"><meta property="og:site_name" content="Leesin's Blog"><meta property="og:description" content="一篇关于next主题中加入require.js的文章，让你的文章如闪电般迅捷。"><meta property="og:locale" content="en"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440641393722.jpg"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190831817.png"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190845283.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545534977;1545535877&q-key-time=1545534977;1545535877&q-header-list=&q-url-param-list=&q-signature=39cd77083658b10005182cb1a4fe924b96ee2229"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/2018121019091198.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535075;1545535975&q-key-time=1545535075;1545535975&q-header-list=&q-url-param-list=&q-signature=839f2843f52f20f681dd19a1a308d05deb85468a"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190918575.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535106;1545536006&q-key-time=1545535106;1545536006&q-header-list=&q-url-param-list=&q-signature=848c3852cca07fbb805b2cfbf95278b7176af5a1"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190933354.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535138;1545536038&q-key-time=1545535138;1545536038&q-header-list=&q-url-param-list=&q-signature=f7a45304bdcd1d92948a101fbd500cc2338a86ad"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190943444.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535164;1545536064&q-key-time=1545535164;1545536064&q-header-list=&q-url-param-list=&q-signature=b27f401a6a9a76711cd82cf031a2eaa3fd8367d9"><meta property="og:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190943444.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535164;1545536064&q-key-time=1545535164;1545536064&q-header-list=&q-url-param-list=&q-signature=b27f401a6a9a76711cd82cf031a2eaa3fd8367d9"><meta property="og:updated_time" content="2018-12-24T09:47:02.000Z"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="hexo next主题深度优化(三)，引入require.js,适配pjax"><meta name="twitter:description" content="一篇关于next主题中加入require.js的文章，让你的文章如闪电般迅捷。"><meta name="twitter:image" content="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440641393722.jpg"><script type="text/javascript" id="hexo.configurations">var NexT=window.NexT||{},CONFIG={root:"/",scheme:"Muse",version:"5.1.4",sidebar:{position:"left",display:"post",offset:12,b2t:!1,scrollpercent:!1,onmobile:!1},fancybox:!0,tabs:!0,motion:{enable:!0,async:!1,transition:{post_block:"fadeIn",post_header:"slideDownIn",post_body:"slideDownIn",coll_header:"slideLeftIn",sidebar:"slideUpIn"}},duoshuo:{userId:"0",author:"Author"},algolia:{applicationID:"P88H67GUII",apiKey:"5489ac7ce78f59f4a8cb5445035f54d8",indexName:"dataiyangu",hits:{per_page:10},labels:{input_placeholder:"Search for Posts",hits_empty:"We didn't find any results for the search: ${query}",hits_stats:"${hits} results found in ${time} ms"}}}</script><link rel="canonical" href="http://mmmmmm.me/hexo_san_require.html"><title>hexo next主题深度优化(三)，引入require.js,适配pjax | Leesin's Blog</title></head><body itemscope itemtype="http://schema.org/WebPage" lang="en"><link rel="stylesheet" href="/dist/APlayer.min.css"><header id="header_left" class="header_left" itemscope itemtype="http://schema.org/WPHeader"><div class="header_left_inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="logo-line-after"><i></i></span></a></div></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu_left" class="menu_left"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>Home</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>Archives</a></li></ul></nav></div><div class="header_sidebar">黑匣子</div></header><div class="eye"><div class="eye1"><ul><li style="background-color:#C7EDCC">豆沙绿</li><li style="background-color:#FAF9DE">杏仁黄</li><li style="background-color:#FFF">银河白</li><li style="background-color:#323232">极光黑</li><li style="background-color:#FFF2E2">秋叶褐</li><li style="background-color:#FDE6E0">胭脂红</li><li style="background-color:#E3EDCD">青草绿</li><li style="background-color:#DCE2F1">海天蓝</li><li style="background-color:#E9EBFE">葛巾紫</li><li style="background-color:#EAEAEF">极光灰</li><li style="background-color:#cce8cf">qq管家</li></ul></div><div class="eye2">满天星</div></div><div id="aplayer"></div><script type="text/javascript" src="/dist/APlayer.min.js"></script><div class="container sidebar-position-left page-post-detail"><div class="headband"></div><a href="https://github.com/dataiyangu?tab=repositories"><img style="position:absolute;top:0;left:0;border:0" src="/images/github_fork.png" alt="Fork me on GitHub"></a><div class="bg_content"><canvas id="canvas"></canvas></div><header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-wrapper"><div class="site-meta"><div class="custom-logo-site-title"><a href="/" class="brand" rel="start"><span class="logo-line-before"><i></i></span> <span class="site-title">Leesin's Blog</span> <span class="logo-line-after"><i></i></span></a></div><p class="site-subtitle">To be a better me</p></div><div class="site-nav-toggle"><button><span class="btn-bar"></span> <span class="btn-bar"></span> <span class="btn-bar"></span></button></div></div><nav class="site-nav"><ul id="menu" class="menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="menu-item-icon fa fa-fw fa-home"></i><br>Home</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="menu-item-icon fa fa-fw fa-archive"></i><br>Archives</a></li></ul></nav></div></header><div id="pjax-container"><main id="main" class="main"><div class="main-inner"><div class="content-wrap"><div id="content" class="content"><div id="posts" class="posts-expand"><article data-scroll-reveal="enter bottom move 60px over 0.6s after 0.05s" class="post post-type-normal" itemscope itemtype="http://schema.org/Article"><div class="post-block"><link itemprop="mainEntityOfPage" href="http://mmmmmm.me/hexo_san_require.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="name" content="Leesin.Dong"><meta itemprop="description" content=""><meta itemprop="image" content="/images/avatar.gif"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Leesin's Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">hexo next主题深度优化(三)，引入require.js,适配pjax</h1><div class="post-meta"><i class="fa fa-thumb-tack"></i> <font color="7D26CD">置顶</font> <span class="post-meta-divider">|</span> <span class="post-time"><span class="post-meta-item-icon"><i class="fa fa-calendar-o"></i> </span><span class="post-meta-item-text">Posted on</span> <time title="Post created" itemprop="dateCreated datePublished" datetime="2018-12-18T20:16:00+08:00">2018-12-18 </time></span><span class="post-category"><span class="post-meta-divider">|</span> <span class="post-meta-item-icon"><i class="fa fa-folder-o"></i> </span><span class="post-meta-item-text">In</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/hexo/" itemprop="url" rel="index"><span itemprop="name">hexo</span></a></span></span></div></header><div class="post-body" itemprop="articleBody"><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/15440641393722.jpg" alt=""></p><blockquote><ul><li>一篇关于next主题中加入require.js的文章，让你的文章如闪电般迅捷。</li></ul></blockquote><a id="more"></a><h1 id="require-js的好处，"><a href="#require-js的好处，" class="headerlink" title="require.js的好处，"></a>require.js的好处，</h1><p>总结一下就是：</p><ol><li>减少js文件之间的依赖关系</li><li>能够在页面呈现出来之后再加载js css等，提升系统性能</li><li>异步，跟第二步一个意思<h1 id="hexo-next中加入require-js"><a href="#hexo-next中加入require-js" class="headerlink" title="hexo next中加入require.js"></a>hexo next中加入require.js</h1><h2 id="新建一个main-js作为所有js的入口"><a href="#新建一个main-js作为所有js的入口" class="headerlink" title="新建一个main.js作为所有js的入口"></a>新建一个main.js作为所有js的入口</h2>这个我是用来加载首页的js的，因为加入了pjax<br>下面会弄pjax<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">//</span><br><span class="line">require.config({</span><br><span class="line"> paths: {</span><br><span class="line"></span><br><span class="line"> "music": "/dist/music",</span><br><span class="line"> "aplayer": "/js/src/aplayer",</span><br><span class="line"> "backgroudLine": "/js/src/backgroudLine",</span><br><span class="line"> "category": "/js/src/category",</span><br><span class="line"> "jquery.share.min":"/js/src/pjax/share/jquery.share.min",</span><br><span class="line"> "share":"/js/src/pjax/share",</span><br><span class="line"> "css":"/js/src/pjax/css"</span><br><span class="line"> },</span><br><span class="line">//为了动态的增加css，require js中并没有这个功能，github上有相关的插件和文档，自行google</span><br><span class="line"> shim: {</span><br><span class="line"> 'share': {</span><br><span class="line"> deps: [</span><br><span class="line"> 'css!/js/src/pjax/share/share.min','jquery.share.min'</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br><span class="line">require(['backgroudLine','music','aplayer','category','jquery.share.min','share','css'], function (){</span><br><span class="line"> pjaxshare()</span><br><span class="line">});</span><br></pre></td></tr></table></figure></li></ol><p>_layout.swig<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">{#require主函数#}</span><br><span class="line"></span><br><span class="line"><script src="/js/src/pjax/require.js" defer async="true" data-main="/js/src/pjax/main.js"></script></span><br></pre></td></tr></table></figure><p></p><p>网上说必须在相应的js文件中用define包住类似于<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">define(function(){</span><br><span class="line">原来的js</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p></p><p>可是我发现并不用呀</p><h2 id="pjax的require-js实现"><a href="#pjax的require-js实现" class="headerlink" title="pjax的require.js实现"></a>pjax的require.js实现</h2><p>_layout.swig<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><script src="/js/src/pjax/jquer_min_js.js"></script></span><br><span class="line"><script src="/js/src/pjax/jquery_pjax_min_js.js"></script></span><br><span class="line"><script src="/js/src/pjax/pjaxMain.js"></script></span><br></pre></td></tr></table></figure><p></p><p>pjaxmain.js<br></p><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br></pre></td><td class="code"><pre><span class="line">$(document).pjax('a[target!=_blank]', '#pjax-container', {</span><br><span class="line"> fragment: '#pjax-container',</span><br><span class="line"> timeout: 5000,</span><br><span class="line">});</span><br><span class="line">//用户通过浏览器的前进后退按钮，需要加载的js</span><br><span class="line">$(window).on('popstate.pjax', function () {</span><br><span class="line"> /*原来不行后来加到complete中行了，后来又不行了*/</span><br><span class="line"> pjax();</span><br><span class="line">})</span><br><span class="line">$(document).on('pjax:start',</span><br><span class="line"> function () {</span><br><span class="line"> })</span><br><span class="line">$(document).on('pjax:complete',</span><br><span class="line"> function () {</span><br><span class="line"> require.config({</span><br><span class="line"> paths: {</span><br><span class="line"> // "category_js": "/js/src/pjax/category_js",</span><br><span class="line"> // "opacity_js":"/js/src/pjax/opacity_js",</span><br><span class="line"> // "motion_js":"/js/src/pjax/motion_js",</span><br><span class="line"> // "scrollspy_js":"/js/src/pjax/scrollspy_js",</span><br><span class="line"> // "post-details_js":"/js/src/pjax/post-details_js",</span><br><span class="line"> // "lean_analytics":"/js/src/pjax/lean_analytics",</span><br><span class="line"> // "baidutuisong":"/js/src/pjax/baidutuisong",</span><br><span class="line"> // "utils_js":"/js/src/pjax/utils_js",</span><br><span class="line"> //这个是单独的</span><br><span class="line"> "jquery.share.min":"/js/src/pjax/share/jquery.share.min",</span><br><span class="line"> // "share":"/js/src/pjax/share",</span><br><span class="line"> //这个也是单独的</span><br><span class="line"> "css":"/js/src/pjax/css",</span><br><span class="line"> "pjax_function_public":"/js/src/pjax/pjax_function_public"</span><br><span class="line"> },</span><br><span class="line"> shim: {</span><br><span class="line"> 'share': {</span><br><span class="line"> deps: [</span><br><span class="line"> 'css!/js/src/pjax/share/share.min','jquery.share.min'</span><br><span class="line"> ]</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> });</span><br><span class="line"></span><br><span class="line"> require(['jquery.share.min','share','css','pjax_function_public'</span><br><span class="line"> ], function () {</span><br><span class="line"> pjax();</span><br><span class="line"> });</span><br><span class="line"> })</span><br><span class="line"></span><br><span class="line">function pjax() {</span><br><span class="line"></span><br><span class="line"> /*因为下面的postdetails_js中的有个判断空指针的，如果加上就不能左移，如果去掉会报错，所以把这个放在首行来执行。*/</span><br><span class="line"> /*现在已经解决,可以放在任意的位置*/</span><br><span class="line"> /*</span><br><span class="line"> 之前一直是好的突然有次就不好了，后来解决了右边sidebar滚轮效果消失的效果之后，突然又好了。</span><br><span class="line"> 原因是因为，之前放在detail js的下面，而detail的下面undfind的判断时报错的，所以不会往下走。</span><br><span class="line"> */</span><br><span class="line"> /*判断#lv-container是否为空，目前这是我找到最好的办法，因为不判断，进入首页或其他的页面会空指针异常。*/</span><br><span class="line"></span><br><span class="line"> if ($("#lv-container").length > 0 &&$('comments').length>0) {</span><br><span class="line"> $(".comments").css({opacity: 1});</span><br><span class="line"> $.getScript("https://cdn-city.livere.com/js/embed.dist.js");</span><br><span class="line"> }</span><br><span class="line"> //不蒜子js</span><br><span class="line"> $.getScript("https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js");</span><br><span class="line"></span><br><span class="line"> //自己写的分享</span><br><span class="line"> pjaxshare();</span><br><span class="line"></span><br><span class="line">// 分类的js</span><br><span class="line"> category_js();</span><br><span class="line">// 局部刷新后文章内容不显示bug的js</span><br><span class="line"> opacity_js()</span><br><span class="line">//点击有目录的文章sidebar不显示的bug解决</span><br><span class="line"> motion_js()</span><br><span class="line"> scrollspy_js()</span><br><span class="line"> //utils_js()</span><br><span class="line"> postdetails_js()</span><br><span class="line">//lean数量统计的js，原来的js是在themes/next/layout/_third-party/analytics/lean-analytics.swig文件中</span><br><span class="line"> lean_analytics();</span><br><span class="line"> //百度推送js</span><br><span class="line"> baidutuisong();</span><br><span class="line">// //右边sidebar滚轮效果消失了。</span><br><span class="line"> initSidebarDimension()</span><br><span class="line"> //懒加载</span><br><span class="line"> lazyLoad();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p></p><h1 id="关于require-js适配过程中报的错误"><a href="#关于require-js适配过程中报的错误" class="headerlink" title="关于require js适配过程中报的错误"></a>关于require js适配过程中报的错误</h1><h2 id="aplayer-min-js只能在——lauout加载"><a href="#aplayer-min-js只能在——lauout加载" class="headerlink" title="aplayer.min.js只能在——lauout加载"></a>aplayer.min.js只能在——lauout加载</h2><p>这个只能通过这里加载，因为RequireJS 介绍说一个JS文件里只能放一个Define，这个众所周知，不提</p><h2 id="一直报错：MISMATCHED-ANONYMOUS-DEFINE-MODULES-…"><a href="#一直报错：MISMATCHED-ANONYMOUS-DEFINE-MODULES-…" class="headerlink" title="一直报错：MISMATCHED ANONYMOUS DEFINE() MODULES …"></a>一直报错：MISMATCHED ANONYMOUS DEFINE() MODULES …</h2><p>解决：<a href="https://blog.csdn.net/u011558902/article/details/53691627" target="_blank" rel="noopener">https://blog.csdn.net/u011558902/article/details/53691627</a></p><p>pjaxrequire 解决<br>require（[xxxxxxx]fuction（）{<br>pjax<br>}）</p><h2 id="在博客中加requre-js时候，关于aplayer的插件需要。"><a href="#在博客中加requre-js时候，关于aplayer的插件需要。" class="headerlink" title="在博客中加requre.js时候，关于aplayer的插件需要。"></a>在博客中加requre.js时候，关于aplayer的插件需要。</h2><p>define aplayer 可是里面还有一个define定义APlayer函数（重点记录 RequireJS 介绍说一个JS文件里只能放一个Define，这个众所周知，不提。）<br>解决方法：因为RequireJS 介绍说一个JS文件里只能放一个Define，这个众所周知，不提。，只能将这个插件不通过require来进行加载。让系统上来就加载。</p><h2 id="如图"><a href="#如图" class="headerlink" title="如图"></a>如图</h2><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190831817.png" alt="在这里插入图片描述"><br>这是因为我的apler 的js在requer和——layout中都进行了定义</p><h2 id="velocity函数报错"><a href="#velocity函数报错" class="headerlink" title="velocity函数报错"></a>velocity函数报错</h2><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190845283.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545534977;1545535877&q-key-time=1545534977;1545535877&q-header-list=&q-url-param-list=&q-signature=39cd77083658b10005182cb1a4fe924b96ee2229" alt="在这里插入图片描述"><br>解决：jquery从require中去掉，原因不详，好像有什么循环依赖。<br>解决：jquery从require中去掉，原因不详，好像有什么循环依赖。</p><h2 id="针对pjax的require，我用这个requre主要就是来安排pjax的，因为要之前吧pjax的函数在家在一边，浪费很大的加载时间"><a href="#针对pjax的require，我用这个requre主要就是来安排pjax的，因为要之前吧pjax的函数在家在一边，浪费很大的加载时间" class="headerlink" title="针对pjax的require，我用这个requre主要就是来安排pjax的，因为要之前吧pjax的函数在家在一边，浪费很大的加载时间"></a>针对pjax的require，我用这个requre主要就是来安排pjax的，因为要之前吧pjax的函数在家在一边，浪费很大的加载时间</h2><p>发现：<br>我很多模块并没有用define进行定定义,但是仍然成功了，说明并不是一定要define定义才能用的。（我通过实际经验总结的，结论不一定正确，有不对的地方还请指出）<br>解决：<br><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/2018121019091198.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535075;1545535975&q-key-time=1545535075;1545535975&q-header-list=&q-url-param-list=&q-signature=839f2843f52f20f681dd19a1a308d05deb85468a" alt="在这里插入图片描述"><br><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190918575.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535106;1545536006&q-key-time=1545535106;1545536006&q-header-list=&q-url-param-list=&q-signature=848c3852cca07fbb805b2cfbf95278b7176af5a1" alt="在这里插入图片描述"><br>在pjaxmin里面写require的东西，可以发现我并没有在——类中写</p><p>并没有按照require的方式引入pjaxmain这个函数，但还是成功了，<br>说明，项目中只需要引入一次require这个js，便可以处处使用（目前根据我的实际操作得出的结论，不一定正确。）</p><p>这样的话，每次pjax 的complite的函数执行完了之后才会加载需要的函数，也就是在首页，或者其他的页面，是不需要加载这个些个文件的，在首页的首次加载中大大节省了时间完美！！！！！</p><h2 id="报错"><a href="#报错" class="headerlink" title="报错"></a>报错</h2><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190933354.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535138;1545536038&q-key-time=1545535138;1545536038&q-header-list=&q-url-param-list=&q-signature=f7a45304bdcd1d92948a101fbd500cc2338a86ad" alt="upload successful"></p><p>官方解释</p><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190943444.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535164;1545536064&q-key-time=1545535164;1545536064&q-header-list=&q-url-param-list=&q-signature=b27f401a6a9a76711cd82cf031a2eaa3fd8367d9" alt="upload successful"></p><p>这里的脚本错误并不是我们引入的js脚本错误，而是对编写的config require函数的脚本错误，<br>比如我就是路径不会的</p><h2 id="pajx-返回失效"><a href="#pajx-返回失效" class="headerlink" title="pajx 返回失效"></a>pajx 返回失效</h2><p>$(window).on(‘popstate.pjax’, function () {<br>$(‘img’).lazyload({<br>placeholder: ‘/images/loading.gif’,<br>effect: ‘fadeIn’,<br>threshold : 100,<br>failure_limit : 20,<br>skip_invisible : false<br>});</p><pre><code>pjax();
</code></pre><p>})<br>和complite同样的代码，通过打断点，发现我的if（xxx>0）{}并没有执行，说明是在页面加载完之前就开始执行这段代码了，<br>解决：<br>$(window).on(‘popstate.pjax’, function () {<br>$(document).on(‘pjax:complete’,<br>function () {<br>//<br>$(‘img’).lazyload({<br>placeholder: ‘/images/loading.gif’,<br>effect: ‘fadeIn’,<br>threshold : 100,<br>failure_limit : 20,<br>skip_invisible : false<br>});</p><pre><code> pjax();
})
</code></pre><p>})</p><p>在之前加入，<br>$(document).on(‘pjax:complete’,）<br>意思是在pjax请求加载完了之后再进行如下的代码。</p><h2 id="pjaxshare函数（分享函数）老师报错pajaxshare（）-not-defined"><a href="#pjaxshare函数（分享函数）老师报错pajaxshare（）-not-defined" class="headerlink" title="pjaxshare函数（分享函数）老师报错pajaxshare（） not defined"></a>pjaxshare函数（分享函数）老师报错pajaxshare（） not defined</h2><p>解决：想着在pjaxshare函数上面加define（function（）{}）,按照网上的教程是这样的，可是我加上就是不行，去掉反而行了。</p><h2 id="require-css"><a href="#require-css" class="headerlink" title="require css"></a>require css</h2><p>从github上下载<br>deps:[‘css!libs/css/color.min’] 这里会优先加在css这个模块名下的文件(libs/js/css.min.js) 然后一个 “!”后面紧接着在基目录下加在libs/css/color.min.css<br>所以css.js文件下载下拉是不能改名的</p><p><img src="https://youzi-1257702325.cos.ap-beijing.myqcloud.com/%E6%9F%9A%E5%AD%90/20181210190943444.png?q-sign-algorithm=sha1&q-ak=AKID74tc8jBXfelANQD4gIk8QbffaNJ8gCHA&q-sign-time=1545535164;1545536064&q-key-time=1545535164;1545536064&q-header-list=&q-url-param-list=&q-signature=b27f401a6a9a76711cd82cf031a2eaa3fd8367d9" alt="upload successful"></p></div><div><div><div style="text-align:center;color:#555;font-size:14px">-------------The End-------------</div></div></div><div><div class="my_post_copyright"><p><span>本文标题:</span><a href="/hexo_san_require.html">hexo next主题深度优化(三)，引入require.js,适配pjax</a></p><p><span>文章作者:</span><a href="/" title="访问 Leesin.Dong 的个人博客">Leesin.Dong</a></p><p><span>发布时间:</span>2018年12月18日 - 20:12</p><p><span>最后更新:</span>2018年12月24日 - 17:12</p><p><span>原始链接:</span><a href="/hexo_san_require.html" title="hexo next主题深度优化(三)，引入require.js,适配pjax">http://mmmmmm.me/hexo_san_require.html</a></p><p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p></div></div><footer class="post-footer"><div class="post-tags"><a href="/tags/hexo/" rel="tag"><i class="fa fa-tag"></i> hexo</a></div><div class="post-nav"><div class="post-nav-next post-nav-item"><a href="/hexo_er_lazy.html" rel="next" title="hexo next主题深度优化(二)，懒加载"><i class="fa fa-chevron-left"></i> hexo next主题深度优化(二)，懒加载</a></div><span class="post-nav-divider"></span><div class="post-nav-prev post-nav-item"><a href="/hexo_si_share.html" rel="prev" title="hexo next主题深度优化(四)，自定义一个share功能，share.js">hexo next主题深度优化(四)，自定义一个share功能，share.js <i class="fa fa-chevron-right"></i></a></div></div></footer></div></article><div class="post-spread"></div></div></div><div id="gitalk-container"></div></div><div class="sidebar-toggle"><div class="sidebar-toggle-line-wrap"><span class="sidebar-toggle-line sidebar-toggle-line-first"></span> <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span> <span class="sidebar-toggle-line sidebar-toggle-line-last"></span></div></div><aside id="sidebar" class="sidebar"><div class="sidebar-inner"><ul class="sidebar-nav motion-element"><li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">Table of Contents</li><li class="sidebar-nav-overview" data-target="site-overview-wrap">Overview</li></ul><section class="site-overview-wrap sidebar-panel"><div class="site-overview"><div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person"><p class="site-author-name" itemprop="name">Leesin.Dong</p><p class="site-description motion-element" itemprop="description">To be a better me</p></div><nav class="site-state motion-element"><div class="site-state-item site-state-posts"><a href="/archives/"><span class="site-state-item-count">11</span> <span class="site-state-item-name">posts</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/index.html"><span class="site-state-item-count">3</span> <span class="site-state-item-name">categories</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/index.html"><span class="site-state-item-count">2</span> <span class="site-state-item-name">tags</span></a></div></nav><div class="feed-link motion-element"><a href="/atom.xml" rel="alternate"><i class="fa fa-rss"></i> RSS</a></div></div></section><section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active"><div class="post-toc"><div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#require-js的好处，"><span class="nav-number">1.</span> <span class="nav-text">require.js的好处，</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#hexo-next中加入require-js"><span class="nav-number">2.</span> <span class="nav-text">hexo next中加入require.js</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#新建一个main-js作为所有js的入口"><span class="nav-number">2.1.</span> <span class="nav-text">新建一个main.js作为所有js的入口</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#pjax的require-js实现"><span class="nav-number">2.2.</span> <span class="nav-text">pjax的require.js实现</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#关于require-js适配过程中报的错误"><span class="nav-number">3.</span> <span class="nav-text">关于require js适配过程中报的错误</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#aplayer-min-js只能在——lauout加载"><span class="nav-number">3.1.</span> <span class="nav-text">aplayer.min.js只能在——lauout加载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#一直报错：MISMATCHED-ANONYMOUS-DEFINE-MODULES-…"><span class="nav-number">3.2.</span> <span class="nav-text">一直报错：MISMATCHED ANONYMOUS DEFINE() MODULES …</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#在博客中加requre-js时候，关于aplayer的插件需要。"><span class="nav-number">3.3.</span> <span class="nav-text">在博客中加requre.js时候，关于aplayer的插件需要。</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如图"><span class="nav-number">3.4.</span> <span class="nav-text">如图</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#velocity函数报错"><span class="nav-number">3.5.</span> <span class="nav-text">velocity函数报错</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#针对pjax的require，我用这个requre主要就是来安排pjax的，因为要之前吧pjax的函数在家在一边，浪费很大的加载时间"><span class="nav-number">3.6.</span> <span class="nav-text">针对pjax的require，我用这个requre主要就是来安排pjax的，因为要之前吧pjax的函数在家在一边，浪费很大的加载时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#报错"><span class="nav-number">3.7.</span> <span class="nav-text">报错</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#pajx-返回失效"><span class="nav-number">3.8.</span> <span class="nav-text">pajx 返回失效</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#pjaxshare函数（分享函数）老师报错pajaxshare（）-not-defined"><span class="nav-number">3.9.</span> <span class="nav-text">pjaxshare函数（分享函数）老师报错pajaxshare（） not defined</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#require-css"><span class="nav-number">3.10.</span> <span class="nav-text">require css</span></a></li></ol></li></ol></div></div></section></div></aside></div><script>function password(){}var div=$(".post-body"),toc=$(".post-toc-wrap");password()</script></main></div><footer id="footer" class="footer"><div class="footer-inner"><div class="copyright">© <span itemprop="copyrightYear">2019</span> <span class="with-love" id="heart"><i class="fa fa-user"></i> </span><span class="author" itemprop="copyrightHolder">Leesin.Dong</span></div><div class="powered-by">Powered by <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a></div><span class="post-meta-divider">|</span><div class="theme-info">Theme — <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div></div></footer><div class="back-to-top"><i class="fa fa-arrow-up"></i></div></div><script type="text/javascript">"[object Function]"!==Object.prototype.toString.call(window.Promise)&&(window.Promise=null)</script><script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script><script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script><script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script><script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script><script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script><script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script><script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script></body></html><script src="/js/src/pjax/lazyload_min.js"></script><script src="/js/src/pjax/comments/comments.gitalk.js"></script><script src="/js/src/pjax/require.js" defer async data-main="/js/src/pjax/main.js"></script><!-- rebuild by neat -->