首页 / JAVASCRIPT / 据说是Google首页的网页模块拖动代码_布局与层

据说是Google首页的网页模块拖动代码_布局与层

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了据说是Google首页的网页模块拖动代码_布局与层，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4117字，纯文字阅读大概需要6分钟。

内容图文

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>据说是Google首页的网页模块拖动代码</title> 
<script type="text/javascript"> 
var Common = { 
getEvent: function() {//ie/ff 
if (document.all) { 
return window.event; 
} 
func = getEvent.caller; 
while (func != null) { 
var arg0 = func.arguments[0]; 
if (arg0) { 
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) { 
return arg0; 
} 
} 
func = func.caller; 
} 
return null; 
}, 
getMousePos: function(ev) { 
if (!ev) { 
ev = this.getEvent(); 
} 
if (ev.pageX || ev.pageY) { 
return { 
x: ev.pageX, 
y: ev.pageY 
}; 
}

if (document.documentElement && document.documentElement.scrollTop) { 
return { 
x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, 
y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop 
}; 
} 
else if (document.body) { 
return { 
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, 
y: ev.clientY + document.body.scrollTop - document.body.clientTop 
}; 
} 
}, 
getElementPos: function(el) { 
el = this.getItself(el); 
var _x = 0, _y = 0; 
do { 
_x += el.offsetLeft; 
_y += el.offsetTop; 
} while (el = el.offsetParent); 
return { x: _x, y: _y }; 
}, 
getItself: function(id) { 
return "string" == typeof id ? document.getElementById(id) : id; 
}, 
getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : (document.body?document.body.offsetWidth:0), h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : (document.body ? document.body.offsetHeight : 0) }, 
isIE: document.all ? true : false, 
setOuterHtml: function(obj, html) { 
var Objrange = document.createRange(); 
obj.innerHTML = html; 
Objrange.selectNodeContents(obj); 
var frag = Objrange.extractContents(); 
obj.parentNode.insertBefore(frag, obj); 
obj.parentNode.removeChild(obj); 
}, 
firstChild: function(parentObj, tagName) { 
if (Common.isIE) { 
return parentObj.firstChild; 
} 
else { 
var arr = parentObj.getElementsByTagName(tagName); 
return arr[0]; 
} 
}, 
lastChild: function(parentObj, tagName) { 
if (Common.isIE) { 
return parentObj.lastChild; 
} 
else { 
var arr = parentObj.getElementsByTagName(tagName); 
return arr[arr.length - 1]; 
} 
}, 
setCookie: function(name, value) { 
document.cookie = name + "=" + value; 
}, 
getCookie: function(name) { 
var strCookie = document.cookie; 
var arrCookie = strCookie.split("; "); 
for (var i = 0; i < arrCookie.length; i++) { 
var arr = arrCookie[i].split("="); 
if (!arr[1]) { 
return ""; 
} 
if (arr[0] == name) { 
return arr[1]; 
} 
} 
return ""; 
}, 
delCookie: function(name) { 
var exp = new Date(); 
exp.setTime(exp.getTime() - 1); 
var cval = this.getCookie(name); 
if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString(); 
} 
}

///------------------------------------------------------------------------------------------------------ 
var Class = { 
create: function() { 
return function() { this.init.apply(this, arguments); } 
} 
} 
var Drag = Class.create(); 
Drag.prototype = { 
init: function(titleBar, dragDiv, Options) { 
//设置点击是否透明，默认透明60% 
titleBar = Common.getItself(titleBar); 
dragDiv = Common.getItself(dragDiv); 
this.dragArea = { maxLeft: -9999, maxRight: 9999, maxTop: -9999, maxBottom: 9999 }; 
if (Options) { 
this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100; 
if (Options.area) { 
if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left }; 
if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right }; 
if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top }; 
if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom }; 
} 
} 
else { 
this.opacity = 60; 
} 
this.originDragDiv = null; 
this.tmpX = 0; 
this.tmpY = 0; 
this.moveable = false; 
this.dragArray = [];

var dragObj = this; 
var dragTbl = document.getElementById("dragTable");

titleBar.onmousedown = function(e) { 
var ev = e || window.event || Common.getEvent(); 
//只允许通过鼠标左键进行拖拽,IE鼠标左键为1 FireFox为0 
if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) { 
} 
else { 
return false; 
}

//处理特殊情况：在最上/下面MOVE时不碰到现有DIV的情况下，又回到起始拖拽的列最上/下方 
var tmpColId; 
for (c = 0; c < dragTbl.rows[0].cells.length; c++) { 
for (k = 0; k < dragTbl.rows[0].cells[c].getElementsByTagName("DIV").length; k++) { 
if (dragDiv.id == dragTbl.rows[0].cells[c].getElementsByTagName("DIV")[k].id) { 
tmpColId = c; 
break; 
} 
} 
} 
var tmpPosFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[tmpColId], "DIV")); 
var tmpPosLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV")); 
var tmpObj = { colId: tmpColId, firstChildUp: tmpPosFirstChild.y, lastChildDown: tmpPosLastChild.y + Common.lastChild(dragTbl.rows[0].cells[tmpColId], "DIV").offsetHeight };

//保存当前可拖拽各容器的所在位置 
dragObj.dragArray = dragObj.RegDragsPos();

//插入虚线框 
var dashedElement = document.createElement("div"); 
dashedElement.style.cssText = dragDiv.style.cssText; 
dashedElement.style.border = " dashed 2px #aaa "; 
dashedElement.style.marginBottom = "6px"; 
dashedElement.style.width = dragDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //减去boderWidth使虚线框大小保持与dragDiv一致 
dashedElement.style.height = dragDiv.offsetHeight - 2 * parseInt(dashedElement.style.borderWidth) + "px"; //加上px 保证FF正确 
dashedElement.style.position = "relative"; 
if (dragDiv.nextSibling) { 
dragDiv.parentNode.insertBefore(dashedElement, dragDiv.nextSibling); 
} 
else { 
dragDiv.parentNode.appendChild(dashedElement); 
} 
//拖动时变为absolute 
dragDiv.style.width = dragDiv.offsetWidth + "px"; 
dragDiv.style.position = "absolute";

dragObj.moveable = true; 
dragDiv.style.zIndex = dragObj.GetZindex() + 1;

var downPos = Common.getMousePos(ev); 
dragObj.tmpX = downPos.x - dragDiv.offsetLeft; 
dragObj.tmpY = downPos.y - dragDiv.offsetTop;

if (Common.isIE) { 
dragDiv.setCapture(); 
} else { 
window.captureEvents(Event.mousemove); 
}

dragObj.SetOpacity(dragDiv, dragObj.opacity);

//FireFox 去除容器内拖拽图片问题 
if (ev.preventDefault) { 
ev.preventDefault(); 
ev.stopPropagation(); 
}

document.onmousemove = function(e) { 
if (dragObj.moveable) { 
var ev = e || window.event || Common.getEvent(); 
//IE 去除容器内拖拽图片问题 
if (document.all) //IE 
{ 
ev.returnValue = false; 
}

var movePos = Common.getMousePos(ev); 
dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px"; 
dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px";

var targetDiv = null; 
for (var k = 0; k < dragObj.dragArray.length; k++) { 
if (dragDiv == dragObj.dragArray[i]) { 
continue; 
}

if (movePos.x > dragObj.dragArray[k].PosLeft && movePos.x < dragObj.dragArray[k].PosLeft + dragObj.dragArray[k].PosWidth 
&& movePos.y > dragObj.dragArray[k].PosTop && movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight 
) { 
targetDiv = document.getElementById(dragObj.dragArray[k].DragId); 
if (movePos.y < dragObj.dragArray[k].PosTop + dragObj.dragArray[k].PosHeight / 2) { 
//往上移 
dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; 
targetDiv.parentNode.insertBefore(dashedElement, targetDiv); 
} 
else { 
//往下移 
dashedElement.style.width = targetDiv.offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; 
if (targetDiv.nextSibling) { 
targetDiv.parentNode.insertBefore(dashedElement, targetDiv.nextSibling); 
} 
else { 
targetDiv.parentNode.appendChild(dashedElement); 
} 
} 
} 
}

for (j = 0; j < dragTbl.rows[0].cells.length; j++) { 
var startLeft = Common.getElementPos(dragTbl.rows[0].cells[j]).x; 
if (movePos.x > startLeft && movePos.x < startLeft + dragTbl.rows[0].cells[j].offsetWidth) { 
///列无DIV 
if (dragTbl.rows[0].cells[j].getElementsByTagName("div").length == 0) { 
dashedElement.style.width = dragTbl.rows[0].cells[j].offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; 
dragTbl.rows[0].cells[j].appendChild(dashedElement); 
} 
else { 
var posFirstChild = Common.getElementPos(Common.firstChild(dragTbl.rows[0].cells[j], "DIV")); 
var posLastChild = Common.getElementPos(Common.lastChild(dragTbl.rows[0].cells[j], "DIV")); 
//处理特殊情况：在最上/下面MOVE时不碰到现有DIV的情况下，又回到起始拖拽的列最上/下方 
var tmpUp, tmpDown; 
if (tmpObj.colId == j) { 
tmpUp = tmpObj.firstChildUp; 
tmpDown = tmpObj.lastChildDown; 
} 
else { 
tmpUp = posFirstChild.y; 
tmpDown = posLastChild.y + Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetHeight; 
}

if (movePos.y < tmpUp) {///从最上面插入虚线框 
dashedElement.style.width = Common.firstChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; 
dragTbl.rows[0].cells[j].insertBefore(dashedElement, Common.firstChild(dragTbl.rows[0].cells[j], "DIV")); 
} 
else if (movePos.y > tmpDown) {///从最下面插入虚线框 
dashedElement.style.width = Common.lastChild(dragTbl.rows[0].cells[j], "DIV").offsetWidth - 2 * parseInt(dashedElement.style.borderWidth) + "px"; 
dragTbl.rows[0].cells[j].appendChild(dashedElement); 
}

} 
} 
} 
} 
};

};

} 
}, 
SetOpacity: function(dragDiv, n) { 
if (Common.isIE) { 
dragDiv.filters.alpha.opacity = n; 
} 
else { 
dragDiv.style.opacity = n / 100; 
}

}, 
GetZindex: function() { 
var maxZindex = 0; 
var divs = document.getElementsByTagName("div"); 
for (z = 0; z < divs.length; z++) { 
maxZindex = Math.max(maxZindex, divs[z].style.zIndex); 
} 
return maxZindex; 
}, 
RegDragsPos: function() { 
var arrDragDivs = new Array(); 
var dragTbl = document.getElementById("dragTable"); 
var tmpDiv, tmpPos; 
for (i = 0; i < dragTbl.getElementsByTagName("div").length; i++) { 
tmpDiv = dragTbl.getElementsByTagName("div")[i]; 
if (tmpDiv.className == "dragDiv") { 
tmpPos = Common.getElementPos(tmpDiv); 
arrDragDivs.push({ DragId: tmpDiv.id, PosLeft: tmpPos.x, PosTop: tmpPos.y, PosWidth: tmpDiv.offsetWidth, PosHeight: tmpDiv.offsetHeight }); 
} 
} 
return arrDragDivs; 
} 
}

.dragDiv,.nodragDiv{ 
position:relative; 
filter:alpha(opacity=100); 
opacity:1; 
margin-bottom:6px; 
background-color:#FFFFFF; 
} 
</style> 
</head> 
<body > 
<script type="text/javascript">

</ script> 
<table id="dragTable" cellpadding="3" style=" border:solid 0px green;width:98%;"> 
<tr> 
<td valign="top" style="width:30%"> 
<div class="dragDiv" id="dragDiv1" > 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> 
<tr id="titleBar1" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> 
<th align="left" unselectable="on" >Title1</th> 
</tr> 
<tr style="height:130px;padding:3px;" align="left" valign="top" > 
<td unselectable="on">这里的字比较长....我来了....中国....中国...外国.，看一下有没有溢出></td> 
</tr> 
</table> 
</div> 
<div class="dragDiv" id="dragDiv2"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> 
<tr id="titleBar2" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> 
<th align="left" unselectable="on" >Title2</th> 
</tr> 
<tr style="height:130px;padding:3px;" align="left" valign="top" > 
<td unselectable="on">Content2...</td> 
</tr> 
</table> 
</div> 
</td> 
<td valign="top" style="width:50%"> 
<div class="dragDiv" id="dragDiv3"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> 
<tr id="titleBar3" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> 
<th align="left" unselectable="on" >Title3</th> 
</tr> 
<tr style="height:230px;padding:3px;" align="left" valign="top" > 
<td unselectable="on">Content3...</td> 
</tr> 
</table> 
</div> 
</td> 
<td valign="top" style="width:20%"> 
<div class="dragDiv" id="dragDiv4"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> 
<tr id="titleBar4" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> 
<th align="left" unselectable="on" >Title4</th> 
</tr> 
<tr style="height:130px;padding:3px;" align="left" valign="top" > 
<td unselectable="on">Content4...</td> 
</tr> 
</table> 
</div> 
<div class="dragDiv" id="dragDiv5"> 
<table cellpadding="0" cellspacing="0" border="1" style="width:100%;border-collapse:collapse; border-color:Blue"> 
<tr id="titleBar5" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;cursor:move;"> 
<th align="left" unselectable="on" >Title5</th> 
</tr> 
<tr style="height:130px;padding:3px;" align="left" valign="top" > 
<td unselectable="on">Content5...</td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
</table> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的据说是Google首页的网页模块拖动代码_布局与层全部内容，希望文章能够帮你解决据说是Google首页的网页模块拖动代码_布局与层所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/312720.html

来源：【匿名】

【上一篇】JavaScript文本框下拉提示(自动提示)_表单特效【下一篇】javascript 怎么调用php方法

更多 ►

【据说是Google首页的网页模块拖动代码_布局与层】教程文章相关的互联网学习教程文章

javascript构造函数模块

知识点【JavaScript模块化】【代码】【图】

JavaScript模块化历程JavaScript发展变迁大概是一下几个步骤：工具（浏览器兼容）组件（功能模块）框架（功能模块组织）应用（业务模块组织）但是经过了长长的后天努力过程JavaScript不断被类聚抽象，以更好的组织业务逻辑。从另一个角度而言，他也道出了JavaScript先天就缺乏的一项功能：模块虽然W3C组织对HTML5规范推进以及各大厂对规范的大力支持，但是对于JavaScript本身而言，它的规范依然是薄弱的，它还有以下缺陷：没有标准...

Javascript模块的写法

Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还需要很长时间才能投入实用。）一、原始写法模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。　　function m1(){　　　　//...　　}　　function m2(){　　　　//...　　}上面的函数m1()和m2()，组成一个模块。使用...

这2段有关javascript函数化模式【模块化模式】的总结，还需要好好地琢磨！！！

Javascript模块化

一、原始写法模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。　　function m1(){　　　　//...　　}　　function m2(){　　　　//...　　}上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。二、对象写法为了解决上面的缺点，可以把模块...

asp.net mvc 配合前端js的CMD模块化部署思想，小思路【代码】

1）布局视图，用于协调普通视图和共享视图，实现js库自由选择引用@{//具体页面定义好需要引入的js文件,在这里通过共享视图渲染出来var jsDefines = ViewBag.JsDefines as List<string>;if (jsDefines != null){Html.RenderPartial("_JsDefines", jsDefines);}} 2）具体普通视图，可以自由选择引入哪些js库引用@model List<string>@foreach (var str in Model) {switch (str){case "aajs":<script type="text/javascript" src="aa.j...

简单的登录注册模块的实现（ springboot+js+css+jq ）

晚上再来更新水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水水...

Javascript模块化【代码】

一、原始写法模块就是实现特定功能的一组方法。只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。function m1(){//... 　　}function m2(){//...}上面的函数m1()和m2()，组成一个模块。使用的时候，直接调用就行了。这种做法的缺点很明显："污染"了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。二、对象写法为了解决上面的缺点，可以把模块写成一个对象，所有的模块...

Javascript 模块化指北【代码】

前言随着 Web 技术的蓬勃发展和依赖的基础设施日益完善，前端领域逐渐从浏览器扩展至服务端（Node.js），桌面端（PC、Android、iOS），乃至于物联网设备（IoT），其中 JavaScript 承载着这些应用程序的核心部分，随着其规模化和复杂度的成倍增长，其软件工程体系也随之建立起来（协同开发、单元测试、需求和缺陷管理等），模块化编程的需求日益迫切。JavaScript 对模块化编程的支持尚未形成规范，难以堪此重任；一时间，江湖侠士挺...

JS前端知识模块大全【图】

公司前端：小胖提供，表示感谢1. 基础HTML, CSS, JS 文档W3CSCHOOL: http://www.w3schools.com/MDN: https://developer.mozilla.org/zh-CN/w3school:http://www.w3school.com.cn/个人更倾向于使用MDN. w3cschool貌似被墙Html中学习语义化, 正确的结构, meta标签等. 了解各种属性用途. 例如data-*(html5新增数据属性), aria-*(帮助屏幕阅读器使用web) 等CSS 中学习布局, position, float, flex. 盒子模型. Line-height等Html/css 需...

Javascript模块化编程

网页越来越像桌面程序，需要一个团队分工协作、进度管理、单元测试等等......开发者不得不使用软件工程的方法，管理网页的业务逻辑。Javascript模块化编程，已经成为一个迫切的需求。理想情况下，开发者只需要实现核心的业务逻辑，其他都可以加载别人已经写好的模块。但是，Javascript不是一种模块化编程语言，它不支持"类"（class），更遑论"模块"（module）了。（正在制定中的ECMAScript标准第六版，将正式支持"类"和"模块"，但还...

selenium模块跳过用户名密码验证码输入，加载浏览器标签和cookie，进行翻页爬虫多页动态加载的数据（js)【代码】

能解决登陆一次后，之后不需要二次登陆的动态加载数据，网页保存的cookie和标签，加入到selenium自动化测试浏览器中 1from selenium import webdriver2import re3from time import sleep4 5def willbill():6‘‘‘点击翻页，获取下一页数据，进行正则匹配‘‘‘ 7 driver.find_element_by_xpath(‘//*[@id="upPage"]/li[5]/a‘).click()8 sleep(3)9 data = driver.page_source 10 results_list = ‘class="limingc...

模块化JavaScript设计模式(一)

在可扩展JavaScript的世界里，假设我们说一个应用程序是模块化(modular)的，那么通常意味着它是由一系列存储于模块中的高度解耦，不同的功能片段组成。在可能的情况下，通过一处依赖性，松耦合能够使应用程序的可维护性更加简单。假设有效地实现了这点，就非常easy地了解一部分怎样影响还有一个部分。异步模块定义（AMD）的总体目标是提供模块化的JavaScript解决方式，以便开发人员使用。诞生于使用XHR+eval的Dojo开发经验，这样的...

前端模块化——彻底搞懂AMD、CMD、ESM和CommonJS【代码】

我们知道，在NodeJS之前，由于没有过于复杂的开发场景，前端是不存在模块化的，后端才有模块化。NodeJS诞生之后，它使用CommonJS的模块化规范。从此，js模块化开始快速发展。模块化的开发方式可以提供代码复用率，方便进行代码的管理。通常来说，一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。下面开始一一介绍：CommonJSNodeJS是CommonJS规范...

前端模块化（三）：CommonJS规范【代码】

1 概述CommonJS对模块的定义十分简单，主要分为模块定义、模块引用和模块标识。Nodejs的模块系统就遵循了CommonJS规范。但Node在实现中并非完全按照CommonJS规范实现，而是对模块规范进行了一定的取舍。下面，我们结合Node来深入了解CommonJS规范。2 模块定义CommonJS规范规定，一个文件就是一个模块，用module变量代表当前模块。 Node在其内部提供一个Module的构建函数。所有模块都是Module的实例。实例代码如下：function Module...

首页 / JAVASCRIPT / 据说是Google首页的网页模块拖动代码_布局与层

据说是Google首页的网页模块拖动代码_布局与层

内容导读

内容图文

内容总结

内容备注

内容手机端

【据说是Google首页的网页模块拖动代码_布局与层】教程文章相关的互联网学习教程文章

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程