安卓软件

  • 小说漫画
  • 社交通讯
  • 视频直播
  • 出行导航
  • 生活休闲
  • 主题壁纸
  • 拍照美化
  • 新闻阅读
  • 办公学习
  • 实用工具
  • 健康运动

安卓游戏

  • 益智休闲
  • 冒险解谜
  • 动作格斗
  • 策略塔防
  • 角色扮演
  • 音乐舞蹈
  • 赛车竞速
  • 卡牌决斗
  • 模拟经营
  • 橙光游戏

文章速递

  • 游戏攻略
  • 软件教程
  • 热点新闻
  • 综合阅读
您的位置: 首页> 电脑应用> 行业软件
Layui模块化前端框架 2020 最新免费版

Layui模块化前端框架 2020 最新免费版

一键举报
  • 版本:免费版
  • 平台:电脑
  • 类型:行业软件
  • 发布:2022-09-21
  • 大小:660KB
  • 语言:中文
下载资源有问题,请使用举报功能,本站会及时处理。

详情

Layui框架是由职业前端倾情打造的经典模块化前端框架,该框架采用自身模块规范编写,同时也遵循原生HTML、CSS、JS的书写与组织形式,能够让你在开发的的时候可以拥有更加方便的框架得以套用,非常适用于界面的快速开发。

Layui框架

Layui框架是面向全层次的前后端开发者打造的小巧的前端UI框架,Layui门槛极低,拿来即用,并且从核心代码到API的每一处细节都经过精心雕琢,另外还支持对前端社区的噪音进行过滤,也支持兼容几乎全部的浏览器,能够帮助你快速开发框架。

Layui框架特色

1、返璞归真

身处在前端社区的繁荣之下,我们都在有意或无意地追逐。而 layui 偏偏回望当初,奔赴在返璞归真的漫漫征途,自信并勇敢着,追寻于原生态的书写指令,试图以最简单的方式诠释高效。

2、双面体验

拥有双面的不仅是人生,还有 layui。一面极简,一面丰盈。极简是视觉所见的外在,是开发所念的简易。丰盈是倾情雕琢的内在,是信手拈来的承诺。一切本应如此,简而全,双重体验。

3、星辰大海

如果眼下还是一团零星之火,那运筹帷幄之后,迎面东风,就是一场烈焰燎原吧,那必定会是一番尽情的燃烧。待,秋风萧瑟时,散作满天星辰,你看那四季轮回,正是 layui 不灭的执念。

Layui框架特色

Layui框架亮点

1、采用自身模块规范编写,遵循原生HTML、CSS、JS的书写与组织形式;

2、使用简单,门槛极低,拿来即用;

3、外在极简,却又不失饱满的内在,体积轻盈,组件丰盈;

4、从核心代码到API的每一处细节都经过精心雕琢,非常适合界面的快速开发;

5、更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来;

6、兼容人类正在使用的全部浏览器(IE6、7除外),可作为PC端后台系统与前台界面的速成开发方案。

模块化的用法

一般用于开发环境

我们推荐你遵循 layui 的模块规范建立一个入口文件,并通过 layui.use() 方式来加载该入口文件,如下所示:

模块化的用法1

上述的 index 即为你 /res/js/modules/ 目录下的 index.js,它的内容应该如下:

模块化的用法2

全模块用法

一般用于线上环境

事实上 layui 的「模块化加载」十分适用于开发环境,它方便团队开发和代码调试。但对于「线上环境」,我们更推荐您采用「全模块加载」,即直接引入 layui.all.js,它包含了 layui 所有的内置模块,且无需再通过 layui.use() 方法加载模块,直接调用即可。如:

全模块用法1

除了 layui 内置的全模块加载,layui 的扩展模块同样可以合并为一个文件来加载。我们假设你的项目存放了很多个扩展模块(可以简单理解为一个 js 文件就是一个模块),那么你只需要根据其依赖关系将其合并,即可一次性加载所有扩展模块,如:

全模块用法2

现在我们可以借助 Gulp 将上述的 mod1、mod2、mod3、main 等扩展模块构建合并到一个模块文件:main,此时你只需要加载它即可:

全模块用法3

可以看到,通过「全模块」的用法,我们最多只需要加载两个 JS 文件,这将大幅度减少静态资源的请求。

全局配置

方法:layui.config(options)

你可以在使用模块之前,全局化配置一些参数,尽管大部分时候它不是必须的。所以我们目前提供的全局配置项非常少,这也是为了减少一些不必要的工作,尽可能让使用变得更简单。目前支持的全局配置项如下:

全局配置

定义模块

方法:layui.define([mods], callback)

通过该方法可定义一个 layui 模块。参数 mods 是可选的,用于声明该模块所依赖的模块。callback 即为模块加载完毕的回调函数,它返回一个 exports 参数,用于输出该模块的接口。

定义模块1

跟 RequireJS 最大不同的地方在于接口输出,exports 是一个函数,它接受两个参数,第一个参数为模块名,第二个参数为模块接口,当你声明了上述的一个模块后,你就可以在外部使用了,demo 就会注册到 layui 对象下,即可通过 layui.demo() 去执行该模块的接口。

你也可以在定义一个模块的时候,声明该模块所需的依赖,如:

定义模块2

上述的 ['layer', 'laypage'] 即为本模块所依赖的模块,它并非只能是一个数组,你也可以直接传一个字符型的模块名,但是这样只能依赖一个模块。

获取设备信息

方法:layui.device(key),参数key是可选的

由于 layui 的一些功能进行了兼容性处理和响应式支持,因此该方法同样发挥了至关重要的作用。尤其是在 layui mobile 模块中的作用可谓举足轻重。该方法返回了丰富的设备信息:

获取设备信息1

有时你的 App 可能会对 userAgent 插入一段特定的标识,譬如:

Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.143 myapp/1.8.6 Safari/537.36

你要验证当前的 WebView 是否在你的 App 环境,即可通过上述的myapp(即为 Native 给 Webview 插入的标识,可以随意定义)来判断。

获取设备信息2

模块规范

一、预先加载

开门见山,还是直接说使用比较妥当。Layui的模块加载采用核心的 layui.use(mods, callback)方法,当你的JS 需要用到Layui模块的时候,我们更推荐你采用预先加载,因为这样可以避免到处写layui.use的麻烦。你应该在最外层如此定义:

模块规范1

二、按需加载(不推荐)

如果你有强迫症,你对网站的性能有极致的要求,你并不想预先加载所需要的模块,而是在触发一个动作的时候,才去加载模块,那么,这是允许的。你不用在你的JS最外层去包裹一个大大的 layui.use,你只需要:

模块规范2

注意:如果你的 JS 中需要大量用到模块,我们并不推荐你采用这种加载方式,因为这意味着你要写很多 layui.use(),代码可维护性不高。

三、模块命名空间

layui 的模块接口会绑定在 layui 对象下,内部由 layui.define() 方法来完成。每一个模块都会一个特有的名字,并且无法被占用。所以你无需担心模块的空间被污染,除非你主动 delete layui.{模块名}。调用模块可通过 layui.use 方法来实现,然后再通过 layui 对象获得模块接口。如:

模块规范3

我们推荐你将所有的业务代码都写在一个大的 use 回调中,而不是将模块接口暴露给全局,比如下面的方式我们是极不推荐的:

模块规范4

你之所以想使用上面的错误方式,是想其它地方使用不在执行一次 layui.use?但这种理解本身是存在问题的。因为如果一旦你的业务代码是在模块加载完毕之前执行,你的全局对象将获取不到模块接口,因此这样用不仅不符合规范,还存在报错风险。建议在你的 js 文件中,在最外层写一个 layui.use 来加载所依赖的模块,并将业务代码写在回调中,见:预先加载。

事实上,如果你不想采用 layui.use,你可以引入 layui.all.js 来替代 layui.js

四、扩展一个 layui 模块

layui 官方提供的模块有时可能还无法满足你,或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法,相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧:

第一步:确认模块名,假设为:mymod,然后新建一个mymod.js 文件放入项目任意目录下(注意:不用放入layui目录)

第二步:编写test.js 如下:

模块规范5

第三步:设定扩展模块所在的目录,然后就可以在别的JS文件中使用了

模块规范6

大体上来说,layui 的模块定义很类似 Require.js 和 Sea.js,但跟他们又有着明显的不同,譬如在接口输出等地方。

常见问题

1、应该如何加载模块最科学?

事实上我们在模块规范已经有明确地说明,你可以采用预先加载和按需加载两种模式,但后者我们并不推荐(文档也解释原因了)。因此我们强烈推荐的方式是:你应该在你js文件的代码最外层,就把需要用到的模块 layui.use移一下

2、如何使用内部jQuery?

由于Layui部分内置模块依赖jQuery,所以我们将jQuery1.11最稳定的一个版本作为一个内置的DOM模块(唯一的一个第三方模块)。只有你所使用的模块有依赖到它,它才会加载,并且如果你的页面已经script引入了jquery,它并不会重复加载。内置的jquery模块去除了全局的$和jQuery,是一个符合layui规范的标准模块。

3、为什么表单不显示?

当你使用表单时,Layui会对select、checkbox、radio等原始元素隐藏,从而进行美化修饰处理。但这需要依赖于form组件,所以你必须加载 form,并且执行一个实例。值得注意的是:导航的Hover效果、Tab选项卡等同理(它们需依赖 element 模块)

4、哪里有 layui 未压缩源代码?

我们的全部代码托管在GitHub(你可以通过首页的Star进入)和码云。之所以在下载包里没有提供未压缩的源代码,是为了避免一些猿的使用混淆,因为之前有遇到过部分可爱到极致的猿,居然同时引入了压缩过和未压缩过的layui.js,虽然文档在“开始使用”中有相关的明确说明,但这种问题仍然不是个例,使得我欲哭无泪啊啊啊,但毕竟我们要做“中国最容易使用的UI框架”,因此才决定只对下载包提供我们构建后的代码,并且,由于是经过了压缩、合并等处理,所以更适合用于生产环境。

更新日志

1、优化:layui.use() 方法,以支持加载非内置模块的合并请求(如您在线上环境采用「非模块化加载」的方式,那么最多可以只加载两个文件,即:layui.all.js、main.js(你的扩展模块的合并文件)。这将大幅度减少文件请求) #详见文档

2、新增:layui.url() 底层方法,用于将 url 中的 pathname、search、hash 属性进行对象化获取 #详见文档

3、优化:栅格的列间隔类 .layui-col-space,支持 1-30 区间所有双数间隔,并支持 1、5、15、25 单数间隔

4、优化:table 组件的合计行,若接口直接返回了合计行数据,则优先读取,否则由前端自动合计当前行数据 #详见文档

5、修复:upload 组件因上个版本的 progress(进度条) 功能导致的部分情况无法跨域上传的问题

6、优化:upload 组件 progress 回调,在第二个参数中返回了当前触发的元素对象

7、修复:form 模块的 select 组件在 lay-disabled 和 lay-search 共用时出现可编辑问题

8、修复:flow.load() 多次执行时的重复加载的问题

9、修复:util 组件的 event 方法重复绑定事件的问题

10、新增:28 个字体图标

相关软件

软件截图

  • Layui模块化前端框架 2020 最新免费版0
  • Layui模块化前端框架 2020 最新免费版1
  • Layui模块化前端框架 2020 最新免费版0
  • Layui模块化前端框架 2020 最新免费版1
  • Layui模块化前端框架 2020 最新免费版0
  • Layui模块化前端框架 2020 最新免费版1

对于您的问题快深感抱歉,非常感谢您的举报反馈,小编一定会及时处理该问题,同时希望能尽可能的填写全面,方便小编检查具体的问题所在,及时处理,再次感谢!