MyLayui plan

讨论 未结 置顶 精帖 171 27667
岁月小偷
悬赏:500飞吻
祝大家中秋节快乐
更新于2019年09月12日21:58:53
已提交基于layui v2.5.5的修改。
更新于2019年8月22日 22:42:48
form组件优化:form.render支持对特定节点进行更新渲染。 测试
table:将tablePlug大部分的功能整合到table里面,新增了一些可配置项以及方法。具体文档明后天陆续更新。 测试
更新于2019年8月26日 21:46:15
table的文档比较多不好处理,需要多一些时间先提交两个小修改
form组件的val方法,可以直接取到表单里面的值,form.val(filter) OR form.val(formElem)。(layui v2.5.5已经实现,不过跟我的实现还是有点区别,他是新增了一个getValue的方法,然后判断val的参数如果没有第二个参数,回去执行getValue,也就是说第一个参数是filter这个没有变化,如果有多个相同的filter取值的话,只会取到第一个表单的值,如果要找到特定的表单,form.val是不能确定的,这个时候用form.getValue,第一个参数null,第二个参数用表单的jquery对象,myLayui的val就支持第一个参数直接写jquery对象,区别就在这里)
修复util.event的小bug:多次执行会导致事件多次绑定。
更新于2019年8月27日 16:45:34
form 打通美化的加点的事件与原始节点的事件的关联
更新于2019年9月9日 09:22:39
优化layui.onevent和layui.event的一些细节,主要是让onevent添加无filter监听的时候可以支持事件多次绑定;event触发的时候如果存在无filter和有filter的监听,先执行无filter的再执行有filter的;
新增layui.offevent,用来移除事件监听,同步的将各个模块中对应的添加相关的off,比如table.off、form.off等。查看详情
更新于2019年09月10日09:22:20
mylayui的进度有点慢,部分文档没跟上,喜迎2.5.5,后面的策略就是紧跟layui最新版本,战略性忽略一些历史版本上没能跟上脚步的文档。将利用中秋假期出一个对应最新版本(2.5.5)的mylayui。
利用一个空档期,准备根据自己的经验已经社区遇到问题解决的问题和项目中使用的情况,综合的出一个mylayui,用到后面的项目中去,有兴趣的小伙伴也可以吃吃螃蟹,有什么建议以及想要实现的效果可以回帖,当然也不可能什么都实现,能力有限,时间精力也有限,只能做一些比较常用的通用的,有共性的东西。
定位:站在巨人的肩膀上。此处不接受诸如layui不好用,XXX更高级,文档不详细之类的讨论,没意义,一个东西的好坏至少有一半要看使用者,同样一个武功秘笈,在某些人手里可以称霸武林,也大有拿来当卫生纸还嫌弃硬的。作为一个武功秘笈,他也不可能给一个教程让每一个不同功底的人都变成至尊。
layui面向所有的开发人员,首要考虑的是稳定,记得贤心说过一句话我觉得很对,“宁可功能少,也不要问题多”。所以功能的更新力求稳,那么mylayui面向的就是使用layui的喜欢layui的,结合实际项目业务场景丰富强化一些功能,让更易用的同时,尽量少添bug。比如之前写的一个tablePlug, 处理一些table的细节,也获得不少的认可,但是也会有瓶颈,比如table在引入的时候会全局init一下,这就是table支持自动渲染的基础,那么原本在插件里面的修改,对于在引入插件之前就已经初始化完毕的实例就没有生效了,虽然可能大部分的表格不会用到自动化渲染,但是漏洞是存在的,所以直接操刀table.js这个文件,基本上会可以避免这个问题,同时也方便后面如果功能成熟了,可以给官方的layui pull request, 也会加入一些新的使用的模块,比如下面的:
新增模块:load(无侵入的加载其他的插件)
使用layui有一段时间的小伙伴一般都会有一个疑虑,就是怎么引入第三放的插件,特别是那些不是写成layui模块化的插件,比如echarts,ztree等,使用layui之前一般来说就是通过script引到页面中,那么如果也希望像layui一样模块化的引入,希望用layui.use去延迟加载一些模块的话,原始的插件因为里面没有按照layui的标准走,那么是不能直接use的,所以一般来说可以给改造一下,让它实现了layui.define,关于如何改造的之前有其他小伙伴的精华帖可以自己搜一下如果不熟悉的话,不过一般来说只要对layui的模块规范有足够的了解认识的话是难不倒的;但是如果能不修改他的代码的前提下去use,那就更加的方便且合理了。那么看看这个load是怎么实现的:
原理实际也比较简单,就是将layui.define执行的地方从引入插件的文件里面给解放出来。
layui.use一个插件,对应的就是layui.define定义的插件,至于这个define写的位置,实际只要在use之前有定义了就好,后面关键的一个是路径,要让它能加载到文件,然后另外一个就是定义返回的模块对应的返回是什么了。
layui.define(['jquery'], function (exports) {
"use strict";
var modelName = 'load';
var version = '0.0.1';
// 适配一些常见的需要依赖jquery的第三方库
window.$ = window.jQuery = window.jQuery || layui.$;

// 判断一个变量是不是数组
// var isArray = function (obj) {
// return Object.prototype.toString.call(obj) === '[object Array]';
// };

// 设置组件的路径和then回调
var config = function (option) {
layui.each(option, function (key, value) {
if (!config.option[key]) {
config.option[key] = value;
}
});
};
config.option = {};

// 根据配置信息做一些准备工作,主要完成模块的layui.extend和layui.define
var ready = function (modelOne) {
var option = config.option[modelOne]||{};
if (!layui.cache.status[modelOne]) {
option.extend = option.extend ? (option.extend.constructor === Array ? option.extend : [option.extend]) : [];
layui.each(option.extend, function (index) {
ready(option.extend[index]);
});

if (option.path) {
var extend = {};
extend[modelOne] = option.path;
// 设置路径
layui.extend(extend);
}

// 定义成layui的模块
layui.define(option.extend||[], function (exports) {
exports(modelOne, {});
});
}
};

var then = function (modelOne) {
var option = config.option[modelOne]||{};

if (!option.ready) {
layui.each(option.extend, function (index) {
then(option.extend[index]);
});

// 可以在then回调中返回layui[modelName] 对应的值
layui[modelOne] = typeof option.then === 'function' ? option.then() : layui[modelOne];

option.ready = true;
}
};

// 核心的方法
var load = function (name, done) {
name = name.constructor === Array ? name : [name];
layui.each(name, function (index, modelOne) {
ready(modelOne)
});

// 初始化use
layui.use(name, function () {
layui.each(name, function (index, modelOne) {
// 执行then回调
then(modelOne);
});

typeof done === 'function' && done();
});
};

load.version = version;
load.config = config;

exports(modelName, load);
});

核心测试代码说明:
load.config({
echarts: {
path: '{/}https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min',
then: function () {
// then 回调非必须的,一般用来引入一些对应的css或者用来返回layui[modelName] = 被引入的插件的某些特殊的变量可以在then回调返回相关的值
return echarts;
}
},
ztree: {
path: '{/}https://cdn.bootcss.com/zTree.v3/3.5.30/js/jquery.ztree.all',
then: function () {
layui.link('https://cdn.bootcss.com/zTree.v3/3.5.30/css/zTreeStyle/zTreeStyle.css', null, 'ztree');
}
},
'ztree.exhide': {
path: '{/}https://cdn.bootcss.com/zTree.v3/3.5.30/js/jquery.ztree.exhide.min',
extend: 'ztree'
},
fuzzysearch: {
path: 'js/fuzzysearch'
}
});
load.config作用类似layui.extend主要用来配置被引入的插件对应的路径,还有继承的组件,已经引入成功之后done回调之前的then回调,用于引入一些css、返回对应的内容赋值给layui[插件名称]
load('echarts', function () {
var echarts = layui.echarts;
console.log('echarts.version', echarts.version);
// 引入echarts之后实际会有一个全局变量echarts,后面基本echarts怎么用就怎么用,没啥分别,
// 如果在then回调里面返回了对应的变量给了layui.echarts了也可以使用layui.echarts去替换全局变量echarts使用,看个人喜好。
var chartIns = echarts.init(document.getElementById('chart1'));
chartIns.setOption({
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
});
});
利用load引入echarts示例,可以从上面load.config的地方看到路径指的是bootcdn的资源,哪个js里面是不会写layui.define代码的,通过load的方式给引进来之后,剩下的就echarts怎么使用就怎么使用没啥区别了,如果想要用layui.echarts.init那么只要在then回调的返回全局变量echarts即可。
效果:

// load(['ztree', 'ztree.exhide'], function () { // 与下面的代码等效
load(['ztree.exhide'], function () { // ztree.exhide依赖了ztree所以只要load进来ztree.exhide就可以用ztree的基础功能了
var setting = {
view: {
selectedMulti: false
}
},
zTreeNodes = [
{
"name": "网站导航", open: true, children: [
{"name": "google", "url": "http://g.cn", "target": "_blank"},
{"name": "baidu", "url": "http://baidu.com", "target": "_blank"},
{"name": "sina", "url": "http://www.sina.com.cn", "target": "_blank"}
]
}
];
var zTreeObj = $.fn.zTree.init($("#tree"), setting, zTreeNodes);
load('fuzzysearch', function () {
fuzzySearch('tree', '#search', null, true); //初始化模糊搜索方法
})
})
另外一个例子,引入ztree并且添加一些扩展的插件,比如exhide还有一个树过滤的,从例子看出也是可以跟layui一样按一定的顺序引入几个插件,插件也可以继承依赖另外其他的插件。
效果:

更新于:2019年8月9日 16:01:37
新增对upload.js的两处修改:
1、让before支持拦截请求提交。
2、修复upload.render重复render同一节点导致无法提交的bug。
新增完善文档: https://sun_zoro.gitee.io/mylayui/doc/api.html
更新计划:周末争取将tablePlug和laydatePro的功能纳入。
回帖