韦德国际官网使用SeaJS实现模块化JavaScript开发,令人惊叹的CSS3

前言

这个标题比较狗血了,我一直知道CSS3可以做很多事情,但是我昨天看到一个人用CSS3华丽的画了一个太极八卦!

若是这个还可以接受,那么我今天就看见一个人用CSS3画了一个叮当猫!!!我突然就在想,你们究竟要闹哪样,实在太BT了!

我在想我最近几天是不是应该试试呢?虽然我CSS比较水了。。。

 

之前在Ajax初步理解中介绍了对Ajax的初步理解,本文将介绍在ASP.NET中如何方便使用Ajax,第一种当然是使用jQuery的ajax,功能强大而且操作简单方便,第二种是使用.NET封装好的ScriptManager。

CSS3中的变形

在CSS3中,可以利用transform功能来实现文字或者图像的旋转、缩放、倾斜、移动这四种变形处理。

transform基础知识

在CSS3中,通过transform属性来达到功能需求,我们这里来看一个例子:

<html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <style type="text/css">      div { width: 300px; margin: 150px auto; background-color: Yellow; text-align: center; -webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); -o-transform: rotate(45deg); }      </style>  </head>  <body>  <div>示例文字</div>  </body>  </html>

韦德国际官网 1

我就喜欢这种怪怪的东西!!!

现在我们再来简单看看transform的其它功能:

transform缩放

使用scale方法来实现文字或者图像的缩放功能,在参数中定义倍率:

<html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <style type="text/css">      .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center; 
-webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); }      div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}            </style>  </head>  <body>  <div>示例文字</div>  <div class="y">示例文字</div>  </body>  </html>

韦德国际官网 2

我们看到了缩放的威力了

倾斜

这个方法用来实现文字或者图片的倾斜,在参数中分别指定水平方向上的倾斜角度,垂直方向上的倾斜角度:

<html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <style type="text/css">      .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center;            -webkit-transform: skew(30deg, 30deg); -moz-transform: skew(30deg, 30deg); -o-transform: skew(30deg, 30deg); }      div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}            </style>  </head>  <body>  <div>示例文字</div>  <div class="y">示例文字</div>  </body>  </html>

韦德国际官网 3

移动

我们现在可以使用transform方法来使图片或者文字移动,在参数上分别指定水平、垂直的距离即可:

<html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <style type="text/css">      .y { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 50px auto; background-color: Yellow; text-align: center;            -webkit-transform: transform(50px, 50px); -moz-transform: transform(50px, 50px); -o-transform: transform(50px, 50px); }      div { background: url("yexiaochai.jpg"); width: 343px; height: 468px; margin: 10px auto 0; background-color: Yellow; text-align: center; float: left;}            </style>  </head>  <body>  <div>示例文字</div>  <div class="y">示例文字</div>  </body>  </html>

这个功能我就感觉意义不大了。。。

总结

CSS3的这个功能提出来还是比较有意义的,比如我们的相册要实现旋转操作便简单多了,然后我们想实现模拟生活中放大镜等功能也会带来其他乐趣。

前言

SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架,可以实现JavaScript的模块化开发及加载机制。与jQuery等JavaScript框架不同,SeaJS不会扩展封装语言特性,而只是实现JavaScript的模块化及按模块加载。SeaJS的主要目的是令JavaScript开发模块化并可以轻松愉悦进行加载,将前端工程师从繁重的JavaScript文件及对象依赖处理中解放出来,可以专注于代码本身的逻辑。SeaJS可以与jQuery这类框架完美集成。使用SeaJS可以提高JavaScript代码的可读性和清晰度,解决目前JavaScript编程中普遍存在的依赖关系混乱和代码纠缠等问题,方便代码的编写和维护。

SeaJS的作者是淘宝前端工程师玉伯。

SeaJS本身遵循KISS(Keep It Simple,
Stupid)理念进行开发,其本身仅有个位数的API,因此学习起来毫无压力。在学习SeaJS的过程中,处处能感受到KISS原则的精髓——仅做一件事,做好一件事。

本文首先通过一个例子直观对比传统JavaScript编程和使用SeaJS的模块化JavaScript编程,然后详细讨论SeaJS的使用方法,最后给出一些与SeaJS相关的资料。

前言

传统模式 vs SeaJS模块化

        传统开发

        SeaJS模块化开发

使用SeaJS

        下载及安装

        SeaJS基本开发原则

        模块的定义及编写

        模块的载入及引用

        SeaJS的全局配置

        SeaJS如何与现有JS库配合使用

        SeaJS项目打包部署

一个完整的例子

主要参考文献&SeaJS学习资源

 

$.ajax向普通页面发送get请求

这是最简单的一种方式了,先简单了解jQuery
ajax的语法,最常用的调用方式是这样:$.ajax({settings});
有几个常用的setting,全部参数及其解释可以去jQuery官方API文档查询

  1. type:请求方式 get/post

  2. url:请求的Uri

  3. async:请求是否为异步

  4. headers:自定义的header参数

  5. data:发往服务器的参数

  6. dataType:参数格式,常见的有string、json、xml等

  7. contents:决定怎样解析response的一个”字符串/正则表达式” map

8.
contentType:发送到服务器的额数据的内容编码类型,它的默认值是”application/x-www-form-urlencoded;
charset=UTF-8″”。

  1. success:请求成功后调用的句柄

10.error:请求失败后调用的句柄

没使用过jQuery的ajax话这样看有些云里雾里的感觉,来看一个简单例子

首先使用Visual
Studio新建一个WebApplication,把jQuery.js引入project,然后添加两个页面,Default.aspx作为测试用

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Web.Default" %>  <!DOCTYPE html >  <html>  <head runat="server">      <title>Ajax</title>      <script src="jQuery.js" type="text/javascript"></script>      <style type="text/css">          html, body, form          {              width: 100%;              height: 100%;              padding: 0px;              margin: 0px;          }                    #container          {              margin: 100px;              height: 300px;              width: 500px;              background-color: #eee;              border: dached 1px #0e0;          }      </style>  </head>  <body>      <form id="form1" runat="server">      <div id="container">          <input type="button" value="Test Ajax" onclick="testGet()" />          <br />      </div>      <script type="text/javascript">          function setContainer(text) {              document.getElementById("container").innerHTML += ('<br/>' + text);          }            function testGet() {              $.ajax({                  type: 'get',                  url: 'NormalPage.aspx',                  async: true,                  success: function (result) {                      alert(result);                  },                  error: function () {                      setContainer('ERROR!');                  }              });          }      </script>      </form>  </body>  </html>

NormalPage.aspx作为请求页面,先不做任何处理。在Default.aspx页面中的JavaScript中可以看到testGet函数就利用jQuery的ajax向Normal.aspx发送了了一个get请求,没写的参数使用jQuery默认参数,这个调用没使用任何参数,简单向Normal.aspx页面发送请求,请求成功则alert全部response(即success方法参数:result,jQuery会把responseText传入success方法第一个参数),请求失败则向DIV中添加一行错误提示文本。如果一切正常,可以看到页面弹出对话框,对话框内内容即是Normal.aspx页面内容

韦德国际官网 4

一个简单的get请求完成了,这样的结果一般没有多大用处,也不是ajax意图所在,使用Ajax主要是想使用JavaScript可以异步向服务器发送特定请求,获取服务器相关数据,比如向服务器询问天气,然后获得天气数据,更新页面,而不是获取整个页面,换句话说,使用Ajax本身就是为了摆脱更新整个页面来更新页面数据这种模式,仅仅需要服务器给我们数据即可,这就需要调用服务器端的特定方法。

CSS3中的动画

在CSS3中,如果使用动画功能,可以使页面上的文字或者图像具有动画效果,可以使背景色从一种颜色平滑过渡到另一种颜色!!!非常不错的特性

CSS3中动画功能分为Transitions功能与Animation功能,他们都可以改变CSS中的属性来产生动画效果。

Transitisions支持元素由一种属性平滑过渡到另一个属性,Animations功能支持通过关键帧来指定在页面上产生更复杂的动画效果。

Transitions

transition属性使用方法如下:

transition: property duration timing-function  参数一表示要对哪个属性进行平滑过渡  参数二表示多长时间完成  参数三表示通过什么方法来平滑过渡

<html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <style type="text/css">      .y {  background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center;            -webkit-transition: background-image 3s linear; -moz-transition: background-image 3s ulinear; -o-transition: background-image 3s linear; }      .y:hover { background-image: url(2.jpg);}      </style>  </head>  <body>  <div class="y">示例文字</div>  </body>  </html>

韦德国际官网 5

效果着实不差,但是很多浏览器不支持哟!

韦德国际官网 6韦德国际官网 7多个属性变形

<html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <style type="text/css">      .y {  background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center;            -webkit-transition: background-image 1s linear, width 1s linear; -moz-transition: background-image 1s linear, width 1s linear; -o-transition: background-image 1s linear, width 1s linear; }      .y:hover { background-image: url(2.jpg); width: 800px;}      </style>  </head>  <body>  <div class="y">示例文字</div>  </body>  </html>

transition缺点:
transition功能实现的动画只能指定属性的开始值以及结束值,不能实现更加复杂的效果,但Animations就可以!

Animations

该功能与transition基本一致,只不过其控制力度更细而已.

<html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title></title>      <style type="text/css">      .y {  background-image: url(1.jpg); width: 1340px; height: 900px; text-align: center; }      @-webkit-keyframes myImg       {          40% { background-image: url(yexiaochai.jpg); }             100% { background-image: url(2.jpg); }         }      .y:hover { -webkit-animation: myImg 3s linear; }      </style>  </head>  <body>  <div class="y">示例文字</div>  </body>  </html>

韦德国际官网 8

我想说,他闪瞎了我的合金狗眼!!!

最后,让我们用以上功能实现一个我一直想要的功能:

传统模式 vs SeaJS模块化

假设我们现在正在开发一个Web应用TinyApp,我们决定在TinyApp中使用jQuery框架。TinyApp的首页会用到module1.js,module1.js依赖module2.js和module3.js,同时module3.js依赖module4.js。

 

$.ajax GET请求调用服务器特定方法

我们这时候需要修改NormalPage.aspx,为其添加几个方法供Default.aspx测试调用

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using System.Web.UI;  using System.Web.UI.WebControls;    namespace Web  {      public partial class NormalPage : System.Web.UI.Page      {          protected void Page_Load(object sender, EventArgs e)          {              string action = Request.QueryString["action"];              Response.Clear(); //清除所有之前生成的Response内容              if (!string.IsNullOrEmpty(action))              {                  switch (action)                  {                      case "getTime":                          Response.Write(GetTime());                          break;                      case "getDate":                          Response.Write(GetDate());                          break;                  }              }              Response.End(); //停止Response后续写入动作,保证Response内只有我们写入内容          }              private string GetDate()          {              return DateTime.Now.ToShortDateString();          }            private string GetTime()           {              return DateTime.Now.ToShortTimeString();          }      }  }

然后为Default.aspx添加一个新的方法,并修改button的onclick方法为新写的函数

function testGet2() {              $.ajax({                  type: 'get',                  url: 'NormalPage.aspx',                  async: true,                  data:{action:'getTime'},                  success: function (result) {                      setContainer(result);                  },                  error: function () {                      setContainer('ERROR!');                  }              });          }

testGet2函数是在testGet函数的基础上做了些许修改,首先对success方法做了更改,把得到的response写到页面;然后对请求添加了data参数,请求向服务器发送了一个action:getTime的键值对,在get请求中jQuery会把此参数转为url的参数,上面写法和这种写法效果一样

function testGet3() {              $.ajax({                  type: 'get',                  url: 'NormalPage.aspx?action=getTime',                  async: true,                  success: function (result) {                      setContainer(result);                  },                  error: function () {                      setContainer('ERROR!');                  }              });          }

看一下执行效果,这是Chrome的监视结果

韦德国际官网 9

如果调试我们发现这个请求调用的服务器页面NormalPage.aspx的GETime方法,并且response中只包含对有用的数据,如果把请求中参数的值改为getDate,那么就会调用对应GetDate方法。

实现网页淡入淡出

核心代码       @-webkit-keyframes fadein           {              0% { opacity: 0; }                 100% { opacity: 1; }             }          body {  -webkit-animation: fadein 3s linear 2; }

韦德国际官网 10韦德国际官网 11完整例子

  1 View Code     2  <!DOCTYPE html>    3  <html xmlns="http://www.w3.org/1999/xhtml">    4  <head>    5      <title></title>    6      <style type="text/css">    7          body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td { margin: 0; padding: 0; }    8          h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }    9          html, body { background: none repeat scroll 0 0 #FFFFFF; color: #000000; }   10          body { background-image: url("http://common.cnblogs.com/Skins/sea/images/back.gif"); font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 13px; line-height: 1.5; word-wrap: break-word; }   11          p { line-height: 1.7;}   12          a { text-decoration: none; color: #1A8BC8; }   13          a:visited { color: #1A8BC8; }   14          li { list-style: none; }   15          img { border: none;}   16          footer { text-align: center; color: Gray;}   17          .c { clear: both;}   18          .l-h-1 { line-height: 1;}   19          .f-n { float: none;}   20          .l { float : left;}   21          .r { float: right;}   22             23             24          .header { background: white url("http://common.cnblogs.com/Skins/sea/images/bg_header.jpg") no-repeat left top; height: 195px; border: 1px dotted #8B8D72; }   25          .header hgroup{ margin: 50px 0 0 265px;  }   26          .header h1 a{ font-size: 17px; font-weight: bold; text-decoration: none; color: Black;}   27             28          .nav { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; border-top: none;}   29          .nav ul{ padding: 5px 0 0 5px; }   30          .nav li{ display: inline; padding: 5px 5px 0; }   31          .nav aside { text-align: right; padding: 0 5px 5px;}   32             33          .main { margin: 0 20px 20px 260px; background: white; border: 1px dotted #8B8D72; padding: 20px;}   34          .main article header { margin-bottom: 10px; }   35          .main article header h1{ font-size: 16px; font-weight: bold; }   36          .main article header h1 a{ color: #1A8BC8; text-decoration: none; }   37          .main article header h1 time, .main article header h1 span{ font-size: 12px; font-weight:  normal; float: right; }   38          .main article section h2{ background: none repeat scroll 0 0 #2B6695; border-radius: 6px; box-shadow: 0 0 0 1px #5F5A4B, 1px 1px 6px 1px rgba(10, 10, 0, 0.5); color: #FFFFFF; font-size: 14px; font-weight: bold; height: 25px; line-height: 25px; margin: 15px 0 !important; padding: 5px 0 5px 20px; text-shadow: 2px 2px 3px #222222; }   39          .main .book { margin: 10px; }   40          .main .book header { border-bottom: 1px solid  #2B6695; }   41          .main .book .author { font-weight: bold;}   42          .main .book h3 { background: #2B6695; padding: 5px 20px; border-radius: 4px 4px 0 0; display: inline-block; margin-left: 20px; font-weight: bold; color: White; }   43             44          .main .green_channel { border: 1px dotted #8B8D72; padding: 10px 10px ; margin: 10px 0 10px 0; width: 420px;}   45          .main .green_channel a { margin: 0 2px; display: inline-block; padding: 2px 10px; font-size: 12px; font-weight: bold; color: White; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg%3D%3D") repeat-x scroll 0 0 transparent;}   46          .main .green_channel .green { background-color: #2DAEBF; }   47          .main .green_channel .red { background-color: #E33100;}   48          .main .green_channel .yellow { background-color: #FFB515;}   49          .main .green_channel .gray { background-color: #EEEEEE; color: #555555;}   50          .main .green_channel img { vertical-align: -7px;}   51                     52          .main .author_info { display: inline-block; }   53          .main .author_info .info_txt { display: inline-block; text-decoration: none; font-size: 12px; line-height: 1.5 }   54          .main .digg { float: right;}   55          .main .digg div { margin: 0 10px; display: inline-block; color: #075DB3; font-family: Verdana; font-size: 14px; text-align: center;}   56          .main .digg div.f-n { float: none; display: block;color: gray; font-size: 12px;}   57          .main .digg .top { background: url("http://static.cnblogs.com/images/upup.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}   58          .main .digg .down { background: url("http://static.cnblogs.com/images/downdown.gif") no-repeat scroll 0 0 transparent; width: 46px; height: 52px;}   59            60          .aside { position: absolute; left: 20px; top: 105px; width: 220px; border: 1px dotted #8B8D72; background: white;}   61          .aside .my_info { margin: 10px; line-height: 1.4;}   62          .aside .side_bar { margin: 10px;}   63          .aside .side_bar h3{ background: url("http://common.cnblogs.com/Skins/sea/images/bg_listtitle.gif") ; background-repeat: no-repeat; margin: 10px 0; font-weight: bold;}   64             65          .comment { margin: 0 20px 20px 260px;}   66          .comment h2 { padding: 5px 0;}   67          .comment li { padding: 5px 15px; margin: 10px 0; border: 1px dotted #8B8D72; background: white; }   68          .comment li a{ padding: 0 3px; }   69             70          @-webkit-keyframes fadein    71         {   72             0% { opacity: 0; }      73             100% { opacity: 1; }      74         }   75         body {  -webkit-animation: fadein 3s linear 2; }   76             77             78      </style>   79  </head>   80  <body>   81      <header class="header">   82          <hgroup>   83              <h1>   84                  <a href="http://www.cnblogs.com/yexiaochai/">叶小钗</a></h1>   85              <h2>   86                  两年内我会成为国内优秀的web前端工程师!2013-04-15</h2>   87          </hgroup>   88      </header>   89      <nav class="nav">   90          <ul>   91              <li><a href="http://www.cnblogs.com/">博客园</a></li>   92              <li><a href="http://www.cnblogs.com/yexiaochai/">首页</a></li>   93              <li><a href="http://q.cnblogs.com">博问</a></li>   94              <li><a href="http://home.cnblogs.com/ing/">闪存</a></li>   95              <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx?opt=1">新随笔</a></li>   96              <li><a href="http://space.cnblogs.com/msg/send/%e5%8f%b6%e5%b0%8f%e9%92%97">联系</a></li>   97              <li><a href="http://www.cnblogs.com/yexiaochai/rss">订阅<img alt="订阅" src="http://images.cnblogs.com/xml.gif"></a></li>   98              <li><a href="http://www.cnblogs.com/yexiaochai/admin/EditPosts.aspx">管理</a></li>   99          </ul>  100          <!--不知道是否合理-->  101          <aside>  102                随笔-20  评论-260  文章-0  trackbacks-0   103          </aside>  104      </nav>  105      <div class="main">  106          <article>  107              <header>  108                  <h1>  109                      <a href="#">HTML5书籍推荐</a><time pubdate="pubdate" value="2013-04-15">2013年4月15日</time>阅读(1363) 评论(24)</h1>  110              </header>  111              <p>  112                  HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本,现在仍处于发展阶段,但大部分浏览器已经支持某些  113                  HTML5 技术。<br />  114                  HTML 5有两大特点:首先,强化了 Web 网页的表现性能。其次,追加了本地数据库等 Web 应用的功能。广义论及HTML5时,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。<br />  115                  它希望能够减少浏览器对于需要插件的丰富性网络应用服务(plug-in-based rich internet application,RIA),如Adobe Flash、Microsoft  116                  Silverlight,与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。<br />  117                  <b>作为前端开发人员你还未学习HTML5?</b>看来你已经OUT了,现在由老夫来推荐几本书籍:</p>  118              <section>  119                  <h2>  120                      书籍推荐</h2>  121                  <article class="book">  122                      <header>  123                          <h3>  124                              HTML5高级程序设计</h3>  125                      </header>  126                      <div class="author">  127                              (荷)柳伯斯,(美)阿伯斯,(美)萨姆 著</div>  128                      <p>  129                          本书首先介绍了HTML5的历史背景、新的语义标签及与以往HTML版本相比的根本变化,同时揭示了HTML5背后的设计原理.从第2章起,分别围绕构建令人神往的富Web应用,逐一讨论了HTML5的Canvas、Geolocation、Communication、WebSocket、Forms、Web  130                          Workers、Storage等API的使用,辅以直观明了的客户端和服务器端示例代码,让开发人员能够迅速理解和掌握新一代Web标准所涵盖的核心技术。本书最后探索了离线Web应用并展望了HTML5未来的发展前景。<br />  131                          本书面向有一定经验的Web应用开发人员,对HTML5及未来Web应用技术发展抱有浓厚兴趣的读者也可以学习参考。  132                      </p>  133                  </article>  134                  <article class="book">  135                      <header>  136                          <h3>  137                              HTML5&CSS3权威指南</h3>  138                      </header>  139                      <div class="author">  140                              陆凌牛</div>  141                      <p>  142                          如果你是一位有前瞻性的Web前端工作者,那么你一定会从《HTML5与CSS3权威指南》中受益,因为它就是专门为你打造的。《HTML 5与CSS 3权威指南》内容系统而全面,详尽地讲解了HTML  143                          5和CSS 3的所有新功能和新特性;技术新颖,所有知识点都紧跟HTML 5与CSS 3的最新发展动态(HTML 5和CSS 3仍在不断完善之中);实战性强(包含246个示例页面),不仅每个知识点都配有精心设计的小案例(便于动手实践),而且还有两个综合性的案例(体现用HTML  144                          5与CSS 3开发Web应用的思维和方法)。《HTML5与CSS3权威指南》不仅能满足你全面而系统地学习理论知识的需求,还能满足你需要充分实践的需求。</p>  145                  </article>  146                  <article class="book">  147                      <header>  148                          <h3>  149                              Javascript高级程序设计</h3>  150                      </header>  151                      <div class="author">  152                              (美)(Nicholas C.Zakas)扎卡斯</div>  153                      <p>  154                          JavaScript 是根据 "ECMAScript"标准制定的网页脚本语言。这个标准由 ECMA 组织发展和维护。ECMA-262 是正式的 JavaScript  155                          标准。JavaScript是目前Web客户端开发的主要编程语言,也是Ajax的核心技术之一。  156                      </p>  157                  </article>  158              </section>  159              <footer>该文章属于叶小钗原创文章,欢迎转载,转载请注明出处</footer>  160          </article>  161          <div class="green_channel">  162              绿色通道: <a class="green" href="javascript:void(0);">好文要顶</a> <a href="javascript:void(0);"  163                  class="red">关注我</a> <a href="javascript:void(0);" class="yellow">收藏该文</a> <a target="_blank"  164                      href="#" class="gray">与我联系</a> <img alt="韦德国际官网 12" src="http://static.cnblogs.com/images/icon_weibo_24.png">  165          </div>  166    167          <div class="author_info">  168              <a target="_blank" href="http://home.cnblogs.com/u/yexiaochai/">  169                  <img alt="韦德国际官网 13" class="author_avatar" src="http://pic.cnitblog.com/face/u294743.jpg?id=23185449"></a>  170              <div class="info_txt">  171                  <a href="http://home.cnblogs.com/u/yexiaochai/">叶小钗</a><br>  172                  <a href="http://home.cnblogs.com/u/yexiaochai/followees">关注 - 19</a><br>  173                  <a href="http://home.cnblogs.com/u/yexiaochai/followers">粉丝 - 130</a>  174              </div>  175              <div class="l-h-1">  176                  <a href="#">+加关注</a>  177              </div>  178              <div class="c"></div>  179          </div>  180          <div class="digg">  181              <div class="top">6</div>  182              <div class="down">0</div>  183              <div class="f-n">(请您对文章做出评价)</div>  184          </div>  185      </div>  186      <aside class="aside">  187          <div class="my_info">  188              昵称:<a href="http://home.cnblogs.com/u/yexiaochai/">叶小钗</a><br>  189              园龄:<a title="入园时间:2011-04-23" href="http://home.cnblogs.com/u/yexiaochai/">1年11个月</a><br>  190              粉丝:<a href="http://home.cnblogs.com/u/yexiaochai/followers/">130</a><br>  191              关注:<a href="http://home.cnblogs.com/u/yexiaochai/followees/">19</a><div id="p_b_follow">  192              </div>  193              <div id="p_b_ing">  194                  <a href="http://home.cnblogs.com/ing/my/">我的闪存</a></div>  195          </div>  196    197          <div class="side_bar">  198              <h3>常用链接</h3>  199              <ul>  200                  <li><a href="http://www.cnblogs.com/yexiaochai/MyPosts.html" id="ctl01_rptMainLinks_lnkLinkItem_0">  201                      我的随笔</a></li>  202                  <li><a href="http://www.cnblogs.com/yexiaochai/MyComments.html" id="ctl01_rptMainLinks_lnkLinkItem_1">  203                      我的评论</a></li>  204                  <li><a href="http://www.cnblogs.com/yexiaochai/OtherPosts.html" title="我发表过评论的随笔"  205                      id="ctl01_rptMainLinks_lnkLinkItem_2">我的参与</a></li>  206                  <li><a href="http://www.cnblogs.com/yexiaochai/RecentComments.html" id="ctl01_rptMainLinks_lnkLinkItem_3">  207                      最新评论</a></li>  208                  <li><a href="http://www.cnblogs.com/yexiaochai/tag/" id="ctl01_rptMainLinks_lnkLinkItem_4">  209                      我的标签</a></li>  210              </ul>  211              <h3>随笔分类</h3>  212              <ul>  213                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471015.html"  214                      class="listitem" id="ctl04_CatList_LinkList_0_Link_0">css</a></li>  215                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471013.html"  216                      class="listitem" id="ctl04_CatList_LinkList_0_Link_1">HTML5&amp;CSS3初探</a></li>  217                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/471016.html"  218                      class="listitem" id="ctl04_CatList_LinkList_0_Link_2">javascript</a></li>  219                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/309100.html"  220                      class="listitem" id="ctl04_CatList_LinkList_0_Link_3">Java学习(3)</a></li>  221                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326208.html"  222                      class="listitem" id="ctl04_CatList_LinkList_0_Link_4">Web前端(13)</a></li>  223                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/329149.html"  224                      class="listitem" id="ctl04_CatList_LinkList_0_Link_5">工作点滴(3)</a></li>  225                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/326205.html"  226                      class="listitem" id="ctl04_CatList_LinkList_0_Link_6">设计模式</a></li>  227                  <li class="catListItem"><a href="http://www.cnblogs.com/yexiaochai/category/306145.html"  228                      class="listitem" id="ctl04_CatList_LinkList_0_Link_7">学习感悟(3)</ 

传统开发

使用传统的开发方法,各个js文件代码如下:

个人博客最新地址为blog.codinglabs.org,阅读全文请点击

//module1.js
var module1 = {
    run: function() {
        return $.merge(['module1'], $.merge(module2.run(), module3.run()));
    }
}

//module2.js
var module1 = {
    run: function() {
        return ['module2'];
    }
}

//module3.js
var module3 = {
    run: function() {
        return $.merge(['module3'], module4.run());
    }
}

//module4.js
var module4 = {
    run: function() {
        return ['module4'];
    }
}

此时index.html需要引用module1.js及其所有下层依赖(注意顺序):

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
    <script src="./jquery-min.js"></script>
    <script src="./module4.js"></script>
    <script src="./module2.js"></script>
    <script src="./module3.js"></script>
    <script src="./module1.js"></script>
</head>
<body>
    <p ></p>
    <script>
        $('.content').html(module1.run());
    </script>
</body>
</html>

随着项目的进行,js文件会越来越多,依赖关系也会越来越复杂,使得js代码和html里的script列表往往变得难以维护。

 

$.ajax POST与json

这样向一个页面发送请求然后在Load事件处理程序中根据参数调用不同方法,清除Response,写入Response,终止Response,而且传入的参数局限性太大,好业余的赶脚,看看专业些解决方法。为project添加一个General
Handler类型文件,关于HttpHandler相关内容本文不做详细解释,只需知道它可以非常轻量级的处理HTTP请求,不用走繁琐的页面生命周期处理各种非必需数据。

Handler.ashx.cs

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using Newtonsoft.Json;    namespace Web  {      /// <summary>      /// Summary description for Handler      /// </summary>      public class Handler : IHttpHandler      {          public void ProcessRequest(HttpContext context)          {              Student stu = new Student();              int Id = Convert.ToInt32(context.Request.Form["ID"]);              if (Id == 1)              {                  stu.Name = "Byron";              }              else              {                  stu.Name = "Frank";              }             string stuJsonString= JsonConvert.SerializeObject(stu);             context.Response.Write(stuJsonString);          }            public bool IsReusable          {              get              {                  return false;              }          }      }  }

关于这个类语法本文不做详细说明,每次发起HTTP请求ProcessRequest方法都会被调用到,Post类型请求参数和一再Request对象的Form中取得,每次根据参数ID值返回对应json对象字符串,为了展示json格式数据交互,需要为项目引入json.net这一开源类库处理对象序列化反序列化问题,然后创建一个Student类文件

Student.cs

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;    namespace Web  {      public class Student      {          public int ID { get; set; }          public string Name { get; set; }      }  }

看看页面如何处理

function testPost() {              $.ajax({                  type: 'post',                  url: 'Handler.ashx',                  async: true,                  data: { ID: '1' },                  success: function (result) {                      setContainer(result);                      var stu =eval ('('+result+')');                      setContainer(stu.ID);                      setContainer(stu.Name);                  },                  error: function () {                      setContainer('ERROR!');                  }              });          }

结果是这个样子的

韦德国际官网 14

上面代码向Handler.ashx发送一Post请求,比且带有参数{ID:’1’},可以看到结果,如果用调试工具可以发现,得到的result是一个json格式的字符串,也就是往Response写的对象序列化后的结果。这样就实现了比较专业些的方式调用Ajax,但是有一个问题依旧存在,HttpHandler会自动调用ProcessRequest方法,但是也只能调用该方法,如果想调用不同方法只能像普通页面那样传递一个参数表明调用哪个方法,或者写不同的Handler文件。

SeaJS模块化开发

下面看看如何使用SeaJS实现相同的功能。

首先是index.html:

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>TinyApp</title>
</head>
<body>
    <p ></p>
    <script src="./sea.js"></script>
    <script>
        seajs.use('./init', function(init) {
            init.initPage();
        });
    </script>
</body>
</html>

可以看到html页面不再需要引入所有依赖的js文件,而只是引入一个sea.js,sea.js会处理所有依赖,加载相应的js文件,加载策略可以选择在渲染页面时一次性加载所有js文件,也可以按需加载(用到时才加载响应js),具体加载策略使用方法下文讨论。

index.html加载了init模块,并使用此模块的initPage方法初始化页面数据,这里先不讨论代码细节。

下面看一下模块化后JavaScript的写法:

//jquery.js
define(function(require, exports, module) = {

    //原jquery.js代码...

    module.exports = $.noConflict(true);
});

//init.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m1 = require('module1');

    exports.initPage = function() {
        $('.content').html(m1.run());    
    }
});

//module1.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m2 = require('module2');
    var m3 = require('module3');

    exports.run = function() {
        return $.merge(['module1'], $.merge(m2.run(), m3.run()));    
    }
});

//module2.js
define(function(require, exports, module) = {
    exports.run = function() {
        return ['module2'];
    }
});

//module3.js
define(function(require, exports, module) = {
    var $ = require('jquery');
    var m4 = require('module4');

    exports.run = function() {
        return $.merge(['module3'], m4.run());    
    }
});

//module4.js
define(function(require, exports, module) = {
    exports.run = function() {
        return ['module4'];
    }
});

乍看之下代码似乎变多变复杂了,这是因为这个例子太简单,如果是大型项目,SeaJS代码的优势就会显现出来。不过从这里我们还是能窥探到一些SeaJS的特性:

一是html页面不用再维护冗长的script标签列表,只要引入一个sea.js即可。

二是js代码以模块进行组织,各个模块通过require引入自己依赖的模块,代码清晰明了。

通过这个例子朋友们应该对SeaJS有了一个直观的印象,下面本文具体讨论SeaJS的使用。

 

WebService与ScriptManager

微软向来很贴心,看看微软怎么处理上面的困惑,那就是利用WebService,WebService配合SCriptManager有客户端调用的能力,在项目中添加一个Webservice文件

WebService.asmx

using System;  using System.Collections.Generic;  using System.Linq;  using System.Web;  using System.Web.Services;    namespace Web  {      /// <summary>      /// Summary description for WebService      /// </summary>      [WebService(Namespace = "http://tempuri.org/")]      [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]      [System.ComponentModel.ToolboxItem(false)]      // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.       [System.Web.Script.Services.ScriptService]      public class WebService : System.Web.Services.WebService      {            [WebMethod]          public Student GetStudent(int  ID)          {              if (ID == 1)              {                  return new Student() { ID = 1, Name = "Byron" };              }              else              {                  return new Student() { ID = 2, Name = "Frank" };              }          }            

        [WebMethod]
        public string GetDateTime(bool isLong)
        {
            if (isLong)
            {
                return DateTime.Now.ToLongDateString();
            }
            else
            {
                return DateTime.Now.ToShortDateString();
            }
        }

    }  }

代码中加黄的code默认是被注释掉的,要想让客户端调用需要把注释去掉,Service中定义了两个方法,写个测试方法让客户端调用第一个方法根据参数返回对应对象,首先需要在页面from内加上ScriptManager,引用刚才写的WebService文件

Default.aspx

<form id="form1" runat="server">      <asp:ScriptManager ID="clientService" runat="server">          <Services>              <asp:ServiceReference Path="~/WebService.asmx" />          </Services>      </asp:ScriptManager>      <div id="container">          <input type="button" value="Test Ajax" onclick="testPost2()" />          <br />      </div>  ...

然后添加JavaScript测试代码

function testPost2() {              Web.WebService.GetStudent(1, function (result) {                  setContainer(result.ID);                  setContainer(result.Name);              }, function () {                  setContainer('ERROR!');              });          }

测试代码中需要显示书写WebService定义方法完整路径,WebService命名空间.WebService类名.方法名,而出入的参数列表前几个是调用方法的参数列表,因为GetStudent只有一个参数,所以只写一个,如果有两个参数就顺序写两个,另外两个参数可以很明显看出来是响应成功/失败处理程序。看看执行结果:

韦德国际官网 15

观察仔细会发现使用ScriptManager和WebService组合有福利,在WebService中传回Student对象的时候并没有序列化成字符串,而是直接返回,看上面图发现对象已经自动转换为一json对象,result结果可以直接操作,果真非常贴心。而上一个例子中我们得到的response是一个json字符串,在客户端需要用eval使其转换为json对象。

ScriptManager+WebSefvice调用ajax带来了很大的便利性,但同时牺牲了很多灵活性,我们没法像jQuery那样指定很多设置有没有两全其美的办法呢

使用SeaJS

 

$.ajax+WebService

jQuery调用Handler几乎完美了,但是不能处理多个方法,上面例子我们可以发现WebService可以实现这一功能,那么能不能jQUery调用WebService的不同方法呢?答案是肯定的,试一试用jQuery调用刚才WebService定义的第二个方法。写一个测试函数

function testPost3() {              $.ajax({                  type: 'post',                  url: 'WebService.asmx/GetDateTime',                  async: true,                  data: { isLong: true },                  success: function (result) {                      setContainer($(result).find('string').text());                  },                  error: function () {                      setContainer('ERROR!');                  }              });          }

调用方式没有多大变化,简单依旧,只要把URL改为WebService路径+需要调用的方法名,然后把参数放到data里就可以了。我们看看结果:

韦德国际官网 16

通过上图可以看到,jQuery调用WebService默认会返回一个XML文档,而需要的数据在
<string>节点中,只需要使用jQuery解析xml的语法就可以轻松得到数据。如果希望返回一个json对象怎么办?那就得和调用Handler一样使用json.net序列化,然后前端使用eval转换了,也不会过于复杂。我在项目中最常使用这个模式,这样既保持了jQuery的灵活性又可以在一个Service中书写多个方法供调用,还不用走复杂的页面生命周期

下载及安装

要在项目中使用SeaJS,你所有需要做的准备工作就是下载sea.js然后放到你项目的某个位置。

SeaJS项目目前托管在GitHub上,主页为

下载完成后放到项目的相应位置,然后在页面中通过<script>标签引入,你就可以使用SeaJS了。

 

json.net和本文示例源代码

json.net是一个开源的.net平台处理json的库,可以序列化Dictionay嵌套等复杂对象,关于其简单使用有时间会总结一下,可以自codeplex上得到其源码和官方说明。本文的源代码可以点击这里获得。

 


SeaJS基本开发原则

在讨论SeaJS的具体使用前,先介绍一下SeaJS的模块化理念和开发原则。

使用SeaJS开发JavaScript的基本原则就是:一切皆为模块。引入SeaJS后,编写JavaScript代码就变成了编写一个又一个模块,SeaJS中模块的概念有点类似于面向对象中的类——模块可以拥有数据和方法,数据和方法可以定义为公共或私有,公共数据和方法可以供别的模块调用。

另外,每个模块应该都定义在一个单独js文件中,即一个对应一个模块。

下面介绍模块的编写和调用。

 

模块的定义及编写

模块定义函数define

SeaJS中使用“define”函数定义一个模块。因为SeaJS的文档并没有关于define的完整参考,所以我阅读了SeaJS源代码,发现define可以接收三个参数:

/**
* Defines a module.
* @param {string=} id The module id.
* @param {Array.|string=} deps The module dependencies.
* @param {function()|Object} factory The module factory function.
*/
fn.define = function(id, deps, factory) {
    //code of function…
}

上面是我从SeaJS源码中摘录出来的,define可以接收的参数分别是模块ID,依赖模块数组及工厂函数。我阅读源代码后发现define对于不同参数个数的解析规则如下:

如果只有一个参数,则赋值给factory。

如果有两个参数,第二个赋值给factory;第一个如果是array则赋值给deps,否则赋值给id。

如果有三个参数,则分别赋值给id,deps和factory。

但是,包括SeaJS的官方示例在内几乎所有用到define的地方都只传递一个工厂函数进去,类似与如下代码:

define(function(require, exports, module) {
    //code of the module...
});

个人建议遵循SeaJS官方示例的标准,用一个参数的define定义模块。那么id和deps会怎么处理呢?

id是一个模块的标识字符串,define只有一个参数时,id会被默认赋值为此js文件的绝对路径。如example.com下的a.js文件中使用define定义模块,则这个模块的ID会赋值为“

工厂函数factory解析

工厂函数是模块的主体和重点。在只传递一个参数给define时(推荐写法),这个参数就是工厂函数,此时工厂函数的三个参数分别是:

require——模块加载函数,用于记载依赖模块。

exports——接口点,将数据或方法定义在其上则将其暴露给外部调用。

module——模块的元数据。

这三个参数可以根据需要选择是否需要显示指定。

下面说一下module。module是一个对象,存储了模块的元信息,具体如下:

module.id——模块的ID。

module.dependencies——一个数组,存储了此模块依赖的所有模块的ID列表。

module.exports——与exports指向同一个对象。

三种编写模块的模式

第一种定义模块的模式是基于exports的模式:

define(function(require, exports, module) {
    var a = require('a'); //引入a模块
    var b = require('b'); //引入b模块

    var data1 = 1; //私有数据

    var func1 = function() { //私有方法
        return a.run(data1);
    }

    exports.data2 = 2; //公共数据

    exports.func2 = function() { //公共方法
        return 'hello';
    }
});

上面是一种比较“正宗”的模块定义模式。除了将公共数据和方法附加在exports上,也可以直接返回一个对象表示模块,如下面的代码与上面的代码功能相同:

define(function(require) {
    var a = require('a'); //引入a模块
    var b = require('b'); //引入b模块

    var data1 = 1; //私有数据

    var func1 = function() { //私有方法
        return a.run(data1);
    }

    return {
        data2: 2,
        func2: function() {
            return 'hello';
        }
    };
});

如果模块定义没有其它代码,只返回一个对象,还可以有如下简化写法:

define({
    data: 1,
    func: function() {
        return 'hello';
    }
});

第三种方法对于定义纯JSON数据的模块非常合适。

 

模块的载入和引用

模块的寻址算法

上文说过一个模块对应一个js文件,而载入模块时一般都是提供一个字符串参数告诉载入函数需要的模块,所以就需要有一套从字符串标识到实际模块所在文件路径的解析算法。SeaJS支持如下标识:

绝对地址——给出js文件的绝对路径。

require("http://example/js/a");

就代表载入“

相对地址——用相对调用载入函数所在js文件的相对地址寻找模块。

例如在“

require("./c");

则载入“

基址地址——如果载入字符串标识既不是绝对路径也不是以”./”开头,则相对SeaJS全局配置中的“base”来寻址,这种方法稍后讨论。

注意上面在载入模块时都不用传递后缀名“.js”,SeaJS会自动添加“.js”。但是下面三种情况下不会添加:

载入css时,如

require("./module1-style.css");

路径中含有”?”时,如

require(http://example/js/a.json?cb=func);

路径以”#”结尾时,如

require("http://example/js/a.json#");

根据应用场景的不同,SeaJS提供了三个载入模块的API,分别是seajs.use,require和require.async,下面分别介绍。

发表评论

电子邮件地址不会被公开。 必填项已用*标注