• easyloader [easyui_1.4.2] 分析源码,妙手偶得之


    用easyui很久了,但是很少去看源码. 有解决不了的问题就去百度... 

    今日发现,easyui的源码不难懂. 而且结合 easyloader 可以非常方便的逐个研究easyui的组件.

    但是, easyloader 的官方API介绍非常简略. 

    easyloader.base = '../'; // 设置 easyui 基础目录  
    easyloader.load('messager', function(){ // 加载指定模块  
        $.messager.alert('Title', 'load ok'); 
    }); 
    

    如上:

    (1) easyloader.base ,应该指向哪个目录? 

    (2) easyloader.load('messager', ...  不需要提前引入css文件吗?

    API里没有说明这些问题. 没办法,只能去看源码了.

    看过源码之后, 可以知道:

    (1) easyloader.base -> 应该指向一个root目录, 此root目录必须是包含plugins, themes, locale ,其实就是从官网下载的easyui某个版本解压后的根目录. (源码中明确设定,加载css从themes目录获取, 加载js从plugins目录获取...)

    (2) easyloader.load('messager', function(){}); 也可以写成 using('messager',function(){}) . 这种写法是采用loadModule()方式加载文件的. 会加载module的js和css以及依赖module的js和css.

    easyloader 的源码比较简单. 分析源码时,我是采用妙味课堂杜鹏老师分析jquery的方法来的. 分析如下,比较简陋,原因是不难,没什么可写的.

    * easyloader [easyui_1.4.2]
    	|- 源码 {426} 行.
    
    (function(){
    	modules: {} 	//(15, 199)
    	locales: {} 	//(201, 224)
    	queues: 
    	loadJs(): 		//(228, 244)
    	runJs(): 		//()
    	loadCss(): 		//
    	loadSingle(): 	//(267, 307)
    	loadModule(): 	//(309, 371)
    	easyloader: { 	//(373, 403)
    		modules:
    		locales:
    		base:
    		theme:
    		css:
    		locale:
    		timeout:
    		load:
    		onProgress:
    		onLoad:
    	}
    	
    	window.using = easyloader.load; 	//(415, )
    
    })();
    

      

    写个小例子.

    jquery-easyui-1.4.2

      |- locale

      |- my

        |- demo1

          |- test.html

      |- plugins

      |- themes

    ...

    test.html

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<script type="text/javascript" src="../../jquery.min.js"></script>
    	<script type="text/javascript" src="../../easyloader.js"></script>
    	<script type="text/javascript">
    		//
    		easyloader.base = "../../";
    		using('messager', function(){
    			$.messager.alert('系统提示','Hello World!','info');
    		});
    	</script>
    </head>
    <body>
    	
    </body>
    </html>
    

    jquery和easyloader本身必须引入.其他的js和css就不用引入了. 

    easyloader只是加载easyui量声定制的. 用来作研究还可以. 万能加载还是得学习使用 require.js 和 sea.js

  • 相关阅读:
    java期末复习2
    java期末复习
    Educational Codeforces Round 76 (Rated for Div. 2)
    ICPC南昌时间安排
    codeforces 597 div2 ABCDF
    codeforces 597 div2 ABC
    Vue中provide和inject 用法
    Js打印九九乘法表
    document.documentElement和document.body的区别
    移动端关于横屏问题
  • 原文地址:https://www.cnblogs.com/juedui0769/p/5111702.html
Copyright © 2020-2023  润新知