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

【WEB前端开辟】layui项目中运用函数layui.define的要领引见

2019-11-24后端开发ki4网17°c
A+ A-

媒介:

1、假如你深刻邃晓并合理应用 layui.define,那末本篇对你来讲有点浪费时候了。

2、假如你关于“Javascript 模块化开辟”听都没听过,更别说还要邃晓它。那末发起能够先在收集上找找什么是“Javascript 模块化开辟”,这对你邃晓我背面所说的很主要,固然,也会协助你更好地邃晓 Layui 作者想表达的理念。

引荐:layui框架教程

我们在运用 Layui 的时刻,常常运用的是

layui.use([], function(){})

然则,仔细的小伙伴会发明 layui 另有一个函数是 layui.define,这个是用来做什么的呢?

之前我们写代码是没有模块化观点的,以下面的代码:

function entry(type) {
  if (type === 1) { handle1() }
  else if (type === 2) { handle2() }
  else { handleall() }
}

function handle1(){}
function handle2(){}
function handleall(){}

历久的实践让程序员邃晓,javascript 模块化是必不可少的。而在完成模块化,每一家都有本身的主意和完成。他们尽量斟酌一切的题目,这也致使运用他们的模块化你须要一个庞杂的设置。

layui 采纳本身的加载体式格局,和其他模块化完成比拟,她是比较轻量级的。她有2个中心函数 define 和 use 来完成本身的模块化,然则有时刻也会给人疑惑。我司小伙伴在运用过程中就问过我,layui 的 define 函数觉得和 use 函数差不多啊,怎样做到准确运用?

如 layui 文档所说函数 layui.define,那是用来扩大组件的。而函数 use 是加载运用这个组件的。然则什么样的代码才算组件呢,在扩大组件页面,我们也能够看到一些优异的作者分享了他们的效果。然则我们能够看到这些组件都有个共同点,那就是不触及营业(这不是空话,有营业谁用它)。

所以一旦设想营业,不在是组件了,这时刻我们能够换个称号,叫做接口。那末区分函数 define 和 use 就很好邃晓了。函数define 就是为了定义组件或许接口的,函数 use 就是为了运用那些组件或许接口。假如你写的组件或许接口想让别人运用,那末就运用函数 define,然则假如你的函数只是内务实行,不须要让别人挪用,那末就运用函数 use。

到这里,假如你如今很清晰地邃晓二者的区分,那末鄙人面的架构一个简朴的 layui 项目应当越发邃晓。

起首,你须要到这里下载一个简朴的搭建项目 layui.test.project。

然后用东西翻开项目,我们能够清晰地看到文件目次。

这里就应用到了大批的 layui.define,展现在 index.single.html,这内里我们设置了 layui 的cdn,设置了全局的 layui 参数,末了是我们所应用的营业剧本。

翻开 layui.config.js,能够很清晰看到内容,这内里我本人定义了 2 个组件(注重这个称谓),它们是没有任何营业上的逻辑。所以我放在了 lib 文件夹,它是用了寄存一些非营业大众的组件。由于会大批运用,所以我提早设置终了。

然后我们会来到进口剧本 main.single.js,这内里运用了 layui 本身的模块 jquery,form,也运用了我方才定义的模块 logger 和 more,由于我不会导出给别人运用,所以运用的函数use 。而在其内部,我做了简朴的测试逻辑。

接下来,你可能会发明另有 api,const,utils 在这里基础没用到,他们是做什么的呢。

api 故名思意就是为了供应与背景接口的处置惩罚,由于 layui 自带了 jquery,那末在与背景接口挪用上我们采纳 jquery.ajax,回调函数有时刻是一些初学者的恶梦,所以我们采纳 jquery的 deffer 对象,能够链式挪用。

这里我没有封装 jquery.ajax 的,如许错误处置惩罚,token 照顾没有一致的处置惩罚,无形会加载工作量,所以你须要补充封装 jquery.ajax 的接谈锋行,这里能够再次定义一个组件 layui.ajax.js

const 寄存常量,这里设置了一个返回接口的关键字 response.js,固然这是为了模仿,假如前背景探讨好,也能够直接在项目写死。

utils 寄存东西类,我们经常使用的转换时候,转换url 都是能够写在这里的。

这 3 个文件夹是为了辅佐其他营业页面而设置的,所以基础悉数运用懒加载挪用,它们以函数 define 最先,末了导出一个接口名,给外部挪用。不同于lib 须要预先设置,在运用他们的时刻,须要本身重新设置,这里以 utils 加载为例:

layui.extend({
  utils: '/path/to/utils/index'
}).use(['utils'], function(){
  var utils = layui.utils
  // ...
})

注重: 假如你运用ftl,jsp,apsx这些由背景衬着的页面引擎,应当会有一个大众的头部,那末方才的全局设置 layui 文件 layui.config.js,你能够在大众的头部到场。

以上就是layui项目中运用函数layui.define的要领引见的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
【WEB前端开辟】layui项目中运用函数layui.define的要领引见

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:
下一篇 【WEB前端开辟】HTML的标签</span></a> </div> </div> <div class="agd wnrg" ><a href="https://www.xuanloog.com/xuanloog/"><img src="https://i.ki4.cn/2020/10/02/7CJuV.png"></a></div> <div class="yagd wnrg" ><a href="https://www.xuanloog.com/xuanloog/"><img src="https://i.ki4.cn/2020/10/02/7CJuV.png"></a></div> <div class="pinglun"> <h3><i class="fa fa-comments-o"></i>发表评论</h3> <div class="pinglunnr"> <a name="miao"></a> <div class="pinglunpost" id="postcmt"> <p class="posttop"> <a rel="nofollow" id="cancel-reply" href="#divCommentPost" style="display:none;"><small>取消回复</small></a> </p> <form id="frmSumbit" target="_self" method="post" action="https://www.huaxiuwang.cn/zb_system/cmd.php?act=cmt&amp;postid=112381&amp;key=ac7f784062c3a11ce8b0e4bd37a8a7ae" > <input type="hidden" name="inpId" id="inpId" value="112381" /> <input type="hidden" name="inpRevID" id="inpRevID" value="0" /> <div id="pingposthtml"> <p> <label for="inpName">Q&nbsp;Q</label> <input type="text" placeholder="填入QQ号可快速填写" id="inpQQ" class="text" value="" size="28" tabindex="1"/>选填 </p> <p> <label for="inpName">名称</label> <input type="text" name="inpName" id="inpName" class="text" value="" size="28" tabindex="1" required="required" />必填 </p> <p> <label for="inpEmail">邮箱</label> <input type="text" name="inpEmail" id="inpEmail" class="text" value="" size="28" tabindex="2" required="required"/>必填 </p> <p> <label for="inpHomePage">网址</label> <input type="text" name="inpHomePage" id="inpHomePage" class="text" value="" size="28" tabindex="3" />选填 </p> </div> <p> <textarea name="txaArticle" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" ></textarea> </p> <div class="outer pcping"> <div class="filter-box"></div><span>请拖动滑块解锁</span><div class="inner">&gt;&gt;</div> </div> <input name="button" id="sumbitping" type="button" tabindex="6" value="发表评论" class="button pcping lr" style="margin-right:15px;" /> <p class="ydping"> <input name="button" id="sumbitping2" type="button" tabindex="6" value="发表评论" class="button buttons" style="width:100%;" /></p> </form> </div><br /> <label id="AjaxCommentBegin"></label> <div class="pagebar commentpagebar"> </div> <label id="AjaxCommentEnd"></label> </div> </div> </div> <div class="main-lr lr"> <aside class="celanbiao" id="ad3"> <h3 style="display:none;"></h3><div class="aside-con clear"><a href="https://www.xuanloog.com/34000.html"><img src="https://i.ki4.cn/2020/10/05/7DBWH.png"></a></div></aside><aside class="celanbiao" id="xincelan"> <h3 style="display:none;"></h3><div class="aside-con clear"><div class="c-xintop"></div><div class="c-xinboby"><div class="c-xin-img"><img src="https://www.huaxiuwang.cn/zb_users/cache/mochuimg/tximg.png"></div><h4>炫龙网络</h4><p class="c-p">看Cosplay古风插画小姐姐:<a href="https://www.xuanloog.com/">炫龙网 · 炫龙图库</a></p><div class="c-foot"> <span class="c-span-lf"></span><span class="c-span-lr"></span></div></div><div class="c-xinfoot"><ul><li><span>116294</span>文章</li><li><span>0</span>评论</li><li><span>1569554</span>浏览</li></ul></div></div></aside><aside class="celanbiao" id="123"> <h3 style="display:none;"></h3><div class="aside-con clear"><a href="https://www.xuanloog.com/xuanloog/gufengcosplay/"><img src="https://i.ki4.cn/2020/10/02/73wGM.png"></a></div></aside><aside class="celanbiao" id="htagcelan"> <h3><i class="fa fa-bars"></i>热门标签</h3><ul class="aside-con clear"><li><a href="https://www.huaxiuwang.cn/tags-1.php" title="Nginx伪静态" target="_blank">Nginx伪静态</a></li><li><a href="https://www.huaxiuwang.cn/tags-2.php" title="301重定向" target="_blank">301重定向</a></li><li><a href="https://www.huaxiuwang.cn/tags-3.php" title="Nginx伪静态" target="_blank">Nginx伪静态</a></li><li><a href="https://www.huaxiuwang.cn/tags-4.php" title="WordPress" target="_blank">WordPress</a></li><li><a href="https://www.huaxiuwang.cn/tags-5.php" title="域名" target="_blank">域名</a></li><li><a href="https://www.huaxiuwang.cn/tags-6.php" title="emlog" target="_blank">emlog</a></li><li><a href="https://www.huaxiuwang.cn/tags-7.php" title="代码" target="_blank">代码</a></li><li><a href="https://www.huaxiuwang.cn/tags-8.php" title="说说" target="_blank">说说</a></li><li><a href="https://www.huaxiuwang.cn/tags-9.php" title="SSL教程" target="_blank">SSL教程</a></li><li><a href="https://www.huaxiuwang.cn/tags-10.php" title="全站" target="_blank">全站</a></li><li><a href="https://www.huaxiuwang.cn/tags-11.php" title="图标" target="_blank">图标</a></li><li><a href="https://www.huaxiuwang.cn/tags-12.php" title="开启" target="_blank">开启</a></li><li><a href="https://www.huaxiuwang.cn/tags-13.php" title="404错误" target="_blank">404错误</a></li><li><a href="https://www.huaxiuwang.cn/tags-14.php" title="单页" target="_blank">单页</a></li><li><a href="https://www.huaxiuwang.cn/tags-15.php" title="百度云加速" target="_blank">百度云加速</a></li><li><a href="https://www.huaxiuwang.cn/tags-16.php" title="跳转链接" target="_blank">跳转链接</a></li><li><a href="https://www.huaxiuwang.cn/tags-17.php" title="JS代码" target="_blank">JS代码</a></li><li><a href="https://www.huaxiuwang.cn/tags-18.php" title="分享" target="_blank">分享</a></li><li><a href="https://www.huaxiuwang.cn/tags-19.php" title="网站域名" target="_blank">网站域名</a></li><li><a href="https://www.huaxiuwang.cn/tags-20.php" title="调用" target="_blank">调用</a></li><li><a href="https://www.huaxiuwang.cn/tags-21.php" title="大家" target="_blank">大家</a></li><li><a href="https://www.huaxiuwang.cn/tags-22.php" title="教程" target="_blank">教程</a></li><li><a href="https://www.huaxiuwang.cn/tags-23.php" title="某站" target="_blank">某站</a></li><li><a href="https://www.huaxiuwang.cn/tags-24.php" title="源码" target="_blank">源码</a></li><li><a href="https://www.huaxiuwang.cn/tags-25.php" title="动态背景" target="_blank">动态背景</a></li><li><a href="https://www.huaxiuwang.cn/tags-26.php" title="服务器" target="_blank">服务器</a></li><li><a href="https://www.huaxiuwang.cn/tags-27.php" title="空间" target="_blank">空间</a></li><li><a href="https://www.huaxiuwang.cn/tags-28.php" title="js代码外链" target="_blank">js代码外链</a></li><li><a href="https://www.huaxiuwang.cn/tags-29.php" title="制作" target="_blank">制作</a></li><li><a href="https://www.huaxiuwang.cn/tags-30.php" title="本地化" target="_blank">本地化</a></li><li><a href="https://www.huaxiuwang.cn/tags-31.php" title="诗梦" target="_blank">诗梦</a></li><li><a href="https://www.huaxiuwang.cn/tags-32.php" title="失踪儿童信息" target="_blank">失踪儿童信息</a></li><li><a href="https://www.huaxiuwang.cn/tags-33.php" title="宝贝回家寻子网" target="_blank">宝贝回家寻子网</a></li><li><a href="https://www.huaxiuwang.cn/tags-34.php" title="测试" target="_blank">测试</a></li><li><a href="https://www.huaxiuwang.cn/tags-35.php" title="简单的代码" target="_blank">简单的代码</a></li><li><a href="https://www.huaxiuwang.cn/tags-36.php" title="数据" target="_blank">数据</a></li><li><a href="https://www.huaxiuwang.cn/tags-37.php" title="网易云" target="_blank">网易云</a></li><li><a href="https://www.huaxiuwang.cn/tags-38.php" title="进度条" target="_blank">进度条</a></li><li><a href="https://www.huaxiuwang.cn/tags-39.php" title="音乐播放器" target="_blank">音乐播放器</a></li><li><a href="https://www.huaxiuwang.cn/tags-40.php" title="源站" target="_blank">源站</a></li><li><a href="https://www.huaxiuwang.cn/tags-41.php" title="留言咨询" target="_blank">留言咨询</a></li><li><a href="https://www.huaxiuwang.cn/tags-42.php" title="跳转" target="_blank">跳转</a></li><li><a href="https://www.huaxiuwang.cn/tags-43.php" title="防镜像" target="_blank">防镜像</a></li><li><a href="https://www.huaxiuwang.cn/tags-44.php" title="ssl协议" target="_blank">ssl协议</a></li><li><a href="https://www.huaxiuwang.cn/tags-45.php" title="更新" target="_blank">更新</a></li><li><a href="https://www.huaxiuwang.cn/tags-46.php" title="FTP软件" target="_blank">FTP软件</a></li><li><a href="https://www.huaxiuwang.cn/tags-47.php" title="主机" target="_blank">主机</a></li><li><a href="https://www.huaxiuwang.cn/tags-48.php" title="伪静态规则" target="_blank">伪静态规则</a></li><li><a href="https://www.huaxiuwang.cn/tags-49.php" title="百度云主机" target="_blank">百度云主机</a></li><li><a href="https://www.huaxiuwang.cn/tags-50.php" title="YOURLS" target="_blank">YOURLS</a></li><li><a href="https://www.huaxiuwang.cn/tags-51.php" title="公共" target="_blank">公共</a></li><li><a href="https://www.huaxiuwang.cn/tags-52.php" title="数据库" target="_blank">数据库</a></li><li><a href="https://www.huaxiuwang.cn/tags-53.php" title="站点选项" target="_blank">站点选项</a></li><li><a href="https://www.huaxiuwang.cn/tags-54.php" title="关于我" target="_blank">关于我</a></li><li><a href="https://www.huaxiuwang.cn/tags-55.php" title="文章归档" target="_blank">文章归档</a></li><li><a href="https://www.huaxiuwang.cn/tags-56.php" title="本地缓存" target="_blank">本地缓存</a></li><li><a href="https://www.huaxiuwang.cn/tags-57.php" title="高富帅" target="_blank">高富帅</a></li><li><a href="https://www.huaxiuwang.cn/tags-58.php" title="index.html" target="_blank">index.html</a></li><li><a href="https://www.huaxiuwang.cn/tags-59.php" title="字体" target="_blank">字体</a></li><li><a href="https://www.huaxiuwang.cn/tags-60.php" title="按钮样式" target="_blank">按钮样式</a></li></ul></aside><aside class="celanbiao" id="ad2"> <h3 style="display:none;"></h3><div class="aside-con clear"><a href="https://www.xuanloog.com/xuanloog/chatu/"><img src="https://i.ki4.cn/2020/07/25/caw9.png"></a></div></aside><aside class="celanbiao" id="hotcelan"> <h3><i class="fa fa-bars"></i>热门文章</h3><ul class="aside-con clear"><li><span class="lr hui">178°C</span><a href="https://www.huaxiuwang.cn/97735.php" title="【后端开发】c#之解决百度地图api APP SN校验失败问题(代码实例)" target="_blank">【后端开发】c#之解决百度地图api APP SN校验失败问题(代码实例)</a></li><li><span class="lr hui">177°C</span><a href="https://www.huaxiuwang.cn/105074.php" title="【后端开发】php文件锁死锁怎么办" target="_blank">【后端开发】php文件锁死锁怎么办</a></li><li><span class="lr hui">165°C</span><a href="https://www.huaxiuwang.cn/104885.php" title="【后端开发】php长连接和短连接区别" target="_blank">【后端开发】php长连接和短连接区别</a></li><li><span class="lr hui">163°C</span><a href="https://www.huaxiuwang.cn/111437.php" title="【后端开发】php有orm吗" target="_blank">【后端开发】php有orm吗</a></li><li><span class="lr hui">160°C</span><a href="https://www.huaxiuwang.cn/85538.php" title="【后端开发】php 生成csv mac下乱码" target="_blank">【后端开发】php 生成csv mac下乱码</a></li><li><span class="lr hui">156°C</span><a href="https://www.huaxiuwang.cn/61258.php" title="【后端开发】详解C#用new和override来实现抽象类的重写区别" target="_blank">【后端开发】详解C#用new和override来实现抽象类的重写区别</a></li><li><span class="lr hui">152°C</span><a href="https://www.huaxiuwang.cn/111624.php" title="【WEB前端开发】ps修补工具在哪" target="_blank">【WEB前端开发】ps修补工具在哪</a></li><li><span class="lr hui">145°C</span><a href="https://www.huaxiuwang.cn/61587.php" title="【后端开发】使用python编写一个统计局域网未关机的脚本并生成excel表格(示例代码)" target="_blank">【后端开发】使用python编写一个统计局域网未关机的脚本并生成excel表格(示例代码)</a></li><li><span class="lr hui">145°C</span><a href="https://www.huaxiuwang.cn/111569.php" title="【后端开发】phpstudy无法访问phpmyadmin" target="_blank">【后端开发】phpstudy无法访问phpmyadmin</a></li><li><span class="lr hui">141°C</span><a href="https://www.huaxiuwang.cn/14484.php" title="【数据库】cocos2dx v3.x 屏幕适配方案" target="_blank">【数据库】cocos2dx v3.x 屏幕适配方案</a></li><li><span class="lr hui">141°C</span><a href="https://www.huaxiuwang.cn/84306.php" title="【WEB前端开发】FTP的文件管理" target="_blank">【WEB前端开发】FTP的文件管理</a></li><li><span class="lr hui">140°C</span><a href="https://www.huaxiuwang.cn/81605.php" title="【后端开发】nginx多版本php详解" target="_blank">【后端开发】nginx多版本php详解</a></li><li><span class="lr hui">140°C</span><a href="https://www.huaxiuwang.cn/103284.php" title="【后端开发】ipython和python区别" target="_blank">【后端开发】ipython和python区别</a></li><li><span class="lr hui">139°C</span><a href="https://www.huaxiuwang.cn/20606.php" title="【编程开发工具】notepad搜索结果窗口不显示" target="_blank">【编程开发工具】notepad搜索结果窗口不显示</a></li><li><span class="lr hui">137°C</span><a href="https://www.huaxiuwang.cn/107995.php" title="【WEB前端开发】ps切片是什么意思?" target="_blank">【WEB前端开发】ps切片是什么意思?</a></li></ul></aside><aside class="celanbiao" id="ad1"> <h3 style="display:none;"></h3><ul class="aside-con clear"><a href="https://www.xuanloog.com/xuanloog/tuji/"><img src="https://i.ki4.cn/2020/10/05/7C550.png"></a</ul></aside> <div id="float" class="div1 clear"> </div> </div> </div> <footer class="footer"> <div class="foot container"> <div class="footcont clear"> <div class="footcont-lf lf"> <p style="color:#fff;">博客相关:</p> <ul class="clear"> </ul> <span><p>声明:本站的文章、图片、资源等来自互联网或者站长原创;版权归原作者所有,仅作为个人学习、研究以及欣赏!如有侵权,请联系i@ki4.cn删除!</p> Copyright © 2020 本站由<a href="http://www.keydatas.com/?aff=MNbMFj" target="_blank"><img src="https://pic.ki4.cn/gg/js.png"/>简数采集</a><a href="https://cloud.tencent.com/act/cps/redirect?redirect=1054&cps_key=05312f1563e6b48626d7c65410e669fb&from=console " target="_blank"><img src="https://pic.ki4.cn/gg/cloud.png"/>腾讯云</a><a href="https://www.bt.cn/?invite_code=MV9od3B1eHM=" target="_blank"><img src="https://pic.ki4.cn/gg/bt.ico"/>宝塔系统</a><a href="https://www.aliyun.com/sale-season/2020/procurement-new-members?userCode=ok4ov9yc" target="_blank"><img src="https://pic.ki4.cn/gg/al.ico"/>阿里云</a>强势驱动<script>var _hmt = _hmt || [];(function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?1f737f16020521cfcc2a149f2b5607e4"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s);})();</script><script type="text/javascript">document.write(unescape("%3Cspan id='cnzz_stat_icon_1278838099'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1278838099%26show%3Dpic' type='text/javascript'%3E%3C/script%3E"));</script></span> </div> <div class="footcont-lr lr"> <p style="color:#fff;">欢迎您关注我:</p> <div class="footcont-lr-cont"> <div class="footcont-lr-cont-img lf"> <img src="https://www.huaxiuwang.cn/zb_users/cache/mochuimg/erweio.png" alt="关注我的微信二维码" title="关注我的微信二维码" /> </div> <div class="footcont-lr-cont-a lf"> 看Cosplay古风插画小姐姐,合集图集打包下载:<a href="https://www.xuanloog.com/">炫龙网 · 炫龙图库</a>。 </div> </div> </div> </div> </div> </footer> <div class="t-opo" id="dengdiv"></div><script src="https://www.huaxiuwang.cn/zb_users/theme/mochu/script/mochu_feiniaomy.js?r=20200624" type="text/javascript"></script> <script src="https://www.huaxiuwang.cn/zb_users/theme/mochu/script/slides.js" type="text/javascript"></script> <script src="https://www.huaxiuwang.cn/zb_users/theme/mochu/script/diantu.js"></script> <script> $(function(){ var lightbox=new LightBox({ speed:'fast', maxWidth:900, maxHeight:600 }); }) </script> <script src="https://www.huaxiuwang.cn/zb_system/script/md5.js" type="text/javascript" async="async"></script> <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.min.css" /> <script src="https://www.huaxiuwang.cn/zb_users/plugin/FY_Prettify/prettify.js" type="text/javascript"></script> <script> pinglunpost(); function pinglunpost() { $.ajax({ type: 'POST', url: bloghost + '/zb_users/theme/mochu/function.php?type=ping', data: {}, dataType: 'json', success: function (res) { $('#pingposthtml').html(res.pinglunpost); $('.headloginhtml').html(res.headloginhtml); $('.Ymem').html(res.Ymem); $('#dengdiv').html(res.logininput); }, error:function(){ $('#dengdiv').html('加载失败.....'); } }); } </script> </body> </html><!--4,225.89 ms , 15 query , 3026kb memory , 0 error-->