精华内容
下载资源
问答
  • 1. 设计场景 首页那边有一个产品浏览的版块在延迟载入的时候,将我所有的隐藏帧的...设计目标 减少页面载入时不必要的元素,构建一个轻量级的Web页面… 3.解决方案 当初我接到这个Case的时候,最初的设计方案毫无疑问是
  • 设计目标:建立一个基于jQuery框架的通用Web验证插件… 设计要求:1.需要漂亮的css样式及小图标的润饰… 2.基于jQuery框架… 3.调用.net Web 服务来实现与数据库的异步交互… 解决方案:1、首先,我们来设计三个类,...
  • 你必须要会的4种Web前端设计模式

    千次阅读 多人点赞 2020-07-22 16:29:31
    在软件工程领域,设计模式是为了解决特定问题而产生的一些可复用的方法、模板。每一种设计模式都针对性解决某一类场景的问题。设计模式被认为是开发者解决通用问题的最佳实践。 通常我们学习的设计模式,大多数与...

    在软件工程领域,设计模式是为了解决特定问题而产生的一些可复用的方法、模板。每一种设计模式都针对性解决某一类场景的问题。设计模式被认为是开发者解决通用问题的最佳实践。

    通常我们学习的设计模式,大多数与面向对象的语言相关,比如Java。市面上大部分关于设计模式的书籍也是基于面向对象来进行讲解的。但对于大部分平常写JavaScript的开发者来说,面向对象的设计模式基本上是用不着的,如果不仔细思考,会经常错误或过度使用设计模式,不仅增加了软件开发成本,还加重了后期维护的负担。作为以Javascript为主语言的开发者,有必要认真审视设计模式与JavaScript语言之间的关系,以及如何将设计模式与JavaScript更紧密的结合起来,使得设计模式带来真正的收益。

    本篇文章将会从以下三点来谈谈Web前端中的设计模式

    • 设计模式三问
    • 四种常用设计模式解析
    • 误区

    设计模式三问

    what:什么是设计模式

    上半年由于全国乃至全世界届疫情的原因,口罩数量缺口巨大,因此口罩价格也疯涨了十几倍,这吸引了一大批老板加入口罩生产的行业。有的传统企业主将原本用于生产其他产品的车间改为生产口罩的,有的则是三五好友凑一笔钱临时建一个生产厂地。那么问题来了,为什么这些人都能在短时间内完成工厂的建设或改造呢?原因是,针对生产口罩这么一个场景,整个过程已经完全规范和自动化了,比如有的机器负责布料成型,有的负责多层压制,有的负责消毒。这就是模式,解决某一类问题的特定解决方法。

    why:为什么会有设计模式?

    “其实地上本没有路,走的人多了,也便成了路”。

    在软件工程初期,需求相对较简单的时候,是没有设计模式这一说的。但随着时间推移,需求变得原来越复杂,遇到的问题也就越来越多。这些问题中很多都有相似性,慢慢的开发者们也根据不同的问题总结出了一套解决的方法论,并给它们取一个通俗易懂的名字,就是设计模式了,比如“工厂模式”、“观察者模式”等等。

    why:为什么要用设计模式?

    来打个比方,想必大家对下面三个小地图都比较熟悉吧?

    想象一下,当地图上一个敌人的头像都看不见的时候,你方队伍一般情况下会怎么做?缩回高低还是抱团蹲人?无论选择哪种策略,都是在按照一种模式在进行,这些模式就是为了在地图上看不见敌方时能更好的应对而产生的解决方案。所以,用设计模式,是为了遇到相似的问题、场景时,能快速找到更优的方式解决。

    how:怎么用设计模式

    为了更方便、更快速的找到你想要的东西,往往你会把房间整理的井井有条。但整理是需要花时间和精力的,如果这个房间你根本就不常进去,里面的东西也不需要经常挪用,那其实并没有必要整理成这样。这些消耗的时间和精力,对应到软件工程中就是软件成本。在用设计模式时,必须要衡量其所带来的的收益,如果为了一段日后都大概率不会变动的代码采用过多的设计模式来编写,其实是得不偿失的。所以,在用设计模式前,我们需要慎重思考哪些功能是日后可能会变的,哪些不会。

     

    四种常用设计模式解析

    上图应该是大家在各类书籍中常见到的设计模式,但其中很大一部分在实际需求开发中使用频率不高,所以我根据个人经验从中摘取了四个比较常用的模式来进行讲解。

     

    1.策略模式+组合模式

    场景:

    在一个设备管理系统中,当用户只有全部满足如下条件时,才能看到设备申请界面,有权限申请设备

    • A公司员工
    • B事业部
    • C技术栈
    • 部分经理

    拿起键盘我们就开始写代码,会写成如下这样

    这种写法有什么问题呢?

    1.当条件越来越多时,checkAuth函数会越来越长,可读性以及可维护性相当的差。上面例子中,省略了具体判断中的处理代码,如果每个分支的处理代码都不少,那整个checkAuth函数最后会变得非常复杂。

    2.每个判断其实都是独立的策略,假设有一天产品经理提了一个新需求,要做一个请假审核模块,也必须得是A公司+部门经理才能看到,那你就必须得从这个checkAuth函数中copy对应的处理分支过去了,这样项目中就又多了一块一模一样的代码。更进一步,后面产品经理要对判断公司这个分支的处理细节都要改进时,那你就不得不在多处进行修改,麻烦且不说,改漏了就会产生一个BUG。

    对于模式较为单一的策略,其实只需要将策略的实现逻辑抽离即可,无需更复杂的写法

    但是对于较为灵活的场景,需要策略之间的灵活组合来完成需求,就得使用策略模式+组合模式了。

    比如,设备申请模块需要ABCD四个权限,而请假审核模块只需要BC权限,这时authStrategy就不再适用了,需要更灵活的写法。

    通过这种动态添加策略的写法,只需要对不同场景配置不同的策略集,就能灵活的处理设备申请模块和请求审核模块的权限判断了。总结来看,当你负责的模块满足以下三个条件时,就建议用策略+组合模式

    • 各判断条件下的策略相互独立且可复用
    • 策略内部逻辑相对复杂
    • 策略需要灵活组合

     

    代理模式

    场景:

    在系统中通过接口查询某日的统计数据,并期望能在前端对查询过的日期进行缓存,当下次请求时如果日期命中对应缓存,则直接返回缓存数据,不向后台发起请求。

    直接写我们会写成下面这样

    如果需求只是一处这样,那没什么问题,这样写最直接最简单。但我们得考虑到,系统中其他地方的请求,是否也是需要通过参数来缓存请求结果的?如果是,那么就需要改造上面的代码,用代理模式来让这种缓存逻辑更加通用。

    上面代码通过通用的cacheRequest函数来代理真正的请求。cacheRequest函数利用闭包,将传入的请求函数与cacheDataMap锁定在一个作用域中,并返回一个增强后的请求函数。这样,其他需求如果也有类似的缓存需求,那就可以直接用cacheRequest函数去生成一个即可。

    总结来看,当你负责的两个模块职责比较单一且可复用,并且两个模块间的存在整合、限制、过滤等关系时,可以尝试使用代理模式。

    这里提一个思考问题,React中的HOC属于代理模式吗?

    发布订阅模式

    场景:

    还是上面有提到过的设备申请模块,现在你要实现一个设备申请功能,需求要求申请成功后,会分别触发供应商订单生成,相关方消息通知,审核人审核三块的逻辑,调用逻辑如下图。

     

    比较直接的代码写法是

    这样写可能会有什么问题呢?当这三个模块不是你写的,而是分工到不同的开发者去完成时,你会发现麻烦有点大。

    1.依赖模块的方法可能会改变,比如MessageCenter的开发者并没有遵照约定,把fetch方法改成了request,那执行的时候就报错了。

    2.当你在写设备申请的onSubmitSuccess函数的时候,需求只依赖函数中这三个模块,但随着业务发展,你需要调用的模块在增加,这时你就不得不再次找到这个onSubmitSuccess函数往里面添加依赖项。

    3.当你在写设备申请的onSubmitSuccess函数的时候,你并不知道要调用哪些模块,因为这些开发不是同时进行的。所以你无法再函数中预知要写哪些,必须得等到相关模块完成后再来填充调用代码。

    基于这些问题的考虑,我们必须让程序更灵活一些。在写onSubmitSuccess函数的时候,我们只需要考虑结束时发通知出去告知申请成功,至于谁需要这个消息做什么并不需要关系。借助发布订阅模式,可以很轻松的实现这种效果。

    总结来看,当你负责的模块,满足

    • 各模块相互独立
    • 存在一对多的依赖关系
    • 依赖模块不稳定、依赖关系不稳定
    • 各模块由不同的人员、团队开发

    的条件时,建议使用发布订阅模式来进行开发。

    思考一下,Redux是否使用了发布订阅模式呢?

     

    责任链模式

    场景:

    假设在设备申请流程的需求中,需要经过三个逻辑模块

    1. 申请设备
    2. 选择收获地址
    3. 选择审核人

    一般的写法是

    当流程需求变得多样化时,这段代码就无法适应变化了,我们假设以下场景。

    1.新流程申请软件license需要复用选择审核人逻辑。

    在这种需求下,原有代码中审核人的代码无法复用,因为selectChecker函数依赖了处理具体提交业务的submitApply代码。要么copy修改,要么重新一份。

     

    2.申请设备流程需要增加一个检查库存的环节。

    在这种需求下,需要改动applyItDevice方法,增加检查库存逻辑才能满足。

    如果我们使用责任链模式进行改造,那么这些场景都能更好的满足。

    利用责任链模式,可以很轻松的复用每一个流程的逻辑,并且按需要组合成新的流程。

    总结来看,当你负责的模块,满足

    • 你负责的是一个完整流程,或你只负责流程中的某个环节
    • 各环节可复用
    • 各环节有一定的执行顺序
    • 各环节可重组

    时,建议使用责任链模式。

     

    误区

    “当我们有一把锤子,看什么都是钉子”

    设计模式就好比一把锤子,当我们手握锤子的时候,不能看什么都是钉子,在写代码时,也不能处处都使用设计模式。使用设计模式本身是需要成本的,我们需要根据具体的场景来进行判断。正如开头所讲,识别变化与不变化的地方是核心关键点。

     

    展开全文
  • Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思
  • web前端设计)artDialog模式窗口 直接接口调用。。
  • 本文以MVC模型为基础,数据存储(Store)为数据容器,构建了MVCS (Model-View-Controller-Store)模型,并以学生成绩管理系统为例,说明使用该模型完成企业级组态式Web前端设计的方法和实现步骤,展示了前端实时数据的...
  • js设计模式web前端开发中的实践——网站登录

    千次阅读 多人点赞 2019-12-14 19:10:27
    本文,笔者将以一个登录模块的开发流程,向各位说明穿插在其中的知识点 —— 【单例模式】和【发布-订阅模式】的使用。 OK,步入正题。 加入你是一个大型网站的前端开发人员,经过激烈地讨论以后,决定让你负责登录...

    本文,笔者将以一个登录模块的开发流程,向各位说明穿插在其中的知识点 —— 【单例模式】和【发布-订阅模式】的使用。


    OK,步入正题。

    假如你是一个大型网站的前端开发人员,在经过激烈地讨论以后,决定让你负责登录模块的开发。
    先说,这个网站很大,所以有很多模块,比如:header头部、nav导航、消息列表、购物车… 这些模块有一个共同的特点,就是必须先用ajax异步请求获取用户的登录信息 —— 这是正常的,比如header中就要显示用户的名字和头像。
    所以你很重要。

    你着手做了。你的构思是:仿Web QQ那样。比如当点击了左边导航栏里的“请登录”的头像时,就会弹出一个遮罩层 + 一个登录浮窗。很明显这个浮窗在页面中总是唯一的。
    第一种解决方案是在页面加载完成以后便创建好这个div浮窗,他一开始是处于隐藏状态的,当用户点击时,才开始显示 —— 我想,用js控制的display切换会有帮助。
    但你很快就会发现一个问题:也许用户进入这个页面只是随便逛逛、看看天气、or打打游戏,根本不想进行登录操作。这时,这个“总是一开始就被创建好的登录浮窗”就有可能成为白白浪费一些DOM节点的“元凶”。
    你很快又有了想法,决定让用户点击对应区域时再去加载。你可能会写类似如下代码:

    <body>
    	<button id="loginBtn">登录</button>
    </body>
    
    //js
    <script>
    	var createLoginLayer=function(){
    		var div=document.createElement('div');
    		div.innerHTML="我是登录浮窗";
    		div.style.display="none";
    		document.body.appendChild(div);
    		return div;
    	}
    	document.querySelector('#loginBtn').onclick=function(){
    		var loginBtn=createLoginLayer();
    		loginBtn.style.display="block";
    	}
    </script>
    

    你突然发现,这样做虽然避免了每次页面打开时的DOM浪费,却产生看一个更大的问题:每次click时都会创建一个新的div!虽然我们可以在点击“关闭”时去销毁掉这个ElementNode,但这样频繁地创建和删除结点,在一个页面上,明显是不合理,也是不必要的。
    于是你自然地想到了前几天看到的 惰性单例设计模式 ,可以用一个变量去判断是否已创建过相同的div。 于是,上面代码中的js部分就变成了这样:

    var createLoginLayer=(function(){
    	var div;
    	return function(){
    		if(!div){
    			div=document.createElement('div');
    			div.innerHTML="我是登录浮窗";
    			div.style.display="none";
    			document.body.appendChild(div);
    		}
    		return div;
    	}
    })();
    document.querySelector('#loginBtn').onclick=function(){
    	var loginBtn=createLoginLayer();
    	loginBtn.style.display="block";
    }
    

    OK,虽然它还有些许缺点(复用性差),但对于几个功能不冲突的页面来说还算“绰绰有余”,你心满意足地用了ajax/fetch/axios/vue-resource完成了登陆功能。

    但现在麻烦又来了。正如前面所说,你所做工作关联性极大,但你不知道除了header、nav、消息列表、购物车之外,将来还有哪些模块需要用到这些用户信息。但如果他们和用户信息之间产生了强耦合性,就比如你按如下方式写了功能代码:

    login.succ(function(data){
    	header.setAvatar(data.avatar);
    	nav.setAvatar(data.avatar);
    	message.refresh();   //刷新消息列表
    	cart.refresh();   //刷新购物车列表
    });
    

    现在虽然只有登录模块是你负责编写的,但你还要了解header里设置头像的方法叫setAvatar、购物车中刷新页面的方法叫refresh,,,这可不是个好消息 —— 这种耦合会使程序变得“僵硬”。

    试想某一天,这个项目里又增加了一个“收货地址”管理模块。它不是你负责完成的,此时你正在外地度过你一年仅几天的可怜假期,但同事却给你打了一个电话:“Hello,登录后还要麻烦刷新下地址列表!” 于是你不得不打开电脑,找到了不知道几个月前写的那段login.succ的代码片段,在此函数最后加了一句:

    address.refresh();   //刷新地址列表
    

    天哪!这是多可怜的一件事!

    这时你终于想起重构这些代码:你又那么“恰好”的想起了翻看过的 发布-订阅设计模式 。你欣喜若狂。

    我们就会越来越疲于应付一些突如其来的业务要求,正比如大量重复相同且没什么意义的代码。要么跳槽了事,要么必须学会重构。
    使用发布—订阅模式重写之后,对用户信息感兴趣的业务模块将自行订阅登录成功的消息事件。 当登录成功时,登录模块只需要发布登录成功的消息,而业务方接受到消息之后,就会开始进行各自的业务处理,登录模块并不关心业务方究竟要做什么,也不想去了解它们的内部细节。

    改善过后代码如下:

    $.ajax('xxx?login',function(data){
    	login.trigger('loginSucc',data);   //发布登录成功的消息
    });
    
    //各模块去监听消息
    var header=(function(){
    	login.listen('loginSucc',function(data){
    		header.setAvatar(data.avatar);
    	});
    	return{
    		setAvatar:function(data){
    			console.log('设置header头像');
    		}
    	}
    })();
    //...
    

    假如有一天,项目中增加了一个刷新收货地址列表的行为,那么只要在“收货地址”模块里加上监听消息的方法,即可。而这些你就完全不必操心了:

    var address=(function(){
    	login.listen('loginSucc',function(data){
    		address.refresh(data);
    	});
    	return{
    		refresh:function(avatar){
    			console.log('正在刷新...');
    		}
    	}
    })();
    
    展开全文
  • 我的第一篇文章:【web前端到底是什么?有前途吗?】,在我没想到如此 ‘HOT’ 的情况下 得到很多好评和有效传播。 也为我近期新开的 个人前端公众号:前端你别闹(webunao) 直接增加了几百粉(果然,帅的人...

    hi,大家好!

    我的第一篇文章:【web前端到底是什么?有前途吗?】,在我没想到如此 ‘HOT’ 的情况下 得到很多好评和有效传播。

    也为我近期新开的 个人前端公众号:前端你别闹(webunao)

    直接增加了几百粉(果然,帅的人大家都喜欢。)

    被国内著名技术博客 CSDN 推上博客首页,并且经过我授权在其他公众号也转载了不少。

    我觉得我这片入门文章可以小火,究其原因 有以下几点

    • web前端是如此的火热,关注度也逐年升高

    • 由于前端开发的火热 和 一些IT巨头公司 对 web前端开发 人员的需求旺盛,让越来越多的孩子转入前端

    • 前端开发领域 是it技术语言领域唯一一个 男女老少都可以快速入门并快速提升兴趣的领域(嘿嘿:妹子那绝对是最多的!)

    • 我文风实在是太逗比了,我颜值实在是太帅了

    ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE0MjIyNjQx?x-oss-process=image/format,png)

    不知不觉,我废话又多了起来,段子手的天性就是改不了? ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE0NDM4Nzg1?x-oss-process=image/format,png)

    ok ,我们切入今天的正题 :

    web前端到底怎么学?


    那么在讲 web前端怎么学 这个大命题之前呢,依据我本人的尿性,还是得先把你拉入坑,让你在坑里好好学 O(∩_∩)O

    由于第一篇文章,有说到

    O(∩_∩)O 好了,我们已经相识了,我们进入相知的阶段(我擦,太快了吧?)

    web前端的历史渊源 和一些出处,童鞋们大概都有所了解了。

    下面我们进入【相爱】阶段(我都不认识你,就tm相爱了?)

      歌词云:* 想说爱你不容易 *!    
    

    但是我会想方设法让你爱上她(web前端开发)。


    一般据我经验,在喜欢并且决定和她恋爱之前,我都会做一下充分准备和调查,有必要了解和研究清楚 ‘她’ 的几个特性和习惯

    1. web前端的基本工作职责 和基础技能(要清楚)
    2. web前端的分类和门派(简要概述,武林 实在是太大啦)
    3. 前端开发 必看的书籍资料(干货重点)

    如果 你已经了解清楚以上前2点并思路清晰,那就直接 和她相爱吧-直接跳入 【前端开发 必看的书籍资料】


    1.web前端的基本工作职责(要清楚)


    “ 入一行,要先知一行 ”;我们来看看web前端开发职位 无论什么门派都要做到的一些基本工作职责。

    先,你必须是一个合格的“页面仔”,这个叫法不好听,但很生动;
    我们都知道,所有呈现的内容都是基于HTML 网页的。
    如果你的html、css(包括现在的HTML5+CSS3)基础不会,或者不够扎实,都很难在有大的进步,或者你的JS 很好,但布局基础不行,还是不能算合格的web前端。


    次,前端主要负责实现视觉和交互功能,以及与后端服务器通信,完成业务逻辑。现在前端的核心价值在于对用户体验的极致追求。
    那么我们靠什么来提升用户体验和人性化操作,让用户觉得体验牛x、舒服呢?(当然细分厉害的公司,会有专门的 用户体验攻城狮)
    当然是我们自始自终的主角 JavaScript了,毕竟它最初就是为浏览器而生的脚本语言。


    而,JS这门语言并不是一种强类型语言,更像是一种解释型语言,所以很多属性,在不同的浏览器环境解释有很大不同导致,效果和性能千差万别,而且很多属性之长,之多,之巨都很有工作量。


    后,就出现了Jquery 这种的框架神器,由于其好用,简单,效果多样,兼容完美,高效率等特性,迅速席卷全世界,所以如果想入门,jquery 这个东西你是逃不掉的,而且利用它简单的语法,你会很快将一些效果实现出来,迅速提升兴趣。


    后,既然涉及到视觉 和用户体验,那么UI 设计知识,你肯定要涉及或者懂一些设计方面的技能和基本素养,比如PS的一些基本操作,切图,和颜色值(比如会改个字,隐藏个图层,改个尺寸,变个颜色什么滴),屏幕适配方案等,讲道理说:平时并不需要我们做,但技能包里绝对要有。


    后,服务器知识+后端语言基础,这个职责和话题就比较hight了,到后面我们会一一解释。


    之,web前端同样是程序员,由于前端是位于后端程序和界面设计师之间的岗位,相当于中间桥梁,要完成三者的对接,涉及到广泛 的知识,规模大到工程级,也就有了前端工程师的说法(某人总结,很是到位)。


    ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwNzA3NTUy?x-oss-process=image/format,png)
    • web前端工程师,是一个要精通本职html,css,javascript,也要了解后端编程,了解界面设计,了解软件工程的综合人才。

    (卧擦!这才入门,web前端就这么多职能 和掌握的基本技能,不开森了 ,哼!)

    哈哈,看到这一大篇的职责和技能,你并不要害怕,因为这些就像小孩子,会走路,会说话。
    只要你有兴趣,只要有人领路,有教程自然而然就能掌握的技能,至于一些设计素养,反正你不是UI,有最好,没有又有什么所谓呢?


    2.web前端的分类和门派(简要概述,武林 实在是太大啦)


    根据web前端的细分工种 和 业务不同,我无耻的把她比拟出来几个门派,供大家参考,也让无比庞大的前端划分变得有趣一些,不然下面我放一张图, 你看了会晕菜。
    这里我先简单说几种,我们常常熟知的几个门派
    比如:

    • 【少林派】:七十二般武艺样样精通 - web网站开发

    • 【武当派】:以柔克刚 - 移动APP开发

    • 【峨嵋派】:倾国倾城 - canvas 数据可视化

    • 【华山派】:剑法精湛 - nodejs开发

    • 【逍遥派】:潇洒飘逸 - HTML5游戏

    让你晕菜的技能树 ,客观您感受一下先

    由于web前端知识体系 实在是太庞大,这是另一个话题,三言两语是描述不清的,我们后面会专门开一个专题文章,来讲解和讨论这个话题。

    ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjE1NzA4NDkx?x-oss-process=image/format,png)
    好累,我们赶紧去看干货

    3.前端开发 必看的书籍资料(干货重点-入门篇)


    一、 html + css 这部分建议在 w3school 在线教程 上学习,边学边练,每个属性后还有在线测试。 然后过一遍之后可以模仿一些网站做些页面。记住这个一定要多练 多练 多练 ,最重要的事儿 还得我说三遍?


    二、 javascript 要学的内容实在很多,如果没有其他编程语言的基础的话,学起来可能要费些力,还是建议先在 w3school上学习一些基本语法 和定义。
    然后你必须要看书,然后实践(好多人问 有没有快速捷径,我只能告诉你:如果有捷径,码农们就不用天天如此苦逼了吧)。

    忍得住寂寞枯燥,才能拿得到高薪

    对于习惯看视频学习的同学,以上内容也可以在 慕课网 这个在线学习网站上去搜,现在里面基础课程讲解都还不错。跟着敲一边,确实可以避免看书查资料的枯燥


    下面多图预警,多书预警。

    以下内容都是经过我自己本身的学习路线经验,还有网络各路大神共同整理的资料 汇总,帮助源源不断入坑的新人更好的学习。

    前端书籍必读、必买(本帅认为)
    ★★ 越多,推荐等级越高,和难度无关。最好按照我给的顺序入门,这样不会让你枯燥,想放弃,如果先推荐经典的厚的,满篇定义,我估计是害你们放弃。

    #【JavaScript】

    先说 JavaScript,因为前面说了,css最好跟着视频练习,毕竟都是可视化的,像做艺术。

    【第一本】《JavaScript DOM编程艺术》★★★★★

    最好的JS入门书籍,最让人有兴趣读完的那种书。
    它通过一个 幻灯片 案例,从头到尾教你实现出来,最后效果实现的同时,基本的JS常用属性,你也就滚瓜烂熟了,很有成就感。(个人很偏向这种风格书籍,此书让我彻底爱上前端js)
    一目了然地告诉你如何用JS操作DOM(这是浏览器端编程的基本功),还灌输了最符合标准的编程理念。可惜有点老,最新一版是2010年的。不过不影响阅读和实现,全部按照最新ES5属性就行了。


    【第二本】《JavaScript高级程序设计》 ★★★★

    又称红宝书,(我喜欢叫 望眼镜)
    雅虎首席前端架构师,YUI的作者Zakas出品。虽然书名带了“高级”二字,但是讲得都很基础的属性内容,事无巨细。
    关键一点是翻译的也很到位,并不是如嚼蜡一般,这很重要。看此书,我建议配着下面的犀牛书一起 看效果更佳。
    

    【第三本】《JavaScript权威指南》 ★★★★★

    这里写图片描述

    著名的淘宝前端团队翻译的,看译者列表都是一堆前期大神。
    

    这本书又叫犀牛书,被国人誉为:javascript开发者的圣经。网上对此书评价很多很好,大概意思是说这 本书是一本JavaScript文档手册,更适合当作字典和备忘录查询来使用。
    我也是对这本书有很厚的感情和依赖(忘了属性就拿来翻翻,总有收获),个人感觉这本书还是写得枯燥了些,毕竟是工具性质,不适合当作第一本入门来看,不过内容绝对是五颗星,无可挑剔!神书


    【第四本】《JavaScript语言精粹》 ★★★★★

    作者是大名鼎鼎的 【老道】,我的JS 偶像,我github第一个关注的就是这个大胡子叔叔。
    他是 JSON格式的发明和维护者,也有很多著作和对JS 这门语言的超多贡献,可见此人功力绝对顶级!
    这本书,属于稍微入门以后看的,了解了一些中高级概念 比如:闭包、原型链、作用域链、继承封装等以后,
    看此书有如神助,看一页相当于犀牛书几十页的讲解(不吹牛逼,当时我是这感觉的)
    

    【CSS】

    CSS】类, 如果视频看完了,练习的熟练了,你还需要一些书的推荐和查询,也是有必要的,我再来给你罗列几本经典的收藏书,买不买均可的。

    【第一本】《Head first HTML&CSS》 ★★★

    好的入门书。看两遍就对HTML & CSS 有个大概印象了。
    此时把w3cschool作为备查手册收藏起来,结合此书,事半功倍,成就感爆棚。
    

    【第二本】《CSS权威指南(第三版)》 ★★★★

    最权威的CSS书籍,除了阅读W3C的文档外的不二选择(就是翻译太操蛋,可能有的词你以为是火星语,不过不影响阅读)。
    有时间可以反复看,有css3内容,并当做字典随时查。类似犀牛书
    

    【第三本】《图解CSS3:核心技术与案例实践》 ★★★

    这本书讲解的是最新的CSS3(前几本书停留在CSS2.1时代,2.1是基础),CSS3也是必学的,不然真的跟不上时代了。


    【第四本】《CSS禅意花园》 ★★★★

    这里写图片描述

    这本书很值得期待,我看过PDF版本的,那时候还没翻译出来,翻译的也一般,不过作者是巨牛逼的,听说对css理解的就像自己的左右手,光靠写CSS 他年薪就轻松百万了。。汗颜!思路清晰,图文并茂,还解决一些疑难杂症和高级技巧,类似于JS的语言精粹了,大神级别。


    好了,差不多就推荐到这里,CSS这基本是基于情怀,罗列一下,买不买都没必要,想当年我学CSS 是挨着几个仅有的视频,一个属性一个属性的练习,还有IE6 各种兼容问题,虐到爆,那酸爽(现在你们是性福的,基本不用兼容IE6 这个老东西了,)。

    真正起到决定作用的,还是JS语言的掌握和实践,JS能力越强 基础越稳固,你的前端能力就会越好, 自然薪资越高,所以现实点说大家,大家一起努力吧,让money 都到碗里来


    (有些童鞋认为:从来不需要买纸质书,我全程PDF就行了嘛,不过我建议有些书还是要纸质的,这样有感觉,也可以做笔记,甚至随时当工具书字典来查询,由于前端的特殊性和js语言的属性之繁多庞杂,我建议你还是要买纸质的书。帮助很大,而且我告诉你有了钱要补上正版呃)

    那么PDF截图奉上,嘿嘿 如果需要请到此大神网站 网盘下载,应有尽有,此处应该有掌声!

    地址:http://www1.w3cfuns.com/feres.php?do=picture&listtype=book

    ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwODAwMDA2?x-oss-process=image/format,png)

    ####本篇最后(我真的很累,原创很累的,所以我得结尾了,后一篇在介绍更多的干货)
    我总结了部分一些知乎大神举荐的书评连接(微信不可外链,可查看我博客) 和我自己觉得要看的书,罗列如下,供君参考(嘿嘿!是不说我正经起来,很不习惯?)

    ★ 越多,难度越高。

    CSS


    CSS权威指南 (第3版)★★
    精通CSS★★★
    HTML & CSS设计与构建网站


    JavaScript


    JavaScript & jQuery交互式Web前端开发
    JavaScript DOM编程艺术 (第2版)
    JavaScript高级程序设计(第3版)★★
    锋利的jQuery★★
    高性能JavaScript★★★
    JavaScript语言精粹★★★
    JavaScript权威指南★★★
    编写可维护的JavaScript★★★
    JAVASCRIPT语言精髓与编程实践★★★
    Effective Javascript★★★
    Secrets of the JavaScript Ninja★★★
    JavaScript模式★★★
    JavaScript设计模式★★★★
    基于MVC的JavaScript Web富应用开发★★★


    性能实践(不是本篇重点)


    高性能网站建设指南


    这个文章花费了我不少时间整理收集,然而还是不到冰山一角,至少入门够用了,所以请看到的同学,尽心收藏并帮助传播,可以帮到更多的新人和疑惑中的转型的从业者,我将会非常高兴和欣慰,也将有更大的动力和精神来继续更新和贡献微薄之力。

    有人问我:又没人给你钱,你何必这么辛苦,还得工作,还得写文章。然而我说我不在乎钱那是不可能的。

    我还告诉你们,这真的是我的兴趣和责任,因为我经历了前端洪荒的年代和苦楚,所以我很愿意分享和帮助新来者,少走弯路和浪费时间。

    到最后:兴趣都会变成钱!坚持下来就好。也希望大家支持

    • 能在江湖混迹多年的,肯定不是靠工具和潮流。绝对是靠的不断提升的内功

    • 希望大家明白,趁年轻 一定要忍住枯燥,打好基础!

    在最后,特别感谢,贺贺妹子(傻),辛苦整理提供一些资料和配图,让我的文章更加生动和有趣。我想她一定是被我的颜值折服了吧!

    ![](https://imgconvert.csdnimg.cn/aHR0cDovL2ltZy5ibG9nLmNzZG4ubmV0LzIwMTYwODA3MjIwOTA2MzU2?x-oss-process=image/format,png)

    入坑方式: 欢迎加入~!气氛热情,欢乐多,妹子多!


    扫描屏二维码或直接搜索,可以关注 我的前端公众号 : 前端你别闹
    及时更新一些前端解惑和段子

    这里写图片描述

    如果未留言就转载,或者转载不署我名字的,你将会越来越丑!很准的呃

    展开全文
  • 所有的设计模式都是用来有效管理代码的 便捷开发 通俗易懂 有助于后期代码维护和升级 发布订阅设计模式(观察者模式的升级版) 发布一个计划,并且向计划中订阅一个个的方法 当触发某个事件或者到达了某个阶段,...
    • 所有的设计模式都是用来有效管理代码的
      • 便捷开发
      • 通俗易懂
      • 有助于后期代码维护和升级
    • 发布订阅设计模式(观察者模式的升级版)
      • 发布一个计划,并且向计划中订阅一个个的方法
      • 当触发某个事件或者到达了某个阶段,我们可以通知计划中订阅的方法按照顺序依次执行
        在这里插入图片描述

    方案一:不支持自定义事件,且页面只有一个事件池(基于单例设计模式)

    let sub = (function(){
    	//创建自定义事件池
    	let pond = [];
    	//订阅、移除订阅、通知执行
    	const on = function on(func){
    		//去重处理
    		for(let i = 0; i < pond.length;i++){
    			if(pond[i] === func){
    				return;
    			}
    		}
    		pond.push(func);
    	}
    	const off = function off(func){
    		for(let i = 0; i < pond.length;i++){
    			if(pond[i] === func){
    				//这样会导致数组塌陷
    				//pond.splice(i, 1);
    				//先把要移除的项置为null
    				pond[i] = null;
    				break;
    			}
    		}
    	}
    	
    	const fire = function fire(...params){
    		for(let i = 0; i < pond.length;i++){
    			let itemFunc = pond[i];
    			//因为数组中有null值了,所以这里执行前需进行判断,null则不再执行
    			if(typeof itemFunc !== 'function'){
    				//同时在这里将数组中null值移除
    				pond.splice(i, 1);
    				i--;//防止数组塌陷
    				continue;
    			}
    			itemFunc(...params);
    		}
    	}
    	return{
    		on,
    		off,
    		fire
    	}	
    })();
    
    //==========================测试, 1秒后执行fn1~fn5方法=======
    const fn1 = ()=>{console.log('fn1')}
    const fn2 = ()=>{console.log('fn2 '); sub.off(fn1);}
    const fn3 = ()=>{console.log('fn3')}
    const fn4 = ()=>{console.log('fn4')}
    const fn5 = ()=>{console.log('fn5')}
    sub.on(fn1);
    sub.on(fn2);
    sub.on(fn3);
    sub.on(fn4);
    sub.on(fn5);
    setTimeout(()=>{
    	//传统方法需要把fn1~fn5放这里分别调用
    	//利用发布订阅模式,则直接调用触发事件方法即可
    	sub.fire();
    }, 1000);
    

    方案二:支持自定义事件

    在上面的方案中,因为整个页面只有一个事件池,那么不管触发什么事件(例如:body的click或box的click事件)都会执行同样的代码,也就是说都会把事件池中的事件,全都执行一次。那么有时候想点body时执行fn1和fn2;点box时执行fn3~fn5,那么上一种方案就显然无法满足了。接下来我们将上面的方案改造一下,让其支持自定义事件。

    let sub = (function(){
    	//创建自定义事件池
    	let pond = {};
    	//订阅、移除订阅、通知执行
    	const on = function on(event, func){
    		//如果pond中没有这个数组,默认添加一个
    		!pond.hasOwnProperty(event) ? pond[event] = [] : null;
    		let arr = pond[event];
    		!arr.includes(func) ? arr.push(func) : null;
    	}
    	const off = function off(event, func){
    		let arr = pond[event];
    		//如果arr是undefined,则直接return
    		if(!arr) return;
    		for(let i = 0; i < arr.length;i++){
    			if(arr[i] === func){
    				//这样会导致数组塌陷
    				//arr.splice(i, 1);
    				//先把要移除的项置为null
    				arr[i] = null;
    				break;
    			}
    		}
    	}
    	
    	const fire = function fire(event, ...params){
    		let arr = pond[event];
    		//如果arr是undefined,则直接return
    		if(!arr) return;
    		
    		for(let i = 0; i < arr.length;i++){
    			let itemFunc = arr[i];
    			//因为数组中有null值了,所以这里执行前需进行判断,null则不再执行
    			if(typeof itemFunc !== 'function'){
    				//同时在这里将数组中null值移除
    				arr.splice(i, 1);
    				i--;//防止数组塌陷
    				continue;
    			}
    			itemFunc(...params);
    		}
    	}
    	return{
    		on,
    		off,
    		fire
    	}	
    })();
    
    //==========================测试, 1秒后执行fn1~fn5方法=======
    const fn1 = ()=>{console.log('fn1')}
    const fn2 = ()=>{console.log('fn2 ');sub.off('BODY-CLICK',fn1)}
    const fn3 = ()=>{console.log('fn3')}
    const fn4 = ()=>{console.log('fn4')}
    const fn5 = ()=>{console.log('fn5')}
    sub.on('BODY-CLICK',fn1);
    sub.on('BODY-CLICK',fn2);
    sub.on('BOX',fn3);
    sub.on('BOX',fn4);
    sub.on('BOX',fn5);
    dcument.body.onclick = function(){
    	sub.fire('BODY-CLICK');
    }
    setTimeout(()=>{
    	//传统方法需要把fn1~fn5放这里分别调用
    	//利用发布订阅模式,则直接调用触发事件方法即可
    	sub.fire('BOX');
    }, 1000);
    

    方案三:创建多个事件池,每个事件池是独立的存放自己的订阅方法,但也可以互相共用(基于面向对象中的类和实例)

    (function(){
    	class Sub{
    		constructor(){
    			//私有属性
    			this.pond = [];
    		}
    		//原型上的公共方法
    		on(func){
    			!this.pond.includes(func) ? this.pond.push(func) : null;
    		}
    		off(func){
    			this.pond.forEach((item, index)=>{
    				item === func ? pond[index] = null : null;
    			});
    		}
    		fire(...params){
    			for(let i = 0; i < this.pond.length;i++){
    				let itemFunc = this.pond[i];
    				//因为数组中有null值了,所以这里执行前需进行判断,null则不再执行
    				if(typeof itemFunc !== 'function'){
    					//同时在这里将数组中null值移除
    					this.pond.splice(i, 1);
    					i--;//防止数组塌陷
    					continue;
    				}
    				itemFunc(...params);
    			}
    		}	
    	}
    //	window.sub = ()=> new Sub();
    	window.sub = function(){
    		return new Sub();
    	}
    })();
    
    //==========================测试, 1秒后执行fn1~fn5方法=======
    const fn1 = ()=>{console.log('fn1')}
    const fn2 = ()=>{console.log('fn2 '); sub2.off(fn3);}
    const fn3 = ()=>{console.log('fn3')}
    const fn4 = ()=>{console.log('fn4')}
    const fn5 = ()=>{console.log('fn5')}
    let sub1 = sub(),
    	sub2 = sub();
    sub1.on(fn1);
    sub1.on(fn2);
    sub2.on(fn3);
    sub2.on(fn4);
    sub2.on(fn5);
    setTimeout(()=>{
    	//传统方法需要把fn1~fn5放这里分别调用
    	//利用发布订阅模式,则直接调用触发事件方法即可
    	sub1.fire();
    }, 1000);
    
    setTimeout(()=>{
    	//传统方法需要把fn1~fn5放这里分别调用
    	//利用发布订阅模式,则直接调用触发事件方法即可
    	sub1.fire();
    }, 2000);
    
    展开全文
  • 最新Vue面试题网址:2021年 Vue经典面试题 -- 必问知识点 --(包含答案)_xm1037782843的博客-CSDN博客_vue面试题 敬请关注公众 :包含全套 Vue 最新面试题 js最近面试题 等大量前端知识技术。 部分都是百度的答案...
  • 本文以MVC模型为架构,ExtJS组件为基础,数据存储(Store)为数据容器,构建了MVCS (Model-View-Controller-Store)模型,并以书籍信息系统为例,说明使用该模型完成组件化手机Web前端设计的方法和实现步骤,展示了...
  • Web前端是干嘛的 为什么要学Web前端

    千次阅读 2019-01-12 19:24:28
    如今参加Web前端培训学习Web前端开发的人不断的增加,但是也有不少小伙伴对Web前端不是很了解,本篇文章小编和读者们探讨一下Web前端工程师能干什么?为什么要学Web前端? 现如今各大网站的页面基本上都是使用Web...
  • 好程序员web前端分享初学者必看web前端学习路线图,随着移动互联网的发展,web前端逐渐受到企业的重视,前端开发人员的薪资也水涨船高,越来越多的人看好前端行业的发展,想要转行加入。下面,好程序员web前端培训小...
  • web端设计web前端开发的区别

    万次阅读 2017-07-05 14:15:22
    它要求前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化、SEO和服务器端的基础知识,而且要学会运用各种工具进行辅助开发以及理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器...
  • 随着web前端的飞速发展,学习web前端的人员也是越来越多,在移动 互联网 时代,相信我们每个人的手机上都装有数十个APP,这些APP的开发其实也和当下热门的 Web 前端开发息息相关。 事实上,如今一半以上的APP都是...
  • 联系AppMVC ContactAppMVC 是使用 MVC 前端控制器设计模式在 java 中开发的 Web 应用程序。
  •  随着移动互联网的发展,web前端逐渐受到企业的重视,前端开发人员的薪资也水涨船高,越来越多的人看好前端行业的发展,想要转行加入。下面,给大家分享一份web前端学习路线图,希望对初学者有所帮助。  Web前端...
  • WEB前端简历模板

    万次阅读 多人点赞 2019-10-15 17:15:36
    WEB前端简历模板 详细资料 姓名:XXX 出生年月:XXXX年X月 名 族:X族 政治面貌:XXXX ...
  • 马铃薯指南 用于一致设计的简单前端 Web 样式/模式指南 官方文档 请访问以获取更多信息和详细文档。 执照 PotatoGuide 是在 [MIT 许可] ( ) 下许可的开源软件。
  • 但是,说说1+X Web前端开发等级考证这个证书,总有人跑到网上问:这个证书有没有用? 这个证书含金量高不高? # 关于考不考 因为这个是工信部从2019年才开始实施试点的,目前还在各大院校试点中,就目前情况来看,...
  • Web前端.系统学习Web前端开发路线图

    千次阅读 2013-12-29 10:49:10
    从数据结构到算法,从设计模式到程序调试;Web前端的html到css再到js;编程语言从c到c++到java再到微软的.net平台(主要是c#,什么winform,asp.net...),还自学过php;数据库有原理,SQL,mysql,oracle,sq
  • Web前端学习路线

    千次阅读 2017-12-16 14:20:39
    随着IT行业发展,web前端这门技术深受欢迎,那么零基础的小白菜鸟怎样能学好web前端呢?web前端培训专家知海匠库推荐一条清晰的web前端学习路线,希望可以帮到有需要的人。 第一阶段: HTML+CSS: HTML进阶、CSS...
  • Web前端小白入门指迷

    千次阅读 多人点赞 2016-12-28 23:29:10
    前端有很多种,Shell 前端,客户端前端,App 前端Web 前端和可能接下来很会火起来的 VR 前端等。当然在这篇文章,集中讨论一下身为小白,我们怎样去了解 Web 前端,以至达到一种入门级别的水平。 前端篇: 前端...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 120,448
精华内容 48,179
关键字:

web前端设计模式