1秒50万字的关键词匹配(js实现)

在论坛和聊天室这样的场景里,为了保证用户体验,我们经常需要屏蔽很多不良词语。对于单个关键词查找,自然是indexOf、正则那样的方式效率比较高。但对于关键词较多的情况下,多次重复调用indexOf、正则的话去匹配全文的话,性能消耗非常大。由于目标字符串通常来说体积都比较大,所以必须要保证一次遍历就得到结果。根据这样的需求,很容易就想到对全文每个字符依次匹配的方式。比如对于这段文字:“Mike Jordan had said "Just do IT", so Mark has been a coder.”,假如我们的关键词是“Mike”“Mark”,那么可以遍历整句话,当找到“M”就接着看能不能匹配到“i”或者“a”,能一直匹配到最后则成功找到一个关键词,否则继续遍历。那么关键词的结构就应该是这样的: 1 var keywords = { 2 M: { 3 i: { 4 k: { 5 e: {end: true} 6 } 7 }, [...]

发布者 |七月 29th, 2016|教程指南|0条评论

超齐全的资源收集

在菜鸟网上看到的资源集合,挺有用的,在这里分享一下。 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq:企业级应用,关注软件开发领域 OSChina:开源技术社区,开源方面做的不错哦 cnblogs,51cto,csdn:常见的技术社区,各有专长 stackoverflow:IT技术问答网站 GitHub:全球最大的源代码管理平台,很多知名开源项目都在上面,如Linux内核, OpenStack等免费的it电子书:http://it-ebooks.info/ 不错的书籍 人月神话 代码大全2 计算机程序设计艺术 程序员的自我修养 程序员修炼之道 高效能程序员的修炼(成为一名杰出的程序员其实跟写代码没有太大关系) 深入理解计算机系统 软件随想录 算法导论(麻省理工学院出版社) 离线数学及其应用 设计模式 编程之美 黑客与画家 编程珠玑 C++ Prime Effective C++ TCP/IP详解 Unix 编程艺术 [...]

发布者 |七月 19th, 2016|教程指南|0条评论

WeX5的小应用:二维码名片

前言 二维码现在是无处不在,无孔不入了。大到一辆汽车,小到一包纸巾,身上都印有二维码,明码标价。败家娘们可能会说:没想过要买的,真心的!就是看着漂亮嘛,想拍个照片,谁知道一拍就弹出个支付界面,想按退出但是手抖了。。。(这手抖的,不知道放在菜刀下会不会稳定一点?)而名片,也早就使用了二维码技术,扫一扫一键存到手机通讯录里面,是手机通讯录哦。今天小茄就试着用WeX5做一个电子的二维码名片,除了扫码外,还可以在微信里面一键识别并存到手机通讯录里面哦。 先上效果图   生成的二维码扫码即可创建通讯录,保存下来通过微信发给朋友,通过长按二维码识别也可以完成名片的分享。拿起手机测试一下吧: 这个应用的核心就是两个:将个人信息转换成二维码;二维码携带的名片信息可被手机识别。为了实现这个需求,我们需要用到一个名片格式:vcard,关于vcard的介绍可以参考这篇文章:http://lzw.me/a/php-qrcode-vcard.html。 vcard格式生成 我们的需求比较简单,需要将名片信息拼接成如下vcard格式: BEGIN:VCARD VERSION:3.0 FN:任侠 TEL;CELL;VOICE:15201280000 TEL;WORK;VOICE:010-62100000 TEL;WORK;FAX:010-62100001 EMAIL;PREF;INTERNET:lzw#lzw.me URL:http://lzw.me orG:志文工作室 ROLE:产品部 TITLE:CTO ADR;WORK;POSTAL:北京市朝阳区北四环中路35号;100101 REV:2012-12-27T08:30:02Z END:VCARD   这就是一般的字符串拼接了,这里有个问题,就是中文的展示问题,如果直接将中文拿去转化成二维码的话就会出现乱码,所以我们需要将其转换成utf-8的通用编码格式: 1 function toUtf8(str) { 2 var i, len, c, out = [...]

发布者 |七月 1st, 2016|教程指南|0条评论

【WeX5的正确打开方式】(7)数据组件详解

【WeX5的正确打开方式】系列目录: (1)入门篇之进击的Hello World (2)入门篇之进击的Hello World(续) (3)WeX5绑定机制 (4)WeX5绑定机制(续) (5)WeX5绑定机制(续2) (6)数据组件初探 (7)数据组件详解 本文是【WeX5的正确打开方式】系列的第7篇文章,详细介绍WeX5中数据组件的增删改查以及数据定位方法。 前言     上一篇 数据组件初探 我们简单介绍了数据组件的引入和底层结构以及特性,并实现了简单的数据展示和数据改动。上一篇中简单提到了,数据组件就是后台数据库表在前端的一个映射,前后端开发人员只要预定好数据组件的内容,就可以简单实现前后端开发的分离。既然数据组件是一个数据库表的映射,那它的基本结构就是一张 2 维表格,举个栗子,定义一个 html5开发工具 的数据组件,xid 为 devtool : +-------+--------------------+----------------------------+---------+ | index | name | url | country | +-------+--------------------+----------------------------+---------+ [...]

发布者 |六月 22nd, 2016|教程指南|0条评论

【WeX5的正确打开方式】(6)数据组件初探

【WeX5的正确打开方式】系列目录: (1)入门篇之进击的Hello World (2)入门篇之进击的Hello World(续) (3)WeX5绑定机制 (4)WeX5绑定机制(续) (5)WeX5绑定机制(续2) (6)数据组件初探     本文是【WeX5的正确打开方式】系列的第6篇文章,简单介绍一下WeX5中数据组件的特性和结构形式。 数据组件的由来     上一篇 WeX5绑定机制(续2)我们实现了一个简单的记账本应用,当时所有数据都用 JSON 对象写在 js 代码里面,然后通过绑定机制将数据和UI界面绑定起来。我们是这样写的: 1 var testData = [ { 2 fType : 'out', 3 fClass : '购物', [...]

发布者 |六月 21st, 2016|教程指南|0条评论

【WeX5的正确打开方式】(5)WeX5绑定机制(续2)

【WeX5的正确打开方式】系列目录: (1)入门篇之进击的Hello World (2)入门篇之进击的Hello World(续) (3)WeX5绑定机制 (4)WeX5绑定机制(续) (5)WeX5绑定机制(续2)   本文是【WeX5的正确打开方式】系列的第5篇文章,以一个记账本案例来总结下各种绑定的使用方法,另外简单介绍一下map插件。   需求分析   记账本要实现的效果就是可以展示所有账单,还能实时动态编辑每一笔账单,官方案例的效果图如下: 展示页: 编辑页     个人觉得官方案例加入了许多元素,不熟悉的同学每一个点都很难理解,所以为了更清晰地介绍绑定机制,小茄这里去掉了数据库和数据组件,改用写死的JSON数据来测试;UI层上也做简化,去掉页面片段的跳转,使用一个页面片段进行演示。   页面布局       先看看页面布局,由于要展示多项数据,所以明显需要一个列表组件;另外为了实现编辑功能,还需要布局一个编辑组件。布局起来非常简单: 展示列表组件:     列表组件使用WeX5现成的 list 控件,这个控件内部自带一个 list 子项的模板,在模板中放入所需的几个 output 和删除按钮即可。当然,为了达到上图的布局效果,还需要加入一些布局组件。有问题的同学可以看看官方视频教程,样式的设置也请参考视频,这不是本文的重点,在此不再赘述。 [...]

发布者 |六月 21st, 2016|教程指南|0条评论

【WeX5的正确打开方式】(4)WeX5绑定机制(续)

【WeX5的正确打开方式】系列目录: (1)入门篇之进击的Hello World (2)入门篇之进击的Hello World(续) (3)WeX5绑定机制 (4)WeX5绑定机制(续)      本文是【WeX5的正确打开方式】系列的第4篇文章,主要介绍html5 开发工具——WeX5中的各种绑定方式,下面分为表现类、流程类、交互类 3 种类型分别介绍。 表现类绑定     表现类的绑定属性有visible、text、html、css、style、attr几种,除了css表示css的class之外,其他都是字面意思。示范用法: 布局中加入一个div标签和一个按钮,并设置div标签的绑定属性如下右所示。       这样设定好了绑定关系,然后在 js 中将各绑定属性设置为可观察对象,让其可以自动更新界面: define(function(require){ var $ = require("jquery"); var justep = require("$UI/system/lib/justep"); var Model [...]

发布者 |六月 16th, 2016|教程指南|0条评论

【WeX5的正确打开方式】(3)绑定机制

什么,你现在还在看knockoutjs?这货都已经落后主流一千年了!赶紧去学Angular、React啊,再不赶紧的话,他们也要变out了哦。身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包,却依然振振有词地喋喋不休,一脸真诚。是啊,前端发展太快,那边前几年出的框架已是无人问津的半老徐娘,而这边各种新出的框架却正在风口搔首弄姿,娇翠欲滴。前端界好不热闹!当然,楼主也喜欢新奇趣,但是现在公司的开发工具(WeX5)中用到了knockoutjs,没办法,再老都只能闭着眼睛上了……然后发现,咦!感觉还不错呀~~~

发布者 |六月 16th, 2016|教程指南|0条评论

【WeX5的正确打开方式】(2)进击的Hello World

本文是《WeX5的正确打开方式》系列的第二篇文章。 《WeX5的正确打开方式》系列目录:     (1)入门篇之进击的Hello World     (2)入门篇之进击的Hello World(续)     (3)WeX5绑定机制     (4)WeX5绑定机制(续) 前言        上篇文章介绍了WeX5中基本的页面布局和交互事件写法,大家也领略到了WeX5页面布局设计器的快速便捷,但是相信很多同学对里面内容还是有疑问的,比如为什么源码中的js要那样写,HTML源码的结构是怎样的之类。这一篇就来分析一下Hello World的源码结构,才识有限,有错还请大家指出哈。 HTML部分        在上篇Hello World的案例中,我们是通过新建一个w文件来进行页面样式布局的,这里可能有同学会疑惑:怎么没看见HTML文件呢?最终的HTML文件在哪?而且w文件的结构也跟我们常见的网页结构不同啊,常规的<hear>、<body>标签都没有呢,这是怎么回事? 首先要明确的一点就是:w文件只是一个页面片段,通俗地说就是一小段HTML代码。在实际运行的时候,比如说调试的时候WeX5会将该页面片段以及相应的资源加载到一个页面框架中,从而获得最终的整页显示效果。也就是说,可以将很多w文件加载到一个页面中,比如官方的外卖案例中,地图定位被做成一个w文件,然后在需要的时候中调用它,这就是所谓的按需加载了。             [...]

发布者 |六月 3rd, 2016|教程指南|0条评论

【WeX5的正确打开方式】(1)进击的Hello World

       想必使用WeX5的各位亲都应该看过了官方的WeX5开发指南,小茄觉得官方的开发指南难度系数较大,面向的受众可能是已经敲过上万行代码的html5 app开发者。但是作为一个刚进入代码世界的html5 app开发宝宝,小茄表示拿着这份指南也找不到“南”,为了让其他跟小茄差不多等级的html5 app开发宝宝们更轻松地打怪刷副本,小茄决定分享自己的经历,为 html5 app开发宝宝们写一本WeX5的练级攻略,名为《WeX5的正确打开方式》。 目录:     (1)入门篇之进击的Hello World     (2)入门篇之进击的Hello World(续)     (3)WeX5绑定机制     (4)WeX5绑定机制(续)        本文是《WeX5的正确打开方式》系列的第一篇文章——【进击的Hello World】 在代码世界里,每个程序宝宝破蛋而出时看到的第一行代码,都是名为Hello World的东西。使用WeX5的html5 app开发宝宝们也应该看过了官方版的Hello World,不过作为一名纯小白,小茄表示官方的Hello World也并没那么hello,当时理解起来也是花光了吃奶的力气…… 先抛开官方版的,下面就来看看进击版的Hello [...]

发布者 |六月 2nd, 2016|教程指南|0条评论