[Web] something you can learn from in Web Development

Preface

During this time, I focused on Android Native Development and Android web development. I have studied phonegap, a powerful tool. phonegap does have great advantages in cross-platform development, but it also has performance (especially special effects, I am crazy, But I believe everything will be better and optimistic about its future. The Native Team should study how to better organize code in the actual project and how to use some common things into the project, so that the development process will not focus too much on things unrelated to the logic.

This article is intended to introduce things that can be referenced in web project development. These are all proven in project practice and have good results and are worth promoting. I hope to give you some inspiration.

1. CSS Reset
2. CSS less
3. CSS image sprites
4. Require JS/Lab JS
5. Jquery variable Management
6. Jquery UI widget Factory
7. Jquery plugin

CSS Reset

Introduction

I believe many people are quite familiar with CSS reset, but I still want to mention it as the first point today. CSS reset is used to reset the default style of the browser. For example, the default margin values of UL Li in IE and Firefox are different. You can use Yui reset CSS to make the default values of each browser the same, so that the default display effect of each element on the page is the same. Ready-made reset CSS frameworks mainly include YUI-reset.css and Alice-reset.css, but I agree with the idea that "Abuse is better than not", when you use these reset CSS, you need to know what has been done here and whether your project needs these things. Otherwise, unexpected bugs will drive you crazy.

Reference

Official Website: http://developer.yahoo.com/yui/reset/ Less download: http://yui.yahooapis.com/2.9.0/build/reset/reset-min.css About: http://www.cnblogs.com/jinguangguo/archive/2013/01/04/2844660.html

Practice

Direct introduction (but it is best to import it after customization)

 

 

 

 

 

 

 

 

 

 

 

CSS less

Introduction

Less is the dynamic Stylesheet Language. Less extends CSS to make CSS have dynamic behaviors such as variables, mixins, operations, and functions. Less can run not only on the client (only on modern browsers) but also on the server (with node. js and rhino ).

Reference

Official Website: http://lesscss.org/ Less download: https://raw.github.com/cloudhead/less.js/master/dist/less-1.3.3.min.js

Practice

/* Dimensions-----------------------------------------*/@body-width: 960px;@content-min-width: 1024px;/* Colors-----------------------------------------*/@swatch-alpha-0: #000;@swatch-alpha-9: #999;@swatch-alpha-a: #aaa;@swatch-alpha-f: #fff;@widget-background-color: #F0F0F0;@widget-border-color: #B3B3B3;/* Fonts-----------------------------------------*/@font-monospaced: Consolas, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Courier, monospace;@font-sans-serif: Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;@font-size: 14px;/* Body-----------------------------------------*/body { background-color: @swatch-alpha-f; font-family: @font-sans-serif; font-size: @font-size; width: @body-width;}/* Header-----------------------------------------*/.ac-header { min-width: @content-min-width;} You can use the less variable function to define common attribute values in your CSS, such as common dimension, color, and font for centralized management, of course, you can also use other less features.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

CSS image sprites

Introduction

CSS image sprites simply integrates many images into one image. You only need to reference the corresponding image based on different CSS. This obviously has great advantages, such as reducing the number of requests sent to the server. You can integrate images in different statuses, such as the normal status, click status, and unclickable status of a button into an image.

Reference

Official Website: http://www.w3schools.com/css/css_image_sprites.asp Practice: http://spritegen.website-performance.org/

Practice

I will not go into details here. You can go to the official website to view the specific information and try it out in reference. It is relatively simple.

 

 

 

 

 

 

 

 

 

Require JS/Lab JS

Introduction

Both requirejs and labjs can be used as module loaders. Of course, each of them has its own focus. You can choose to use these tools in different projects. In this article, I will introduce requirejs in detail, if you are interested in labjs, you can also take a look at the benefits. My practical examples will introduce how to use requirejs for Cache Management and dependency management.

Reference

Requirejs Official Website: http://requirejs.org/ Labjs Official Website: http://labjs.com/

Practice

(function (require) { var urlArgs = ''; // used for browser cache if (CNBlogs.isProduct) { urlArgs = 'v=1'; } else { urlArgs = "dev=" + (new Date()).getTime(); } require.config({ baseUrl: '/scripts', //By default load any module IDs from baseUrl urlArgs: urlArgs, //except, if the module ID starts with "app", paths: { 'hello1': 'hello1.min', 'hello2': '/document/11111-11100-010101/latest?' // append ? to avoid .js extension }, shim: { 'hello3': ['hello1', 'hello2'], 'bootstrap': ['hello3', 'hello4'] }, waitSeconds: 200 });})(require);require(['jqueryui', 'bootstrap'], function () { CNBlogs.bootstrap();});

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Jquery variable Management

Introduction

We all know that in Javascript development, a very sensitive but face-to-face problem is global variables. I often tell others whether a person is qualified to write JavaScript, let's see how many global variables his code generates. There are many ways to control global variables. You can understand them. Let's take a look at today's examples and hope they will play a role in your development.

Reference

For online search, there should be

Practice

(function($) { function load() {} function getNamespace(id) {} function getNamespaces() {} function getApplication(id) {} function getApplications() {} function getLastLoadTime() {} if ($.type($.CNBlogs) == "undefined" || $.type($.CNBlogs) == "null") { $.CNBlogs = {}; } $.CNBlogs.MetaModel = { reload: load, getNamespace: getNamespace, getNamespaces: getNamespaces, getApplication: getApplication, getApplications: getApplications, getLastLoadTime: getLastLoadTime };})(jQuery);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Jquery UI widget Factory

Introduction

Widget Factory is a simple function jquery. widget provided by the jquery object. It can be used to manage the JavaScript code of an organizational unit. It is worth noting that the widget is stateful, that is, it depends on a specific Dom node. during the development process, you must pay attention to it.

Reference

Official Website: http://wiki.jqueryui.com/w/page/12138135/Widget%20factory

Practice

(function( $ ) {$.widget('ab.form', { options: { namespace: 'ab' }, _create: function() { var self = this; this.options.$form = this.element; }, save: function(callback) { var self = this; }, update: function(callback) { }, remove: function(callback) { }, value: function(values) { }, resize: function(reset) { }, refresh: function(recordData) { }, _bind_data: function() { var self = this; }, _initialize: function() { }});}( jQuery ) );/* * Call recordform widget */$('#something').form();

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Jquery plugin

Introduction

Like many people, jquery is so attractive that its plug-in functions are indispensable,

Reference

Official Website: http://plugins.jquery.com/ Practice: http://liu-da101.iteye.com/blog/1180845

Practice

I will not go into details here. You can search for jquery plug-in development tutorials. I believe you will see overwhelming materials.

 

 

 

 

 

 

 

 

 

 

 

Follow-up

All of the above are simple introductions. I just want to share them with you. If you need to use them in your project, you can query the relevant information. I have recently been interested in web mobile phones. If I like-minded, I can exchange ideas.

My QQ: 1321518080