前言 之前公司设计的网站比较混乱,很多地方不统一,其中一个就是弹出层,导致这个原因是因为,公司的UI换了好几个人,而他们每个人做出来的都不太一样.最近公司开始整顿这个问题,对于统一的这种东西当然是做成一个模块,或者插件,而我打算做成插件.之所以写这篇文章是因为,当写完这个插件以后,发现其中有不少的理念,而这些理念我想把它总结一下,虽然这个插件并不复杂. 该怎样架构? 对于架构这个概念,接触的比较少,我的理解,架构就是解决未来可能会发生的事. 之前也封装过一些插件,但后端嫌我封装的太难用,于是分析…

一起学习下 插件的开发,原生的. 看了这文章 JavaScript插件开发从入门到精通系列---原生JavaScript插件开发 附上 读完小结: 看了下,比较小白的方式就是把一些代码,放到一个单独的js文件中, (刚开始就是这么玩的,还觉得挺美)直接暴露在全局作用域.-----------------然后还有用一个建一个 var person1 = { name: "peter", age: 18, sayHello: function() { alert("hello!…

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.因此我们项目组在双十一后抽了一周时间,把所有代码中的 jQuery 移除.下面总结一下: Why not jQuery 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表…

原文链接:http://caibaojian.com/8-javascript-attention.html 基于 Class 的组件最佳实践(Class Based Components) 基于 Class 的组件是状态化的,包含有自身方法.生命周期函数.组件内状态等.最佳实践包括但不限于以下一些内容: 1)引入 CSS 依赖 (Importing CSS) 我很喜欢 CSS in JavaScript 这一理念.在 React 中,我们可以为每一个 React 组件引入相应的 CSS 文件,…

原生 JavaScript 实现 state 状态管理系统 Build a state management system with vanilla JavaScript | CSS-Tricks 在软件工程中,状态管理已经不是什么新鲜概念,但是在 JavaScript 语言中比较流行的框架都在使用相关概念.传统意义上,我们会保持 DOM 本身的状态甚至声明该状态为全局变量.不过现在,我们有很多状态管理的宠儿供我们选择.比如 Redux,MobX 以及 Vuex,使得跨组件的状态管理更为方便.这…

原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏广告,于是想通过编写这个小游戏练练手. 二.简单介绍 2.1 效果展示 2.2 实现思路 1) 棋盘:通过图片(chessboard.png)和 div 标签渲染出棋盘. 2) 棋子:通过图片(black_flag.png.white_flag.png等)渲染出黑白棋子.落子前,鼠标出会出现一个可以…

原生javascript 实现 animate //animate function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; } } function startrun(obj,attr,target,fn){ clearInterval(obj.timer); obj.timer = setI…

在上一篇<javascript设计模式实践之模板方法--具有百叶窗切换图片效果的JQuery插件(二)>里,通过采用模板方法模式完成了切换效果对象的构建编写. 接下来就是完成各效果对象的调用和联动. 切换要求:当前图片显示指定时间后执行切换效果并切换下一张图片,最后一个切换后从头开始. 按照要求一个效果对象完成后要执行下一个,最后一个完成后要从头开始, 看上去就是一个带状态通知的环形列表,类似于这样的特征,可以采用职责链模式来构建. 职责链就是由不同的功能处理构成的链表,每一个功能处理作为一个…

在上一篇<javascript设计模式实践之迭代器--具有百叶窗切换图片效果的JQuery插件(一)>里,通过采用迭代器模式完成了各初始化函数的定义和调用. 接下来就要完成各个切换效果的编写. 先思考一下一个切换效果需要完成的操作 1.准备阶段,将各个strip归位到动画效果开始的位置. 2.动画效果处理. 3.执行. 3.完成. 所有的切换效果都具备上述3步操作. 既然这样就好抽象了. 可以对上述的操作进行单独定义,然后通过模板方法模式对各个操作进行调用. 所谓的模板方法模式,其实就是有这么…

类似于幻灯片的切换效果,有时需要在网页中完成一些图片的自动切换效果,比如广告,宣传,产品介绍之类的,那么单纯的切就没意思了,需要在切换的时候通过一些效果使得切换生动些. 比较常用之一的就是窗帘切换了. 先贴上完成的效果. 实现原理不复杂,在动的一条一条的称之为“窗帘条”或者是“strip”,每一个strip都是一个div,类似于雪碧图的方式将其背景图的位置设置为strip的可视位置,然后用jquery的animate让他们按照一定规律动起来就完成窗帘切换效果了. 为了使用方便,将这个功能作为jq…