javascript设计模式与开发实践--学习笔记一

最新推荐文章于 2022-04-05 14:11:05 发布
最新推荐文章于 2022-04-05 14:11:05 发布
阅读量213 收藏
点赞数
开始学习《javascript设计模式与开发实践》这本书。随便记一些读书笔记。

<html>
<head>
</head>
<body>
<script>
/* js里常常会对arguments做处理。函数的参数列表arguments是一个类数组对象，虽然也有下标，但是并非真正的数组，所以不能调用sort,或push等方法。可以借用 Array.prototype.push！！
要将arguments转成真正的数组时，还可以借用 Array.prototype.slice()方法。
//eg：往arguments动态添加数据。 

<div style="font-family: Arial; font-size: 14px; line-height: 23.8px;">(function(){</div><div style="font-family: Arial; font-size: 14px; line-height: 23.8px;"><span style="white-space: pre;"></span><span style="white-space:pre">	</span>Array.prototype.push.call(arguments,3);</div><div style="font-family: Arial; font-size: 14px; line-height: 23.8px;"><span style="white-space: pre;"></span><span style="white-space:pre">	</span>console.log(arguments);</div><div style="font-family: Arial; font-size: 14px; line-height: 23.8px;">}(1,2));</div>


// 判断某个对象是否是string类型
Object.prototype.toString.call("str") === '[bject '+String+']';
*/

/*闭包：闭包的形成与变量的作用域和变量的生存周期密切相关。
函数用来创建函数作用域。函数里面可以看到外面的变量，但是函数外面无法看到函数内部的变量。变量搜索过程由内到外。
用闭包封装变量
var multi = (function(){
var cache = {};
var arg = Array.prototype.join.call(arguments,",");
if(cache[arg])
return cache[arg];
cache[arg] = 1;
for(var i = 0, n = arguments.length; i < n ; i++){
cache[arg] *= arguments[i];
}
return  cache[arg];
});
console.log(multi(1,2,3));
*/
高阶函数：函数作为参数传递或函数作为返回值输出.
js里处处可见高阶函数。
作为参数传递：1、回调函数
var getUserInfo = function(userId,callback){
$.ajax('http://xxx.com/getUserInfo?'+userId,function(data){
if(typeof callback === 'function'){
callback(data);
}
});
};
getUserInfo(13567,function(data){
alert(data.userName);
});
//将请求封装成函数，委托给另一个函数执行
var appendDiv = function(callback){
for(var i = 0 ; i < 100 ; i++){
var div = document.createElement('div');
div.innerHTML = i;
document.body.appendChild(div);
if(typeof callback === 'function'){
callback(div);
}
}
};
appendDiv(function(node){
node.style.display = 'none';
});
/*
代码重构--> 很重要一种技巧：提炼函数。一个大函数中有一些代码块可以独立出来，则封装在小函数里。独立出的小函数有助于代码复用。如果小函数不在代码其他地方使用，则最好将他们用闭包封闭起来。
var multi = (funtion(){
var cache = {};
var calculate = function(){
var a = 1;
for(var i = 0, n = arguments.length ; i < n ; i++){
a *= arguments[i];
}
return a;
};
return function(){
var args = Array.prototype.join.call(arguments,",");
if(args in cache)
return cache[args];
return calculate(arguments);
}
}());
console.log(multi(1,2,3));*/
</script>
</body>
</html>

jincancan1992
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS设计模式与开发实践
08-18
js设计模式与开发实践
JavaScript设计模式与开发实践.pdf
12-08
JavaScript设计模式与开发实践.pdf
JavaScript设计模式与开发实践
chengying332
05-13 384
JavaScript设计模式与开发实践 本书在尊重《设计模式》原意的同时，针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式，讲解了JavaScript面向对象和函数式编程方面的基础知识，介绍了面向对象的设计原则及其在设计模式中的体现，还分享了面向对象编程技巧和日常开发中的代码重构。 详细解读 和小伙伴们一起来吐槽
JavaScript设计模式与开发实践（一）
qq_36303110的博客
02-25 332
JavaScript设计模式与开发实践 this、call和apply tips 如果构造器(构造函数)显式地返回了一个object类型的对象，那么此次运算结果最终会返回这个对象，如果构造器不显式地返回任何数据，或者是返回一个非对象类型的数据，就不会造成上述 问题 var MyClass = function(){ this.name = 'sven'; return { // 显式地返回一个对象 name: 'anne' } }; var obj = new MyClass();
《JavaScript设计模式与开发实践》
Gyoung杨广
04-04 1800
《JavaScript设计模式与开发实践》
读书笔记 - javascript设计模式和开发实践
weixin_38245947的博客
02-07 1275
一 单例模式： 单例模式的定义是：保证一个类仅有一个实例，并提供一个访问它的全局访问点。 单例模式是一种常用的模式，有一些对象我们往往只需要一个，比如线程池、全局缓存、浏 览器中的 window 对象等。在 JavaScript 开发中，单例模式的用途同样非常广泛。试想一下，当我 们单击登录按钮的时候，页面中会出现一个登录浮窗，而这个登录浮窗是唯一的，无论单击多少 次登录按钮，这个浮窗都只会被创建一次，那么这个登录浮窗就适合用单例模式来创建。 单例模式实现： 要实现一个标准的单例模式并不复杂，无非是用一个变
javascript设计模式(javascript设计模式与开发实践读书笔记)
weixin_43383238的博客
05-16 486
javascript设计模式（javascript设计模式与开发实践读书笔记）单例模式策略模式代理模式迭代器模式发布-订阅模式 单例模式 保证一个类仅有一个实例，并提供一个访问它的全局访问点 // 单例模式简单实现 var Singleton = function( name ){ this.name = name; }; Singleton.prototype.getName = f...
《JavaScript设计模式与开发实践》笔记
前端产品工程师
09-18 989
（一）补充重要知识点： （一）this、call和apply 1、this的指向 （1）作为对象的方法调用--------指向该对象 （2）作为普通函数调用 ------指向全局对象，如果不想指向全局对象，那么需要在函数内部定义保存引用的变量。 （3）构造器调用-------通常指向返回的对象，但是如果构造器显示地返回了一个object类型的对象，那么此次运算结果最终会返回这个对象。 ...
JavaScript设计模式与实践开发--阅读笔记
qq_40385298的博客
03-03 597
原型模式和基于原型继承的JavaScript对象系统 在以类为中心的面向对象编程语言中，类和对象的关系可以想象成铸模和铸件的关系，对象总是从类中创建而来。 而在原型编程的思想中，类并不是必需的，对象未必需要从类中创建而来，一个对象是通过另一个对象所得到的。 就像电影《第六日》一样，通过克隆可以创造另外一个一模一样的人，而本体和克隆体看不出任何区别。 原型模式不单是一种设计模式，也被称为一种编程泛型。 使用克隆的原型模式： let Plane = function () { this.blood
《javascript设计模式与开发实践》——第一章（面向对象的javascript）学习记录
weixin_37365539的博客
02-17 601
1.1动态类型语言和鸭子类型 编程语言按照数据类型大体可以分为两类，一类是静态语言，另一类是动态语言，在javascript中，当我们对一个变量赋值时，并不需要考虑它的类型，显然javascript是典型的动态类型语言。 由于无需进行类型检测，我们可以尝试调用任何对象的任意方法，而无需考虑它原本是否被设计为拥有该方法。这一切都建立在鸭子类型的概念上，鸭子类型的通俗说法是：“如果它走起来像鸭子，叫起来是鸭子，那么它就是鸭子。” 通过一个小例子深入理解一下： 从前在JavaScript王国里,有一个国王，他觉得
专访《Javascript设计模式与开发实践》作者曾探：爱编程 爱生活
周红伟讲AI
06-15 1854
 专访《Javascript设计模式与开发实践》作者曾探：爱编程 爱生活 发表于12小时前| 2742次阅读| 来源CSDN| 8 条评论| 作者夏梦竹 专访曾探图书作者Javascript前端开发 摘要：他是一位图书作者，也是一名健身教练，爱电影、爱音乐；本期笔者采访的嘉宾是国内知名前端团队腾讯AlloyTeam、高级工程师曾探，请他分享JavaScript开发经验，
《JavaScript设计模式与开发实践》——第九章（命令模式）学习记录
weixin_37365539的博客
04-05 883
命令模式是最简单和优雅的模式之一，命令模式中的命令（command）指的是一个执行某些特定事情的指令。 命令模式最常见的应用场景是：有时候需要向某些对象发送请求。但是并不知道请求的接收者是谁，也不知道被请求的操作是什么。此时希望用一种松耦合的方式来设计程序，使得请求发送者和请求接收者能够消除彼此之间的耦合关系。 命令模式的例子-----菜单程序 假设我们正在编写一个用户界面程序，该界面上至少有数十个Button按钮。因为项目比较复杂，所以我们决定让某个程序员负责绘制这些按钮，另一些程序员负责编写点击按钮后的
[书籍精读]《JavaScript设计模式与开发实践》精读笔记分享
小磊哥er @ 大前端工程师
05-15 2497
写在前面 书籍介绍：本书在尊重《设计模式》原意的同时，针对JavaScript语言特性全面介绍了更适合JavaScript程序员的了16个常用的设计模式，讲解了JavaScript面向对象和函数式编程方面的基础知识，介绍了面向对象的设计原则及其在设计模式中的体现，还分享了面向对象编程技巧和日常开发中的代码重构。本书将教会你如何把经典的设计模式应用到JavaScript语言中，编写出优美高效、结构化和可维护的代码。 我的简评：这本书主要围绕JavaScript中的一些设计模式和设计原则，每种模式的讲解都带有
weixin_34087307的博客
04-11 109
背景介绍 之前在阅读《JavaScript设计模式和开发实践》这本书的时候，收货颇丰，学习了设计模式在很多场景下的应用。 但也是因为书上场景过多，所以当记不清某一种设计模式的时候，翻书温习复杂案例的成本是相对较高的。有时候，只需要一段经典、简洁的demo就可以迅速回顾起精髓，在快速业务开发中，这是个比较经济的做法。 除此之外，当主要工作语言发生变化的时候（例如：js -> python），简...
python 3.5实现gif缩小并打包成exe
Blue White的博客
10-14 561
表情包泛滥的今天，有时候困于动图太大，发到微信或者QQ上太占屏幕空间，因此想着使用缩小一下，于是用python写了个脚本，并基于pyqt5写了个简单的界面。 缩小前： 缩小后： 不过工具没那么健壮，没检查一些异常，凑合用一下吧，哈哈~ 下载链接：gif缩小工具 ...
JavaScript设计模式与开发实践随笔（一）
weixin_30925411的博客
08-07 179
编程语言按照数据类型大体可以分为两类，一类是静态类型语言，另一类是动态类型语言。 静态类型语言在编译时便已确定变量的类型，而动态类型语言的变量类型要到程序运行的时 候，待变量被赋予某个值之后，才会具有某种类型。 静态类型语言的优点首先是在编译时就能发现类型不匹配的错误，编辑器可以帮助我们提前 避免程序在运行期间有可能发生的一些错误。其次，如果在程序中明确地规定了数据类...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值