Isscroll and several other mobile tools introduced

This digest from CSDN

Apache Cordova

• Apache Cordova is a set of device APIs that allow mobile app developers to use JavaScript to access the capabilities of local devices, such as cameras and accelerometers. It can be used in conjunction with UI frameworks such as jquery Mobile or Dojo mobile or Sencha Touch, which can be used to develop smartphone apps using HTML, CSS, and JavaScript.
• When using the Cordova API, the application can be built without local code (such as Java or Object C), using web technology
• Because these JavaScript APIs are consistent across multiple device platforms and are created based on web standards, porting the application is convenient and basically does nothing to change
• Cordova provides a unified set of JavaScript libraries for calls that support iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada, and Symbian

• Knockout

• Knockout is a lightweight UI class library that simplifies the JavaScript front-end UI by applying the MVVM pattern
• Knockout is a JavaScript class library based on the data model that helps you create rich text, respond to display and edit user interfaces. At any time, if your UI needs to be updated automatically (for example, the update depends on user behavior or external data source changes), Ko can easily help you implement and easily maintain
• Developers who have used Silverlight or WPF might know that Ko is an example of the MVVM pattern. If you are familiar with Ruby on Rails or other MVC techniques, you may find that it is an MVC real-time form with declarative syntax. In other words, you can think of Ko as a way to create a UI user interface by editing JSON data.

• Knockout has the following 4 major concepts:

• Declarative binding (declarative Bindings): Easily associate model data to DOM elements with easy-to-read syntax
• UI Refresh automatically (Automatic UI refresh): Your UI interface will automatically update when your model state changes
• Dependency Tracking (Dependency Tracking): Implicitly establishing relationships between your model data for transformation and federated data
• Templates (Templating): Quickly write complex, nested UIS for your model data

• Additional Benefits:

• Pure JavaScript Class Library – compatible with any server-side and client technology
• Can be added to the top of the Web program – no big schema changes required
• Comprehensive suite of specifications (behavior-driven development)-means that it's easy to validate on new browsers and platforms

• How to use it

• Simply put: Declare your data as a JavaScript model object, and then bind the DOM element or template (templates) to it
• Take a look at a specific example:
  • think on one page, air passengers can upgrade their travel premium food packages, and when they choose a package, the page immediately shows the description and price of the package. First, declare the available packages:
    
    • [plain]  view plaincopy 
      1. VAR&N bsp;availablemeals = [  
      2.     { mealName:  ' standard ',  description:  ' Dry crusts of bread ',  extracost: 0 },  
      Li class= "alt" >    { mealname:  ' Premium ', description:  ' Fresh  Bread with cheese ',  extracost: 9.95 },  
      3.     {  mealName:  ' Deluxe ', description:  ' caviar and vintage dr pepper ',  extracost: 18.50 }  
      4.   ];  
  • If you want these 3 options to appear on the page, we can bind a drop-down menu (for example, the:<select> element) to this data. For example:
    
    • [plain]  view plaincopy 
      2. <p>make your flight more bearable  by selecting a meal to match your social and economic  status.</p>  
      3. chosen meal: <select data-bind= "options:  availablemeals,  
      4.                                   optionsText:  ' Mealname ' ></select>  
  • Enable knockout and let your binding take effect, add the following code after the availablemeals variable declaration:
    
    • [Plain] view plaincopy
      1. var ViewModel = {
      2. /* we ' ll populate this in a moment */
      3. };
      5. Ko.applybindings (ViewModel); Makes Knockout get to work
      6. Note: KO. Applybindings needs to be applied after the above HTML is valid
  • Your page will now render as follows:
    
  • Response selection
  • Next, declare a simple data model to describe the package that the traveler has selected and add an attribute to the current view model:
    
    • [plain]  view plaincopy 
      1. VAR&NBSP;VIEWMODEL&NBSP;=&NBSP;{&NBSP;&NBSP;
      2.  &nbs P;  chosenmeal: ko.observable (Availablemeals[0])   
      3. };   What is
    • ko.observable? It is a basic concept in KO. The UI can monitor (observe) its value and respond to its changes. Here we set chosenmeal that the UI can monitor the selected package and initialize it, using the first value in Availablemeal as its default value (for example: Standard)
  • Let's associate Chosenmeal to the drop-down menu, just update <select> 's Data-bind property, telling it to let the <select> element's value read/write Chosenmeal this model property:
    
    • [plain]  view plaincopy 
      1. chosen meal:  ; <select data-bind= "OPTIONS:&NBSP;AVAILABLEMEALS,&NBSP;&NBSP;
      2.                                   optionsText:  ' Mealname ',   
      3.                                  value:  chosenmeal "></SELECT>&NBSP;&NBSP;
  • Theoretically, we can now read/write the Chosenmeal property, but we don't know what it does. Let's show the description and price of the selected package:
    
    • [Plain] view plaincopy
      1. <p>
      2. You ' ve chosen:
      3. <b data-bind= "Text:chosenmeal (). description" ></b>
      4. (Price: <span data-bind= ' Text:chosenmeal (). Extracost ' ></span>)
      5. </p>
  • As a result, the package information and prices will be automatically updated according to the user's choice of different packages:
    
  • One last thing: if you can format the price with a currency symbol, declare a JavaScript function to do so:
    
    • [Plain] view plaincopy
      1. function Formatprice (price) {
      2. return Price = = 0? "Free": "$" + price.tofixed (2);
      3. }
  • The display of the interface will look much better:
    
  • The format of price shows that you can write any JavaScript code in your bindings, and Ko can still detect your binding dependency code. This shows how the KO can only perform local updates without having to re-render the entire page when your model changes-just the part that has a dependency value change
  • Chained observables are also supported (for example: The total price depends on prices and quantity). When the chain changes, the downstream part of the dependency will be re-executed, and all the relevant UI will be updated automatically. There is no need to declare association relationships between individual observables, and the KO framework automatically executes at run time.
  • You can get more information from observables and observable arrays. The example above is very simple and does not cover many KO functions. You can get more inline bindings and template bindings
  • are knockout and jquery (or prototype, etc.) a competitive relationship or can they be used together?
    
    • Everybody loves jquery!. It is a framework for manipulating elements and events on the page, is excellent and easy to use, and is sure to use jquery,knockout to solve different problems in DOM operations.
    • If the page requirements are complex, using jquery alone will cost more code. For example, a table displays a list, then counts the number of lists, and the Add button is enabled when the data line TR is less than 5, otherwise it is disabled. JQuery does not have a basic data model concept, so you need to get the number of data (from Table/div or a specially defined CSS class), and if you need to display the number of data in some span, remember to update the text of this span when adding new data. Of course, you should also decide to disable the Add button when the total number >=5. Then, if you want to implement the delete function, you have to point out which DOM element needs to be changed after being clicked.
  • How is the implementation of knockout different?
    • using knockout is straightforward. Portray your data as a JavaScript array object myitems, then use a template to transform the array into a table (or a set of div). Whenever the array changes, the UI interface responds to changes (without pointing out how to insert a new line <tr> or where it is inserted), and the rest of the work is synchronized. For example, you can declare the amount of data that is bound by a span display (which can be placed anywhere on the page, not necessarily in the template):
      
      • [plain]  view plaincopy& nbsp
        1. there are <span data-bind= "Text: myitems (). Count" >< /span> items  
    • that's all! You don't need to write code to update it, its update depends on the change of the array myitems. Similarly, the Enable and disable of the Add button depends on the length of the array myitems, as follows:
      
      • [plain]  view plaincopy 
        1. <button data-bind= "Enable: myitems (). Count < 5" >Add</button >  
    • , if you want to implement the delete function, you don't have to point out how to manipulate the UI elements, you just need to modify the data Model
    • summary: Knockout There are competing against jquery or similar DOM manipulation APIs. Knockout provides an advanced feature of the associated data model and user interface. Knockout itself does not rely on jquery, but you can use jquery together, and a vivid and gentle UI change requires that you really use jquery
  • Download installation
    • Pure js, direct download Introduction can
    • To open the template binding, you only need to introduce two JS files, the correct reference order:
      • [Plain] view plaincopy
        1. <script type= ' text/javascript ' src= ' jquery-1.4.2.min.js ' ></script>
        2. <script type= ' text/javascript ' src= ' jquery-tmpl.js ' ></script>
        3. <script type= ' text/javascript ' src= ' knockout-1.2.1.js ' ></script>

• MVVM

• To understand that MVVM first went to see WPF (note a concept that the previous WFX is the later. NET Framework 3.0)
• See the MVP after reading WPF
• Look at the MVP and then understand the difference between MVP and MVC: What's the flaw with MVC? Does the MVP solve these flaws? How does the MVP solve these flaws?
• MVVM is shorthand for Model-view-viewmodel. Microsoft's WPF brings new technical experiences, such as Sliverlight, audio, video, 3D, animation ..., which leads to a more detailed and customizable software UI layer. At the same time, at the technical level, WPF brings new features such as binding, Dependency property, Routed Events, Command, DataTemplate, ControlTemplate, and more. The origin of the MVVM (Model-view-viewmodel) framework is a new architectural framework that evolves when the MVP (Model-view-presenter) pattern is applied in conjunction with WPF. It is based on the original MVP framework and combines the new features of WPF to address the increasingly complex needs of our customers

• MVVM Frame composition

• The main advantages of MVVM
  • Low coupling
    • Views can be independent of the model changes and modifications, a viewmodel can be bound to a different "view", when the view changes in the model can be unchanged, when the model changes when the view can be unchanged
  • High reusability
    • You can put some view logic in a viewmodel and let a lot of views reuse this view logic
  • Independent development
    • Developers can focus on business logic and Data Development (ViewModel), designers can focus on page design, and use Expression Blend to easily design interfaces and generate XAML code
  • Independent testing
    • The interface is always more difficult to test, and now the test can be written for ViewModel

• Development of Design Patterns (MVC->MVP->MVVM)

• The most basic MVC, flaw: The view layer pulls data directly from the model layer, causing the view layer to rely on the model layer, resulting in a series of defects in team development and functional reuse, testing
• MVP change controler layer for the Presenter layer, do not allow the view layer to directly access the model layer, and add a layer of adapter, the more logic in the Presenter layer to achieve
• MVVM further improved the MVP, introducing the concept of data binding, and adding a layer of model layers for specific view between the view layer and the model layer, called the ViewModel layer, the VM behind the MVVM
  • View is bound to ViewModel and then executes some commands to request an action from it. In turn, ViewModel communicates with the model, telling it to update to respond to the UI. This makes it very easy to build the UI for your app. The easier it is to paste an interface into an application, the easier it is for the designer to use blend to create a nice interface. At the same time, when the UI and functionality become more and more loosely coupled, the testability of the function becomes stronger

• Iscroll

• Iscroll.js is a JS file developed by Matteo Spinelli, which is written using native JS and does not depend on any JS frame. Designed to address the area scrolling problem of mobile WebKit browser, compatible with Safari, Android Default browser, Safari, Chrome, firefox5+, opera11+, ie9+ and other WebKit core browsers

• What is the area scrolling problem of mobile WebKit system Browser

• In PC-side web development, it is sometimes used to fix a region's width and height, and then use Overflow:auto to scroll its content within that area.
• The iphone default browser (Mobile Safari) also supports the scrolling of fixed areas, but must swipe with two fingers and no scroll bars. Single finger swipe in Mobile safari is for page level only, not for page elements. This kind of operation experience is cumbersome, and many users simply do not know that two fingers can slide the area
• Android's own browser also supports area scrolling, and can be single-finger swipe operation, but the half-life sliding up the card is not smooth
• Using Iscroll, you can perfectly solve the above problems, not only on the iphone and Android single finger swipe, and slide up a smooth, hearty. There are also beautiful scroll bar tips to keep you comfortable during the sliding process.

• Fixed positioning

• Fixed positioning is not a native usage of iscroll, but instead uses iscroll to assist with fixed positioning problems
• The iphone is advanced, but it doesn't support position:fixed. This is hard for us, fixed positioning how to solve ah, we will often encounter fixed title bar, fixed toolbar and so on!!
• Use Iscroll to help solve: first get the height of the browser window, then get the height of the fixed toolbar, and then put everything except the fixed toolbar in a fixed area, the height of the fixed area = window Height-the height of the toolbar, and then use Iscroll for the fixed area. This way, the height of the entire HTML page is exactly equal to the window height, the page level does not scroll, and the toolbar is pinned to its current position. Swipe within a fixed area to view other content on the page without affecting the positioning of the toolbar

• Mouse wheel Scrolling

• The iscroll supports the use of the mouse wheel to control area scrolling in a PC-side browser, but is not very sensitive to operation. This is due to the Iscroll mouse wheel event interception, and then reduce the scroll roller distance, see Iscroll4.js source code 608-609 line:
  
  • [Plain] view plaincopy
    1. Wheeldeltax = e.wheeldeltax/12;//Control x-axis mouse wheel speed
    2. Wheeldeltay = e.wheeldeltay/12;//Control y-axis mouse wheel speed
• Iscroll the wheel distance of each time to the system default distance of one of 12 points, no wonder roll up very slow, not sensitive. Just change the 12 to 1 and the scroll speed of the rollers will return to normal. You can also set other values according to your actual needs

• The input box is not sensitive and cannot select text

• After using Iscroll, you will find that clicking on the input box is not sensitive, often cannot focus, and page text cannot be selected or copied. This is because iscroll to monitor mouse events and touch events to scroll, so the browser's default behavior is forbidden, see source code 92 line:
  
  • [Plain] view plaincopy
    1. Onbeforescrollstart:function (e) {E.preventdefault ();},
• Iscroll indiscriminately, the browser is prohibited from all default behavior, causing the above problem. So we need to make a slight change:
  
  • [Plain] view plaincopy
    1. Onbeforescrollstart:function (e) {
    2. var target = E.target;
    3. while (Target.nodetype! = 1) target = Target.parentnode;
    4. if (target.tagname! = ' SELECT ' && target.tagname! = ' INPUT ' && target.tagname! = ' TEXTAREA ')
    5. E.preventdefault ();
    6. },
• The element that determines whether the triggering event is input, select, textarea, and so on, if not, blocks the default behavior. This ensures that the input class elements can be focused correctly and quickly.
  Append a condition to the above modification target.tagname! = ' Body ' or directly change the Onbeforescrollstart to NULL, you can do the mouse to select text, but such a modification will lead to iscroll rolling failure or insensitive, so you can not select the text this problem first put aside. If you have a better way, welcome to reply

• Select element operation is not sensitive or white screen after operation

• After using Iscroll, there is also a more troublesome problem, that is, select element is not sensitive to click (after scrolling click Select, often no response); Sometimes the click has a reaction, the drop-down menu display is misplaced (PC side); After selecting an item, the page becomes blank (iphone, In Android) or the page position is up, and the scrolling area is misaligned
• To put it bluntly, is to cause Select to be useless. For this I have been debugging for a long time, and finally found the problem: Iscroll default is to use the CSS transform deformation in the Translate3d implementation area scrolling, each time scrolling is actually changing the value of the y-axis in Translate3d, the actual DOM position has not changed. Translate3d causes the page to focus incorrectly, and the display of the system-level drop-down menu causes it to appear to deviate
• The code to control the scrolling mode is in line 67: Usetransform:true. Fortunately, Iscroll provides another way of scrolling, based on the absolute positioning of the change in position. After modifying to Usetransform:false, Iscroll will use the positioning method to implement scrolling, which is the most common way we simulate animation in web development, the actual position of the DOM after scrolling has changed, there will be no dislocation deviation phenomenon
• In the PC-side mainstream browser, iphone, android2.2 test, select problem Perfect Solution
• However, it is important to note that the width of the scroll area is adjusted to the content width by default, rather than the 100% of the parent element, so it is best to set the scrolling area width to 100% after using the position decision.

• Ointment

• Iscroll is a small and refined classic, with the name of Apple fan. But the only drawback is that you can only use the ID to call

Isscroll and several other mobile tools introduced