[编程]-Layui源码分析＜1＞
⽂章⽬录
Layui源码分析
分析源码的⽬的
学习设计框架的理念
学习组件实现技巧
巩固JavaScript和jQuery知识
⽆限接近这些⽜⼈
什么是Layui
layui（谐⾳：类 UI) 是⼀套开源的 Web UI 解决⽅案，采⽤⾃⾝经典的模块化规范，并遵循原⽣ HTML/CSS/JS 的开发⽅式，极易上⼿，拿来即⽤。其风格简约轻盈，⽽组件优雅丰盈，从源代码到使⽤⽅法的每⼀处细节都经过精⼼雕琢，⾮常适合⽹页界⾯的快速开发。⽆需涉⾜前端各种⼯具，只需⾯
对浏览器本⾝，让⼀切你所需要的元素与交互，从这⾥信⼿拈来。
从⽹站上看下载量，已经到达2160887次，即下载了216万多次，对于在程序开发的领域，有这么多次下载量总能说明问题。
设计layui的初衷
⽤⼤⽜贤⼼说起来，当时要做layui⽬的很明确，就是：“由职业前端倾情打造，⾯向全层次的前后端开发者，易上⼿开箱即⽤的 Web UI
组件库”。贤⼼出发点很简单：满⾜服务端程序员的需求。在layui⽹站上，layui的特点：
返璞归真。
⾝处在前端社区的繁荣之下，我们都在有意或⽆意地追逐。⽽ layui 偏偏回望当初，奔赴在返璞归真的漫漫征途，⾃信并勇敢着，追寻于原⽣态的书写指令，试图以最简单的⽅式诠释⾼效
双⾯体验。
拥有双⾯的不仅是⼈⽣，还有 layui。⼀⾯极简，⼀⾯丰盈。极简是视觉所见的外在，是开发所念的简易。丰盈是倾情雕琢的内在，是信⼿拈来的承诺。⼀切本应如此，简⽽全，双重体验。
layui组件世界
layui的元素由以下组成：布局（栅格、后台布局）、颜⾊、字体图标、动画、按钮、表单、导航条、⾯包屑、选项卡、进度条、⾯板、静态表格、徽章、时间线、辅助元素等。
layui 提供了丰富的内置模块，他们皆可通过模块化的⽅式按需加载，其中包括：layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。
Layui的模块化之路
Layui中怎么做模块，这是贤⼼按照js的传统创造的，是不与任何标准兼容的⽅案，所以很难把layui整合到其它项⽬中，但如果按layui为主标准，需要把其它的模块进⾏包装，改造成符合layui标准的模块，然后在layui中使⽤。模块思路采⽤了⼏年前的以浏览器为宿主的类 AMD 模块管理⽅式，却⼜并⾮受限于 CommonJS 的那些条条框框，它拥有⾃⼰的模式，更加轻量和简单。
layui 定义了⼀套更轻量的模块规范。并且这种⽅式在经过了⼤量的实践后，成为 layui 最核⼼的模块加载引擎。layui 通过 define⽅法定义模块，利⽤use ⽅法加载使⽤模块。所以先从define和use这两个⽅法说起。
LayUI的零依赖的部署⽅式和全模块的加载⽅式，就⼤概能知道LayUI的设计哲学了.
<link rel="stylesheet" href="/layui/css/layui.css">
<script src="/layui/layui.all.js"></script>
<script>
(function(){
var layer = layui.layer;
layer.msg('Hello World');
})();
</script>
JavaScript的模块化实现
通⾏的Javascript模块规范共有两种：和。
CommonJS
2009年，美国程序员Ryan Dahl创造了项⽬，将javascript语⾔⽤于服务器端编程，这标志"Javascript模块化编程"正式诞⽣，在浏览器环境下，没有模块也不是特别⼤的问题，毕竟⽹页程序的复杂性有限；但是在服务器端，⼀定要有模块，与操作系统和其他应⽤程序互动，否则根本没法编程。node.js的，就是参照规范实现的。在CommonJS中，有⼀个全局性⽅法require()，⽤于加载模块。假定有⼀个数学模块math.js，就可以像下⾯这样加载：
var math = require('math');
math.add(2,3); // 5
由于⼀个重⼤的局限，使得CommonJS规范不适⽤于浏览器环境：
第⼆⾏math.add(2, 3)，在第⼀⾏require(‘math’)之后运⾏，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应⽤就会停在那⾥等。
这对服务器端不是⼀个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是⼀个⼤问题，因为模块都放在服务器端，等待时间取决于⽹速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采⽤"同步加载"（synchronous），只能采⽤"异步加载"（asynchronous）。这就是AMD规范诞⽣的背景。
AMD
是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采⽤异步⽅式加载模块，模块的加载不影响它后⾯语句的运⾏。所有依赖这个模块的语句，都定义在⼀个回调函数中，等到加载完成之后，这个回调函数才会运⾏。
AMD也采⽤require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
第⼀个参数[module]，是⼀个数组，⾥⾯的成员就是要加载的模块；第⼆个参数callback，则是加载成功之后的回调函数。如果将前⾯的代码改写成AMD形式，就是下⾯这样：
require(['math'], function (math) {
    math.add(2, 3);
  });
主要有两个Javascript库实现了AMD规范：和。
layui.js外层沙箱以及命名空间$
//⽤⼀个函数域包起来，就是所谓的沙箱
//在这⾥边var定义的变量，属于这个函数域内的局部变量，避免污染全局
//把当前沙箱需要的外部变量通过函数参数引⼊进来
//只要保证参数对内提供的接⼝的⼀致性，你还可以随意替换传进来的这个参数
"use strict";
win.layui =new Layui();
})( window );
沙箱中第⼀句"use strict";
是表⽰使⽤javascript的严格模式，对于低级的浏览器，这⾥相当⼀字符串，所以兼容性是没问题的，详细的话，在阮⼀峰的⽂章有介绍。
为什么要创建这样⼀个“⾃调⽤匿名函数”呢？
通过定义⼀个匿名函数，创建了⼀个“私有”的命名空间，该命名空间的变量和⽅法，不会破坏全局的命名
空间。这点⾮常有⽤也是⼀个JS框架必须⽀持的功能。
为什么要传⼊window呢
通过传⼊window变量，使得window由全局变量变为局部变量，当在layui代码块中访问window时，不
需要将作⽤域链回退到顶层作⽤域，这样可以更快的访问window；
layui.js中的框架代码
"use strict";
Layui=function(){
this.v ='2.X';//版本号
}
//定义组件
Layui.prototype.define=function(deps, factory){
callback=function(){
factory(function(app, exports){
setApp(app, exports);
//此处给layui继续挂载变量，增加callback数组属性，记录每个模块的回调函数          config.callback[app]=function(){
factory(setApp);
}
});
};
//把相关组件加载
that.use(deps, callback,null,'define');
};
Layui.prototype.use=function(apps, callback, exports,from){
var item = apps[0]
function onScriptLoad(e, url){
config.status[item]?onCallback():setTimeout(poll,4);
};
function onCallback(){
//此处问号表达式，多于1个app时，调⽤⾃⼰，进⼊递归调⽤
apps.length >1? that.use(apps.slice(1), callback, exports,from): if(typeof layui.jquery ==='function'&&from!=='define'){
return layui.jquery(function(){
callback.apply(layui, exports);
});
};
jquery在一个元素后追加标签callback.apply(layui, exports);
};
//apps中的模块已经加载时
if( apps.length ===0||(layui['layui.all']&& modules[item])){
return onCallback(), that;
}
//⾸次加载模块
if(!dules[item]){
//创建script的标签，追加到head中，同时绑定消息
var node = ateElement('script');
head.appendChild(node);
if(node.attachEvent){
node.attachEvent('onreadystatechange',function(e){
onScriptLoad(e, url);
});
}else{
node.addEventListener('load',function(e){
onScriptLoad(e, url);
},false);
}
}else{
(function poll(){
onCallback()
}());
}
return that;
};
win.layui =new Layui();
})( window );
以上就是layui中use⽅法和define⽅法的框架代码，可参照源码详细思考。<；欢迎⼤家讨论>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。