常用的javascript设计模式

请坚持

什么是设计模式

百度百科：

　　设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。

　　使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构一样。

 

实际情况：

　　 设计模式绝对不是纸上谈兵的知识，光看书就以为自己懂了，那只是井底之蛙之见，设计模式绝对是从实践中来到实践中去的！如果编码经验很少，也不太可能能理解好设计模式，但凡软件设计能力强的人编码功底都是相当扎实的。

　　如果没有能深刻理解面向对象，也不太可能理解好设计模式，刚刚毕业或者才工作一两年就说自己面向对象能力强的人，基本上就是夸夸其谈的人。

　　很明显，我就是属于那种夸夸其谈的人，哈哈，不过希望对本文的总结，让自己更加了解这些设计模式，理解的更加透彻。

单体模式：

概念：

　　单体是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。

特点：　

  1. 可以来划分命名空间，从而清除全局变量所带来的危险。
  2. 利用分支技术来来封装浏览器之间的差异。
  3. 可以把代码组织的更为一体，便于阅读和维护。

代码实现：

复制代码
/*Basic Singleton*/
var Singleton = {attribute:true,method1:function(){},method2:function(){}
};
复制代码

 

应用场景：

　　单体模式在我们平时的应用中用的比较多的，相当于把我们的代码封装在一个起来，只是暴露一个入口，从而避免全部变量的污染。

 

工厂模式:

概念：

　　工厂模式的定义：提供创建对象的接口，意思就是根据领导（调用者）的指示（参数），生产相应的产品（对象）。

      创建一个对象常常需要复杂的过程，所以不适合在一个复杂的对象中。

　　创建对象可能会导致大量的重复代码，也可能提供不了足够级别的抽象。

      工厂就是把成员对象的创建工作转交给一个外部对象，好处在于消除对象之间的耦合(也就是相互影响)

 

分类：

 　  简单工厂模式：使用一个类，通常为单体，来生成实例。

　　复杂工厂模式定义是：将其成员对象的实列化推到子类中，子类可以重写父类接口方法以便创建的时候指定自己的对象类型。

 　　父类只对创建过程中的一般性问题进行处理，这些处理会被子类继承，子类之间是相互独立的，具体的业务逻辑会放在子类中进行编写。

 

代码实现：

 

简单工厂模式：　

复制代码
var XMLHttpFactory =function(){};　　　　　　//这是一个简单工厂模式XMLHttpFactory.createXMLHttp =function(){var XMLHttp = null;if (window.XMLHttpRequest){XMLHttp = new XMLHttpRequest()}else if (window.ActiveXObject){XMLHttp = new ActiveXObject("Microsoft.XMLHTTP")}return XMLHttp;}//XMLHttpFactory.createXMLHttp()这个方法根据当前环境的具体情况返回一个XHR对象。var AjaxHander =function(){var XMLHttp = XMLHttpFactory.createXMLHttp();...}
复制代码

 

　　复杂工厂模式：流程==》 先设计一个抽象类，这个类不能被实例化，只能用来派生子类，最后通过对子类的扩展实现工厂方法

复制代码
var XMLHttpFactory =function(){};　     //这是一个抽象工厂模式

XMLHttpFactory.prototype = {//如果真的要调用这个方法会抛出一个错误，它不能被实例化，只能用来派生子类createFactory:function(){throw new Error('This is an abstract class');}
}var XHRHandler =function(){}; //定义一个子类// 子类继承父类原型方法
extend( XHRHandler , XMLHttpFactory );XHRHandler.prototype =new XMLHttpFactory(); //把超类原型引用传递给子类,实现继承

XHRHandler.prototype.constructor = XHRHandler; //重置子类原型的构造器为子类自身//重新定义createFactory 方法
XHRHandler.prototype.createFactory =function(){var XMLHttp =null;if (window.XMLHttpRequest){XMLHttp =new XMLHttpRequest();}else if (window.ActiveXObject){XMLHttp =new ActiveXObject("Microsoft.XMLHTTP")}return XMLHttp;
}
复制代码

 

应用场景：

以下几种情景下工厂模式特别有用：

（1）对象的构建十分复杂

（2）需要依赖具体环境创建不同实例

（3）处理大量具有相同属性的小对象

 

优点：

　　可以实现一些相同的方法，这些相同的方法我们可以放在父类中编写代码，那么需要实现具体的业务逻辑，那么可以放在子类中重写该父类的方法，去实现自己的业务逻辑；

　　也就是说有两点：　　

　　1、弱化对象间的耦合，防止代码的重复。在一个方法中进行类的实例化，可以消除重复性的代码。

　　2、重复性的代码可以放在父类去编写，子类继承于父类的所有成员属性和方法，子类只专注于实现自己的业务逻辑。

缺点：

   当工厂增加到一定程度的时候，提升了代码的复杂度，可读性下降。而且没有解决对象的识别问题，即怎么知道一个对象的类型。

 

单例模式

概念：

　　单例模式定义了一个对象的创建过程，此对象只有一个单独的实例，并提供一个访问它的全局访问点。也可以说单例就是保证一个类只有一个实例，实现的方法一般是先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。

 

代码实现：

　   单例的实现有很多种，下面只介绍其中的一种，使用闭包方式来实现单例，代码如下：

复制代码
var single = (function(){var unique;function getInstance(){
　　　　// 如果该实例存在，则直接返回，否则就对其实例化if( unique === undefined ){unique = new Construct();}return unique;}function Construct(){// ... 生成单例的构造函数的代码
    }return {getInstance : getInstance}
})();
复制代码
     
     上面的代码中，unique便是返回对象的引用，而 getInstance便是静态方法获得实例。Construct 便是创建实例的构造函数。
 
     可以通过 single.getInstance() 来获取到单例，并且每次调用均获取到同一个单例。这就是 单例模式 所实现的效果。

 

使用场景：

    单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如全局缓存、浏览器的window对象。在js开发中，单例模式的用途同样非常广泛。试想一下，当我们

单击登录按钮的时候，页面中会出现一个登录框，而这个浮窗是唯一的，无论单击多少次登录按钮，这个浮窗只会被创建一次。因此这个登录浮窗就适合用单例模式。

总结一下它的使用场景：

　　1、可以用它来划分命名空间

      2、借助单例模式，可以把代码组织的更为一致，方便阅读与维护

 

观察者模式（发布订阅模式）

 

概念：

　　定义对象间的一种一对多的依赖关系，以便当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并自动刷新，也被称为是发布订阅模式。

它需要一种高级的抽象策略，以便订阅者能够彼此独立地发生改变，而发行方能够接受任何有消费意向的订阅者。

　

应用场景：　　

　　这个模式要先说应用场景，比较好理解。

　　打一个离我们比较近的一个场景，博客园里面有一个订阅的按钮（貌似有bug），比如小A,小B,小C都订阅了我的博客，当我的博客一有更新时，就会统一发布邮件给他们这三个人，就会通知这些订阅者

　　发布订阅模式的流程如下：

   1. 确定谁是发布者(比如我的博客)。

   2. 然后给发布者添加一个缓存列表，用于存放回调函数来通知订阅者。

   3. 发布消息，发布者需要遍历这个缓存列表，依次触发里面存放的订阅者回调函数。

　4、退订（比如不想再接收到这些订阅的信息了，就可以取消掉）

　　

代码如下：

复制代码
var pubsub = {};   // 定义发布者

(function (q) {var list = [],  //回调函数存放的数组，也就是记录有多少人订阅了我们东西subUid = -1;// 发布消息,遍历订阅者q.publish = function (type, content) {// type 为文章类型，content为文章内容// 如果没有人订阅，直接返回if (!list[type]) {return false;}setTimeout(function () {var subscribers = list[type],len = subscribers ? subscribers.length : 0;while (len--) {// 将内容注入到订阅者那里
                subscribers[len].func(type, content);}}, 0);return true;};//订阅方法，由订阅者来执行q.subscribe = function (type, func) {// 如果之前没有订阅过if (!list[type]) {list[type] = [];}// token相当于订阅者的id，这样的话如果退订，我们就可以针对它来知道是谁退订了。var token = (++subUid).toString();// 每订阅一个，就把它存入到我们的数组中去
        list[type].push({token: token,func: func});return token;};//退订方法q.unsubscribe = function (token) {for (var m in list) {if (list[m]) {for (var i = 0, j = list[m].length; i < j; i++) {if (list[m][i].token === token) {list[m].splice(i, 1);return token;}}}}return false;};} (pubsub));//将订阅赋值给一个变量，以便退订
var girlA = pubsub.subscribe('js类的文章', function (type, content) {console.log('girlA订阅的'+type + ": 内容内容为：" + content);
});
var girlB = pubsub.subscribe('js类的文章', function (type, content) {console.log('girlB订阅的'+type + ": 内容内容为：" + content);
});
var girlC = pubsub.subscribe('js类的文章', function (type, content) {console.log('girlC订阅的'+type + ": 内容内容为：" + content);
});//发布通知
pubsub.publish('js类的文章', '关于js的内容');  
// 输出：
// girlC订阅的js类的文章: 内容内容为：关于js的内容
// test3.html:78 girlB订阅的js类的文章: 内容内容为：关于js的内容
// test3.html:75 girlA订阅的js类的文章: 内容内容为：关于js的内容//girlA退订了关于js类的文章 
setTimeout(function () {pubsub.unsubscribe(girlA);
}, 0);//再发布一次，验证一下是否还能够输出信息
pubsub.publish('js类的文章', "关于js的第二篇文章");
// 输出：
// girlB订阅的js类的文章: 内容内容为：关于js的第二篇文章
// girlC订阅的js类的文章: 内容内容为：关于js的第二篇文章
复制代码

 代码可以自己运行一遍，这样比较好理解

 

 优缺点：

　　优点：当我们需要维护相关对象的一致性的时候，使用观察者模式，，就可以避免对象之间的紧密耦合。例如，一个对象可以通知另外一个对象，而不需要知道这个对象的信息。

　　缺点：在发布/订阅模式中，如果我们需要将发布者同订阅者上解耦，将会在一些情况下，导致很难确保我们应用中的特定部分按照我们预期的那样正常工作。也就是说它的优点也可能是它的缺点

 

策略模式

概念：

 策略模式指的是定义一些列的算法，把他们一个个封装起来，目的就是将算法的使用与算法的实现分离开来。说白了就是以前要很多判断的写法，现在把判断里面的内容抽离开来，变成一个个小的个体。

代码实现：

代码情景为超市促销，vip为5折，老客户3折，普通顾客没折，计算最后需要支付的金额。

没有使用策略模式的情况：

复制代码
function Price(personType, price) {//vip 5 折if (personType == 'vip') {return price * 0.5;} else if (personType == 'old'){ //老客户 3 折return price * 0.3;} else {return price; //其他都全价
    }
}
复制代码

 不足之处：不好的地方，当我有其他方面的折扣时，又或者我活动的折扣时经常变化的，这样就要不断的修改if..else里面的条件了。而且也违背了设计模式的一个原则：对修改关闭，对扩展开放的原则；

 

使用策略模式之后：

复制代码
// 对于vip客户
function vipPrice() {this.discount = 0.5;
}vipPrice.prototype.getPrice = function(price) {return price * this.discount;
}
// 对于老客户
function oldPrice() {this.discount = 0.3;
}oldPrice.prototype.getPrice = function(price) {return price * this.discount;
}
// 对于普通客户
function Price() {this.discount = 1;
}Price.prototype.getPrice = function(price) {return price ;
}// 上下文，对于客户端的使用
function Context() {this.name = '';this.strategy = null;this.price = 0;
}Context.prototype.set = function(name, strategy, price) {this.name = name;this.strategy = strategy;this.price = price;
}
Context.prototype.getResult = function() {console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price));
}var context = new Context();
var vip = new vipPrice();
context.set ('vip客户', vip, 200);
context.getResult();   // vip客户 的结账价为: 100var old = new oldPrice();
context.set ('老客户', old, 200);
context.getResult();  // 老客户 的结账价为: 60var Price = new Price();
context.set ('普通客户', Price, 200);
context.getResult();  // 普通客户 的结账价为: 200
复制代码

通过策略模式，使得客户的折扣与算法解藕，又使得修改跟扩展能独立的进行，不影到客户端或其他算法的使用；

 

使用场景：

　　策略模式最实用的场合就是某个“类”中包含有大量的条件性语句，比如if...else 或者 switch。每一个条件分支都会引起该“类”的特定行为以不同的方式作出改变。以其维

护一段庞大的条件性语句，不如将每一个行为划分为多个独立的对象。每一个对象被称为一个策略。设置多个这种策略对象，可以改进我们的代码质量，也更好的进行单元测试。

 

模板模式

 

概念：

 定义了一个操作中的算法的骨架，而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。
 通俗的讲，就是将一些公共方法封装到父类，子类可以继承这个父类，并且可以在子类中重写父类的方法，从而实现自己的业务逻辑。

代码实现：

比如前端面试，基本包括笔试，技术面试，领导面试，HR面试等，但是每个公司的笔试题，技术面可能不一样，也可能一样，一样的就继承父类的方法，不一样的就重写父类的方法

复制代码
var Interview = function(){};
// 笔试
Interview.prototype.writtenTest = function(){console.log("这里是前端笔试题");
};
// 技术面试
Interview.prototype.technicalInterview = function(){console.log("这里是技术面试");
}; 
// 领导面试
Interview.prototype.leader = function(){console.log("领导面试");
};
// 领导面试
Interview.prototype.HR = function(){console.log("HR面试");
};
// 等通知
Interview.prototype.waitNotice = function(){console.log("等通知啊，不知道过了没有哦");
};
// 代码初始化
Interview.prototype.init = function(){this.writtenTest();this.technicalInterview();this.leader();this.HR();this.waitNotice();
};// 阿里巴巴的笔试和技术面不同，重写父类方法，其他继承父类方法。
var AliInterview = function(){};
AliInterview.prototype = new Interview();// 子类重写方法 实现自己的业务逻辑
AliInterview.prototype.writtenTest = function(){console.log("阿里的技术题就是难啊");
}
AliInterview.prototype.technicalInterview = function(){console.log("阿里的技术面就是叼啊");
}
var AliInterview = new AliInterview();
AliInterview.init();// 阿里的技术题就是难啊
// 阿里的技术面就是叼啊
// 领导面试
// HR面试
// 等通知啊，不知道过了没有哦
复制代码

 

应用场景：

　　模板模式主要应用在一些代码刚开要一次性实现不变的部分。但是将来页面有修改，需要更改业务逻辑的部分或者重新添加新业务的情况。主要是通过子类来改写父类的情

况，其他不需要改变的部分继承父类。

　

代理模式

 

概念：

　　代理模式的中文含义就是帮别人做事，javascript的解释为：把对一个对象的访问, 交给另一个代理对象来操作.

 

代码实现：

　比如我们公司的补打卡是最后是要交给大boss来审批的，但是公司那么多人，每天都那么多补打卡，那大boss岂不是被这些琐事累死。所以大boss下会有一个助理，来帮

忙做这个审批，最后再将每个月的补打卡统一交给大boss看看就行。

复制代码
// 补打卡事件
var fillOut = function (lateDate) {this.lateDate = lateDate;
};// 这是bigBoss
var bigBoss = function (fillOut) {this.state = function (isSuccess) {console.log("忘记打卡的日期为：" + fillOut.lateDate + ", 补打卡状态：" + isSuccess);}
};
// 助理代理大boss 完成补打卡审批
var proxyAssis = function (fillOut) {this.state = function (isSuccess) {(new bigBoss(fillOut)).state(isSuccess); // 替bigBoss审批
    }
};// 调用方法：
var proxyAssis = new proxyAssis(new fillOut("2016-9-11"));
proxyAssis.state("补打卡成功");

// 忘记打卡的日期为：2016-9-11, 补打卡状态：补打卡成功
复制代码

 

应用场景：

　　比如图片的懒加载，我们就可以运用这种技术。在图片未加载完成之前，给个loading图片，加载完成后再替换成实体路径。

复制代码
var myImage = (function(){var imgNode = document.createElement("img");document.body.appendChild(imgNode);return function(src){imgNode.src = src; }
})();
// 代理模式
var ProxyImage = (function(){var img = new Image();img.onload = function(){myImage(this.src);};return function(src) {// 占位图片loadingmyImage("http://img.lanrentuku.com/img/allimg/1212/5-121204193Q9-50.gif");img.src = src;}
})();
// 调用方式

ProxyImage("https://img.alicdn.com/tps/i4/TB1b_neLXXXXXcoXFXXc8PZ9XXX-130-200.png"); // 真实要展示的图片
复制代码

　　当然，这种懒加载方法不用代理模式也是可以实现的，只是用代理模式。我们可以让 myImage 只做一件事，只负责将实际图片加入到页面中，而loading图片交给ProxyImage去做。从而降低代码的耦合度。因为当我不想用loading的时候，可以直接调用myImage 方法。也即是说假如我门不需要代理对象的话，直接可以换成本体对象调用该方法即可。

 

外观模式

概念：

　　外观模式是很常见。其实它就是通过编写一个单独的函数，来简化对一个或多个更大型的，可能更为复杂的函数的访问。也就是说可以视外观模式为一种简化某些内容的手段。

　　说白了，外观模式就是一个函数，封装了复杂的操作。

代码实现：

　　比如一个跨浏览器的ajax调用

复制代码
function ajaxCall(type,url,callback,data){// 根据当前浏览器获取对ajax连接对象的引用var xhr=(function(){try {// 所有现代浏览器所使用的标准方法return new XMLHttpRequest();}catch(e){}// 较老版本的internet Explorer兼容try{return new ActiveXObject("Msxml2.XMLHTTP.6.0");}catch(e){}try{return new ActiveXObject("Msxml2.XMLHTTP.3.0");}catch(e){}try{return new ActiveXObject("Microsoft.XMLHTTP");}catch(e){}// 如果没能找到相关的ajax连接对象，则跑出一个错误。throw new Error("Ajax not support in this browser.")}()),STATE_LOADED=4,STATUS_OK=200;// 一但从服务器收到表示成功的相应消息，则执行所给定的回调方法xhr.onreadystatechange=function{if(xhr.readyState !==STATE_LOADED){return;}if(xhr.state==STATUS_OK){callback(xhr.responseText);}}// 使用浏览器的ajax连接对象来向所给定的URL发出相关的调用
    xhr.open(type.toUpperCase(),url);xhr.send(data);
}// 使用方法
ajaxCall("get","/user/12345",function(rs){alert('收到的数据为：'+rs);
})
复制代码

 

应用场景：

　　当需要通过一个单独的函数或方法来访问一系列的函数或方法调用，以简化代码库的其余内容，使得代码更容易跟踪管理或者更好的维护时，可以使用外观模式。其实我们平时代码中这种模式应该是用的比较多的。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247609.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

iOS警告-This block declaration is not a prototype

iOS警告-This block declaration is not a prototype

关于警告 我们定义一个不带参数的block,通常是如下的方式 1typedefvoid (^UpdateSwichBtnBlock)();在xcode9中会提示一个警告 12This block declaration is not a prototypeInsert ‘void解决方式可以是如下的几种 1typedefvoid (^UpdateSwichBtnBlock)(void);但是这样,很多第三…
阅读更多...
mongoose操作mongodb

mongoose操作mongodb

http://mongoosejs.com/docs/api.html#index-js mongoose是nodejs环境下操作mongodb的模块封装&#xff0c;使用mongoose之后&#xff0c;实际上只需要在mongodb中创建好数据库与用户&#xff0c;集合的定义、创建、操作等直接使用mongoose即可。 一、连接二、重要概念三、基本…
阅读更多...
mac下iterm配色、半透明与样式设置

mac下iterm配色、半透明与样式设置

主要为了实现命令行颜色高亮与整个命令窗口半透明效果。 1、配色主题包下载 1、http://iterm2colorschemes.com/ 下载后解压&#xff0c;到iterm2中&#xff0c;左上角iTerm2->preferences->Profiles&#xff0c;右侧面板找到Colors选项&#xff0c;右下角展开Color Pr…
阅读更多...
一个 Dubbo 服务启动要两个小时

一个 Dubbo 服务启动要两个小时

前几天在测试环境碰到一个非常奇怪的与 dubbo 相关的问题&#xff0c;事后我在网上搜索了一圈并没有发现类似的帖子或文章&#xff0c;于是便有了这篇。 希望对还未碰到或正在碰到的朋友有所帮助。 现象 现象是这样的&#xff0c;有一天测试在测试环境重新部署一个 dubbo 应用的…
阅读更多...
表单提交enctype参数详解之：application/x-www-form-urlencode和multipart/form-data

表单提交enctype参数详解之：application/x-www-form-urlencode和multipart/form-data

application/x-www-form-urlencode 我们在提交表单的时候&#xff0c;form表单参数中会有一个enctype的参数。enctype指定了HTTP请求的Content-Type。 默认情况下&#xff0c;HTML的form表单的enctypeapplication/x-www-form-urlencoded。 application/x-www-form-urlencoded是…
阅读更多...
内网端口映射工具

内网端口映射工具

由于开发微信需要一个公网域名&#xff0c;需要将本地端口映射到外网域名&#xff0c;最热的工具是ngrok&#xff0c;但被微信屏蔽了&#xff0c;这里使用的是natapp&#xff0c;环境是mac&#xff0c;windows下可使用nat123、花生壳等工具实现同样功能。 简单记录一下过程。 …
阅读更多...
iOS----------iPhone导出手机所有短信

iOS----------iPhone导出手机所有短信

第一步&#xff1a;手机连接到itunes 选择本电脑备份 备份的时候不要加密 然后立即备份 第二步&#xff1a;前往文件夹&#xff0c;找到itunes的备份路径~/Library/Application Support/MobileSync/Backup 在这目录下搜索 3d0d开头的文件&#xff0c;这就是 iPhone 短信的…
阅读更多...
跨站点脚本(XSS)

跨站点脚本(XSS)

1. 简介 跨站点脚本(XSS)是当前web应用中最危险和最普遍的漏洞之一。安全研究人员在大部分最受欢迎的网站,包括Google, Facebook, Amazon, PayPal等网站都发现这个漏洞。如果你密切关注bug赏金计划,会发现报道最多的问题属于XSS。为了避免跨站脚本,浏览器也有自己的过滤器,但安…
阅读更多...
CSRF攻击原理及防御

CSRF攻击原理及防御

CSRF攻击原理及防御 一、CSRF攻击原理 CSRF是什么呢&#xff1f;CSRF全名是Cross-site request forgery&#xff0c;是一种对网站的恶意利用&#xff0c;CSRF比XSS更具危险性。想要深入理解CSRF的攻击特性我们有必要了解一下网站session的工作原理。 　　session我想大家都不…
阅读更多...
H3C FTP配置示例

H3C FTP配置示例

转载于:https://www.cnblogs.com/fanweisheng/p/11156596.html
阅读更多...
windows10系统下MongoDB的安装及环境配置

windows10系统下MongoDB的安装及环境配置

windows10系统下MongoDB的安装及环境配置&#xff1a; MongoDB的安装 下载地址&#xff1a; https://www.mongodb.com/download-center (这是windows10环境下的教程&#xff01;请注意&#xff01;) 下载后&#xff0c;我们点击mongodb-win32-x86_64-2008plus-ssl-3.4.3-signed…
阅读更多...
CSS clip:rect矩形剪裁功能

CSS clip:rect矩形剪裁功能

CSS中有一个属性叫做clip&#xff0c;为修剪&#xff0c;剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。此属性安安稳稳地存在于CSS2.1中&#xff0c;且使用上基本上没有类似于max-height/display:table-cell等浏览器的兼容性问题。 根据Dreamweaver的自动提示&a…
阅读更多...
Node.js 部署免费/自动续订 HTTPS

Node.js 部署免费/自动续订 HTTPS

统计了使用 Chrome 浏览器&#xff0c;访问的站点统计中&#xff0c;HTTPS 使用率的增长情况&#xff1a;而在今年 2 月份&#xff0c;Chrome 团队也宣布&#xff0c;将在 2018 年 7 月份发布的 Chrome 68 中&#xff0c;将没有部署 HTTPS 的网站标记为 "不安全"。简…
阅读更多...
MVVM原理还你

MVVM原理还你

众所周知当下是MVVM盛行的时代&#xff0c;从早期的Angular到现在的React和Vue&#xff0c;再从最初的三分天下到现在的两虎相争。 无疑不给我们的开发带来了一种前所未有的新体验&#xff0c;告别了操作DOM的思维&#xff0c;换上了数据驱动页面的思想&#xff0c;果然时代的进…
阅读更多...
CSS页面布局解决方案大全

CSS页面布局解决方案大全

前端布局非常重要的一环就是页面框架的搭建&#xff0c;也是最基础的一环。在页面框架的搭建之中&#xff0c;又有居中布局、多列布局以及全局布局&#xff0c;今天我们就来总结总结前端干货中的CSS布局。 居中布局 水平居中 1&#xff09;使用inline-blocktext-align&#xff…
阅读更多...
AES加密算法的学习笔记

AES加密算法的学习笔记

AES简介高级加密标准(AES,Advanced Encryption Standard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。 对称加密算法也就是加密和解密用相同的密钥&#xff0c;具体的加密流程如下图&#xff1a; 下面简单介绍下各个部分的作用与意义&#xff1a; 明文P没…
阅读更多...
前端 crypto-js aes 加解密

前端 crypto-js aes 加解密

背景 前段时间公司做项目&#xff0c;该项目涉及到的敏感数据比较多&#xff0c;经过的一波讨论之后&#xff0c;决定前后端进行接口加密处理&#xff0c;采用的是 AES BASE64 算法加密~ 网上关于 AES 对称加密的算法介绍看上一篇&#xff01; 具体实现 其实搞懂了是怎么一回事…
阅读更多...
随笔记录（2019.7.10）

随笔记录（2019.7.10）

1、ISO/OSI 网络七层参考模型 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 2、 TCP/IP 网络四层模型和五层模型 四层模型&#xff1a; 网络接口层 网络层 传输层 应用层 五层模型&#xff1a; 物理层 数据链路层 网络层 传输层 应用层 3、 协议簇 &#xff08;1&a…
阅读更多...
Highcharts的饼图大小的控制

Highcharts的饼图大小的控制

在Highcharts中&#xff0c;饼图的大小是Highcharts自动计算并进行绘制。饼图的大小受数据标签大小、数据标签到切片的距离影响。当数据标签内容较多&#xff0c;并且距离切片较远时&#xff0c;饼图就会被压缩的很小。解决这个问题&#xff0c;有以下几种方法&#xff1a;&…
阅读更多...
document.createDocumentFragment 以及创建节点速度比较

document.createDocumentFragment 以及创建节点速度比较

document.createDocumentFragment document.createDocumentFragment()方法创建一个新空白的DocumentFragment对象。 DocumentFragments是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段&#xff0c;将元素附加到文档片段&#xff0c;然后将文档片段附加到DOM树。…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023