SEAJS Building Web Apps

Last Update:2014-09-29 Source: Internet

Author: User

Tags jquery library

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

As development projects continue to expand, find code dependencies become complex, maintenance compared to the egg pain, think of Seajs has this effect, decisive early adopters, to solve two problems: 1) naming conflicts 2) file dependencies
Since the BG is using the TAF service, a WSP Web services framework is developed based on C + +. All of the following are based on test validation under this framework. Divided into three phases: development----improvement--build

First stage: Developing template directory Structure:
--WSP--index.html--doc--js--sea.js--jquery_cmd.js--Main.js

The first step: referring to the third-party class library, wrapped in require, my project using the jquery library, packaged into jquery_cmd.js

Define (function(require, exports, modules){    //jquery source     return jQuery;});

The second step: write the introduced JS, named Main.js
Incidentally using a alloyteam to see the console.log output dot Gorgeous

Seajs.config ({alias: {"jquery":"/js/jquery_cmd.js" //This road to write right (this project is based on the static directory JS under the framework)}  }); Define function(require, exports, module) {//Introduction of jquery Modulevar$ =require(' jquery ');if (typeof $ (' H2 ')!== "undefined") {var ocontent = {logtext: '%c This is one of%c's miraculous%c site%c ', cssstyl E: [' Color: #a48bf2; ', ' Color: #ff0000; ', ' Color: #a0c484; ', ' padding:55px 135px;background:url (http://res.imtt.qq.com /actnew/css/head_logo.png) no-repeat center center;line-height:109px; '] };Console.log (ocontent[' LogText '), ocontent[' CSSStyle '][0], ocontent[' CSSStyle '][1], ocontent[' CSSStyle '][2],   ocontent[' CSSStyle '][3]);   } else {Console.log (' not found '); }});

Step Three: HTML page

<! DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>The first application of SEAJS</title></head><body> <script src="/js/sea.js" id="Seajsnode"></script><script type="Text/javascript">seajs.use ("/js/main");</script>   </body></html>

Open the Chrome debugger to see the following effects:

When the debugger switches to network, you can see that the lazy loading action reflects

Phase II: Further optimization and improvement of the project
Project structure:--WSP--index.html--doc--js--sea.js--require.js--jquery_cmd.js--Mai N.js--echarts-map.js--build--Echarts.js chart --Bar.js

1. If you need to introduce a jquery plugin:

Define (function(require){    var $, jQuery;    require (' jquery ');   //Plugin entire Code });

2, the project needs to introduce a chart, the block needs to be implemented according to the API (the project using Baidu Echarts), from the official documents found that Echarts does not directly support Seajs cmd mode, instead of introducing Requirejs support AMD mode.
Import Echarts-map.js and Require.js

3, modify the index.html

<! DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Requirejs referencing Echarts charts</title></head><body> <!--prepare a size (wide-height) Dom--<div id= "main" style= "height:500px;border:1p for Echarts X solid #ccc;p adding:10px; " ></div><script src= "/js/require.js" id= "Requirejsnode" ></script><script type="Text/javascript">        Require.config ({paths: {//This path is written to (the project is based on the static directory JS under the WSP framework) ' echarts ': './js/ Echarts-map ', ' echarts/chart/bar ': './js/echarts-map ', ' echarts/chart/line ': './js/echarts-m        AP ', ' Echarts/chart/map ': './js/echarts-map '}}); Require ([' echarts ', ' echarts/chart/bar ', ' echarts/chart/line ', ' Echarts/chart            /map '], function (EC) {var dommain = document.getElementById (' main ');            var mychart = Ec.init (Dommain); Mychart.setoption ({tooltip: {trigger: ' Axis '}, Legend:                    {data: [' evaporation ', ' precipitation ']}, Toolbox: {show:true, Feature: {mark: {show:true}, DataView: {show:true, Rea                   Donly:false},     Magictype: {show:true, type: [' line ', ' Bar ']}, restore: {show:true}, Saveasimage: {show:true}}}, Calculable:true, X                    Axis: [{type: ' Category ', data: [' January ', ' February ', ' March ']                        }], YAxis: [{type: ' value ',                    Splitarea: {show:true}}], series: [  {name: ' evaporation ', type: ' Bar ', data: [2.0, 4.9,                        7.0]}, {name: ' Precipitation ', type: ' Bar ',        Data: [2.6, 5.9, 9.0]}]}); });</script>   </body></html>

Last page Access effect

SEAJS Building Web Apps

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More