淘宝模板开发系列之JS模块开发

JS模板模块开发教程

最新推荐文章于 2020-05-02 02:06:30 发布

最新推荐文章于 2020-05-02 02:06:30 发布 · 386 阅读

文章标签：

#php

本文介绍如何使用TAE_SDK创建JS模板并开发模块。通过实例演示了如何实现鼠标点击按钮动态生成文本的功能，并展示了相应的PHP、CSS及JS代码。

1. 开启TAE_SDK,创建新模板，其中模板类型选择“JS模板”，例如我们创建的模板名称为“MyTest”。

2. 开发模块。添加新模块，其中文件创建选中“创建JS文件”，例如我们新建的模块名称是“tshop-um-myJs”。创建成功后在本地的TAE_SDK\htdocs\Mytest\modules\tshop-um-myJs\assets\目录下会出现一个javascripts文件夹，我们可以在其中的module.js文件中编辑需要的JS代码。

T1Rg.iXeVfXXb9A_.Q-969-619.jpg

3. JS代码的编写。举一个简单的例子，我们想实现鼠标点击按钮动态生成文本的功能。想了解系统支持的JS API，请移步JS API。请严格遵守JS API，否则您所编写的JS文件将不生效。

php:

<div class="tb-module tshop-um tshop-um-myJs">
    <div class="content">
        <div class="hd">
            <h4>JS模板测试模块</h4>
        </div>
        <div class="bd">
            <button class="btn">点我吧</button>
            <p></p>
        </div>
    </div>
</div>

CSS:

.tshop-um-myJs{
    width:948px;
    border:1px solid #ccc;
    margin-bottom:20px;
}
.tshop-um-myJs .hd{
    border-bottom:1px solid #ccc;
    height:30px;
    text-align:center;
    margin-bottom:20px;
    line-height:30px;
    background:#f5f8fc;
    font-size:14px;
}
.tshop-um-myJs .bd button{
    margin:10px 45%;
    width:60px;
}
.tshop-um-myJs .bd p{
    color:red;
    heigth:20px;
    line-height:20px;
    width:120px;
    margin:20px auto;
}

JS:

console.log('开始喽...');
var DOM = KISSY.DOM,
    Event = KISSY.Event,
    btn = DOM.query('.btn');   
console.log(btn);
Event.on(btn[0],'click',function(){
    DOM.text('p','哈哈，你得到了它！')
});