This is the fifth day of my participation in the August More text Challenge. For details, see:August is more challenging

Before the development process did not care too much about the front-end method of encapsulation, recently in the project to see others encapsulation method, it is too useful, their summary, good things should be shared

  • Before the development process did not care too much about the front-end method of encapsulation, recently in the project to see others encapsulation method, it is too useful, their summary, good things should be shared
  • Form validation is not empty:
  • In the past, I will need to validate the field in JS to get the variable of this field, and then judge whether the variable is null, I believe you are the same, so take a look at the improved method. ‘/**
  • Validate form

* /

function validForm() { var b = true; <input type="..." style =" font-size: 14px;" Verify = "decimal" MSG = "user name" / > $(" body "). The find (" * ".) each (function () {if (typeof ($(this). Attr (" verify "))! = "undefined") { var data = $.trim($(this).val()); If (data.length < 1) {var MSG = $(this).attr(" MSG ") MSG += ", cannot be null "; $(this).focus(); alert(msg); b = false; return b; } else {/ / legal checking b = validData (data, $(this). Attr (" verify ") and $(this). Attr (" MSG ")); if (! b) { return b; }}}}); return b; } `Copy the code
Where - encapsulates the advantages of this method, see the inside of the traversal methods, this method will traverse the page all conform to the conditions of the space is not empty, you might say he is how to screen this condition, see the verify, we only need in the JSP page above the control of the need to verify to fill a verify field, There's no value attached to this field, which tells me that this space needs to be non-null. Here I just mentioned a non-empty verification, if the verification of some other rules can be passed in the Verify value, this reader can expand, the implementation of good, hope you can also send me, let me look at. - Below the post is an examination written by a big man in our companyCopy the code
Function validData(value,type, MSG){// validData(value,type, MSG){// validData(value,type, MSG);  if (type == 'number') { var reg = /^[0-9]*$/ if (! Reg.test (value)) {alert(MSG +", not number "); return false; }} / / verify Email address: if (type = = 'Email') {var reg = / ^ w + (+ / - +. W) * @ w + +) ([-] w *. W + +) ([-] w * $/ if (! Reg.test (value)) {alert(MSG +", "); return false; }} / / cell phone number: ^ (13 [0-9] 14 [5] | 7 | | 15 [0 | 1 | 2 | 3 | | 5 6 7 | | | 8, 9] | 18 [0 | 1 | 2 | 3 | | 5 6 7 | | | 8, 9]) \ d {8} $or var regMobile = / ^ 1/3,5,8 \ d {9} $/; If (type = = 'phone') {var reg = / ^ 1/3,5,8 \ d {9} $/ if (! Reg.test (value)) {alert(MSG +", not phone number "); return false; }} // Verify the phone number: : -- The correct format is xxxx-xxxxxxx, XXXX-XXXXXXXX, XXX-XXXXxxx, XXX-XXXXXXXX, XXXXXXX, XXXXXXX, XXXXXXXX. If (type = = 'telephone') {var reg = / ^ ({3, 4} (d) | d {3, 4} -)? D {7, 8} $/ if (! Reg.test (value)) {alert(MSG +", not phone number "); return false; }} / / verification identification number (15 or 18 Numbers) : the if (type = = 'ID') {var reg = {15} / ^ d | d {} $18 / if (! Reg.test (value)) {alert(MSG +", invalid "); return false; }} // non-negative floating-point number (positive floating-point number + 0) : ^\d+(\.\d+)? $or ^ [1-9] \ d * \ \ d * \ | 0. [1-9] \ d \ d * * | 0? \. | 0 0 + $if (type = = 'decimal') {var reg = / ^ \ d + (\. \ d {0, 5})? $/ if (! Reg.test (value)) {alert(MSG +", incorrect format (value type, allowed to 5 decimal places) "); return false; }} // Verify the user password. The password must start with a letter and contain 6 to 18 characters, digits, and underscores (_). If (type = = 'password') {var reg = / ^ w [a zA - Z] {5} in 2 $/ if (! Reg.test (value)) {alert(MSG +", the format is incorrect \n The correct format is: start with a letter, length is 6 to 18, can only contain characters, digits and underscores "); return false; } } return true; }Copy the code
  • In the front end we in addition to verification may encounter the most is the transfer of data with the background, I used to use the framework of the package to pass, there is my own manual Mosaic of JSON, now look at a package of specified control tools
/ / function getFormData() {var jsonArray = [], data = {}; <input type="..." type="..." column="columnA"/> $("input").each(function(i, e) { if (typeof ($(e).attr("column")) ! = "undefined") { data["" + $(e).attr('column')] = $(e).val(); }}); // Select * from columnA where columnA = columnA where columnA = columnA where columnA = columnA; </select> $("select").each(function(i, e) { if (typeof ($(e).attr("column")) ! = "undefined") { data["" + $(e).attr('column')] = $(e).val(); }}); // Select * from 'columnA' where 'columnA' = 'columnA'; // Select * from 'columnA' where 'columnA' = 'columnA'; </textarea> $("textarea").each(function(i, e) { if (typeof ($(e).attr("column")) ! = "undefined") { data["" + $(e).attr('column')] = $(e).val(); }}); jsonArray.push(data); Eg: "[{'columnA':'valueA','columnB':'valueB'}]" var jsondata = {" ZXH ": JSON.stringify(jsonArray) }; return jsondata; }Copy the code
- This is the same as validation, I take the values of all the columns in the JSP space and encapsulate them in JSON. The name in THE JSON is the name of the column property, and then return the string. We can pass the string as a parameter to the background in Ajax. Because the parameter is ZXH, so I need to accept in the background to accept this ZXH, so we get the DATA in THE JSP, in the background to get the data, as a programmer you should knowCopy the code
  • 3 Load the space in the JSP
  • For example, now I have a select space in my JSP, and I need to get the data in the background when the page is initialized, and you can write it yourself, but if I say that this JSP has 100select, do you want to write one at a time? The answer, of course, is NO. Again, I assign a value to the column attribute of each select in the JSP, and then I pass the column in the generic function, which will load the column box into the specified select position
/** * @param jsonArray */ function loadSelectData(jsonArray,select) {$("select[column='"+select+"']").  $. Each (jsonArray, function(I) {var data = jsonArray[I]; $("select[column='"+select+"']").append('<option value="'+data.ID+'">'+data.NAME+'</option>'); }); }Copy the code
  • I’m not going to go through all of the methods below, but in general, don’t limit yourself to the attributes that Kong gives us, and be good at customizing them
  • 4 js operation cookies
  • Do you know session and cookie, JavaWeb developers are the most attribute of the two things, but we use the most is in the background operation, in the foreground is the first time to hear it, I believe many friends have forgotten how js cookie operation,
  • So here we’re going to use document
Function _setCookie(key, value, time) {var strsec = getSec (time); var exp = new Date(); exp.setTime(exp.getTime() + strsec * 1); document.cookie = key + "=" + escape(value) + "; expires=" + exp.toGMTString(); }Copy the code
  • Since you can set the time of the cookie, you must have a way to get the time
Function getsec(STR) {var str1 = str.substring(1, str.length) * 1; var str2 = str.substring(0, 1); if (str2 == "s") { return str1 * 1000; } else if (str2 == "h") { return str1 * 60 * 60 * 1000; } else if (str2 == "d") { return str1 * 24 * 60 * 60 * 1000; }}Copy the code
  • Now let’s get the cookie
/ / get the cookie function _getCookie (key) {var arr, reg = new RegExp (" (^ |) "+ key +" = (/ ^; (*). | $) "); if (arr = document.cookie.match(reg)) return unescape(arr[2]); else return null; }Copy the code
  • Since javascript must act like Java to manipulate cookies, we still need a method to delete cookies
Function _delCookie(key) {var exp = new Date(); exp.setTime(exp.getTime() - 1); var cval = _getCookie(key); if (cval ! = null) document.cookie = key + "=" + cval + "; expires=" + exp.toGMTString(); }Copy the code
  • So that’s the basic cookie operation at this point. It’s gone. Now let’s talk about Ajax, as we mentioned above, how encapsulated JSON is passed into the background, Ajax, yes, it is the king of web development, without it we would be unemployed
  • Ajax synchronization
  • async: falseSo that’s all we need to do. The default is true and we need to do some synchronization, so we just change async to false
  • Ajax asynchronous
  • async: trueIs it easier to write this sentence asynchronous, or is it asynchronous to write nothing at all
  • Does Ajax send? Won’t? $.ajax(url,param,success,error); This is the most basic Ajax, and there are a lot of other ways to transform it, the reader can Google or read the manual
  • Front-end art is an industry that can’t be ignored. When it comes to CSS, the most feared thing is the browser version problem, so we need to know our browser version
$(document).ready(function() { if (navigator.userAgent.match(/msie/i) ){ alert('I am an old fashioned Internet Explorer'); }});Copy the code
  • This is useful because sometimes our navigation buttons need to be fixed in this way, and our toolbars need to be fixed at the top
$(function(){ var $win = $(window) var $nav = $('.mytoolbar'); var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top; var isFixed=0; processScroll() $win.on('scroll', processScroll) function processScroll() { var i, scrollTop = $win.scrollTop() if (scrollTop >= navTop && ! isFixed) { isFixed = 1 $nav.addClass('subnav-fixed') } else if (scrollTop <= navTop && isFixed) { isFixed = 0 $nav.removeClass('subnav-fixed') } }Copy the code
  • Replace HTML tags with something else jQuery makes it easy to replace HTML tags with something else.
`$('li').replaceWith(function(){ return $(" ").append($(this).contents()); }); `Copy the code
  • It’s also important to check the width of the Windows. Our users like small screens or large ones, and your site needs to fit on all screen sizes in order to win over them

var responsive_viewport = $(window).width();

  • Check for copying, pasting, and cutting. Your site, if not demanding, will allow users to assign values to things on your site,
 $("#textA").bind('copy', function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste', function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut', function() {
    $('span').text('cut behaviour detected!')
});
Copy the code
  • Now the development of the network is fast, many websites hope to improve their traffic, will be sent to some well-known websites outside the chain (I also often dry, but I are sent others need, not that kind of water army), so we can prevent
 var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});
Copy the code
  • Disables the space bar when entering text or passwords
$('input.nospace').keydown(function(e) { if (e.keyCode == 32) { return false; }});Copy the code
  • Page display is also the front end of the dish, the most common display is paging display, our data may be tens of thousands of data, you want to show all at once, of course not, we show the use of paging, below I briefly introduce several paging plug-ins

JqPagination is an easy to use lightweight jQuery pagination plugin that uses HTML5 and CSS3 technologies. This plug-in provides several parameter setting options to generate paging controls with simple configuration. In addition, its appearance style is customizable and very extensible

  • This is the one I use the most, and readers can read it in conjunction with another of my articlesBlog.csdn.net/u013132051/…
  • Now, if you know how to do pagination, let’s look at some of the other paging effects

  • +++++++++++++++++++++++++++++++++++++++++++
  • Next I will talk about the display framework, I use the most is jQuery, Bootstrap

Datagrid is the most used to display data, and recently MMGrid is used. In fact, both are similar, only need to understand the process of these is not a matter, to readers recommend these urls

  • MmGrid: miemiedev. Making. IO/mmGrid/exam…
  • The datagrid: www.php1.cn/Article/ind…
  • JQuery EasyUI:www.runoob.com/jeasyui/jqu…
  • Bootstrap:www.runoob.com/bootstrap/b…
  • In the future, I will organize the Introduction of websites commonly used by Programmers.

– In order for a website to be friendly, it needs to have a pop-up layer with several pop-up layers underneath

These layers can be styled or defined by themselves. How to use this plugin

  • Download the jar package (sc.chinaz.com/tag_jiaoben…)
  • Decompress the file and then import the JS and CSS into your own project
<link href="<%=request.getContextPath()%>/resources/common/Css/dialog.css" rel="stylesheet"/>
<link href="<%=request.getContextPath()%>/resources/common/Css/dialog-theme.css" rel="stylesheet" type="text/css">
Copy the code
  • When you need to use someone else’s style, you must follow someone else’s style to write
<div class="open btn" id="btnVerify"> <span><img SRC = "< % = request. GetContextPath () % > / resources/common/images/upload - white. PNG" > < / span > < I > review < / I > < / div >Copy the code
  • And that’s it
  • Here the front end summed up so much, the following will summarize some methods of attention to the background, in one more word, the programmer most need is the mentality, progress a little bit every day, a year later you will be different