Jquery 插件 实例

Posted 2020-08-02

先说明下应用场景，通过可配项的配置和默认项覆盖，获取指定的需求数据，填充到指定的位置（两个指定其实都是可配的）

(function($) {
    $.fn.extend({
        getOneNews: function(opt) {  //获取单条新闻信息
            
            var defaults = {
                newsId: "",
            };
            var options = $.extend(defaults, opt);
            var _this = this;
            _this.html("<p style=‘text-align:center‘>信息获取中，请稍后...</p>")

                  $.ajax({
                      dataType:"jsonp",
                      jsonp: "callback",
                      url:"xxxx/news/GetNewsById?newsid="+options.newsId,
                      success:function(res){
                          _this.html(res.obj.news_content)

                      },
                      error: function(){
                          _this.html("<p style=‘text-align:center‘>数据异常，请稍后再试！</p>")
                      }
                  });
        }
        
    })
})(jQuery)

采用闭包的方式，执行插件方法；

调取方式：

$(指定容器).getOneNews({

　　newsId: 配置参数

})

就这么简单！如果有多个插件，直接通过对象的方式写，使用方式一样同上。