首页 > Javascript > RequireJS学习笔记(三)

RequireJS学习笔记(三)

上一篇介绍requirejs使用jquery插件,参见《RequireJS学习笔记(二)》

这里主要介绍使用requirejs官方插件的用法。主要有domReady,text,css插件。

domReady插件:

功能是当DOM加载完毕后自动调用。引入时和普通的插件没有区别,使用的时候代码如下:

test.html代码:

<script src="require.min.js" data-main="config"></script>
<script>
	console.log(document.getElementById('afterjs'));
</script>
<div id="afterjs">innerHTML</div>
require(['domReady'], function (domReady) {
    domReady(function () {
        //This function is called once the DOM is ready.
        //It will be safe to query the DOM and manipulate
        //DOM nodes in this function.
	        console.log(document.getElementById('afterjs'));
    });
});

其实,如果使用了jquery库,完全可以使用jquery的$(document).ready(function(){});来代替。例如:

require(['jquery'], function($) {
    $(document).ready(function(){
        
    });
});

text插件:

功能是加载文本或图片等文件。引入时和普通插件没有区别,使用的时候代码如下:

require(["jquery", "text!some/module.html", "text!some/module.css"],
    function($, html, css) {
        console.log(html);
        console.log(css);
        $("body").append("<span>end</span>");
    }
);

其中module.html仅有一行代码:

<span>I am here</span>

module.css仅有一行样式:

span{color: red;}

在test.html中我们添加一些span元素:

<span>before</span>
<script src="require.min.js" data-main="config"></script>
<span>after</span>

运行后发现所有的span并不会变成红色,说明module.css没有渲染,而仅仅是一个文件被load进来。

text插件主要是用来加载文件的内容,可以使用jquery来代替。如果不喜欢jquery太过臃肿,可以到github上查看text插件更多用法:https://github.com/requirejs/text

css插件:

为了解决前面的css不被渲染的问题,官方还有另外一个插件 —— require-css

功能是加载css文件。引入时需要在shim段设置依赖:

shim: {
        app: {
            deps: [
                'css!some/module.css'
            ]
        }
    },

使用时代码如下:

require(["jquery", "app"], function($, app){
    $("body").append("<span>end</span>");
});

经过修改之后发现那3个span元素颜色都变成红色了。其中的before和after是由黑变红,而在require app中通过append的span在一出现的时候就是红色,那是因为app依赖了module.css,必须先加载完module.css再执行app中的append代码。

综合案例:使用requirejs实现js模板替换技术。

主要使用js库:Backbone(依赖underscore),jquery。






本文地址:http://blog.zhengshuiguang.com/js/requirejs-3.html

转载随意,但请附上文章地址:-)

标签:插件 requirejs

相关文章

评论已关闭