文章列表
邝伟科 于 1年前发表 1670 0 0
PubSub是一种设计模式,中文叫发布订阅模式,简单来说就是消息发布者不直接向订阅者发布消息,而是发布到中介,而中介根据不同主题对消息进行过滤,并通知对该主题感兴趣的订阅者。该模式在前端现在很火的组件化开发十分常用,因为该模式松耦合,易于扩展的优点正式组件化开发所需要的。 一个PubSub模型主要方法有3个,订阅,退订,发布,下面尝试在前端实现一个最简单的PubSub模块。 var PubSub = {}; // 用于储存事件队列 var queue = {}; // 订阅接口 PubSub.on = function(event, cb) {if(!queue[event]) { queue[event] = []; } queue[event].push(cb); }; // 退订接口 PubSub.off = function(event, cb) { var currentEvent = queue[event]; var len = 0; if(currentEvent) { len = currentEvent.length;
1年前
开发模式
coolriver 于 1年前发表 2950 2 0
前言:一个题目 之前在 codewars [http://www.codewars.com/dashboard] 上做在线题目时遇到这样一个问题: 实现一个依赖注入的“注射器” [http://www.codewars.com/kata/dependency-injection] 。当时对依赖注入这一概念还不是很理解,只是根据题目的要求初步认识了依赖注入。题目的要求如下: /** * Constructor DependencyInjector * @param {Object} - object with dependencies */var DI = function (dependency) { this.dependency = dependency; }; // Should return new function with resolved dependencies DI.prototype.inject = function (func) { // Your code goes here }
1年前
开发模式
黎清龙 于 1年前发表 1992 3 1
开放-封闭原则(OCP,OPEN - CLOSED PRICIPLE) 1 前言 害羞地看完了《 单一职责简述 [http://imweb.io/topic/560a50b6c2317a8c3e086201] 》,自然想到了另外一个重要的原则——开放>封闭原则 开放>封闭原则是程序设计的一个重要原则,相比于著名的SPR,这个原则可能不太容易被人们记住,但是这个原则却不容忽视 经典的设计模式都是基于C++/Java的OOP,相信读者都耳熟能详了 本文是基于JavaScript来的,同时也会提到OCP在前端程序中的应用与表现 2 什么是OCP? OCP的核心如下: Open for extension, Closed for modification 翻译过来是:对扩展开放,对修改封闭 需求总是变化的,面对变化,一个优秀的程序(类,组件)应该是通过扩展来适应新的变化,而不是通过修改 另一方面,也就是说,当一个程序(类,组件)写好之后,就不应该再修改它的代码(bug不算) 如果违反了OCP,当你发现自己经常在改一个类/组件的源代码的时候,那这个类/组件应该也违反SPR了 3 如何做到OCP?
1年前
开发模式
梁伟盛 于 2年前发表 1611 5 1
单一职责 前言 谈到单一职责,就肯定会踢到引用了一万次的名言: A class should have only one reason to change。 一个类应该只有一个原因能引起它变化。 -------------------------------------------------------------------------------- 这是什么意思呢,举个例子,男生一般是站着尿尿,所以代码是: functionMale (name, age) { this.name = name; this.age = age; this.sex = 'male'; } Male.prototype = { coustructor: Male, //尿尿的行为 pee: function () { console.log('站着尿尿'); } };
2年前
开发模式
李冬冬 于 2年前发表 3261 0 1
先来个最原始的页面,比如下面的index.html中,引入了css和js资源 <linkrel="stylesheet"href="a.css"></link><scriptsrc="a.js"></script> 写完后,部署上线。然而我们要考虑充分利用浏览器缓存,我们的目标是资源文件直接读取浏览器缓存,于是给它设置 Cache-Control/Expires 和 Last-Modified/ETag。Cache-Control/Expires的作用是在缓存时间内,正常进入页面,浏览器不会发出请求,直接读取浏览器缓存资源。如果用户点击“刷新”按钮或缓存时间消失,浏览器会发送请求,并根据Last-Modified/ETag判断内容是否有更新,如果内容没更新,服务器返回304。 上线后,来了一大波需求。于是改完再发一次。依然是直接将html和资源文件丢到线上,直接访问页面地址,咦?怎么没生效?哦,原来是缓存作祟。html更新了,但是读取的a.css和a.js还是浏览器缓存里面的内容,没有更新到最新。怎样让浏览器缓存失效呢?于是我们想到了版本控制,加个版本号不就解决问题了嘛,so
2年前
开发模式
coolriver 于 2年前发表 2098 7 0
题要 在参与 【腾讯课堂,暑期早起团】 [http://ke.qq.com/activity/morning_h5/index.html?_wv=4097>_wv=4097] 活动开发的过程中,涉及到了课程卡片的展示。具体效果如下:[http://7tszky.com1.z0.glb.clouddn.com/FuBeKOHOKBSdhNclqW2hVsfpgknq] 图中每个白底的框框是一个课程卡片,课程卡片组合在一起形成课程面板。本文主要记录对课程卡片和课程面板的优化过程。包含 " 原始版本 > 优化组件step1 > 优化组件step2 > 优化组件step3 ",每一步都有相应的目录和代码说明,最后的step3给出了完整的js代码,所以 本文中代码较多 。。。 原始版本 最初的实现形式也是想进行组件化,主要文件和目录如下: ./src ├── js │ └── main.js ├── css │ └── main.scss ├──lego_modules //组件目录 │ └──courseCard //课程面板组件
2年前
开发模式
henryguo ,郭亨厮混在腾讯 于 2年前发表 3348 12 1
[http://7tszky.com1.z0.glb.clouddn.com/FmYdUaawBA2Ufebl3LZ9bgiwkO0z] 2015年上半年的团队考核和个人考核已经尘埃落定了,感谢 IMWeb Team [http://imweb.io] 的每一个同学勤奋和努力,我们取得了还不错的结果:)。 下面简单回归一下上半年我们做的事情,以及下半年我们要重点突破的方向。 回顾上半年的KPI情况 除了业务几个重大KPI的突破以外,基础侧主要集中在一下几个点: 1、持续的性能提升和慢速用户降低 * 教育平台性能得分稳定在99分以上,慢速用户降低到0.8%。 * o2o项目接入监控体系 * 互动视频完成一期链路的性能优化 * iconfont体系落地 2、基于Q.JS的MVVM体系建设 * Q.js支持ie6,7,8及现代浏览器,并在三个线上业务上线稳定运行 * Ques构建体系完成 * Q体系的内部分享 3、组件体系的初步尝试 * lego工具的实现 * lego.imweb.io [http://lego.imweb.io] 的初步框架搭建 * 教育ui组件的统一
2年前
开发模式
coverguo 于 2年前发表 4083 2 0
* 模块化编程 * CommonJS * AMD(Asynchronous Module Definition)规范 * requireJS与seaJS * requireJs 以及 seaJs 的区别 模块化编程: @为了更好的开展话题,首先需了解什么是前端模块化 模块的由来: 其实模块化的诞生不难理解,我们知道因为随着网站逐渐的发展,嵌入网页的Javascript代码越来越庞大,而网页越来越像桌面程序,需要一个团队去分工协作,进行管理和测试等等,为了更好的管理网页的业务逻辑,产生了模块化编程的理念。 模块的定义:模块就是实现特定功能的相互独立的一组方法。 模块的意义:因为有了模块,我们能更好的管理网页的业务逻辑,以及按照自己的需求去使用各种模块,并且可以让每个开发者都能设计自己想要的模块以及去使用别人的模块代码。 @有了模块的概念,但为了让大家能方便的加载各种模块,因此需要一套编写模块的规范,而目前通行的Javascript的模板规范共有两种:CommonJS 和 AMD COMMONJS CommonJS的历史渊源:
2年前
开发模式
杨文坚 ,首席吹牛工程师 于 2年前发表 1868 0 0
前端测试,或者UI测试一直是业界一大难题。最近 Q.js 使用 Karma [https://github.com/karma-runner/karma] 作为测试任务管理工具,本文在回顾前端测试方案的同时,也分析下为什么 Q.js 选用Karma而不是其他测试框架。 像素级全站对比 曾今有一批人做过这样的UI测试,即最终页面图像是否符合预期,通过图片差异对比来找出可能的问题。 [http://7tszky.com1.z0.glb.clouddn.com/FvhK-IJ9cQi7tvPar02XdGKQA0EE] 如图所示,所谓像素级站点对比,即利用截屏图像前后对比来找出,站点前后差异,从而发现问题。 Q: 为什么需要这种测试呢? A: CSS容易被破坏,在大型响应式重构案例中,像素级全站对比是一个比较好的测试方案。 目前常用的两大工具: * BackstopJS [http://garris.github.io/BackstopJS/] * PahntomCSS [https://github.com/Huddle/PhantomCSS] 录制型测试
2年前
开发模式