《layui从鱼到渔》编写一个扩展模块:notification(上)

分享 未结
37 6760
贤心
贤心 2017-11-28
悬赏:20飞吻
虽然在文档有介绍如何 扩展一个 layui 模块,但很多小伙伴仍旧对此一知半解。今天我们就来通过实践编写一个通知模块,从而进一步熟悉 layui 的模块拓展。我们暂且将模块取名为:notification

一. 准备工作
1) 新建一个 project 文件夹,用来存放我们本次的实践项目
2) 在 project 中再分别新建:css、mods、test
3) 打开 官网首页 下载 layui 的最新版,解压后,将里面的 layui 目录放置 project 根目录下

这样,project 的目录结构如下
  ├─css  //用来存放样式文件
├─mods //用来存放我们的拓展模块(JS文件)
├─layui
│─test //用来存放测试页面
1) 在 css 目录中新建一个 notification.css 的文件
2) 在 mods 目录中新建一个 notification.js 的文件
3) 在 test 目录中新建一个 notification.html 的文件

二. 开始编写 notification.js
我们先简单编写一下 notification 的内部代码,以便测试模块是否能正常加载。
/**
@ Name:layui.notification 通知模块(测试)
@ Author:贤心
@ License:MIT
*/

layui.define('layer', function(exports){
var $ = layui.$
,layer = layui.layer

//外部接口
,notification = {
//……
//详见下篇
}

//构造器
,Class = function(options){
//……
};

//默认配置
Class.prototype.config = {
//……
};

//核心入口
notification.open = function(options){
return layer.msg(options.content || '');
};

exports('notification', notification);
});
通过上述代码可以看到,notification 模块依赖了 layer,而 layer 依赖 jQuery,因此在执行一个模块的时候,模块与它所依赖的模块之间会找到彼此的依赖链,而我们在使用的时候,只专注最终的输出即可。

三. 在 notification.html 中测试模块
通过一个简单的例子,测试模块接口是否能正常调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>开始编写一个自己的模块:notification</title>
<link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>

<div style="padding: 50px;">
<button class="layui-btn layui-btn-primary demo" data-type="hello">Hello</button>
</div>

<script src="../layui/layui.js" charset="utf-8"></script>
<script>
layui.config({base: '../mods/'}).use('notification', function(){
var $ = layui.$
,notification = layui.notification;

//触发事件
var active = {
//测试接口是否能正常调用
hello: function(){
notification.open({
content: 'hello notification'
});
}
};

$('.demo').on('click', function(){
var othis = $(this)
,type = othis.data('type');
active[type] ? active[type].call(this, othis) : '';
});
});
</script>
</body>
</html>
其中 layui.config 中的 base 指定的就是扩展模块存放的目录,一般只设定一次即可。
通过运行 notification.html,你已经可以看到一个 “hello notification”了。

未完待续
恭喜,你已经顺利扩展了一个全新的模块,但事情还并没有结束。我会在下文给出 notification.js 和 notification.css 的最终实践代码,以及讲解如何管理模块的主入口,同时也会直接让大家下载 project,以便在本地直接运行测试。那么,一个通知类的模块将会逐步映入眼帘。

回帖
  • 考拉
    2017-11-29
    霸气,从白痴到白吃[嘻嘻] 我似乎马上入门了
    2 回复
  • 不错,和我想的一样哈![阴险]
    0 回复
  • 仿佛看到了自定义组装的组件马上就要诞生了[哈哈] [哈哈] [哈哈]
    0 回复
  • [给力]
    0 回复
  • 天外飞仙
    2017-11-29
    [good]
    0 回复
  • 我一个后台的居然也跟着贤心学技术[太开心]
    0 回复
  • 我关心的layuiadmin什么时候出来呢?[鼓掌]
    0 回复
  • @考拉 [哈哈] 这个有意思~也白吃一下下
    0 回复
  • 关注下,好像很强大
    0 回复
  • 坐等下文[太开心]
    0 回复
  • 陈槑槑
    2017-11-29
    学到了[哈哈]
    0 回复
  • rocx
    2017-11-29
    学习下[嘻嘻]
    0 回复
  • Andy_小君
    2017-11-29
    抢个板凳等下文
    0 回复
  • TC608
    2017-11-29
    从入门到 精通,good,good,good,
    0 回复
  • AggerChen
    2017-11-29
    哇 虽然一直很想学学怎么扩展模块,奈何后台开发前端确实不扎实,,这下可以好好学学了,请赐教[互粉]
    0 回复
  • 小葵花心姐课堂开课了,
    0 回复
  • 带头哥
    2017-11-29
    layui是国产第一界面框架
    0 回复
  • 勝意
    2017-11-29
    [给力] 作为小白学习一下
    0 回复
  • 珍f惜
    2017-11-29
    可以可以,《layui从鱼到渔系列之自定义扩展模块》[哈哈]
    0 回复
  • RainCyan
    2017-11-29
    JS大神可以做一些比较有意思的拓展了。我等后台渣渣顶多...封一下时间~嗯~字符串处理~嗯~。。。嗯~[衰]
    0 回复
  • 清淡
    2017-11-30
    [good] 牛逼啊坐等
    0 回复
  • 金满斗
    2017-11-30
    哈哈,谢谢。虽然我自己已经摸索着会写了,但还是跟着作者学来更正宗扎实。
    0 回复
  • Pojin
    2017-11-30
    [good]
    0 回复
  • dark_liu
    2017-11-30
    [good]
    0 回复
  • 感觉已经快学会了,离迎娶白富美,走上人生巅峰就差一步了
    0 回复
  • 终于开始教后端写前端了[衰]
    0 回复
  • 我只关心什么时候出一套视频教程
    0 回复
  • lven
    2017-12-1
    我也扩展了自定义模块,可是只能用模块化引用才可以使用,但是我想在主界面引用layui.all.js全量包,这时候自定义模块就加载不了了,怎么办呢?
    0 回复
  • 葱先生
    2017-12-1
    已学习坐等下一篇[爱你]
    0 回复
  • 照抄了一遍,抄错2个字母,感觉贤心的代码规范很有条理。
    0 回复
本帖已设置禁止回复