javascript代码实例教程-r.js合并实践

发布时间:2019-02-09 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-r.js合并实践脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 项目中用到require.js做生产时模块开发,但上线要合并压缩,幸好它配套有r.js。下面就其用法说明一下。

 

首先建一个目录,里面的结构如下:

 

 

 

require.js可以到r.js项目下载

r.js可以到r.js项目下载

server.exe可以到avalon项目下载

jquery可以到JQ官网下载

avalon.js可以到avalon项目下载,并把里面的loader: true改为 loader: false,禁止自带的加载器。

main.js是用于配置加载选项的,如shim机制,有时还做一些初始化操作。

build.js是用于合并压缩的。

index.htML的内容如下:

 

<!doctyPE html>

<html>

    <head>

        <tITle>avalon+requirejs</title>

        <;meta charset="utf-8">

        <script data-main="js/main" src="require.js"></script>

        <style type="text/css">

            .wrapper {

                width: 200px;

                height: 200px;

                background: gray;

            }

        </style>

    </head>

    <body>

        <p class="wrapper" ms-controller="xxx">{{str}}</p>

    </body>

</html>

main.js的内容以下:

 

 

require.config({

    baseUrl: &#39;js',

    paths: {

        jquery: 'jquery',

        avalon: 'avalon'

    },

    shim: {

        jquery: {

            exports: "jQuery"

        },

        avalon: {

            exports: "avalon"

        }

    }

});

 

require(['avalon',"jquery"], function(avalon, Q) {

   Q("body").append("test jq")

   avalon.define("xxx", function(vm){

       vm.str = "加载成功"

   })

   avalon.scan()

});

 

因为main.js是相当于require.js的下一级目录中,需要设置baseUrl。由于avalon与jquery都不是根据严格的amD定义它的库的结构(即,没有用define方法包裹起来),我们需要通过shim机制处理一下。最后,我们还手动加载avalon,进行扫描绑定!

 

然后点击 server.exe,打开IE或chrome。页面加载,它就会加载require.js。require.js会找到加载它的那个script节点,发现它定义了data-main属性,根据它的值去加载js/main.js文件,然后它配置自身,然后加载avalon并完成页面的重新渲染!

 

我们再来看合并压缩。打开build.js,里面的内容如下:

 

 

({

    baseUrl: '',

    paths: {

        jquery: 'jquery',

        avalon: 'avalon'

    },

    shim: {

        jquery: {

            exports: "jQuery"

        },

        avalon: {

            exports: "avalon"

        }

    },

    name: "main",

    out: "main-built.js"

})

你想r.js做压缩,还有一个必要条件,得安装node.js,这个不详谈了,自己百度谷哥。然后要安装r.js,window下打开控制台,输入npm install -g requirejs。然后定位到js目录下,输入node r.js -o build.js,然后该目录下就会多出main-built.js这个文件,表示合并成功!

 

 

 

然后上线时,将index.html中 data-main="js/main"改成 data-main="js/main-built"就行了。

觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-r.js合并实践全部内容,希望文章能够帮你解决javascript代码实例教程-r.js合并实践所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。