我这样写的理由
1，为什么要采用自调函数的方式创建对象
1.1，（采用自调函数）自调函数创建的变量是局部的不是全局的，调用的时候创建不调用的时候销毁，这样就能避免全局变量过多引起的麻烦
1.2，（采用对象的方式），他可以实例化多个对象，很方便
2，为什么要采用扩展jQuery（或者Zepto）的方法
2.1现在基本上都用到jQuery或者Zepto,而且Zepto号称移动端的jQuery，他们有大多数都一样，基本上写出来的东西是可以通用的
2.2通过jQuery的方法可以调取是否要实例化自己要创建的对象，并且可以很好的实现在相对元素中的查找，从而提高查找的执行效率
3方便小组各个成员之间的配合
我的代码示例：已下架原因页面进行说明 ：
从结构上看，我的代码是这样的 :
在这里面看我的代码分为两段，一般来说在js文件里面该代码只应该有上面一段，第二段是方法的调用，应该是在html结构页面里面，属于方法的调用，便于修改你要实例化的html结构，以及初始化的一些值
1，第一段代码，我创建了一个叫做commodity_off的对象和扩展了jQuery的commodity_off的方法
1.1，先说一下commodity对象
1.1.1我采用自调函数的函数创建了一个Fun的对象，并将其赋值给了commodity_off，在该对象创建中可以声明一些相对“全局的变量”实现对象中各个方法的直接调用
1.1.2在我声明的这个对象中我采用了prototype来扩展了方法对象的方法，比如定义了初始化方法（init）,返回事件方法（binBack）,获取数据的方法（getData）....一般我会在init中实现对每个方法的控制调用，这样会让逻辑更加清晰，便于控制。
1.1.3对于为什么里面要出现that
这样是为了，当方法里面有点击事件调用this指代点击按钮的时候，方便调用commodity_off这个对象。
1.2，说一下扩展jQuery方法，
1.2.1 在该方法中我们可以看声明了一个options变量，这个是默认的配置参数，如返回按钮（backButton）是[data-bind='back']的这个元素，查看更多按钮是（readMore）是[data-bind='read_more']按钮...一般我是采用如果有点击事件的绑定的话我会采用data-bind这个属性，如果是获取框的话如加载动态动画（loadingBox）,我采用data-id的方式去编写的
1.2.2该方法中有一个extend是参数的扩展，以外面调用时传递的参数为准，外面有的以外面的为准，外面没有的以默认的参数为准
下面的就是实例化对象，实例化了多个对象
2.再说说第二段代码
这个可以重置默认的参数
为什么要在html结构中进行调用呢，在html结构中调用就可以实现js代码的公用，便于修改，当不传参数以默认配置的参数为准。
为什么要用默认参数的方式，调用时传递参数的方式呢，这样的理由是在开发中有些初始化的值或者接口可能暂时没有给到，咱们可以模拟线上的请求或者数据写咱们的代码，待借口一些值确定后直接在调用方法的时候重新赋值就可以了
3，对于便于小组各个成员之间的开发，因为我采用自调函数的方式编写代码，从而降低了代码的耦合性，从而便于多个人员对同一个页面的代码的js的编写，而又互不影响。有时候咱们的代码的变量可能会公用，我们一般会采用全局变量的方式，为了降低全局变量过多，我们一般会采用各公共命名空间来声明这些变量
对于对象中方法的调用我进行详细一点的说明
比如我要调取对象中的查看更多的方法，调取去购买的方法，直接用that.bindReadMore方法
和that.gotoBuy方法就可以了
全局代码如下
(function ($) {
var commodity_off = (function () {
var Fun = function () {
var that = this;
that.options = arguments[1];
that.init();
};
// 初始化
Fun.prototype.init = function () {
var that = this;
that.bindBack(that.options.backButton);
var thisLocation = window.location.href;
relation_id = window.location.href.split("=")[1];
var goodsDetail = that.getData("/index.php/App/Goods/getDisableReason", {relation_id: relation_id});
$(that.options.loadingBox).css("display", "none");
if (goodsDetail.status == 0) {
goodsDetail.upload_host=upload_host;
goodsDetail.value.reason_img_url = goodsDetail.value.reason_img_url.split("cutting");
that.template(goodsDetail, that.options.container, that.options.templateId);
that.layout();
that.loopImg();
}
else {
setTimeout(function () {
location.href = "/index.php/Weixin/User/index"
}, 300);
alert(goodsDetail.value);
}
that.bindReadMore(that.options.readMore, that.options.wordContainer);
that.gotoBuy(that.options.gotoBuy);
};
//返回
Fun.prototype.bindBack = function (backButton) {
var that = this;
$(backButton).on("click", function () {
history.back();
});
};
//格式化数据
Fun.prototype.bindReadMore = function (moreButton, wordContainer) {
var that = this;
$(wordContainer).css("height", "auto");
var currentHeight = $(wordContainer).height();
console.log(currentHeight);
if (currentHeight < 88) {
$(moreButton).closest("div").css("display", "none");
$(wordContainer).css("height", "88px");
} else {
$(wordContainer).css("height", "88px");
}
$(moreButton).on("click", function () {
switch ($(this).attr("data-type")) {
case "more":
$(wordContainer).css("height", "auto");
$(this).attr("data-type", "less");
$(this).removeClass("arrow-dowm").addClass("arrow-up");
$(this).attr("data-type", "less");
break;
case"less":
$(wordContainer).css("height", "88px");
$(this).attr("data-type", "less");
$(this).removeClass("arrow-up").addClass("arrow-dowm");
$(this).attr("data-type", "more");
break;
}
});
};
//获取数据
Fun.prototype.getData = function (ajaxUrl, ajaxData) {
var that = this;
var _response;
$.ajax({
type: "POST",
url: ajaxUrl,
data: ajaxData,
dataType: "json",
async: false,
success: function (response) {
_response = response;
}
});
return _response;
};
//模板
Fun.prototype.template = function (data, container, id, type) {
var html = template(id, data);
switch (type) {
case "append":
$(container).append(html);
break;
case "prepend":
$(container).prepend(html);
break;
case "before":
$(container).before(html);
break;
case "after":
$(container).after(html);
break;
case "instead":
$(container).html(html)
break;
default :
$(container).html(html);
break;
}
};
Fun.prototype.gotoBuy = function (gotoButton) {
$(gotoButton).on("click", function () {
location.href = "/Assert/Weixin/www/group/af_goods_detail.html?goods_id=" + $(this).data("goods_id");
})
};
Fun.prototype.layout = function () {
var that = this;
var _height = $(that.options.picContainer).find("li").width();
$(that.options.picContainer).find("li").css("height", _height);
$.each($("#uploaderFiles img"), function (i, item) {
var _thisSrc = $(item).attr("src");
$(item).attr("data-src", _thisSrc);
$(item).attr("src", _thisSrc + "?x-oss-process=image/resize,m_fill,w_" + _height + ",h_" + _height);
});
};
Fun.prototype.loopImg = function () {
var _isWeixin = isWeiXin();
var _imgList = new Array;
var _currentImg;
if (_isWeixin) {
//配置微信
wx.config({
debug: false,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: '<?php echo $signPackage["timestamp"];?>',
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: ['previewImage'] //把要调用的微信sdk接口全都写到该数组里边
});
$("#uploaderFiles img").on("click", function () {
_imgList = new Array;
_currentImg = $(this).attr("data-src");
$.each($("#uploaderFiles img"), function (i, item) {
_imgList.push($(item).attr("data-src"));
});
wx.previewImage({
current: _currentImg,
urls: _imgList
});
});
}
else {
mui.previewImage();
}
};
return Fun;
})();
$.fn.commodity_off = function () {
var options = {
backButton: "[data-bind='back']",
readMore: "[data-bind='read_more']",
gotoBuy: "[data-bind='to_buy']",
wordContainer: "[data-id='word_container']",
templateId: "unshelf_product",
container: "[data-id='content']",
loadingBox: "[data-id='loading_box']",
picContainer: "#uploaderFiles"
};
$.extend(options, arguments[0]);
$(this).each(function (index, item) {
new commodity_off($(item), options);
});
}
})(jQuery);
$("body").commodity_off();
扫一扫
122
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
