Cross-platform front-end framework learning--bootstrap,jquery,angular

According to my understanding the front-end development framework can be divided into three types:

UI Framework: This section, like Bootstrap, defines a set of CSS style styles, helps layout, provides several components that can be used directly, and we can use only the components it provides without having to design the UI ourselves

Tool-like frameworks: such as jquery (PC-side)/jquery Mobile (mobile), although they are more accurate to the class library, but they are integrated with the DOM operation, Ajax interaction, events and animation tools, can help to solve the browser compatibility, as a framework

Framework for organizing code: such as angular, which does not provide the same functionality as jquery (like a plugin), it helps us to better organize code, define modules, and populate specific business logic.

Here is a brief summary of the three frameworks.

One bootstrap several major features:

1. Responsive design (grid system) This is the largest feature of the bootstrap, the page width is divided into 12 columns, the width of the column is not fixed, according to the visual page 12 equal, greatly simplifying the div layout operation, and the use of CSS Media query technology to achieve responsive style design.

I think this technology is bootstrap the most moving place, reduce the developer for the PC, mobile development responsive layout of the difficulty, browser compatibility is also doing quite good, but from the beginning of bootstrap3 completely abandoned IE7 and the following version, but I think the future of the various types of site target users, The use of IE7 will only get smaller and fewer.

2. Bootstrap provides a set of custom CSS stylesheets that are developed based on the most popular CSS preprocessing scripts-less and Sass, and can customize their own styles.

Personal view: Provide CSS components This needless to say, Bootstrap flat design style minimalist, but slightly bloated, if only to use one or two of these components and choose bootstrap is not necessary, about CSS preprocessing technology, the advantage is that you can use variables in CSS, Simple logic programs, functions to avoid repeating the same type of variable definitions, and to reduce redundant code due to processing compatibility

As a simple example, when we use csssprite technology, we put multiple pictures on a picture and then background-image,background-position to locate the different effects, so as to reduce the HTTP request, But the HTTP request is less, the developer workload is big, to locate the picture is not a very convenient thing, very troublesome, to calculate one by one, using precompilation will be much easier

@for $i from 0 to 17{. d-icon-#{$i} {background-position:-0-#{+ $i *30}px;}}

Can replace:

. d-icon-0 {background-position:0 -0px;}. d-icon-1 {background-position:0 -30px;}/* ... d-icon-17 {background- Position:0 -510px; }

Lots of code defined in the same way.
But it also has shortcomings, is the pre-compiled CSS step to join, improve the learning threshold.

Two Jquery/jquery Mobile

Jquery/jquery Mobile The relationship between the two is simply that jquery is more suitable for the traditional web, and jquery Mobile is based on jquery, on the mobile side of the expansion, so that web development looks more like mobile applications. The development of WebApp using jquery MOBILE+HTML5 is now the front-end development of a more popular trend.

Jquery/jquery Mobile, as a lightweight JS library, is not a powerful feature that encapsulates DOM operations, supports a number of events, is perfectly compatible with CSS3, can animate elements, simplifies AJAX operations, Backstage simply return a JSON-formatted string to complete the communication with the foreground, rich third-party plug-ins, extensibility, JQuery provides an extension interface: Jquery.extend (object), you can add new functions in the JQuery namespace.

Jquery/jquery Mobile's core is to let us write the fewest JS code, to achieve the most complete front-end function, said or like a plug-in (╯-╰)

Three angular

Angular has several major features:

1. Bidirectional binding This is almost angular's most appealing feature, whenever the data model changes (such as when the user selects a different order in the drop-down menu), the ANGULARJS data binding will automatically update the view. There is no clumsy DOM operation and no event listener required!

2. Modularity of the Code

3. Dependency Injection

4.directives (instruction)

Cross-platform front-end framework learning--bootstrap,jquery,angular