如果你只会JQuery的插件式开发, 那么你可以进来看看?
对于JQuery的学习,已经有3年多的时间了,直到去年与我的组长一起做项目,看到他写的JS,确实特别漂亮,有时甚至还看不太懂,
我才发现其实我不太会JQuery。所以我有时间就会去看看他写的JS代码,直到今天我都会很怀恋那段在清大的日子,是我人生思想道路上的一次艳遇。
我到现在都一直喜欢去看一些牛人的js文章,譬如像 (叶小钗,司徒正美,tom大叔)等人的文章都是很不错的。
上面的话说多了,来看看我如何输写JS代码,模块化的思路整理,大概有下面的几种情况:
第一种:教你如何在项目中编写一个可以通用的弹框,废除掉 alert("shit")
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
var alertBox = function (option) { //扩展区域 var options = { w: '', title: '提示:', msg: '', msgExt: '', MsgArr: [], yes_btn: "确定", no_btn: "取消", yesBool: true, noBool: true, ok_Fun: null, backgroundColor: '#DC0100', AutoFun: null //----自执行函数---- } //---继承合并,形成组合的options参数---- option = $.extend({}, options, option || {}); //--随机生成一个ID-- var obj_msgprint = "msgprint_" + parseInt(Math.random() * 1000); //--确定-- option.yes_btn = option.yesBool ? "<a id='a_activateYes' style= background-color:" + option.backgroundColor + " href='javascript:;'>" + option.yes_btn + '</a>' : ""; //--取消-- option.no_btn = option.noBool ? '<a id="a_activateNo" class="cancel" href="javascript:;">' + option.no_btn + '</a>' : ""; if (option.noBool) { noBtn = ""; } var allMsgArr = []; if (option.MsgArr.length > 0) { for (var item in option.MsgArr) { allMsgArr.push("<p class='big'>" + option.MsgArr[item] + "</p>"); }; } if (option.msg != '') { allMsgArr.push("<p class='big'>" + option.msg + "</p>"); } if (option.msgExt != '') { allMsgArr.push("<p style='text-align:center;'>" + option.msgExt + "</p>"); } var boxContentArr = ["<div id='" + obj_msgprint + "' class='albox' style='position:absolute;z-index:1002;display:block;width:" + option.w + "'> <div class='headbox' style='background-color: " + option.backgroundColor + "'>", "<p>" + option.title + "</p>", "</div> <div class='conbox' style='border-color: " + option.backgroundColor + "'><div class='txt'>" + allMsgArr.join('') + "</div> <div class='btnbox'>", option.yes_btn, option.no_btn, "</div></div></div>"]; $("body").append(boxContentArr.join('')); $("#a_activateNo,#a_closeActivate,#a_activateYes").click(function () { $("#" + obj_msgprint).hide(); mask.hide(); $("#" + obj_msgprint).remove(); mask.remove(); if (option.ok_Fun && (typeof (option.ok_Fun) === 'function') && $(this).is("#a_activateYes")) { option.ok_Fun.apply(); } }); //按下回车键 $(document).keypress(function (e) { var ev = e || event; if (ev.keyCode == 13) { $("#a_activateYes").trigger("click"); } }); //***************创建遮罩效果*****************/ var mask = $("<div id=\"maskOfDiv\"></div>"); //--Div遮罩---- $("body").append(mask); var sh = document.documentElement.scrollHeight, ch = document.documentElement.clientHeight, height = sh > ch ? sh : ch; mask.css({ "position": "absolute", "top": "0", "right": "0", "bottom": "0", "left": "0", "z-index": "1000", "background-color": "#000000", "display": "none", "height": height }); mask.show().css("opacity", "0.3"); $("#" + obj_msgprint).show(); //***************创建遮罩效果******************/ //-------居中提示类型--------- var dom_obj = document.getElementById(obj_msgprint); dom_obj.style.top = ((document.documentElement.clientHeight - $("#" + obj_msgprint).height()) / 2) + "px"; dom_obj.style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - $("#" + obj_msgprint).width()) / 2) + "px"; //------自动执行函数-------- if (option.AutoFun && (typeof (option.AutoFun) === 'function')) { option.AutoFun.apply(); } } window.alertBox = alertBox;
调用插件:
<script type="text/javascript"> alertBox({ msg: "干掉alert,你看行不行!", yes_btn: "alertBox"}); </script>
大家可以重点去学习,$.extend():
//---继承合并,形成组合的options参数----
option = $.extend({}, options, option || {});
截图效果:
==========================================================
第二种: 教你如何用js的 prototype 原型链模式,做一个通用的验证插件。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
调用插件:
<form class="familyClass">
<input type="text" class="Validate" name="Phone" id="Phone" value="@Model.Phone"
data-val="{type:'phone',initMsg:'请输入您的手机号!',sucMsg:'手机号码验证成功!',errorMsg:'请输入正确的手机号!'}"/>
<form> <script type="text/javascript"> var familyForm = new FormValidateCommon(".familyClass", false); familyForm.init(); familyForm.validatorAll(); </script>
上面的调用实现了很灵活的自动式标签绑定验证,但是只适合一种一个项目的通用样式的提示。
大家可以重点去学习,FormValidateCommon.prototype = {} :
截图效果:
============================================
第三种:用js制作实现一个漂亮的下拉框插件:selectPlus
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
调用插件:
<div class="order">
<div style="width: 124px;" class="seleitem"> <input type="hidden" name="pay-name" data-name="data" value="已支付"> <input type="hidden" name="orderPayNum" data-value="data" value="1"> <i id="opOption"></i> <a id="orderPay" class="show" href="javascript:void(0);" value="1">已支付</a> <p style="width: 140px; height: 55px;"> <a value="" href="javascript:void(0)" style="display: none;" class="">全部</a> <a value="0" href="javascript:void(0)" style="display: none;">未支付</a> <a value="1" href="javascript:void(0)" style="display: none;" class="current">已支付</a> </p> </div>
</div>
<script type="text/javascript">
$(function () {
</script>
截图效果:
======================================================================
第四种: 续 : selectPlus
对于上面的selectPlus我还有话要说,对于插件的思想,未必真的就很好,看了BootStrap的一些插件源代码,你会发现,它还结合了一种绑定式的思想。
对于上面提到的所有插件式写法,其实我们都可以用绑定式的思想去简化代码量。
在上面的代码中加上,加上如下代码:
(function ($) {
$.fn.selectPlus = function (option) {
//.........可以参考上面的selectPlus.......
}
//----------很简单的关键代码-------------------
$(window).on('load', function () {
//取得元素上带data-tip="on"的元素
$('[data-select="on"]').each(function () {
$(this).selectPlus();
})
})
});
调用变成了这样:
<div class="order" data-select="on"> //.............. </div>
希望小伙伴们也都能领悟,吃饭了哦!