• SesJs


    ①引入sea.js的库
    <script type="text/javascript" src='sea/sea.js'></script>
    
    ②如何变成模块?define
    
    //sea下的参数,是不允许修改的。参数的名固定
    //
    // model1.js
    define(function(require, exports, module) {		
    	
    	// 通过 exports : 对外提供借口的对象;
    	// require : 模块之间的接口依赖;
    	// 这样就可以引入 其他模块内的 exports导出的对象;
    	// 而模块3中,使用exports,来导出对应的模块。导出的是一个对象。
    	
    	var A = require('./model3.js');
    
    	function show () {
    		alert(A.a);			// 100
    	}
    
    	exports.show = show;
    });
    
    // model2.js
    define(function (require, exports, modlue) {
    
    	var a = 100;
    
    	exports.a = a;		// 导出模块
    
    })
    
    ③如何调用模块?exports seajs.use
    	
    	// 这里默认根目录是根据 sea.js的目录做为的。这里就引入不进来了。
    	// http://127.0.0.1/osye/sea/sea/js/model1.js"
    	// seajs.use("js/model1.js");
    	// 记得 ./ 从当前目录开始应用
    	// 以当前页面为根目录。
    	// use 的方法,就是使用sea的 方法
    	// 有2个参数,第一个是:模块的地址,第二个是加载好的回调函数。
    	// 回调函数里面有参数,比如名叫 ex , 就是	模块内部定义的exports
    	// 很容易的结局了冲突的问题。不同的模块也可以有相同的同名函数。
    	// 这两个 ex 是不同的对象。
    	
    	seajs.use("./js/model1.js","./js/model2.js" function (ex1, ex2) {
    		ex1.show();		// 第一个模块
    		ex2.show();		// 第二个模块
    	});
    
    	seajs.use("./js/model2.js", function (ex) {
    		ex.show();
    	});
    
    
    ④如何依赖模块?require
    
    	var A = require('./model3.js');
    
    
    
    
    大体上4个步骤,引入sea.js脚本。然后define模块,
    在定义的模块内可以嵌套其他模块,通过exports 和 require 来导出和引入。
    
    产生模块化开发的由来是因为node的出现,用js来代替其他语言做服务器开发。
    因此就产生了commonJs的组织,专门规定服务器端开发规范的。
    
    服务器和浏览器的js有很多不同。模块化开发有很多问题。
    
    浏览器开发规范:
    	AMD规范:requireJS, 
    	CMD规范:seaJS, 升级了commonJS
    
    
    grunt  
    安装流程先安装nodejs和npm(包管理工具)
    sodu npm install -g grunt-cli
    sodu npm install grunt --save-dev
    grunt –version
    
    
    grunt要配置package.json
    
    grunt 合并的时候,define 多出2个参数。专门解决合并操作的。
    	第一个:当前模块的ID ['./main.js']
    	第二个:依赖模块的数组 ['./js/model1.js', './js/model2.js' ...]
    node install
    module.exports = function(grunt) {
    	// 配置
    	grunt.initConfig({
    		 pkg: grunt.file.readJSON('package.json'),
    		 concat : {
    			 // 任务的名字
    			 webqq : {
    				 // 合并文件
    				 files : {
    					 'test/main.js' : ['a.js','b.js','c.js','d.js']
    				 }
    			 }
    		 },
    		 uglify : {
    			 webqq : {
    				 files : {
    					 'test/main.min.js' : ['test/main.js']
     				 }
    			 }
    		 }
    	});
    	
    	//  加载, 依赖
    	grunt.loadNpmTasks('grunt-contrib-concat');
    	grunt.loadNpmTasks('grunt-contrib-uglify');
    
    	// 运行插件
      	grunt.registerTask('default', ['concat','uglify']);
    };
    这样可以满足合并之后,依旧可以使用。
    安装这个2个插件。
    	Seajs + gruntjs开发
    		grunt-cmd-transport
    		grunt-cmd-concat
    
    配一下grunt的参数可以,提取依赖,压缩合并模块。
    
    
    配置信息
    	alias    :  别名配置
    	paths    :  路径配置
    	vars     :  变量配置
    	map      :  映射配置
    	preload  :  预加载项
    	debug    :  调试模式
    	base     :  基础路径
    	charset  :  文件编码
    
    
    module
    	(1)id  :  模块唯一标识
    		alert(modlue.id);	//modlue是第三个参数,id的结果是文件目录。
    		// http://127.0.0.1/js/model3.js
    
    	(2)uri  :  模块绝对路径
    		alert(modlue.uri); 	// http://127.0.0.1/js/model3.js
    
    	(3)dependencies  :  当前模块依赖
    		数组,require的。
    
    
    	(4)exports  :  当前模块对外接口
    		alert(module.exports == exports);		//true
    		这里可以用module.exports = {
    			....
    		}
    		向外导出对象。提供接口,或者属性。
    
    	(5)require.async 异步加载模块
    
    		require.async('./model3.js');	// 异步加载
    
    
    插件 github看一下
    	text
    	style
    	combo
    	flush
    	debug
    	log
    	health
    	
    		spm build
    
    
    
    技巧
    	(1)use 如何引入多模块
    		seajs.use("./js/model1.js","./js/model2.js" function (ex1, ex2) {
    			ex1.show();		// 第一个模块
    			ex2.show();		// 第二个模块
    		});
    
    	(2)Sea.js加ID有利提取 
    		<script type="text/javascript" src='sea/sea.js' id='seaJsId'></script>
    
    	(3)如何改造文件为CMD模块
    		//普通的模块,define 写一个接口, 用exports 导出一个对象就好了。
    		define(function(require, exports, module) {		
    			
    			var a = require('./model3.js');
    
    			function show () {
    				alert(a.a);
    			}
    
    			exports.moduleA = {
    				show : show,
    				   a :a
    			}
    		});
    
    
    	(4)调试接口cache
    		seajs.cache	 在浏览器输入
    
    		Object {http://127.0.0.1/js/model1.js: c, http://127.0.0.1/js/model2.js: c, http://127.0.0.1/js/model3.js: c}
    			http://127.0.0.1/js/model1.js: c
    			http://127.0.0.1/js/model2.js: c
    			http://127.0.0.1/js/model3.js: c
    			__proto__: Object
    			...
    		}
    
  • 相关阅读:
    来看看面试必问的HashMap,一次彻底帮你搞定HashMap源码
    深入浅出!springboot从入门到精通,实战开发全套教程!
    讲一讲Java的字符串常量池,看完你的思路就清晰了
    面向对象的这些核心技术,你掌握后包你面试无忧
    他凭借这70份PDF,3170页文件,成功斩获了含BATJ所有的offer
    springboot实战开发全套教程,让开发像搭积木一样简单!Github星标已上10W+!
    这行代码告诉你!为什么你地下城与勇士(DNF)的装备强化老是失败?
    精益求精!Spring Boot 知识点全面回顾,带你重新细读源码!
    太妙了!Spring boot 整合 Mybatis Druid,还能配置监控?
    putchar(".:-=+*#%@"[(int)(d * 5.0f)])
  • 原文地址:https://www.cnblogs.com/hgonlywj/p/5180993.html
Copyright © 2020-2023  润新知