js 插件的写法 类似JQuery

小小丁灬 发布于 2016/10/08 16:28
阅读 524
收藏 0
!(function(win){
    	    var com = {
    	        getById: function(id) {
    	        	var element= document.getElementById(id);
    	        },
    	        addClass:function(className){
    	        	
    	        }
    	    };
    	    win.com=com;
    })(window);
    
    com.getById("id").addClass("black");



如果想和JQuery一样,可以连续方法,应该怎么写?





加载中
1
彼小星
彼小星
        !(function(win){
            function Com(){
                this.element;
            }
            Com.prototype={
                getById: function(id) {
                    this.element= document.getElementById(id);
                    return this;
                },
                addClass:function(className){
                    this.element.className=className;
                    return this;
                }
            }
            win.Com=Com;
        })(window);
        var com1=new Com();
        com1.getById('mzz').addClass("black");
        var com2=new Com();
        com2.getById('zzq').addClass("blue");
0
Kinegratii
Kinegratii
在方法中 return this 即可 。
彼小星
彼小星
回复 @小小丁灬 : 因为你这里就只有一个对象呀,搞个构造函数就可以啦
小小丁灬
例如第一个 get方法,我 return this之后, addClass没有指定给哪个对象添加样式啊
0
szwx855
szwx855
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>xxx</title>

  
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
;(function(){
$.fn.extend({
   getById:function(id){
     return $('#'+id);     
   },

   addOClass:function(className){
     $(this).addClass(className);
   }
});
})(jQuery);
$(function(){
	$(document).getById("id").addOClass("aaa");
});

</script>


</head>
<body>
<a id='id'>test</a>
</body>
</html>



返回顶部
顶部