Task 51: Multi-function albums

Task 51: Multi-function Albums

For the crowd:

Have a certain JavaScript base

Difficulty:

Difficult

Important Notes

Baidu Front-end Technical College's curriculum task is the front-end engineers of Baidu for the front-end different mastery of the level of students design. We try to ensure the quality of the course content and the rationality of learning difficulty, but even so, it is your every thought and practice to really decide the effect of the course.

The solution for most topics in the course is not unique, and it is consistent with what we do in the actual work. Therefore, our request is not only to achieve the effect of the design draft, but also to think more about different solutions, evaluate the pros and cons of different scenarios, and then use the most elegant way in this scenario to achieve. The solutions that are ultimately not adopted by us can also help us to learn a lot of knowledge. Therefore, the resources we have listed are not necessarily necessary to meet the needs. Sometimes, the requirements of the implementation of the topic is very simple, even in reference, but behind the thinking and practice is the most important part of the task. When studying these materials, we should think more, ask questions and question more. Believe that through the exchanges with the small partners, you can make your study more effective.

In addition, some groups are implemented by using JavaScript to write many xxx.style.xxx = ... of these forms. Although we can achieve the effect, we want the style to be controlled by CSS as much as possible, so it is better to set the style in the CSS file and use JavaScript to set the class name for the particular element. As we can see, many third-party libraries that are related to the interface provide CSS files, along with JavaScript, as part of the library, such as Jquery-jsonview.
Finally, the layout of the puzzle should be automatically based on the number of pictures the user gives, rather than the input parameters at the time of the call.

Purpose of this phase of the mandate task

• In phase fourth, you need to implement a third-party JavaScript library for Flexible, responsive, multi-purpose albums that can be used for full-screen browsing of images, slideshow playback, group paging, and more.

Task Description Phase III review

• In the third stage, we see that some of the group submitted jobs have been compared to the molding, but there are some common problems, here explain.
  First, when you crop a picture, you should put the picture in the middle of the horizontal and vertical direction (unless you provide an interface to let the user set the direction in which to align the crop). Take the two chart layout as an example, the cut off distance should be evenly distributed around the upper and lower, the specific proportion can be designed by themselves, but some groups completely cut off the right part of the practice is obviously inappropriate. Other layouts are similar, please check the effect of the different images of the aspect ratio in the photo album by yourselves.
• In addition, some groups are implemented by using JavaScript to write many xxx.style.xxx = ... of these forms. Although we can achieve the effect, we want the style to be controlled by CSS as much as possible, so it is better to set the style in the CSS file and use JavaScript to set the class name for the particular element. As we can see, many third-party libraries that are related to the interface provide CSS files, along with JavaScript, as part of the library, such as Jquery-jsonview.
  Finally, the layout of the puzzle should be automatically based on the number of pictures the user gives, rather than the input parameters at the time of the call.

Phase IV Description

• At this stage, each group needs to complete the full functionality of a third-party library of albums. Based on the JAVASCRIPT framework we provide, we implement the APIs we give by combining the implementation of the previous phase.
• Simple
  • Understand the API (learning material JSDoc) given at the end of the text, and add comments when you write your own code
  • Implementing the API
  • Write an example that calls the library and test the functionality as fully as possible
• Medium
  • Analyze the features of other existing album libraries, design and implement more layouts (such as fullscreen, grids, slideshows, etc.) and more possibilities under the puzzle layout
  • Design and implement more features (such as animations, interactions, etc.)
• Difficult
  • Learn to compare existing mainstream JavaScript testing frameworks: Jasmine, Mocha, Qunit, etc., choose the right tool, test your door's library as high as possible
  • If you feel that your project deserves to be used in the real world, consider building a project on GitHub for long-term maintenance, writing a ReadMe, documentation, testing, examples, and so on, perhaps the first open-source project you're being used by someone else (if you decide to do so, give that address when you submit your job, We will be long-term attention)
• The following is the framework we give, if in the implementation process found unreasonable or think there is a bug in the place, you can adjust the appropriate self.

• (function (window) {///because it is a third-party library, we use strict mode, as far as possible to identify potential problems ' use strict '; function Ifealbum () {//Layout enum type this.        Layout = {puzzle:1,//Puzzle layout waterfall:2,//Waterfall layout Barrel:3//cask layout};    Public variables can be written here//this.xxx = ...} Private variables can be written here//var xxx = .../************* The following is the public method provided by this library *************//** * Initialize and set the album * When the album originally contains pictures, this method     will replace the original image * @param {(string|string[])} Image a picture URL or an array of multiple picture URLs * @param {object} option configuration item            */IfeAlbum.prototype.setImage = function (image, option) {if (typeof image = = = ' String ') {            Packing array processing this.setimage ([image]);        Return    }//Your implementation}; /** * Get albums all images corresponding to the DOM element * can be not, but the outer element * @return {htmlelement[]} album all images corresponding to the DOM elements of the array */IFEALBUM.P    rototype.getimagedomelements = function () {}; /** * Add a picture to the album * in the puzzle layout, according to the number of pictures to recalculate the layout; other layouts under the tailAdd image * @param {(string|string[])} Image the URL of a picture or an array of multiple picture URLs */IfeAlbum.prototype.addImage = function (i    Mage) {}; /** * Remove pictures from albums * @param {(htmlelement|  Htmlelement[]} Image needs to be removed * @return {Boolean} removed all succeeded */IfeAlbum.prototype.removeImage = function (image)    {    }; /** * Set the layout of the album * @param {Number} layout value, value in Ifealbum.layout */IfeAlbum.prototype.setLayout = function (    Layout) {};    /** * Get the layout of the album * @return the value of the {number} Layout enumeration type */IfeAlbum.prototype.getLayout = function () {}; /** * Set the spacing between pictures * Note that this value only represents the space between the pictures, should not be used directly to the margin property of the picture, such as the left and top of the image should be close to the left side of the album and the top of the album itself padding is always 0, the user wants to modify the album Outer box empty    White needs to set the padding of the frame element by itself * @param the horizontal spacing between the {number} x Pictures * @param the vertical spacing between the pictures of {number} [y], if undefined is equal to X */    IfeAlbum.prototype.setGutter = function (x, y) {};    /** * Allow full screen view of images while clicking on images */IfeAlbum.prototype.enableFullscreen = function () {};    /** * No full screen view of images when clicking on images */IfeAlbum.prototype.disableFullscreen = function () {}; /** * Get full screen view when clicking on a picture is allowed * @return {Boolean} allows full screen browsing */IfeAlbum.prototype.isFullscreenEnabled = function    () {    }; /** * Set the upper and lower bounds of the number of pictures per line in the bucket mode * @param {number} min minimum picture (included) * @param {number} Max pictures (included) */Ifealbum.prototy Pe.setbarrelbin = function (min, max) {//Note exception handling, make a robust library if (min = = = Undefined | | max = = = Undefined | | m            In > Max) {console.error (' ... ');        Return    }//Your implementation}; /** * Get the maximum number of pictures per row of cask mode * @return {number} maximum pictures (included) */IfeAlbum.prototype.getBarrelBinMax = function () {}    ; /** * Gets the lower bound of the number of pictures per line of bucket mode * @return {number} minimum picture (included) */IfeAlbum.prototype.getBarrelBinMin = function () {}    ; /** * Set the upper and lower limits of the height per row of the bucket mode, in pixels * @param {number} min min Height * @param {number} max maximum height */ifealbum.prototype.s    Etbarrelheight = function (min, max) {};    /** * Get the upper limit of height per row of cask mode * @return {number} Max pictures (included) */IfeAlbum.prototype.getBarrelHeightMax = function () {};    /** * Gets the lower bound of the height of each row of the cask mode * @return {number} minimum picture (inclusive) */IfeAlbum.prototype.getBarrelHeightMin = function () {    };        The other interfaces you want to add/************* above are the public methods provided by this library *************///instantiation if (typeof window.ifealbum = = = ' undefined ') {    Window.ifealbum = new Ifealbum () is instantiated only when uninitialized; }} (window));

Task considerations

• The above description is only for the requirements description reference, not as an implementation of the design reference
• There are differences between the requirements described above and the rationality of real products, this task is based on technical learning, ignoring the problem of product design.
• Please note that the code style is neat and elegant
• The code contains the necessary comments
• Third-party frameworks, class libraries can be used rationally

Task Collaboration recommendations

• Brainstorm within the team to discuss and design new elements of the game
• If you are working on your own, you can do this in the following ways:
  • Team focused discussion, clear the topic requirements, ensure that the team each to the subject of cognitive consensus
  • Practice of accomplishing tasks individually
  • Cross-review other people's code, suggesting that everyone see at least one team member's code
  • Discuss each other and finally synthesize a copy of the best code within the group to submit
• If it is a division of work, you can divide the task according to difficulty

Task 51: Multi-function albums