Frontend programming improvement journey (1) ---- plug-ins, journey ----

Frontend programming improvement journey (1) ---- plug-ins, journey ----

There are a lot of valuable web pages collected on a daily basis, and data collection is not a happy thing. Instead, the more you put pressure on your inner, the more you bother yourself, the more you miss the opportunity to improve. Therefore, this series of articles is intended to explore the front-end programming sense, but also to relieve the inner pressure and improve themselves. The content of this partial article is from the user's blog.

Example 1:

<! DOCTYPE html> 

 
This example is very simple to create a toolbar. The outer div is nested with a div. The animate function is used to set the background color and text of the inner layer. The change method is used to trigger the response and dynamic effect on the entire page.

Example 2:

$ (Document ). ready (function () {// rolling event. When rolling the window element, call the rolling event $ (window ). scroll (function () {// display the position of the scroll bar $ (". fixed "pai.html (document. body. scrollTop | document.doc umentElement. scrollTop); var t = document. body. scrollTop | document.doc umentElement. scrollTop; // when the navigation bar is invisible, redefine the navigation bar position if (t> 100) {// 100 as the navigation bar height $ ("# nav" ).css ({"position ": "fixed", "top": "0px", "left": "0px"});} When else {// returns to the original position of the navigation bar, restore the navigation bar position $ ("# nav" ).css ({"position": "", "top": "", "left ": ""});}});});


This code triggers the function by sliding the scroll bar, and uses the distance between the navigation and the top of the browser as the condition to change the id to the nav position, it is intended to keep the element nav at the top of the field of view.

Example 3:

$ (Document ). ready (function () {// initialization content for (var I = 0; I <3; I ++) {$ (". flow "). each (function () {$ (this ). append ("<div style = \" width: 90%; height: "+ getRandom (200,300) +" px; margin: 5px auto; background: #159; \ "> </div>") ;}; (window ). scroll (function () {// var scrollTop = document. body. scrollTop | document.doc umentElement. scrollTop; // page height var pageHeight = $ (document ). height (); // The height of the visible area var viewHeight = $ (window ). height (); // alert (viewHeight); // if (scrollTop + viewHeight)> (pageHeight-20) {if (scrollTop <1000) When scrolling to the bottom) {// prevent unlimited growth for (var I = 0; I <2; I ++) {$ (". flow "). each (function () {$ (this ). append ("<div style = \" width: 90%; height: "+ getRandom (200,300) +" px; margin: 5px auto; background: #159; \ "> </div>") ;}}}}) ;};/** obtain a random number in the specified range * @ param min, minimum value * @ param max, maximum value */function getRandom (min, max) {// x upper limit, lower limit y var x = max; var y = min; if (x <y) {x = min; y = max;} var rand = parseInt (Math. random () * (x-y + 1) + y); return rand ;}





This code is a typical waterfall Stream construction code. You only need to add the image to the inside of the div. The scroll bar trigger function allows you to randomly load the div width within a certain range and connect it to the original div to form the effect of edge pulling and edge loading.
Example 4:

$. Extend ({wordScroll: function (opt, callback) {// alert ("suc"); this. defaults = {objId: "", width: 300, // The width height of each row: 100, // The height of the div liHeight: 25, // The height of each line lines: 2, // The number of rows to be rolled each time speed: 1000, // action time interval: 2000, // scroll interval picTimer: 0, // interval handle, no need to set, only use isHorizontal: false // whether to scroll horizontally} // The parameter initialization is used as the identifier to check whether new parameters are passed in. If so, update the initialization setting var opts =$. extend (this. defaults, opt); // vertically and horizontally $ ("#" Export opts.objid).css ({width: opts. width, height: opts. height, "min-height": opts. liHeight + "px", "line-height": opts. liHeight + "px", overflow: "hidden"}); $ ("#" + opts. objId + "li" ).css ({height: opts. liHeight}); if (opts. lines = 0) opts. lines = 1; // if (opts. isHorizontal) {$ ("#" Export opts.objid).css ({width: opts. width * opts. lines + "px"}); $ ("#" + opts. objId + "li" ).css ({"display": "block", "float": "left", "width": opts. width + "px"}); // the horizontal line shows $ ("#" + opts. objId + "ul" ).css ({width: $ ("#" + opts. objId ). find ("li "). size () * opts. width + "px" // Number of li selector output, multiplied by width}); // used horizontally. if one screen is not displayed, the image is not rolled if ($ ("#" + opts. objId ). find ("li "). size () <= opts. lines) return; var scrollWidth = 0-opts. lines * opts. width;} else {// do not scroll if ($ ("#" + opts. objId ). find ("li "). size () <= parseInt ($ ("#" + opts. objId ). height ()/opts. liHeight, 10) return; var upHeight = 0-opts.lines * opts. liHeight;} // horizontal scrolling function scrollLeft () {$ ("#" + opts. objId ). find ("ul: first "). animate ({marginLeft: scrollWidth}, opts. speed, function () {for (I = 1; I <= opts. lines; I ++) {$ ("#" + opts. objId ). find ("li: first "). appendTo ($ ("#" + opts. objId ). find ("ul: first");} $ ("#" + opts. objId ). find ("ul: first" ).css ({marginLeft: 0}) ;};}; // vertically scroll function scrollUp () {$ ("#" + opts. objId ). find ("ul: first "). animate ({marginTop: upHeight}, opts. speed, function () {for (I = 1; I <= opts. lines; I ++) {$ ("#" + opts. objId ). find ("li: first "). appendTo ($ ("#" + opts. objId ). find ("ul: first");} $ ("#" + opts. objId ). find ("ul: first" ).css ({marginTop: 0}) ;};}; // stop automatic playback when you move your mouse over the focal point, automatic playback starts when sliding out. $ ("#" + opts. objId ). hover (function () {clearInterval (opts. picTimer) ;}, function () {opts. picTimer = setInterval (function () {// judge whether to perform horizontal or vertical scrolling if (opts. isHorizontal) scrollLeft (); else scrollUp () ;}, opts. interval); // The interval between automatic playback, in milliseconds }). trigger ("mouseleave ");}})


This code is a plug-in that enables horizontal or vertical scrolling of text. If you want to understand the working principle of the plug-in, you need to read the two pages to understand the usage of the extend function. After learning about the extend usage, you can find the plug-in, as shown in the first three pieces of code. The difference between the jquery plug-in and the above three pieces of code is that after the extend method, the internal object wordScroll becomes the object included in jquery, which can be referenced as follows:


$.wordScroll({});


Some default attributes are set in the plug-in. When some variables are passed in, those that are repeated by default will be overwritten and those that are not passed in will remain unchanged. The following code implements this function:
var opts = $.extend(this.defaults,opt);
The remaining content is what the four pieces of code have in common. The structure, style, and interaction logic code are designed in the code. That is to say, the extend function and the code above are used, jquery extension is a plug-in. The first few articles cited by the blogger are plug-ins. The plug-in indeed adds the "simple and reliable" feature and increases encapsulation, but encapsulation involves interaction, style, and structure, reducing the readability of the Code, in this case, plug-in development is a double-edged sword.

How to Improve front-end web development
I have been working in the front-end field for six years. I can say that when I was working in Xiamen, there were almost no front-end jobs in China at that time, and there was almost no front-end job. Either an artist or a program. But now, as long as you are a network company, if you don't have a front-end employee, you are too embarrassed to say that you are also doing technology.

In the past few years, I have been to three major companies, and I have learned different things from each other. Of course, I do different things, until now, I will use NotePad to directly write div + css and javascript. I will also do my spare ps, flash, e-album, seo optimization; Background code asp.net, php, java (not professional, but can be understood and modified ). Of course, I can only say that it is my achievements over the past six years, but it is important to learn some experience, that is, to answer your questions about how to improve your front-end level.

First, if you are working on the front-end, you should look far away. Now the technology is updated very quickly. If you are still using slides and lightbox effects, you are not doing front-end materials. You can only say that you are dealing with people, or that you will only apply the results code written by others.

Second, we need to increase our own value. Don't learn div + css, so you don't want to learn other technologies. always think about your own dangerous situation. There are too many people who know div + css, I learned about div + css in 3 days of online tutorials, and accumulated excellent materials in 10 days. I also came from that era. Learn more about your own value. For example, in addition to div + css, you can learn some background languages such as php and java.

Finally, sharing is about showing your own values. There is no jquery in China, and there is no smarty. What is so useful in China is not capability, but sharing. I think that writing a small thing is amazing and hiding my own things is actually a bad situation for us.

I hope you can remember these things and help your career. In a few years, when you look back at the things I wrote to you, you will have a deeper understanding. Here are some materials for front-end development. You can pay attention to the front-end website, chinese webmaster, Or I often pay attention to Xiami webmaster. Make more contributions to China's frontend. Come on.

Is front-end web development fun? What about software development?
After development experience, it is generally promoted to the project manager or director. It is best to start your own business after you have accumulated experience and mature products. Or provide the technology by yourself.
In fact, when we do the same job, there will be a bottleneck to a certain extent, and it is a little difficult to improve it. When we do not enter, we will leave the stage.
However, if you are a human being, you can solve the problem and raise it to a new level. This is a process in which people keep improving.
What line does it do? Depending on your own interests, software development is still good, but it is best to have a higher degree or higher in development.