踩到了坑，才能学到东西。

记录我在慢慢的转向模块化遇到的问题以及解决的思路。

1.采用立即执行函数，闭包的方式创建模块

html:

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Module</title>

	<script type="text/javascript" src="store.js"></script>

	<script type="text/javascript">

		var store = storeModule.getStore({x:1});

	</script>

</head>

<body>

</body>

</html>

js:



var storeModule = (function(){

	var Store = function(opinion){

		this.opinion = opinion;

	}

	Store.prototype = {

		constructor:Store,

		init:function(opinion){

			console.log('a:',opinion);

			this.opinion = opinion;

			console.log('b:',this.opinion);

		}

	}

	return {

		getStore:function(opinion){

			var storeInstance = Object.create( Store.prototype );

			Store.prototype.init.apply(storeInstance,arguments);

			// var storeInstance2 = new Store(opinion);

			// storeInstance2.init(opinion);

			console.log('store end');

			return storeInstance;

		}

	}

})();

坑：

采用 Object.create( Store.prototype ) 这种方式创建对象，无法将参数opinion传递给Store这个function对象，百思不得其解，后来，参阅了一下Jquery的插件的源码，发现需要在 init:function(opinion)中增加一行this.opinion = opinion，否则传递不过去。

Javascript 面向对象实践的更多相关文章

  1. 深入解读JavaScript面向对象编程实践

    面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式,主要包括模块化.多态.和封装几种技术.对JavaScript而言,其核心是支持面向对象的,同时它也提供了强大灵活的基于原型的面向对象编程能力 ...

  2. javascript面向对象系列第四篇——选项卡的实现

    前面的话 面向对象的应用并非只是读几本书那么容易,需要有大量的工程实践做基础才能真正理解并学会使用它.本文将用面向对象的技术来制作一个简单的选项卡 图示说明 由图示结果看到,这是一个非常简单的选项卡. ...

  3. JavaScript学习笔记(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  4. JavaScript学习总结(三)——this、原型、javascript面向对象

    一.this 在JavaScript中this表示:谁调用它,this就是谁. JavaScript是由对象组成的,一切皆为对象,万物皆为对象.this是一个动态的对象,根据调用的对象不同而发生变化, ...

  5. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

  6. javascript面向对象系列第三篇——实现继承的3种形式

    × 目录 [1]原型继承 [2]伪类继承 [3]组合继承 前面的话 学习如何创建对象是理解面向对象编程的第一步,第二步是理解继承.本文是javascript面向对象系列第三篇——实现继承的3种形式 [ ...

  7. javascript面向对象系列第一篇——构造函数和原型对象

    × 目录 [1]构造函数 [2]原型对象 [3]总结 前面的话 一般地,javascript使用构造函数和原型对象来进行面向对象编程,它们的表现与其他面向对象编程语言中的类相似又不同.本文将详细介绍如 ...

  8. javascript设计模式实践之职责链--具有百叶窗切换图片效果的JQuery插件（三）

    在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调 ...

  9. javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件（二）

    在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编 ...

随机推荐

  1. Chrome中使用老的标题栏界面

    Chrome 69中启用了新的UI界面,看着更加秀气了. 但新UI一个不好用的地方是标签栏太高了,留给windows标题栏的空白太小,导致拖动窗口位置非常不方便,如下是一个解决方法: 在地址栏输入: ...

  2. 安装node.js / npm / express / KMC

    http://www.cnblogs.com/seanlv/archive/2011/11/22/2258716.html 1. 下载Node.js官方Windows版程序: http://nodej ...

  3. Ubuntu 14 安装Java（JRE、JDK）、Maven

    JRE vs OpenJDK vs Oracle JDK JRE(Java Runtime Environment),它是你运行一个基于Java语言应用程序的所正常需要的环境.如果你不是一个程序员的话 ...

  4. Vue 插件写法

    都说Vue2简单,上手容易,但小马过河,自己试了才晓得,除了ES6语法和webpack的配置让你感到陌生,重要的是思路的变换,以前随便拿全局变量和修改dom的锤子不能用了,变换到关注数据本身.vue的 ...

  5. 一些 Google 搜索词

    (1) flex blazeds java; (2) flex 动画  || flex animation  || flex spark glow animation (3) flex glow效果 ...

  6. 读取 android sys/下的信息

    读取 android sys/下的信息 https://github.com/ruw/Internet-Services-projects/tree/master/OffloadPredictor/l ...

  7. .NET：强签名程序集的加载问题 之 版本重定向

    背景 多数解决方案会包含多个项目,某些支持插件架构的解决方案中,更是包含多个插件项目,这些项目会使用一些第三方NuGet Packages,如果管理不慎,解决方案中会出现多个版本的引用,这在编译期间不 ...

  8. 关于面试总结10-selenium中隐藏元素如何定位？(hidden、display: none)

    前言 面试题:selenium中隐藏元素如何定位?这个是很多面试官喜欢问的一个题,如果单纯的定位的话,隐藏元素和普通不隐藏元素定位没啥区别,用正常定位方法就行了 但是吧~~~很多面试官自己都搞不清楚啥 ...

  9. 用ImageSwitcher实现显示图片（更改图片时有动画效果）

    ImageView和ImageSwitcher都是用来显示图片的.只不过后者在更新显示的图片的时候可以有动画效果. 注意点: 1.ImageSwitcher初始化需要定义一个ViewFactory,该 ...

  10. Spring Boot中application.yml与bootstrap.yml的区别(转载)

    说明:其实yml和properties文件是一样的原理,主要是说明application和bootstrap的加载顺序.且一个项目上要么yml或者properties,二选一的存在. Bootstra ...