js常见的设计模式（怎么通过JS控制文档的designMode）

本文目录

• 怎么通过JS控制文档的designMode
• vuejs源码用了什么设计模式，具体点的
• JS 面向对象
• JS数据有哪些类型

怎么通过JS控制文档的designMode

将文档设置为设计模式 要将整个文档设置为设计模式，可以对文档对象本身设置 designMode 属性。当文档处于设计模式时，将不运行脚本。这样，似乎在文档内设置一个按钮来打开或关闭设计模式是个好注意，但这样做没有作用。当用户打开它后，它将保持在设计模式状态。当下次单击此按钮时，它将被选定而不是被单击，再次单击它，将能够它的值。这就是为什么如果要使用设计模式最好对框架或 IFrame 中的文档设置 designMode 属性的原因。下例展示如何为 IFrame 中的文档打开设计模式： 代码如下:《script for="btnDesign" event="onclick"》 targetDoc = document.frames(0).document; if (targetDoc.designMode == "On") targetDoc.designMode = "Off"; else targetDoc.designMode = "On"; 《/script》 《button id=btnDesign》DesignMode《/button》 《iframe src="blank.htm" style="border: black thin; width:100%; height:200px"》《/iframe》designMode 属性的值始终以首字母大写格式存储，即时它最初是以全部小写设置的。请在测试它的值时一定记住这点。designMode 属性的默认值是“Inherit”。

vuejs源码用了什么设计模式，具体点的

最简单的订阅者模式 // Observerclass Observer { constructor (data) { this.walk(data) } walk (data) { // 遍历 let keys = Object.keys(data) for(let i = 0; i 《 keys.length; i++){ defineReactive(data, keys) } }}function defineReactive (data, key, val) { observer(val) // dep 为什么要在这里实例化, 就是为了实现, 对象每一层的 每一个key都有自己的一个订阅实例, 比如 a.b 对应 dep1, a.c 对应dep2, 这里虽然都是let dep = new Dep() // 但每次来到这个方法, dep都是独立的, 会一直保留在内存. 这样在每次调用set方法都能找到这个a.b对应的dep // dep 这里会一直保存, 是因为闭包的关系, Object这个全局的函数, 引用了上层的作用域, 这个作用域包含了 dep, 除非Object = null, 或者退出浏览器, dep才会消失 //实例化之后, dep就有了被订阅, 和发布消息的功能, dep不写在这里也是可以的, 多定义一个全局函数, 每次obser的时候增加一个dep let dep = new Dep() Object.defineProperty(data, key, { enumerable: true, configurable: true, get: function () { //每次new Watch(’a.b’), 都会先执行get方法, 进而来到这里, 触发 dep.depend(), 这个dep就是 a.b 对应的 订阅, dep.depend() return val }, set: function (newVal) { if(val === newVal){ return

JS 面向对象

为了能够清楚的解释这一切，我先从对象讲起。从其他面向对象语言（如Java）而来的人可能认为在JS里的对象也是由类来实例化出来的，并且是由属性和方法组成的。实际上在JS里并不是如你所想（我开始是这么想的）那样，对象或直接称为object，实际上只是一些映射对的集合，像Map，字典等概念。JS里有大概7种类型（加上Symbol），数字、字符串、null、undefined、布尔、Symbol、对象。除对象以外的其他类型属于原始类型，就是说它们比较单纯，包含的东西比较少，基本上就是字面量所表示的那些（像C语言中的一些类型，就是占那么多空间，没有其他的东西）。object基本上是一些键值对的集合，属于引用类型，即是有一个名字去指向它来供别人使用的，就好像比较重的东西你拿不动，而只是拿了张记录东西所在地的纸条。所以当A对象里嵌套了B对象，仅表示A里面有一个引用指向了B，并不是真正把B包含在A里面，虽然看起来是这样（尤其是从对象的字面量上来看），所以才会有所谓的深拷贝与浅拷贝。有句话叫“JavaScript里一切皆对象”，是因为在很多情况下原始类型会被自动的转为对象，而函数实际上也是对象，这样这句话看起来就很有道理了。说明对象的本质是为了正确地认识对象，因为这关系到后面的理解。

JS数据有哪些类型

通过上一节课，大家应该明白了JS其实和C语言，特别是VB很相似的，大家有没有增加点自信，任何语言都要学习数据类型，所以我们开始吧

在JavaScript中不区分“字符”和“字符串”，一视同仁。  这个就和VB很相似。用Var 来定义变量，这个变量可以是字符串、字符、数值变量等

单考虑数值变量，无需考虑整形、长整型、浮点型什么的，直接用

在面向对象的设计模式中，将数据和处理的方法捆绑在一起形成的整体，称为对象。它封装了数据和操作数据的方法 ，使用时要先创建这个对象，用new运算符来调用对象的构造函数。（不同语言创建方式不同）。其实很常见的，比如日期的调用（看下图）

全局对象是所有全局方法的拥有者，用来统一管理全局方法。该对象不能使用new运算符创建对象实例，所有方法直接调用即可。

大家很难理解，只要理解为在所有程序集外建立的对象，可以在任何程序集里面直接调用（本来就镶嵌好的），类似VB中global，类似易语言的模块调用

字符串对象 ，对象封装了与字符串有关的特性，主要用来处理字符串。通过String对象，可以对字符串进行剪切、合并、替换等等。可以调用该对象的构造函数创建一个实例，其实在定义一个字符串类型变量时就也创建了一个String对象实例。

类似易语言中的“文本_切割”啥的，但是记住JS中的数数是从0开始的

我们分析下，字符串所用的方法，substring、slice按位置取出中间的文本，bold()文本加粗,fontcolor("red")设置字体颜色为灰色，\ 为转义字符，

定义数组，这个应该都见过 var vv=new Array("1","2","3","4"); 严重警告， 这里的Array的第一个字母是大写的，不然定义失败；