Web前端开发--JavaScript的分层common层
2015-03-03 22:15
232 查看
common层
common层本身依赖base层提供的接口,所以在使用common层组件时,必须先加载base层的代码,如代码清单。
<script type="text/JavaScript" src="base.js"></script> <script type="text/JavaScript" src="common.js"></script>
common层和base层供page层调用,二者的区别是common层提供的是相对庞大的组件。例如cookie,原生的JavaScript对设置和读取cookie的方法显得非常笨拙,但是我们可以通过封装一个用于操作cookie的组件提供类似php那样简单易用的操作cookie的接口。
GLOBAL.namespace("Cookie"); GLOBAL.Cookie = { //读取 read : function(name){ var cookiesStr = ";"+document.cookie+";"; var index = cookieStr.indexOf(";"+name+"="); if (index != -1){ var s = cookieStr.substrng(index+name.length+3,cookieStr.length); return unescape(s.substring(0,s.indexOf(";"))); }else{ return null; } }; //设置 set : function(name,value,expires){ var expDays = expires*24*60*60*1000; var expData = new Data(); expData.setTime(expData.getTime()+expDays); var expString = expires ? "; expires ="+expData.toGMTString() : ""; var pathString = ";path=/"; document.cookie = name+ "=" + escape(value) + expString + pathString; }; //删除 del : function(){ var exp = new Date(new Date().getTime()-1); var s = this.red(name); if(s != null){document.cookie = name+ "=" + s + ";expires =" + expData.toGMTString() + ";path=/"}; } };
我们定义的GLOBAL.Cookie组件封装原生JavaScript对cookie进行操作,用户只需要知道GLOBAL.Cookie提供了哪些接口。除了cookie,common层还有Ajax、Drag、Resize、Msg等。
base层提供的接口和任何具体功能无关,非常底层,非常通用。common层则与具体功能相关。一个易用性、重用性和可扩展性都非常好的组件,代码量很大,所以common层的js需要按功能分成一个个单独文件,比如说common_cookie.js、common_drag.js、common_tab.js。
common层组件不仅依赖base层接口,有时也依赖common层接口,比如模拟弹出窗口的Msg组件,如果需要拖拽功能就需要依赖Drag组件了,在加载时注意js文件顺序。
<script type="text/JavaScript" src="base.js"></script> <script type="text/JavaScript" src="common_drag.js"></script> <script type="text/JavaScript" src="common_msg.js"></script>
相关文章推荐
- Web前端开发--JavaScript的分层page层
- Javascript循环绑定事件 web前端开发博客:http://www.css88.com/
- web前端之MVC的JavaScript Web富应用开发三:模型和数据
- 【web前端开发技术】深入理解JavaScript中的依赖注入
- 【web前端开发】浏览器原生API,DOM,Javascript,HTML5,CSS 代码运行实例参考
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- VisualStudio环境下的Web前端开发经验总结(css,javascript)
- Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量
- web前端开发书籍推荐(之JavaScript )
- 为什么 Web 前端开发不抛弃 HTML 和 CSS,用纯 JavaScript 开发?
- web前端之MVC的JavaScript Web富应用开发一:MVC和类
- WEB前端开发学习----7.JavaScript 中 var 的重要性
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- web开发中,前端javascript代码的组织结构
- javascript笔记1.0课时二(素材来源渡一教育web前端开发JavaScript精英课js)
- web前端不可错过的开发工具–Adobe Brackets(开源、简洁强大的HTML、CSS和JavaScript集成开发环境)
- Web前端开发精品课HTML CSS JavaScript基础教程第五章课后编程题答案
- 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍
- Web前端开发精品课HTML CSS JavaScript基础教程第二十三章课后编程题答案
- 五个你必须知道的javascript和web debug技术 2013年11月20日 在前端开发中,调试技术是必不可少的技能,本文将介绍五种前端开发必备的调试技术。 Weinre移动调试 DOM 断点