温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

layui如何引用

发布时间:2020-09-21 12:07:44 来源:亿速云 阅读:127 作者:小新 栏目:web开发

layui如何引用?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

layui 怎么引用

在下载layui后如何快速将其引入至项目中,layui是一款经典模块化前端ui,它的模块是基于 layui.js 内部实现的异步模块加载方式 ,与日常所熟知的AMD 规范有所区别,有一套完全属于layui定义的模块加载规范,通过预加载方式,这也是layui官方所推荐的方式,将下载到的源码引入项目只需要引入layui.css和layui.js两个文件,通过layui.use()方法完成需要使用的模块加载。

如下示例所示:加载layui内置的jquery稳定版本和layer组件

【当我们在初次接触layui时,如果还没有耐心读完layui官方文档,我们可以先记住使用格式和使用规范,能正常用了再深入,不要纠结于细节而停步不前,我遇到过一些交流layui使用的用户,他还没看过文档就直接去读layui源码的,结果还是云里雾里,误以为直奔源码是最佳方式,一叶障目而不见泰山,两耳塞豆而不闻雷霆;

个人观点:如果作为学习时又觉得撇开文档直接去读源码的方式适合自己 暂不做评论,但若是用于工作此种方式个人认为是最为笨拙的,因此官方文档对初学者是必读的,而不是直接上来就去看源码,本系列文档可作为larryms产品使用的前提基础,若是初次接触推荐阅读,若有瑕疵可在评论中给予斧正】

code

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>Document</title>
     <link rel="stylesheet" href="layui/css/layui.css">
     <!-- your css link -->
</head>
<body>
     <!-- you html code -->
     <script type="text/javascript" src="layui/layui.js"></script>
     <script>
     layui.use(['jquery','layer'],function(){
      
        var $ = layui.$,
        layer = layui.layer;
        #your js coding
     });
     </script>
</body>
</html>

备注:

预加载的方式无论从代码可维护度、阅读便利以及代码优雅美观方面是要强于按需加载避免随从可见的layui.use()造成混乱,曾遇到过对网站性能的极致苛求用户使用按需加载方式【不推荐使用按需加载方式】,按需加载如果对变量的作用域等关系处理不当也容易出现错误且不便于后期维护,当然在某些特定的情况下 可以配合layui.cache.xx全局变量使用按需加载也是相对较好的方式;

但同时也不建议直接引入 layui.all.js一次性全加载(全加载方式似乎失去了layui模块化的意义); layui的模块组件通过预加载方式在larryms的产品中是比较常见的。

感谢各位的阅读!看完上述内容,你们对layui如何引用大概了解了吗?希望文章内容对大家有所帮助。如果想了解更多相关文章内容,欢迎关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI