Layui引起的对前端的一次记录
前言
首先会做这次记录,也是因为自己也是第一次去接触这个框架,以前总是听说,并没有去用过。这次出于实习的原因,去学习了一下Layui这个“面向后端开发者的框架”。其次,此篇记录仅供参考,毕竟我也不是开发者,所以不能保证文章引用的内容以及自己的理解是否正确,请自行决断一些内容的正确性。
前段时间看到一个不错的博客是个人写的关于前端面试的还是比较全面基础的(虽然个人是后端,但是如果有学前端的看到这篇随笔,可以当做参考一下)
在这里贴出来:
【GitHub】:https://github.com/WindrunnerMax/EveryDay
【博客】https://blog.touchczy.top/#/
Layui
官方文档:https://www.layui.com/doc/
官方示例:https://www.layui.com/demo/
Gitee:https://gitee.com/sentsin/layui
GitHub:https://github.com/sentsin/layui
简介
做总结的时候才发现其实自己要总结的点还是比较少的,因为官方文档已经说的很详细了,所以在此我想说的是,目前个人用的多的还是像组件这类东西,毕竟现在基本都是封装之后的东西,而且这些封装过后的东西也是用的比较多比较爽的,还有就是Gitee上有一个开源模板"Layuimini",个人感觉作为后台BOSS的模板还是挺不错的,毕竟大部分人觉得layui比amazeui稍微好看一点点(不过还是出于真心,各有各的好,有的人也觉得amazeui更好看一点,至于官网地址自己可以搜搜看,我放文章后面了)。
像框架、工具这类的东西,感觉直接看官网文档是来的较快而且比较权威的。
【开源仓库】Layuimini:https://gitee.com/zhongshaofa/layuimini
内容摘抄于官方文档中——入门指南篇
layui(谐音:类 UI) 是一套开源的 Web UI 解决方案,采用自身经典的模块化规范,并遵循原生 HTML/CSS/JS 的开发方式,极易上手,拿来即用。其风格简约轻盈,而组件优雅丰盈,从源代码到使用方法的每一处细节都经过精心雕琢,非常适合网页界面的快速开发。layui 区别于那些基于 MVVM 底层的前端框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,它更多是面向后端开发者,你无需涉足前端各种工具,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
layui 定义为「经典模块化」,并非是自吹她自身有多优秀,而是有意避开当下 JS 社区的主流方案,试图以尽可能简单的方式去诠释高效!她的所谓经典,是在于对返璞归真的执念,她以当前浏览器普通认可的方式去组织模块!我们认为,这恰是符合当下国内绝大多数程序员从旧时代过渡到未来新标准的绝佳指引。所以 layui 本身也并不是完全遵循于 AMD 时代,准确地说,她试图建立自己的模式
//layui 模块的定义(新 js 文件)
layui.define([mods], function(exports){
//……
exports('mod', api);
});
//layui 模块的使用
layui.use(['mod1', 'mod2'], function(args){
var mod = layui.mod1;
//……
});
没错,她具备早前 AMD 的影子,又并非受限于 CommonJS 的那些条条框框,layui 认为这种轻量的组织方式,比WebPack更符合绝大多数场景。所以她坚持采用经典模块化,也正是能让人避开工具的复杂配置,回归简单,安静高效地编织原生态的 HTML/CSS/JS。
但是 layui 又并非是 RequireJS 那样的模块加载器,而是一款 UI 解决方案,与 BootStrap 的不同又在于:layui 糅合了自身对经典模块化的理解。这使得你可以在 layui 组织的框架之内,以更具可维护性的代码、去更好的编织丰富的用户界面
JavaScript模块化开发
早期的Javascript是作为浏览器的脚本语言,使用
标签直接引入,没有所谓的模块化。也就是说如果我们需要一个js文件,我们就加一个
标签,把需要的js引入进来。这种方式的特点在于:简单粗暴。
但是当项目越来越大,依赖越来越多时可能就会出现问题,比如逻辑越来越混乱,页面也越复杂,然后可维护性就变差了,除此之外还存在全局变量暴露、文件的引入顺序的问题。比如说一个文件引入另一个文件,另一个文件又依赖另一个文件,那么这三个加载数据就会很重要,如果第一个没有加载完,那么接下来就会出错。
实际上,在JavaScript的发展历史上,第一个真正模块化的是nodejs,nodejs就是使用了我们其中的一个模块化标准的规范,它就是common js。
有了这个模块化的概念后,便有了node,node的文件管理都是基于模块化的;我们可以从另一个角度来看,如果JavaScript想要进军服务端,在服务端没有模块化这是一个灾难,因此common js社区制定了一个commonjs规范,也就是模块化的规范;有了这个规范之后,node就出现了。
JavaScript引入模块化解决了哪些问题:
避免了全局污染
模块复用,提高了开发效率和协作
模块功能单一职能方便维护
解决了文件依赖顺序
模块化的标准(有三个):
CommonJs
AMD - 异步模块
CMD - 通用模块
AMD (异步模块定义Asynchronous Module Definition)格式的最终目的是提供一个当前开发者能使用的模块化Javascript方案。它出自于Dojo用XHR+eval的实践经验,这种格式的支持者想在以后的项目中避免忍受过去的这些弱点
AMD是"Asynchronous Module Definition"的缩写,意思就是"异步模块定义"。由于不是JavaScript原生支持,使用AMD规范进行页面开发需要用到对应的库函数,也就是大名鼎鼎RequireJS,实际上AMD 是 RequireJS 在推广过程中对模块定义的规范化的产出
它采用异步方式加载模块,模块的加载不影响它后面语句的运行。所有依赖这个模块的语句,都定义在一个回调函数中,等到加载完成之后,这个回调函数才会运行。
RequireJS主要解决两个问题
多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器
js加载的时候浏览器会停止页面渲染,加载文件越多,页面失去响应时间越长
CommonJS模块建议指定一个简单的用于声明模块服务器端的API,并且不像AMD那样尝试去广泛的操心诸如io,文件系统,约定以及更多的一揽子问题。
这种形式为CommonJS所建议--它是一个把目标定在设计,原型化和标准化Javascript API的自愿者工作组。迄今为止,他们已经在模块和包方面做出了批复标准的尝试
根据CommonJS规范:
1.一个单独的文件就是一个模块。每一个模块都是一个单独的作用域,也就是说,在该模块内部定义的变量,无法被其他模块读取,除非定义为global对象的属性。
2.输出模块变量的最好方法是使用module.exports对象。
3.加载模块使用require方法,该方法读取一个文件并执行,返回文件内部的module.exports对象
CMD 即Common Module Definition通用模块定义,CMD规范是国内发展出来的,就像AMD有个requireJS,CMD有个浏览器的实现SeaJS,SeaJS要解决的问题和requireJS一样,只不过在模块定义方式和模块加载(可以说运行、解析)时机上有所不同
最后可参考这些文章(仔细甄别内容正确性,因为我也是做了个参考,并未保证这些文章百分百正确):
前端模块化,
谈谈我的理解-组件化/模块化,
对前端工程化、模块化、组件化开发的理解。
前端框架官方文档
【Vue.js】
https://vuejs.bootcss.com/guide/
https://cn.vuejs.org/
【ElementUI】
https://element-plus.gitee.io/#/zh-CN
【Layui】
https://www.layui.com/
【妹子UI(amazeui)】
http://amazeui.shopxo.net/
【Semantic UI】
https://semantic-ui.com/
【EasyUI】
https://www.jeasyui.net/
【BootStrap】
https://www.bootcss.com/
【Bootstrap可视化布局】
https://www.bootcss.com/p/layoutit/
Layui引起的对前端的一次记录的更多相关文章
- html中layui+jfinal模板实现前端搜索功能
<input type="text" id="campus" class="layui-input" onkeyup="ck ...
- layui上传文件前端报404,实际文件已经上传成功
原因:上传回调的方法接收的参数应该是json格式的,之前返回的是String,所以一直走异常的方法 第一种 在后台上加上@ResponseBody 第二种 @ResponseBody @Request ...
- WEB前端学习代码片段记录
1.JS设计模式片段 Function.prototype.addMethod = function (name,fn) { this.prototype[name] = fn; return thi ...
- DWZ前端框架使用问题记录
心得体验:DWZ依赖特定的HTML结构,所以一定要注意项目中的HTML结构,多用firebug查看,还有如果使用一些组件的时候出现问题,可以查看下返回JSON格式是否符合组件规定的JSON格式,很多都 ...
- Web前端开发的一点记录
工欲善其事必先利其器,开发工具选择Sublime Text 简称(ST) 本文所说的均在Windows NT 环境下使用的ST3运行. ST的Package Control安装方法: 1. 直接输入p ...
- Antd前端开发采坑记录
背景 基于页面友好,界面整洁美观:基于Antd框架开发虾能平台 选型 基于Antd-admin工程架构,进行开发:基于Antd+React+Umj 采坑记录 按照Html方式天机onClick方法,每 ...
- android下前端开发诡异bug记录&解决方法
1.border-radius有bug,围不住background 描述:设置了border-radius后,背景色依然会从圆角里冒出来 解决方法:在设置了border-radius的容器加上back ...
- 前端nginx后端tomcat记录真实ip
修改nginx主配置文件:/usr/local/nginx/conf/nginx.conf proxy_set_header Host $host; proxy_set_header X-Real-I ...
- 网页前端之JavaScript学习记录总结篇
咔咔咔咔咔咔扩扩扩扩扩扩扩扩扩扩
随机推荐
- gitbook导出markdown文件为pdf格式
前言本人想完成如题所示的操作,可是兜兜转转在网上搜了好久,不是Linux下的教程就是mac OS下的教程,而且一大堆windows的教程能够说明白的寥寥无几,本着分享的态度,鄙人今天特整理教程如下: ...
- 流暢的pyhton4---數據庫備份
一.linux數據庫備份腳本 1.数据库备份,命令如下: ./pg_dump -h localhost -p 5432 -U postgres -W -F c -b -v -f "/opt/ ...
- netty系列之:netty中的ByteBuf详解
目录 简介 ByteBuf详解 创建一个Buff 随机访问Buff 序列读写 搜索 其他衍生buffer方法 和现有JDK类型的转换 总结 简介 netty中用于进行信息承载和交流的类叫做ByteBu ...
- 在屏幕上搜索图片并返回图片所在位置的坐标的AutoHotkey脚本源代码(类似大漠插件)
;~ 在屏幕上搜索图片并返回图片所在位置的坐标的AutoHotkey脚本源代码(类似大漠插件) ; https://www.autohotkey.com/boards/viewtopic.php?t ...
- azure bash: kubectl: command not found
[root@***]# az aks install-cliDownloading client to "/usr/local/bin/kubectl" from "ht ...
- 跟Waf斗智斗勇的一天
差点心态爆炸 幸亏整出来了... 最近快放寒假了..临近高考不到最后一星期绝对不学习.. 挖下SRC 这家自带的waf头疼死我了 想几次Fuzz全都撞壁了 然后发现了这家waf的规则 信息搜集不说了 ...
- 被字节跳动、小米、美团面试官问的AndroidFramework难倒了? 这里有23道面试真题,助力成为offer收割机!
目录 1.Android中多进程通信的方式有哪些?a.进程通信你用过哪些?原理是什么?(字节跳动.小米)2.描述下Binder机制原理?(东方头条)3.Binder线程池的工作过程是什么样?(东方头条 ...
- Alibaba-技术专区-Dubbo3总体技术体系介绍及技术指南(目录)
Dubbo3开题简介 如开篇所述,Dubbo 提供了构建云原生微服务业务的一站式解决方案,可以使用 Dubbo 快速定义并发布微服务组 件,同时基于 Dubbo 开箱即用的丰富特性及超强的扩展能力,构 ...
- 痞子衡嵌入式:在IAR开发环境下将关键函数重定向到RAM中执行的三种方法
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是在IAR开发环境下将关键函数重定向到RAM中执行的三种方法. 嵌入式项目里应用程序代码正常是放在 Flash 中执行的,但有时候也需要将 ...
- ElasticSearch进阶篇(一)--版本控制
一.前言 ElasticSearch(以下简称ES)的数据写入支持高并发,高并发就会带来很普遍的数据一致性问题.常见的解决方法就是加锁.同样,ES为了保证高并发写的数据一致性问题,加入了类似于锁的实现 ...