jQuery学习笔记---扩展

最新推荐文章于 2024-04-19 15:29:12 发布

xiaoa~

最新推荐文章于 2024-04-19 15:29:12 发布

阅读量134

点赞数

分类专栏： jQuery学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79356510

版权

jQuery学习笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="jquery-1.12.4.js"></script>
    <script src="p1.js"></script>
    <script src="p2.js"></script>
    <script>
        //1
//        $.extend({
//            'tom':function(){
//                return "TOM";
//            }
//        })
//        var val = $.tom();
//        alert(val);
//        //2
//        $.fn.extend({'john':function(){
//            return 'JOHN';
//        }})
//        var val = $('#i1').john();
//        alert(val);
        //从外部引入扩展jQuery
        var p1 = $.p1();
        alert(p1);
        var p2 = $.p2();
        alert(p2);
    </script>
</body>
</html>

p1.js

//这样写的全局变量会被其他jQuery扩展包如果有相同的status覆盖

// var status = 1;
// $.extend({
//     'p1':function(){
//         return 'p1: ' + status;
//     }
// })

//所以采用自执行函数
(function(){
    var status = 1;
    $.extend({
        'p1':function(){
            return 'p1: ' + status;
        }
    })
})()

P2.js

// var status = 2;
// $.extend({
//     'p2':function(){
//         return 'p2: ' + status;
//     }
// })


(function(args){
var status = 2;
args.extend({
	'p2':function(){
		return 'p2: ' + status;
	}
})
})(jQuery)

输出