Js模型和封装
一点拙劣的小分享,欢迎批评和补充
我们经常在Js中为我们的各类组件,构造Json格式的假数据。我们看如下代码:
var jsonResult = [
{ 'name': 'ws', 'age': '' },
{ 'name': 'td', 'age': '' } //我们把jsonResult[x]当作对象,其中的自然为属性
];
window.onload = function () {
alert(jsonResult[].name);
}
那么对象的方法如下:
var jsonResult = [
{ 'name': 'ws', 'age': '','speakFunc':function () { alert('hi,my name is ws'); } },
{ 'name': 'td', 'age': '' ,'speakFunc':function () { alert('hi my name is '+jsonResult[].name); }} //我们把jsonResult[x]当作独立个体对象
];
window.onload = function () {
jsonResult[].speakFunc();
jsonResult[].speakFunc();
}
下面给出可读性,复用性更佳的方法,包括闭包。
var myUpStageClass = function () {
var instance = {
firstFunc: function () { //方法名可以不用引号
alert('第一个方法输出');
},
'secondFunc': function (param) {
alert(param);
}
}
return instance; //返回闭包的对象
}
var appObj = myUpStageClass(); //接受闭包的对象,是不是像实例化
window.onload = function () {
appObj.firstFunc();
appObj.secondFunc('第二个方法输出');
}
建议把我们所需要的,复用性高的JS,作为我们项目最顶层的js封装好,并且在闭包外的全局上接受闭包对象,提供给下层调用。
Js模型和封装的更多相关文章
- JS类的封装及实现代码
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...
- 【转】第7篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:全自动注册与反射方法分析
作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析
作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】第4篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:委托回调方法分析
作者: 牛A与牛C之间 时间: 2013-11-18 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第4篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 【转】3篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:官方原生方法分析
作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- js返回顶部封装 简洁
js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
随机推荐
- Android多线程分析之二:Thread的实现
Android多线程分析之二:Thread的实现 罗朝辉 (http://www.cnblogs.com/kesalin/) CC 许可,转载请注明出处 在前文<Android多线程分析之一 ...
- [转]在cocos2d-x中让一个项目适配iphone、iphone retina、ipad、ipad retina四种分辨率
http://cankeyyin.blog.163.com/blog/static/12336178320124149391202/ 原理:将iphone的hd图片给ipad用,即: 使用原iphon ...
- FastUI快速界面原型制作工具
FastUI是一款快速制作应用程序界面原型的小工具,它之所以快,是因为它体积小巧.功能简洁实用. 在真正的应用程序(包括winform.手机app.网站等)开始编码之前,一般要先设计出原型,以便确认需 ...
- mongodb java spring data
关于如何集成spring-data-mongodb到项目中,已经有很多人介绍了,这里只给出几个链接. GETTING STARTED Accessing Data with MongoDB: http ...
- Redis中5种数据结构的使用场景介绍
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/108.html?1455861435 一.redis 数据结构使用场景 原 ...
- Atitit 深入理解命名空间namespace java c# php js
Atitit 深入理解命名空间namespace java c# php js 1.1. Namespace还是package1 1.2. import同时解决了令人头疼的include1 1.3 ...
- 让自己成为合格的IT员
2016年10月27日,正式加入了IT天启网络公司,从今天开始就意味着我要正式进军IT行业了. 虽然是为期四个半月的培训,我相信我能够我一定可以在这四个半月的时间里成为一个合格的.优 ...
- 关于页面查询多数据查询问题(foreach)
最近纠结的一个问题,就是页面综合查询总报错,之前用过传参用list传就没问题,但现在用map总是报错,缓释直接贴图吧,希望对遇到问题的朋友有帮助页面传来参数,之前是 这样写的,直接将拿来的数据封装成一 ...
- universal image loader自己使用的一些感受
1.全局入口的Application定义初始化: ImageLoaderConfiguration configuration = new ImageLoaderConfiguration.Build ...
- SQLSERVER中的ALLOCATION SCAN和RANGE SCAN
SQLSERVER中的ALLOCATION SCAN和RANGE SCAN 写这篇文章的开始,我还不知道ALLOCATION SCAN的工作原理是怎样的,网上资料少得可怜 求助了园子里的某位大侠,他看 ...