MyLayui plan

讨论 未结 置顶 精帖 73 4644
岁月小偷
悬赏:500飞吻
利用一个空档期,准备根据自己的经验已经社区遇到问题解决的问题和项目中使用的情况,综合的出一个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的功能纳入。
回帖
  • 匿名丶
    2019-8-6
    [good] 憋大招啊
    3 回复
  • [good]
    2 回复
  • Penn
    2019-8-6
    [赞]
    2 回复
  • 2 回复
  • @宏宇哟 有报错信息吗?方便的话把那个js和css文件发给我一下,首先要看的就是路径对不对,是否引入成功,第二个就是要看引入之后会有什么结果,比如正常引入这个js之后会有一个全局变量叫nprogress吗?如果没有那就是你使用或者说理解的问题,刚才查了一下,如果你说的是这个js插件的话 https://www.helloweba.net/javascript/438.html ,那么应该是NProgress才对
    2 回复
  • [good]
    1 回复
  • @冷殇o thx[微笑]
    @宏宇哟 可以用就好,在插件依赖插件的情况下目前还有点问题,修改好了,但是还没有push上去,你现在打印的e应该是未定义吧,设计上是不支持想layui.use一样在回调里面会有那些参数的,觉得用处不大,还是在回调里面定义一下或者直接使用layui.模块名称 这样去使用就好,然后config实际根据需要只要定义过一次申明过就好,不用每次load之前都config一次的,这个跟layui.extend是一样的,只不过目前即使多次config也不会像layui.extend一样报错说模块已加载的提示,同一个模块以首次config的信息为准。使用过程有什么觉得不合理的欢迎给我提建议额。
    1 回复
  • 1 回复
  • @啦啦啦丫丫 牛逼
    1 回复
  • 好久不见大神发布新帖,原来在憋大招
    这个必须支持[威武]
    1 回复