一点拙劣的小分享,欢迎批评和补充

我们经常在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模型和封装的更多相关文章

  1. JS类的封装及实现代码

    js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...

  2. 【转】第7篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:全自动注册与反射方法分析

    作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  3. 【转】第6篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  4. 【转】第5篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  5. 【转】第4篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-18 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第4篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  6. 【转】3篇:Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告:官方原生方法分析

    作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  7. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  8. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  9. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

随机推荐

  1. InputStream与InputStreamReader的区别

    InputStream是字节流,多用于读取二进制数据 InputStreamReader是字符流,多用于读取文本文件.有不同的编码方式,如utf8等.可以在构造的时候指定编码方式. 例如,两者都有一个 ...

  2. AngularJS快速入门指南20:快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  3. Java-小练习简单银行程序

    2练习1:创建一个简单的银行程序包   练习目标-Java 语言中面向对象的封装性及构造器的使用. 任务 在这个练习里,创建一个简单版本的(账户类)Account类.将这个源文件放入banking程序 ...

  4. Maven项目环境搭建实例.

    前言:最近下班比较早, 总是不愿意让自己闲着, 此时刚好从网上找到了一些项目的资源, 结合自己在公司做的项目, 所以拿来一起学习加复习一些平常用到和没接触过的新知识.做的这个项目的名称叫做babasp ...

  5. Atitti usrQBf1801 翻页控件规范  v2

    Atitti usrQBf1801 翻页控件规范  v2 1. 参考api  参考easyui ,.net系列的1 1.1. 翻页流程  初始化翻页控件,以及绑定新页面event onSelectPa ...

  6. Atitit 混合叠加俩张图片的处理 图像处理解决方案 javafx blend

    Atitit 混合叠加俩张图片的处理 图像处理解决方案 javafx blend 1.1. Jhlabs 好像有了可以叠加算法,但是没有找到doc1 1.2. 自己算法叠加1 1.3. 使用javaf ...

  7. Atitti 数据库事务处理 attilax总结

    Atitti 数据库事务处理 attilax总结 1.1. 为什么要传递Connection?1 1.2. 两种事务处理方式,一种是编程式事务处理;一种是声明...2 1.3. 事务隔离级别 2 1. ...

  8. Java 7 中的Switch 谈 Java版本更新和反编译知识

    Java 7 中的Switch 谈 Java版本更新和反编译知识          学习编程,享受生活,大家好,我是追寻梦的飞飞.今天主要讲述的是Java7中的更新Switch实现内部原理和JAD反编 ...

  9. VS报错:The build tools for v140 (Platform Toolset = 'v140') cannot be found

    VS低版本打开高版本常会出现的错: The build tools for v140 (Platform Toolset = 'v140') cannot be found. To build usi ...

  10. Spring.NET的AOP怎么玩

    之前公司一直不让使用第三方组件,因此AOP方面的组建一直不能使用,很多面向切面的应用只能通过自己写一些GenericMethod的泛型方法来解决,有一些呆板.由于公司已经开始全面转Java,因此架构组 ...