jQuery插件开发前的准备

    <script src="jquery.banner.1.0.js"></script>
    
    <script >
            接收两个对象时
            var obj = {
                name:"admin"
            }
            var obj2 = {
                age:16
            }
            var obj3 = $.extend(obj,obj2)
            console.log(obj)        //{name: "admin", age: 16}
            console.log(obj2)       //{age: 16}
            console.log(obj3)       //{name: "admin", age: 16}
            console.log(obj == obj3)    //true

            var obj = {
                Emma:function(){
                    console.log("hello Emma")
                }
            }

            $.extend($,obj)
            把obj加入$身上,合并到全局身上;$表示jQuery自身,jQuery大的dom对象为$.fn(js为            document)
    
            console.dir($)
            $身上有了Emma这个属性
    
            $.Emma()            //hello Emma
             $.ajax()都是向jQuery身上合并方法的方法
             $.get()
             $.cookie()
    
            $.extend($.fn,obj)
            $("body").Emma()    //hello Emma

            $().css()                //这是局部的
            $().animate()            //这是局部的

            
             接收一个对象时候
                var obj = {
                    liyang:function(){
                        console.log("Emma")
                    }
                }

                $.extend(obj)
                一个对象的时候会直接把对象合并到jQuery身上
                $.Emma()
                等同于$.fn.extend(obj)  $().Emma

               向jQuery身上添加方法,例如想增加一个banner方法
                $.fn.banner = function(){
                    console.log("hello banner")
                   }
                $().banner()

        
    向jQuery身上绑定方法
    1.创建插件的文件,命名:jquery.xxxx.1.0.0.js
    2.在新文件内定义匿名函数(保持独立的作用域)
    3.开严格模式
    4.匿名函数前后要加分号(前+不受其他代码影响,后+不影响其他)
    5.将jQuery传进匿名函数,使用$接收
        ;(function($){
            "use strict"
            // 合并方法
            $.banner=function(){}
            $.fn.banner=function(){}
            $.extend({banner:function(){}})
            $.fn.extend({banner:function(){}})
            $.extend($,{banner:function(){}})
            $.extend($.fn,{banner:function(){}})
        })(jQuery);
    </script>
posted @ 2019-05-28 14:43  进击的三三  阅读(161)  评论(0编辑  收藏  举报