My first open source small project was finally born!

This small project (card show) is a card draw effect, with open source project such words make me somewhat ashamed, after all, as a inexperienced young man, with the project Standard measurement There is a big gap. However, the case is written in the form of JQuery plug-ins, providing configuration parameters and browser-compatible optimizations, as a small project in general. is currently being updated continuously.

Don't talk much, first address: Https://github.com/nzbin/CardShow/tree/master

Of course, bloggers write this article not to show off the Demo, but to communicate the writing of JQuery plugins and the various problems encountered in this project. There are a lot of bugs and imperfections in the plug-ins now, including some code redundancy, and more detailed disassembly and assembly later on.

First of all, the cause of the project, bloggers recently received a company arranged a lottery page, because of the time and other reasons, the last simple to achieve the function and added some animation effects. But when I first saw the design showing the user data in the form of a card, I thought I could do something a little more cool, and then I was thinking about it. such as card licensing, randomly arranged display and flip display and other effects. It turns out that there are a lot of problems in turning ideas into reality. You can click on the cardshow to see the effect of the automatic extraction card. The current effect of the basic realization of my original idea. The extraction effect of the card is mainly divided into automatic pumping and manual pumping of two kinds. Later, you add the ability to drag the card. I hope that we can download the source code modification parameters to see the effect, and put forward valuable comments so that bloggers can make changes in a timely manner, everyone's support is the greatest impetus for my progress.

Here are some of the problems I encountered while writing plugins, including JQuery plugin authoring, Modernizr use, CSS3 animations, transitionend events, shuffle algorithms, adjacent non-repeating random numbers, getting transform values, call () In-depth understanding, setTimeout blocking and so on, each piece to take out can write an article alone, this article is simply introduced, then will be a part of the deep discussion.

1. JQuery Plugin Authoring

Saying a lot of things look simple, it is difficult to do. If you don't understand the native JS objects, functions, prototypes, scopes, and the core ideas and methods of jQuery, it can be really difficult to write a plugin. For the JQuery plug-in writing I will not say, a lot of online search, more than I write better, I only paste the structure of the plugin I write. For the structure of the code I think for a long time also studied for a long time, finally borrowed some cases, feel the following structure clearer, more concise, more understandable.

;(function(window, $) {  //  plugin body  function(el,options) {      }   // Default configuration  $.plugin.defaults = {      }  //  prototype method  $.plugin.prototype = {      }  //  set JQuery plug-in  function(options    ) {return instance;  }}) (window, jQuery);

2. Use of Modernizr

Modernizr is also an old-style browser compatibility program, I believe we have already used or have heard. Although earlier knew this small thing, should be to contact Bootstrap when understand, but has not had the opportunity to use, until now write plug-in only found, use it to detect the properties of CSS3 and do compatibility scheme is really cool crooked. There are not many articles about Modernizr online, this is the official website document: Https://modernizr.com/docs, has been said very detailed, I will translate the article later.

3. Adjacent non-repeating random number

Solving this problem has made me feel a little fulfilled, though not perfect. This is equivalent to asking: write a function so that it can produce adjacent non-repeating random numbers? For this question I did not search the answer, the most searched is to produce a random number of non-repetition. This is completely two problems, the problem does not seem difficult, but the definition of contrast variables, but the problem is how to compare, how to write functions. Before I saw someone say "algorithm is like window paper", now deep experience. To solve this problem some of the elements of luck, think for a long time, at last, after a write, unexpectedly successful. Perhaps the problem itself is really not difficult. I recommend that you do not expand the code, write a function of their own, with the setinterval continuous output random number, can do not repeat adjacent. Also hope that everyone to give me a more perfect plan, welcome message.

 //  produces adjacent, non-repeating random numbers, n is a random number  //  Define a comparison variable, can it be encapsulated?     var  b = 0;  function   random (n) { var  a = Math.floor (Math.random () * n);  if  (a == b) { return   random (n);  else   {b  = A;         return   b; }    };

View Code

4. Shuffle algorithm

Shuffle algorithm of the original method by Ronald Fisher and Frank Yates, online can search many, the following is the JS method:

//array Random transform function    functionShufflearr (array) {varm =Array.Length, T, I; //While there remain elements to shuffle ...         while(m) {//Pick A remaining element ...i = Math.floor (Math.random () * m--); //and swap it with the current element.t =Array[m]; ARRAY[M]=Array[i]; Array[i]=T; }        returnArray; };

5. Get the value of transform

Because the animation is dominated by transition, the value of the transform of the element is continuously manipulated. But transform is a compound value, and it is difficult to take out certain values. My solution was simple and rude. I was in the console to print the transform when I found it was a matrix thing. About Transform's matrix knowledge we search by ourselves. is actually a string, as long as the split () method takes out a specific value. But there's a browser-compatible question. As we all know, transform2d is a 3x3 matrix, and Transform3D is a 4x4 matrix, and if you use the Transform3D attribute without giving a third value, the Firefox and Google browsers will output a 3x3 matrix, while the IE and Edge output 4x4 matrix.

This article continues to update ~

My first open source small project was finally born!