浅谈javascript设计模式之发布订阅者模式 发布订阅者模式又称为观察者模式，有的书本中也对这两个模式进行了更加细致的区分！这里我们只研究发布订阅者模式。 1. 什么是发布订阅者模式 # 发布订阅者模式，我们可以通俗地用微信公众号来比喻： 只有该公众号的订阅者才能收到推送 公众号只负责推送信息，不关心是谁订阅了我，只要有信息推送，那么就推送给所有的订阅者 订阅者无需时不时的查看公众号是否有信息推送，只要公众号推送信息后，该订阅者就会收到通知 订阅者可随时取消对该公众号的订阅 从这个比喻来看，发布订阅者模式是为了发布者和订阅者之间避免产生依赖关系，发布订阅者之间的订阅关系由一个中介列表来维护。发布者只需做好发布功能，至于订阅者是谁，订阅者做了什么事情，发布者是无需关心的。 2. 模式的使用场景 # 发布订阅者模式中的事件驱动和解耦性，让我们非常方便地使用在一些场景中，比如ajax数据返回后的展示，厂家通知所有订阅用户新品已发布，异步登录，等等。发布订阅者模式，可以让我们不再涉及更多的回调处理，而且可以使模块的颗粒度更小。比如有个ajax的数据展示，其中一个订阅者A可以只负责数据的表格展示，另一个订阅者B只负责数据总量的计算。当有需求要把数据总量的计算修改为当前页的数据总量和整体的数据总量计算，那么订阅者A是不用任何变动的！ 2. 如何实现一个发布订阅者模式 # 在发布订阅者模式中，我们需要的功能有： 订阅，发布，取消订阅，还有一个列表来维护它们之间的订阅关系。var pubsub = {}; //订阅关系列表 ;(function(q){ var topics = [], subUid = -1; // 添加订阅者 q.subscribe = function(topic, func){ var token = (++subUid).toString(); if( !topics[topic] ){ topics[topic] = []; } topics[topic].push({ token : token, func : func }); return token; } // 触发 q.publish = function(topic, args){ var ss = topics[topic], len = ss ? ss.length: 0; // 取出订阅该主题所有的订阅者 while(len--){ var func = ss[len].func; func(topic, args); } } // 取消订阅 q.unsubscribe = function(token){ for(var key in topics){ if( topics[key] ){ var item; for(var i=0, len=topics[key].length; i

作为开发者，如何树立个人品牌？ 作为一名 PHP 开发者，自从我开始在网站上“露脸”以来，我的博客和社交媒体帐户的访问量就有所增加。虽然只是轻微的增长，但对我来说依然很激动，使我更加充满激情。对于个人品牌，这是我过去所忽视的，直至近期才开始重视它。我很满意目前的工作并且暂不会考虑换工作，但我低估了在线上积极展示自我的重要性。就在上周，我深刻明白了自己以往的单纯。让我醒悟的起由，源于我所在的公司最近在招聘多个职位，并且收到了大量的申请。令我惊讶的是，我的老板通过谷歌搜索申请人的名字从而了解他们在线上的表现。我的老板正在使用这个方式来寻找积极的贡献者信息。他并没有在 Facebook 上试图找出候选人在星期五晚上做了什么。他更感兴趣的是：申请人是否有博客？有没有其他特殊爱好？工作以外参与的热门项目？这让我联想到自己的“个人品牌”，我决定开始恶补，怒刷线上存在感。关于个人品牌的建设，笔者在此做了一些自己的尝试和思考，希望对大家有所帮助。 完善博客 # 如果你还没有博客，请尝试购买一个{你的姓名}.com 的域名。如果无法买到 .com，那么 .co .uk或其他本地 TLD 亦可。如果做商业网站，那么具有特殊意义的域名是非常好的。但是，如果你正在建立个人品牌，那么域名最好和自己姓名相关。这不是简单的为了让你的网站访问量达到1000人。这是为了树立个人品牌。最终，一个潜在的雇主或者客户可能会用 Google 搜索到你的名字。搭建个人博客并不昂贵。你可以使用免费主题的 Wordpress 快速开启个人博客之旅。此外，还有一些类似 Jekyll 的其他平台可以使用。Wordpress 使用非常简单，不需要依赖任何其他的设置。博客的界面不需要太花哨，它是一个线上展示自我的空间，别人可以在网上找到你，通过博客内容加深对你的了解，如果需要的话可以通过博客和你取得联系。最好不要对每一篇博文都精益求精并且花费非常多的时间来修修补补。自我学习和陪伴家人同样是生活中的重要部分。持续地定期发布博文即可。不要担心自己的文章技术深度不够。因为即使你是一名编程初学者，那么一定有比你更菜的初学者存在，哪怕你的经验只比他们多一个月、一周、哪怕是一天，总有人能够从你的文章中获益。写一些技术之外的文章也是可以的，通过分享自己的兴趣爱好和特长是展示自我除了代码之外独特个性的很好方式。只是文章内容尽量不要有争议。 使用社交网络，如 Twitter、微博 # 我本人并不热衷社交网络。但是考虑到我的个人品牌建设，于是我决定注册一个Twitter 账号。Twitter 是接触圈内“大牛”的重要途径。比方说，我最近发布了一则推文表达我对学习Slim 框架的兴趣。令我惊讶的是，第一个答复者竟然是该框架的其中一个核心贡献者。试想，谁的建议和指导会比他更好呢？身处社区之中，你可以及时获取前沿技术动态和行业新闻。通过 Twitter 你可以在参加会议之前和与会者提前打招呼并熟悉对方。需要记住的是，你的推文全世界的人都可以看到。所以，请尽量发布有帮助、友好、有价值的推文。一日三餐、生活琐事这类毫无意义的推文是不受欢迎的。在中国，微博不乏为一种有效的途径。社交媒体是建立个人品牌的绝佳机会，使用网络来分享你的热情和知识吧。 所有平台同步更新 # 提到一个品牌，首先印入脑海的也许是一个特定的 logo、slogan 或者图片。同样，这也适用于个人品牌。确保你在所有不同平台或者网站上都使用相同的个人资料和头像。我就犯了一个错误，我在媒体网站和 Twitter 上使用了不同的头像。人们第一眼看到这两个不同的头像就无法快速知道这是同一个人。你的目的是让更多的人认识你并且构建你的个人品牌，因此你最好不要在不同的平台使用五花八门的头像和用户名。切记，使用一份相同的个人信息。 以开发者自居 # 哪怕你是一个处在学习阶段的软件开发新人，也不要屏蔽工作机会。你的博客和社交媒体帐户可以展示自我，可以表明你是一个“有抱负的开发人员”或者“参与了专业培训的开发人员”。招聘经理会对没有太多实际经验但是充满热情的开发者感兴趣吗？当然，工作热情是招聘的重要条件。即使你已经有了一份其他行业的稳定工作，只是在晚上自学编程技能，你仍然可以称作一个“开发人员”（他们在白天做自己的工作，晚上编写代码）。评估开发水平的方式有很多。但是，第一印象是代码量，所以要尽量多动手编码。作为一名开发人员，并且正在寻找开发工作，那么就要努力确保自己是一名合格的开发者。 去除“初级”标签 # 我突然意识到我在博客和社交媒体上把自己称为“初级”开发者。实际上我已经30岁了，实力上来讲完全不是初级水平。老实说，仅仅用初级一词来评判开发者水平是没有意义的，这取决于个人看法。一个初级开发人员可能是一个很少甚至没有工作经验的人。但是，如果那个人在过去十年里一直在空闲时间编写代码呢，他还是初级水平吗？ 又或者有的人可能有几年的商业开发经验，但是真实水平却不高呢？现实来讲，不要称自己为初级开发者。这对你没有任何好处，反而会限制你的就业潜力。有公司或者招聘者在招聘广告指明中级开发者实际上会考虑“初级”吗？你不想让他们说：“稍等一会儿，你符合我们的所有招聘要求，有几年的工作经验。但是抱歉，我们不是在找一个初级开发者。” 突出你最擅长的领域 # 在我的博客和社交媒体上，我称自己为“Web 开发者”。的确，我主要使用一系列 Web 技术来开发 Web 应用程序。确切地说，我是一名 PHP 开发人员。我对 JavaScript 不是很精通，所以我不会很轻松找到一个 JavaScript 开发人员的工作。另外，我的 Ruby on Rails 也比较菜，老实说我只花了大约一个小时来学习它的教程。所以我决定把自己的个人品牌打造为 PHP 开发者。这样能够更加准确地展示我的技能和专长。为了获得更好的机会，你需要突出自己最擅长的领域。 整理你的 Github # 前段时间一个同事浏览了我的 Github，他对我业余时间在 Github 的活跃度感到震惊。后来他发现我的项目几乎都是完成一半、杂乱、“WIP”（正在进行中），于是对我产生了不好的印象。的确，太多这样的项目无法展示自己是一个频繁提交、按时交付并且能够有始有终完成一个项目的开发者。在 GitHub 上保持活跃度是好的，但是如果你永远不会完成这些项目，那么我建议删掉它们。招聘人员希望看到的是已经完成以及你最引以为傲的项目，而不是你认为有意义但是没有投入时间而一直搁浅的项目。 展示你的激情 # 使用博客、社交媒体、GitHub 和在线平台强调你对开发工作的热爱。尽可能地展现自己引以为傲的项目和工作激情。在这一点上，我引用两位程序员在 stack-overflow 上的回答：热情 VS 经验。 对开发工作充满热情的开发者值得招聘，哪怕他没有相关经验。一个充满激情的程序员会快速学习，专心投入他们的工作，并且非常热爱开发工作。我和这两种类型的多个程序员合作过，相比有经验的，我永远会优先聘请有激情的程序员。 不关心工作进度的人同样不会关心他们的工作质量。 如果你有资源培训新招的开发者，那么毋庸置疑，你应当 招聘那些充满激情的程序员。 转载自： https://mp.weixin.qq.com/s/yYfzGExdG6ZQyrvfv273tg

参加腾讯深圳 IMWebConf 2017 前端开发者大会是什么体验？ 作为前端开发的蚊子，前天有幸参加了IMWebConf2017的大会。从一名来自北京的路人的角度来将，深圳的空气是潮湿的，这次大会的组织是井然有序的。IMWebConf2017的官网： http://2017.imweb.io/index.html在大会开始前的签到，使用二维码扫描签到，快速准确！签到、领取物品、进入会场，顺畅一条龙。第一场的大佬是来自W3C的技术副总监Philippe，可惜自己的英文不好，除了盯着翻译器，一句话也没跟上！不过Philippe讲确实非常好，从一个大方向上讲解下了前端的现在和未来的发展！PWA与AMP－移动web的现在和未来，能大大加快移动端页面呈现速度，提高整体体验。TypeScript是经常听到的概念，不过我确实没有用过TypeScript，这次的大会也是认识了一下TypeScript，TypeScript是JavaScript类型的超集，它可以编译成纯JavaScript，我们平时写的js其实也是TypeScript的一种！TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行，并且是开源的。只是typescript有着强制类型的限制，TypeScript不是新的语言，而是始于JavaScript，归于JavaScript。下午的会议是有3个分会场：node会场，框架性能会场，综合会场。蚊子是选择了node会场，node会场中分享的专题都是实打实的、经过项目验证的经验，让我们大家了解到node在实际项目中的应用，node的框架等等！幸运的是，同学中了一本书，不过他已经有了，然后送给我了；然后本人中了一个充电宝了！大会还发了一件T恤。有一个小小的插曲，来深圳参加会议，北京这边的项目出了点小问题，感谢深圳总部的同事能提供电脑，让我远程解决线上的问题！下午场里有部分的内容没有听到。

webpack的入门教程 webpack 在官方网站中是这么定义的。webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle - 通常只有一个，由浏览器加载。在 webpack 中，一切皆资源，CSS、JS、图片等都可以作为资源处理。webpack 在配置大型项目时，可能会很大很复杂的配置，这里我们就从简单的 2-3 个页面的配置开始说起。 1. 简单的配置 # 如果之前用过 gulp 处理过前端资源，那么使用 webpack 就相对来说比较简单一些。要使用 webpack 的话，首先要在项目目录中安装 webpack，其他的我们稍后再安装:npm install webpack --save-dev webpack 的配置要在根目录的 webpack.config.js 里，我们先来看下简单基本的配置：var webpack = require("webpack"); module.exports = { // 入口文件，可写多个 entry: { entry: "./src/entry.js", }, // 输出出口 output: { path: __dirname + "/out/", // 输出目录 filename: "[name].js", // 输出的文件名称规则， [name]表示上面entry中的key值（main） }, module: { // loader操作各种资源 loaders: [ { test: /\.css$/, // 匹配到.css文件 // 用css-loader与style-loader处理匹配到的文件，从右向左执行 loader: "style-loader!css-loader", }, ], }, }; 用上面的配置的话，还需要安装css-loader和style-loader:npm install css-loader style-loader --save-dev 安装后，我们再配置一个简单的目录： `-out `-src `---css `---img `---js `-entry.js `-package.json `-webpack.config.js `-index.html 好了，我们编写 css 和 js 了。在 css 目录中，我们创建一个 index.css:.main { background: #ccc; width: 400px; height: 400px; } 在 js 目录中，我们创建一个 index.js：function getTime() { console.log(Date.now()); } exports.getTime = getTime; 在 entry.js 中：require("./css/index.css"); import o from "./js/index.js"; console.log(o.getTime()); 执行命令：$webpack -p 在 index.html 中引入./out/entry.js: 打开 index.html 就能看到效果了。 2. webpack 讲解 # 在 webpack.config.js 中：entry 可以有多个入口，来对应多个页面，比如我还有一个分享页面：entry : { entry : './src/entry.js', share : './src/share.js' } 在新页面中，引入./out/share.js即可。loader 是从右往左开始执行的，先执行 css-loader，再执行 style-loader。 css-loader 用来解析 css; style-loader 是将 css 样式用 style 标签插入页面的 head 里。而且在引入 loader 时，可以直接省略-loader：module: { loaders: [ { test: /\.css$/, loader: "style!css", }, ]; } 在满足基本的配置后，我们需要满足更多的需求，比如我要用 SASS 编写 css，我要用 ES6 写 js，处理 CSS 中的图片等等。那么我们就得对 webpack.config.js 扩充配置：$npm install sass-loader url-loader file-loader babel-loader --save-dev 配置文件 webpack.config.js：output : { path : __dirname+'/out/', // 输出目录 filename : '[name].js', publicPath : __dirname+'/out/' // 图片路径 } module : { loaders : [ { test : /\.css$/, loader : 'style!css' }, { test: /\.(jpg|png)$/, loader: "url?limit=8192" }, { test: /\.scss$/, loader: "style!css!sass" }, { test: /\.js$/, loader: "babel" } ] } 好了，现在可以使用 sass, es6 了！ 2.1 使用 ES6 # 在./js/index.js 中：// ./src/js/index.js class Student { constructor(name = "") { this.name = name; } sayHello() { console.log(`hello, ${this.name}!`); } } var wenzi = new Student("wenzi"); wenzi.sayHello(); 2.2 独立的 CSS 文件 # 目前页面中的样式，是从 js 里加载的。如果我们想要把 css 独立到一个单独的文件中，就需要一个extract-text-webpack-plugin插件了:npm install extract-text-webpack-plugin --save-dev webpack.config.js 中：// webpack.config.js var ExtractTextPlugin = require("extract-text-webpack-plugin"); plugins: [new webpack.BannerPlugin("created at " + new Date().toLocaleString()), new ExtractTextPlugin("[name].css")]; name 就是 entry 中的 key 值。 3. 命令行 # 刚才上面我们用的webpack -p来编译的，这里还有几个命令也可以使用：#webpack 命令行的几种基本命令 $webpack --config XXX.js # 使用另一份配置文件（比如webpack.config2.js）来打包 $webpack -w # 提供watch方法，实时进行打包更新 $webpack -p # 对打包后的文件进行压缩，提供production $webpack -d # 提供source map，方便调试。 使用webpack --watch可以监控文件变化，实时编译；在要发布到线上时，使用webpack -p编译为压缩版本的文件。 4. 总结 # 关于 webpack 的内容依然还有很多，这里我们仅仅是做了一些入门的讲解。更多的内容可以查看官网。后续我们也会讲解 webpack 的高级应用等

支付宝推出租房平台的一点看法 相信您已经知道2017年10月10日时，支付宝推出了一个重要的功能：“租房平台”，在支付宝中搜索租房，即可进入到租房平台。租房平台中，目前已经支持8个城市了：上海、北京、深圳、杭州、南京、成都、西安、郑州，后续可能也会增加更多的城市。在使用的过程中，我们会发现房屋图片的水印都是“蘑菇租房”，这说明里面的房源都是来自蘑菇租房。支付宝的租房平台也不是完全自己运营的，而是与多个租房平台合作的，目前进驻的是--蘑菇租房，后续魔方、蛋壳等品牌也将接入到支付宝中，据说房源总量可能会超过百万套。支付宝的租房平台是依托其芝麻信用体系，对出租房和租户都纳入到体系中，进行信用评估！在个人信用达到650分以后上可以免押金，并且可以月付。在一些文章的评论下，蚊子发现不少网友对支付宝推出这一功能持有非常乐观的态度，“干死黑中介”，“整肃出租市场”，“中介市场更加规范了”等等。从好的一面讲： 消灭重复虚假房源：在支付宝租房服务中，房东录入完整房源信息后，将实现“房源出租后自动下架、空出后自动上线”，保证房源真实性。 消灭中介费：租客将与公寓管理方直接沟通对接，不再经过任何中介，从而省去高昂的中介费。 消灭押金：传统的“押一付三”将彻底改变，接入信用分后，芝麻分650分以上的用户租房将再也无需押金，还可以一月一付，大幅度降低资金压力 但蚊子本人还是持保留态度，毕竟租房跟其他的不一样。租房，租户总是要去看房的，真房东总是要带人看房的，很多房东把房子给中介出租，最主要的原因就是自己没有时间一直带租户看房子，只能让委托给中介；再一个原因就是中介给的钱会比租户给的钱高一些。那么，房源还是被中介控制着，租户能如果怎么办呢？如果支付宝没有实体店的话，谁带用户去看房有的中介在支付宝上面发布房源后，租户也是私下联系，签约流程完全私下完成，不走支付宝的线上流程。所以，你要么接受，要么放弃这个房源。同时，之前也出过比如丁丁租房、爱屋及乌等互联网中介，好像对传统的房屋中介也没有产生多大的影响。不过，毕竟支付宝的影响力更大，说不定支付宝真的能整租租房市场呢，让我们拭目以待