JavaScript,一种神奇的语言。百分之九十以上的程序员都会在其简历上写有

熟练掌握JavaScript

国内这个环境下,绝大多数公司都没有专职的前端工程师,页面的Javascript效果都是后台程序员或者美工兼职完成的。而这些人中的大部分都只是在遇到需要的时候问下度娘或者google君,使用下JQuery之类的类库、绑定事件、写点简单的动画,其余时间仅仅使用插件即可。时间久了,很多人就自以为JavaScript不过尔尔,然后就发生上述情况了。

其实,JavaScript的一生也是命运多舛。开始出生的时候就早产(Brendan Eich表示仅使用了10天完成了语言的演示原型,书写了编译器和运行环境。。具体内情自行搜索),而后被applet和flash死死压着,直到后来Ajax的兴起,Google各种赤裸裸的技术炫耀(Gmail, Reader),大家发现原来Javascript可以这么强大。再到后面coffeescript,以及Node.js等等,基本以及从前端页面一直蔓延到服务端。只能说、金子迟早会发光的,即使包含着糟粕。

有志之士可以阅读以下JavaScript语言精粹快速了解,需要深入研究的围观JavaScript权威指南

好吧,广告完了我们开始正题。。。


背景介绍

SeaJs的介绍官网上面写得很详细,大家可以去强势围观。虾米是前端模块化前端模块化开发那点历史这边文章里面有介绍。为啥要模块化?好吧,猛击这里前端模块化开发的价值。为什么。。。打住打住,今天主要内容是Hello World!有疑问执行google或者留言~~

Hello World说明

虽然是Hello World,但是我们要严肃对待。下面说一下它的主要功能:

  • 页面载入完毕后弹出欢迎信息。
  • 页面上有很多色块,起始是黑色,每个色块随机使用一个预先定义好的名字。每个点击后会随机变色,类似变色龙。
  • 点击还原按钮后,色块恢复起始状态。

大致的功能就像下图:
seajs之hello world变色龙成品

seajs之hello world变色龙成品

很简单的几个小功能,下面我们开始来干货。

规划

首先我们规划下,大概的结构如下图:
seajs之hello world变色龙项目结构图
其中,main.js作为主要入口,chameleon.js就是变色龙君,colorUtils.js负责随机色。

代码

首先,我们来写colorUtils.js这个模块。此模块不需要外部的资源,输出也仅有一个,果断采取简要写法:

define({
    getColor : function(){
        var num = Math.ceil(Math.random() * 65536*16*16);
        return "#" + num.toString(16);
    }
});

define();这是SeaJs使用的关键字+基本模块结构,用于定义一个模块,里面可以看成是一个JSON格式的对象。这种写法简单明了,但是需要注意到对象的所有属性向外暴露。这里我们定义了一个属性叫getColor, 它是一个不需要参数的函数,返回一个代表颜色的字符串。

接下来我们写chameleon.js, 这个模块是核心模块,处理所有事件。我们需要绑定事件,然后处理CSS,果断使用jquery。在这里我们需要注意,当我们使用SeaJs引入模块时,每个模块的格式是有要求的,必须遵循一个的规范(否则人家怎么失败咧。。。)。但是现在现成的JS库那么多,尤其是茫茫多的插件库,难道我们要舍弃?肯定不能呀!果断使用插件shim,它能够十分方便的将没有遵循规范的库整合进来_。在config.js文件里面配置一下:

seajs.config({
  plugins: ['shim', 'text'],

  alias: {
    'jquery': {
      src: 'lib/jquery-2.0.0.min.js',
      exports: 'jQuery'
    }
  }
});

格式大概就是上面的样子,plugins属性引用了两个插件,另外一个text插件用于从外部文件中加载JSON格式的数据,后文具体介绍。alias属性则是设置别名,免得我们每次引入模块的时候都要输N长的路径。配置信息还有很多,具体精确的解释清参考官网。

JQuery有了,下面我们开始干活。打开chameleon.js,写代码的走起。

define(function(require, exports, module){

    var $ = require("jquery");
    var cu = require("app/colorUtils.js");
    var names = require("app/names");       

});

这个才是模块的比较标准的格式,大家默认使用即可,需要深入了解的自行查询。入口处,我们使用了require引入外部模块,引入后,我们就可以像老式的那样自由调用我们定义在模块里面的函数了。不过先不急,我们先定义变色龙君。

function Chameleon(container, child, btn){
    this.container = $(container);
    this.child = child;
    this.btn = $(btn);
}

普通的类写法,没啥特殊的,后文肯定需要补充,这里先将外部接口放出供其他模块使用:

module.exports = Chameleon;

到这,模块的定义完成。引入、处理、导出,很简单~接下来就是完善我们的变色龙君,毕竟上面我们杀都没干。

Chameleon.prototype.setup = function(){
    this._init()
        ._bindEvent();

    return this;
};

Chameleon.prototype._init = function(){
    var arrs = names.slice(0, 5);

    $(this.child).each(function(){
        var idx = Math.floor(Math.random() * arrs.length);
        $(this).text(arrs[idx]);
        arrs.splice(idx, 1);
    });

    return this;
};

Chameleon.prototype._bindEvent = function(){
    var child = this.child;
    var that = this;

    $(this.container).on("click", this.child, function(){
        $(this).css("background-color", cu.getColor());
    });

    $(this.btn).click(function(){
        $(child).css("background-color", "black");
        that._init();
    });

    return this;
};

代码的功能和逻辑很简单,和普通的JS的写法一样,这里就不在细说,如果哥们你看不懂。。。推荐文章起始处的书籍。。。

功能实现了,现在开始搞定入口。打开main.js,代码非常精简:

define(function(require){


    var Chameleon = require("app/chameleon");

    var cl = new Chameleon("#container", ".colorBlock", "#resetBtn");
    cl.setup();

    alert("欢迎进入SeaJs的世界");
});

这里引入了我们之前定义的变色龙君,调用,没了,后面打印了欢迎信息。是不是很简单呀,简单就对了,这就是模块封装之美,不过下面还有更美的。模块全部搞定了,最后需要解决的问题就是这么在页面上执行上面的入口代码,一句话,没错!就是一句话。

<script type="text/javascript" src = "assets/seajs/sea.js" id = "seajsnode" data-config = "app/config.js" data-main = "app/main.js"></script>

以普通引入JavaScript的方式引入sea.js,其中id字段推荐如上文所示,不要变动,可以加快模块初始化的速度。后面的data-config指向我们前文中的配置文件, data-main则指向入口文件。就是这么一句话,OK了,其他的没有了,原来,页面可以这么美丽→ →

现在,打开你的浏览器,围观吧,少年!!!!!!!!

最后的最后

关于压缩合并的部分,由于又是设计Grunt,Node.js等众多新东西,留待下次进行再行细说。

由于要本人能力有限,可能文章中有诸多表述不清或者表述错误的地方,欢迎留言咨询讨论。当然,最好的学习方式就是自己动手试一试,多看看官网DOC,多使用Google,这个是学习任何新技术都一样滴~好了,废话不多说,耍起吧,少年!



无觅相关文章插件

发表于

23 May 2013

类别

JavaScript

标签