hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 文章 - 后端开发 - 正文 看Cosplay古风插画小姐姐,合集图集打包下载:炫龙网 · 炫龙图库

【WEB前端开辟】LayUI第三方插件开辟范例详解

2019-11-27后端开发ki4网20°c
A+ A-

本类型一共四件事:1、划定插件的目次运用,2、划定插件css款式的前缀,3、划定插件的一致封装,4、划定插件的引入体式格局。

一、目次篇

先来一个目次图

目次构造申明(连系图片明白)
mod_name代表插件名,author代表第三方作者

layui                       layui框架目次
├─ css                      layui官方款式目次
├─ font                     layui官方字体目次
├─ images                   layui官方脸色目次
├─ lay                      layui官方模块目次
│
├─ mods                     layui插件目次
│  ├─ extend                项目开辟者目次
│  │  ├─ mod_name           项目开辟者mod_name插件的目次
│  │  │  ├─ mod_name.js     项目开辟者mod_name插件本体
│  │  │  ├─ mod_name.css    项目开辟者mod_name插件款式
│  │  │  └─ ...
│  │  └─ ...
│  │
│  ├─ author                第三方作者目次
│  │  ├─ mod_name           第三方mod_name插件的目次
│  │  │  ├─ mod_name.js     第三方mod_name插件本体
│  │  │  ├─ mod_name.css    第三方mod_name插件款式
│  │  │  └─ ...
│  │  └─ ...
│  └─ ...
│
├─ layui.all.js             一次性载入layui
└─ layui.js                 模块化载入layui

二、款式篇

款式这里我引荐人人用Scss来写,坚持一个优越的嵌套是非常重要的。引荐看一下demo的umd3.scss经常使用的功用我都有触及(demo见跋文)。

为了防备差别的插件作者发生款式争执,包含别的前端框架争执。所以我们划定一致运用lay开首,背面接作者名,尽量简写作者名[lay-vlice],然后再接款式模块名,比方btn [lay-vlice-btn],如今你能够恣意的誊写你的款式。假如你有许多插件,为了相互之间不争执,引荐加上插件名,那末终究的 class 就是[lay-vlice-umd-btn]。

如许会致使 class 很长,一遍一遍的写一样的 class 岂不是很烦。这就是我为何引荐用Scss的缘由了。

三、封装篇

我们原创的插件,或许第三方插件,会有三种状况:

1、原生js编写的基本插件(Vue.js等)

2、基于JQuery编写的JQ插件(Select2.js等)

3、基于layui编写的高等插件(FormSelects.js等)。

这三种状况,UMD封装都能支撑。所以引荐人人都用UMD去写插件。

(1) 无前置类UMD封装写法 - 原生js

(2) 基于JQuery的UMD封装写法 - JQ插件

(3) 基于layui的UMD封装写法 - 高等插件

四、引入篇

我抽时间写了个基于本类型的插件加载器,经由测试能够胜利引入官方模块和第三方插件,然则依据电脑机能和收集状况,会存在100-400毫秒摆布的耽误。题目不大。在这里我来教人人怎样引入根据本类型开辟的 LayUI 插件。

起首你须要下载我的加载器 mods.js ,加载器安排在 [layui/mods/mods.js] ,拿到手第一步,修正加载器内里的list变量。

运用 layui.use 引入加载器。然后再mods中引入官方模块或是第三方插件,并且在加载器的回调中编写营业代码。细致请检察我写的demo(在跋文那边下载)

layui.use('mods',function(mods){
    // umd2和umd3都是扩大插件,所以放到末了。
    mods(['layer','form','umd1','umd2','umd3'],function(layer,form,umd1){
        var $ = layui.$;

        layer.msg();
        form.render();
        umd1.func();
        $.umd2();
        $('body').umd2();

        // umd3扩大
        layer.maxopen();
    });
});

类型 https://cdn.vlice.cn/layui/layui-2.3.0.zip

更多layui学问请关注layui运用教程栏目。

以上就是LayUI第三方插件开辟类型详解的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开辟】LayUI第三方插件开辟范例详解

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>