javascript 同步模块模式

最新推荐文章于 2023-03-30 21:22:00 发布

cdcdhj

最新推荐文章于 2023-03-30 21:22:00 发布

阅读量170

点赞数

分类专栏： javascript学习日记文章标签： javascript

本文链接：https://blog.youkuaiyun.com/cdcdhj/article/details/120712115

版权

javascript学习日记专栏收录该内容

151 篇文章

订阅专栏

本文介绍了如何使用F.js库进行模块定义，包括字符串处理和DOM操作。通过`F.define`和`F.module`函数，展示了如何创建和调用模块，如trim函数和样式设置。核心内容是前端开发中的模块化实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="test">这是一个测试</div>
		<script language="javascript">
		var F=F||{};
		F.define=function(str,fn){
			var parts=str.split('.'),
			old=parent=this,
			i=len=0;
			if(parent[0]==='F'){
				parts=parts.slice(1);
			}
			if(parts[0]==='define'||parts[0]==='module'){
				return;
			}
			//i表示模块的层级
			for(len=parts.length;i<len;i++){
				if(typeof parent[parts[i]]==='undefined'){
					parent[parts[i]]={};
				}
				old=parent;
				parent=parent[parts[i]];
			}
			if(fn){
				old[parts[--i]]=fn();//这里i也表示模块层级，i=parts.length,所以减一
			}
			return this;
		};
		//设置字符模块
		F.define('string',function(){
			return {
				trim:function(str){
					return str.replace(/^\s+|\s+$/g,'');
				}
			}
		});
		//设置容器模块
		F.define('dom',function(){
			var $=function(id){
			$.dom=document.getElementById(id);
			return $;
		}
		$.html=function(html){//获取容器的文本或设置文本
			if(html){
				this.dom.innerHTML=html;
				return this;
			}else{
				return this.dom.innerHTML;
			}
		}
		//定义容器的css属性，这里可以自己增加
		$.style=function(key,value){
			switch(key){
				case 'background':
				return this.dom.style.background=value;
				break;
				case 'color':
				return this.dom.style.color=value;
				break;
				case 'fontSize':
				return this.dom.style.fontSize=value;
				break;
				case 'border':
				return this.dom.style.border=value;
				break;
			}
		}
		return $;
		});
		//这里的注释，先定义后模块，后设置模块方法，和后面的是一样的功能
		/**
		F.define('dom.addClass');
		F.dom.addClass=function(){
			return function(className){
				if(!~this.dom.className.indexOf(className)){
					this.dom.className+=' '+className;
				}
			}
		}();
		**/
		//这里是定义和设置一起的，和上面注释掉的是同样功能
		F.define('dom.addClass',function(){
			return function(className){
				if(!~this.dom.className.indexOf(className)){//先判断是否包含有此定义的CSS类，如果没有,indexOf判断会等于-1，然后-1取反(~这个为取反,-1或1取反都为0)，取反后等于0，!0=true,0的逻辑非为true,当真是就赋给此对象CSS类
					this.dom.className+=' '+className;
				}
			}
		});
		//定义模板方法
		F.module=function(){
			var args=[].slice.call(arguments),
			fn=args.pop(),
			parts=args[0]&&args[0] instanceof Array?args[0]:args,//如果是数组类型就按数组，如果不是就按字符
			modules=[],
			modIDs='',
			i=0,
			ilen=parts.length,
			parent,j,jlen;
			while(i<ilen){//循环所有参数中定义的模块，去掉父级F开头，压缩到模块数组中
				if(typeof parts[i]==='string'){
					parent=this;
					modIDs=parts[i].replace(/^F\./,'').split('.');
					for(j=0,jlen=modIDs.length;j<jlen;j++){
						parent=parent[modIDs[j]]||false;
					}
					modules.push(parent);
				}else{
					modules.push(parts[i]);
				}
				i++
			}
			fn.apply(null,modules);
		};
		F.module('dom',function(dom,style){
			dom('test').html('新添加的内容');
			dom('test').style('background','red');
			dom('test').style('color','white');
		});
		F.module('dom','string.trim',function(dom,trim){
			var html=dom('test').html();
			var text=trim(html);
			console.log('*'+html+'*','*'+text+'*');
		});
		</script>
	</body>
</html>