JavaScript设计模式与开发实践
文章平均质量分 92
从实践入手,总是较为便捷又通俗易懂的方法
恪愚
江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源;曾参与过中大型微信小程序项目前端开发,并主导过一些官网(原生)开发;着迷于vue、node、css以及原生js技术。热衷研究现有技术的成型创新应用。目前对前端可视化和webRTC、web安全有浓厚的兴趣。开源且目前维护的有:微信小程序扩展组件库—— https://github.com/1314mxc/yunUI ,欢迎star!
展开
-
从表单校验看JavaScript策略模式的使用
众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重。事实上,几乎每一个中大型网站都会有“登录注册”以验证用户信息、防止一些不可名状的隐患。。。那么表单的优劣就成了前端开发者急需解决的问题。其实我更愿意称为“代码的可读性”或“可复用性”以及“是否冗杂”。表单也有“优劣”?你在开玩笑嘛?我想你可以认真看下下面的代码,它用到了一些“新知识”:<form action="xxx" id="registerForm"> 请输入用户名:<input type="text" nam原创 2020-10-13 11:09:27 · 5984 阅读 · 27 评论 -
原生JS小游戏:从0实现一个扫雷游戏
这两天闲着无事,写了几个Web游戏供自己打发时间。其中笔者感觉扫雷这个游戏的实现中涉及到的知识点比较全面,故在此和大家分享一下。先放效果图:首先我们要把基本的架子搭建起来:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>原生js实现扫雷小游戏</...原创 2020-02-29 09:10:09 · 8244 阅读 · 8 评论 -
js设计模式在web前端开发中的实践——网站登录
本文,笔者将以一个登录模块的开发流程,向各位说明穿插在其中的知识点 —— 【单例模式】和【发布-订阅模式】的使用。OK,步入正题。加入你是一个大型网站的前端开发人员,经过激烈地讨论以后,决定让你负责登录模块的开发。先说,这个网站很大,所以有很多模块,比如:header头部、nav导航、消息列表、购物车… 这些模块有一个共同的特点,就是必须先用ajax异步请求获取用户的登录信息 —— 这是正...原创 2019-12-14 19:10:27 · 2680 阅读 · 11 评论 -
原生JS封装ajax方法(es5、es6两种方法&支持jsonp方式)
嘿嘿,第一次想起这个事情的时候,内心是有点小激动的。。。为什么要用原生js去封装一个ajax请求呢?锻炼代码能力——据说原生的东西有些难度,挑战一下自己我写“高效前端”的文章中提到过:原生的代码在浏览器上的运行效率是其它的几倍(甚至十几倍)其实也就那样吧,只要对ajax请求有一定了解(多玩几次),就能顺着思路写下去!不说了,直接上代码。(注释已经很详细了…)ajax.jsfunc...原创 2019-11-18 19:15:01 · 1509 阅读 · 2 评论 -
原生JS灵魂之问——你真的懂这些JS吗?
最近在看ES6(可能是初到公司的缘故,处于振奋与繁忙的事带来的无力之中。。。不过还是坚持认真阅读了《深入浅出ES6》,真心觉得是本好书),里面一些内容会时不时让人有“恍然大悟”之感。先说下 JS数据类型:原始数据类型和引用数据类型原始数据类型 (6种)booleannullundefinednumberstringsymbol引用数据类型:对象 object(包括obj...原创 2019-10-21 19:02:12 · 502 阅读 · 0 评论 -
大道之音:防抖和节流以及其中蕴含的eventloop
写这篇文章的原因其实是我发现以前还未完全掌握防抖和节流的概念。对!就是概念,这是面试的重点,也是实际项目中如何抉择的依据。也可以把这篇文章当做这两篇文章的“后续”:https://blog.csdn.net/qq_43624878/article/details/101155944https://blog.csdn.net/qq_43624878/article/details/101687...原创 2019-10-20 09:24:10 · 3301 阅读 · 2 评论 -
JavaScript设计模式:利用虚拟代理合并HTTP请求
我们先构思这样一种场景:每此项目做完我们都要写一份工作总结,总结要交给项目经理批阅。经理手下管理着 几十个员工,如果我们每个人直接把总结发给经理,那经理可能很长时间都被用在查看这些总结上面。现在我们把总结发给各自项目小组的组长,组长作为代理,把组内成员的总结合并提炼成一份后一次性地发给经理。这样一来,经理的邮箱便清净多了。这个例子毫无疑问 非常形象。在 Web 开发中,也许最大的网络开销就是请...原创 2019-09-22 18:54:04 · 482 阅读 · 0 评论 -
JavaScript进阶:函数节流的实现
前面文章说了“惰性单例”设计模式,它的作用是:在需要的时候再创建相应的节点。那么,如果对于必须提前创建好的节点,要求实时监测,但是这么做又会损伤性能,你怎么办?对于“ 监听窗口大小变化 ”的功能,想必大家都不陌生,这玩意贼有用,比如 响应式网站设计 。(但是能用css就不要用js,css里的@media在一些低级功能上倒是个不错的选择)对于这个功能,必会用到onresize函数,但是你每拖动一...原创 2019-09-22 14:42:50 · 389 阅读 · 0 评论