Refactoring project front-end JS Frame

In the refactoring project, temporarily Requirejs as a JavaScript module loader, based on jquery as the framework, bootstrap as a responsive layout framework, DataTables as a table processing framework, Jquery-validation as a front-end form validation framework, highcharts as a chart frame, jquery-ui as a framework for other plug-ins. The following are the official home pages of these frameworks:

Requires:http://www.requirejs.cn/home.html

jquery:http://jquery.com/

bootstrap:http://v3.bootcss.com/

jquery-ui:http://jqueryui.com/

datatables:http://datatables.net/

jquery-validation:http://jqueryvalidation.org/

highcharts:http://www.hcharts.cn/ jQuery

Because of the popularity and popularity of jquery, as well as its simplicity and ease of use, jquery is used as a basic framework for front-end development in refactoring to improve development efficiency.

At present, jquery has 2 branches: jquery-1.xx and jquery-2.xx,jquery-1.xx support the library of IE browser (6,7,8) and the standard Web browser, jquery-2.xx only browsers that support the standard of the consortium. If the project does not need to support IE browser (6,7,8), it can be developed using JQUERY-2.XX. Bootstrap

Because the refactoring project needs to support the PC side and the pad end, the page needs to be arranged accordingly. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive layouts, mobile device-priority Web projects.

The bootstrap contains a set of global CSS styles, various components, and JavaScript plug-ins, and can be tailored to the needs of the project. Jquery-ui

Jquery-ui is a jquery based plug-in system. It contains the date control, modal dialog box, text box automatic prompts, progress bar and other functions, we can download the required function according to the requirements of the project. jquery-validation

Jquery-validation is a front-end form validation framework based on jquery. It provides features for internationalization, synchronous/asynchronous submission of forms, built-in validation rules, extensible validation rule mechanisms, federated authentication, error information location settings, and more. DataTables

DataTables is a jquery-based tabular display plug-in. It provides international features, multiple skins, multiple data sources, paging, sorting, searching, and so on.

DataTables can use CSS styles from other jquery frameworks, such as Bootstrap,jquery-ui. Highcharts

Highcharts is a suitable svg for the drawing of powerful, open source, beautiful, graphic rich, compatible with the vast majority of browsers Pure JS Chart library. It provides graphs, area, 3d, histogram, pie, scatter Lietu and mixed graphs. Requirejs

Requirejs is a JavaScript module loader that uses AMD to load JS. Using Requirejs to load a modular script increases the speed and quality of code loading.

Requires package compression method:

Http://www.cnblogs.com/snandy/archive/2012/06/06/2536969.html

Requirejs Use precautions:

Ødata-main entry point settings: The steps set in the Main.js are asynchronous loading, so if you configure other JS loading on the page, you cannot guarantee that the JS they depend on has been loaded successfully.

Ø when setting path, be aware that the alias may conflict with the namespace in the JS file. For example, using the DataTables plug-in, path is set to:

Require.config ({

Paths: {

jquery: "Lib/jquery-2.1.4.min",

DataTables: "Lib/jquery.datatables.min",

Bootstrap: "Lib/bootstrap.min"

},

});

This setting, when using $ ("#table"). The dataTable () will have an error, because the alias "DataTables"

Conflicts with the namespace DataTables of Jquerydatatables, and should be replaced with other aliases.

Ø to set their dependencies by shim parameters when using dependent components:

Require.config ({

Paths: {

jquery: "Lib/jquery-2.1.4.min",

DataTables: "Lib/jquery.datatables.min",

Bootstrap: "Lib/bootstrap.min"

},

Shim: {

' Bootstrap ': [' jquery '],

' DataTables ': [' jquery ']

}

});

Ø definition Module (define)

N A JS file defines only one module

n You can define a module as an object and a function, where the return value of a function can be object, or it can be another function

n defines the standard format for a module:

define (["jquery"],function ($) {});

Define (function (Require,exports, module) {});