javascript

热点图的深入分析(2)

为了阅读的连续性，我还是尽快把《热点图的深入分析(2)》 写了，不然感觉会被大家嫌弃，没看(1)的小伙伴我送上地址：传送门

上一篇给大家介绍了热点图数据的收集，那这篇主要是给大伙讲解如何展现，就直接步入正题了

如何动态载入网页

我们需要将原始的网页加载到iframe中，然后用一个遮罩层盖住这个iframe，最后用canvas绘制出热图覆盖在这个上面。

1
2
3
4
5
6
7
8
9
<div id="overflowDiv">
    <div id="heatmapArea">
        <div id="maskDiv">
        </div>
        <p>
            <iframe src="" id="webPageFrame" frameborder="0" name="webPageFrame" scrolling="no" width="1280"></iframe>
        </p>
    </div>
</div>

查看更多

javascript

创建 .bowerrc 文件 , 使用代理下载资源

最近学习reactjs，利用bower去管理相关的资源文件。但中途出现一个问题，由于我们本地办公电脑本身就是使用的代理才能上网，因此不能直接使用bower去下载插件。

于是在网上查找了一些方法，需要设置bower的代理，此时我们需要一个文件.bowerrc。需要在这个文件里配置相关的代理设置。开始以为.bowerrc 是一个 xxx.bowerrc 后缀的一个文件，于是在目录下手动建了一个类似的文件，发现没有用。

后来又搜寻一番，发现可以通过cmd命令去创建文件，于是试了一把果然成功了。分享给大伙，免得和我有一样遭遇的小伙伴烦恼

最后用任意编辑器打开 .bowerrc ，输入以下代理设置

1
2
3
4
{
  "proxy": "http://192.168.20.6:3128",
  "https-proxy": "http://192.168.20.6:3128"
}

大功告成，可以下载想要的东西啦

javascript

使用 Swiftype 创建一个随心所欲的搜索引擎

Swiftype 是个什么东东？

Swiftype 可以为网站及移动 app 提供内置搜索引掣服务。其部署十分简单，只须输入 URL 地址平台即可执行对用户网站的抓取，插入 JavaScript 代码嵌入网站就即完成搜索引擎的创建。Swiftype 还提供了分析服务，供网站检索分析用户的搜索行为和使用偏好。Swiftype 还支持对搜索结果排序进行定制。

Swiftype 有什么优点？

  • 无须你在后端写任何代码，仅仅创建一个引用，引入脚本即可在网站展现一个搜索界面
  • 抓取的内容全，当输入URL时，无论你是静态的还是动态的网页，都将把每个URL抓回去，若有些链接没抓到，也可以通过手动提交地址
  • 灵活定制，例如搜索框的定制，搜索结果页的定制，展示的字段也可以定制，抓取规则的过滤定制
  • 接口丰富，可通过很多种方式去请求搜索api，然后获取搜索后返回的数据
  • 安全机制校验，不用担心数据会被其他人盗用
  • 支持跨域请求，支持搜索关键词统计等等
  • 支持智能提示，自定义排序等

查看更多

javascript

gojs 学习笔记（1）

gojs 入门讲解 ——-作者 Peng8

gojs 是一款非常强大的绘图工具，可以用来画流程图、树图、关系图、力导图、甘特图、电流图等等一些很复杂炫酷的图形。以下是我学习的笔记，帮助大家理解，如有不对的地方请谅解

下载

官方网站下载gojs相关的资源包，里面包含了例子、API等资源文件 传送门

一个简单的流程图

1
var $ = go.GraphObject.make;

注释：按照我自己的理解，这个全局变量相当于一个画笔，即定义一个画笔工具。之后我们就可以通过$符号来调用它自身的一些方法、属性、枚举对象等。
有了画笔，那我们还需要画布，于是我们需要定义一个画布用来装载一些具体内容

1
2
3
4
5
6
7
8
var myDiagram =$(go.Diagram, "myDiagram",{
    initialAutoScale: go.Diagram.Uniform,
    contentAlignment: go.Spot.Center,
    layout:$(go.ForceDirectedLayout,{ 
     defaultSpringLength: 30, 
     defaultElectricalCharge: 100 
     })
 });

注释：go.Diagram 就是我们要定义的画布，注意了，第二个参数 “myDiagram” ，这里是要渲染的DIV 的Id 名称，contentAlignment是内容的对齐方式，layout 代表画布里的元素布局方式，采用了力导图自然排列。
这个画笔可以绘制节点、链接、区域、图案、形状、文本等，例如我们要写一个文本就可以这样写：

1
2
3
4
5
6
$(go.TextBlock,{
    text:"www.peng8.net",
    stroke: "red",
    font: "bold 10pt helvetica, bold arial, sans-serif",
    margin: 4
})

注释：上面这段代码应该很好理解，用画笔绘制了一个文本对象go.TextBlock ，并为它填充了属性 text、stroke、font、margin 等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
myDiagram.nodeTemplate = $(go.Node, "Auto",
       $(go.Shape, "RoundedRectangle",
               {
                   fill: "white",
                   stroke: "red"
               },
               new go.Binding("fill", "color")
       ),
       $(go.TextBlock,
             {
                  font: "bold 10pt helvetica, bold arial, sans-serif",
                  margin: 4
              },
           new go.Binding("text", "text"))
);

注释：上面这段代码定义了一个节点模版，一个流程图，由很多很多个节点构成，在节点模版里面有定义了2个模型，一个是形状一个是文本，首先通过go.Shape 定义了一个 圆角矩形 ，默认填充色为 白色，边框颜色为 红色。
注意了，仔细看我们会发现 TextBlock 里相对与上面那个TextBlock ，少了一个text属性节点，而在最下面多了一行 new go.Binding("text","text") ，这什么意思呢？这是申明动态绑定text属性，将数据源中提供text字段的值赋值给当前的text属性，随后介绍数据源的格式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
myDiagram.linkTemplate =
 $(go.Link, 
             {  adjusting: go.Link.Stretch, reshapable: true },
             new go.Binding("points").makeTwoWay(),
             
             //new go.Binding("curviness", "curviness"),
             $(go.Shape,  
                     {
                         isPanelMain: true,
                         stroke: "black"
                     }),
             $(go.Shape,  
                     {
                         toArrow: "standard",
                         stroke: null
                     }),
            
                     
             $(go.TextBlock,  
                      {
                          textAlign: "center",
                          segmentOffset: new go.Point(0, -10),
                          font: "10pt helvetica, arial, sans-serif",
                          stroke: "#555555",
                          margin: 4
                      },
                      new go.Binding("text", "text")
             )
     );

注释：我们定义了节点模版，构成了流程图的每一个点，所谓流程图自然有流向，于是有了连接点与点的线，这里我们称之 流程线 ，可以是虚线、实线、带箭头、不带箭头等。同样上面通过go.Link 构建了流程线，这个对象里面包含了 2个形状，一个文本，2个形状一个用来画线，一个用来画箭头，文本用来显示线上的label。至于里面的属性我就不做详细介绍了，大家可以看API。

最后就是如何给流程图填充动态数据了，这里我采用了json的方式，流程图赋值就是一句话就够了

1
myDiagram.model = go.Model.fromJson(jsonList);

jsonList 是我前端定义用来接收ajax返回数据的一个对象，它的数据结构是

1
2
3
4
5
var jsonList = {
       nodeKeyProperty: "key",
       nodeDataArray: [{key:1,text:"节点a"},{key:2,text:"节点b"},{key:3,text:"节点c"}],
       linkDataArray: [{from:1,to:2,text:"我是节点a指向节点b"},{from:2,to:3,text:"我是节点b指向节点c"},{from:3,to:1,text:"我是节点c指向节点a"}]
};

注释：jsonList 的结构是固定的，包含了nodeKeyProperty 、nodeDataArray、linkDataArray 三个属性，分别代表了 关联的主键，节点数据，节点对应关系数据 ，上面from 和to 即 开始节点的主键指向结束节点的主键。
我们把上面所有代码合起来，就形成了一个简单的流程图，上图上真相

简单的流程图

gojs简单流程图先介绍到这里，后续还会有自定义节点图标、节点编辑、节点扩充等等相关的介绍

敬请期待，待续中…..

javascript

前端模块化开发的价值

随着互联网的飞速发展，前端开发越来越复杂。本文将从实际项目中遇到的问题出发，讲述模块化能解决哪些问题，以及如何使用 Sea.js 进行前端的模块化开发。

恼人的命名冲突

我们从一个简单的习惯出发。我做项目时，常常会将一些通用的、底层的功能抽象出来，独立成一个个函数，比如

1
2
3
4
5
6
7
function each(arr) {
  // 实现代码
}

function log(str) {
  // 实现代码
}

并像模像样地把这些函数统一放在 util.js 里。需要用到时，引入该文件就行。这一切工作得很好，同事也很感激我提供了这么便利的工具包。
直到团队越来越大，开始有人抱怨。

小杨：我想定义一个 each 方法遍历对象，但页头的 util.js 里已经定义了一个，我的只能叫 eachObject 了，好无奈。
小高：我自定义了一个 log 方法，为什么小明写的代码就出问题了呢？谁来帮帮我。

查看更多

javascript

JavaScript 判断对象是否存在的几种写法

在平日的前端开发中，我们会经常遇到一个问题，就是 “某某某对象未定义或者underfined”，为了避免这样的问题，我们在用一个对象或者变量的时候得预先判断，然后做下一步操作，判断对象是否存在的方法有很多种，大致总结了下有如下：

  • 第一种

    1
    2
    3
    if (!myObj) {
    　　var myObj = { };
    }

  • 第二种

    1
    2
    3
    if (!window.myObj) {
    　　var myObj = { };
    }

  • 第三种

    1
    2
    3
    if (!this.myObj) {　　　　
        this.myObj = { };
    }

查看更多

javascript

html里关于doctype 文档类型的介绍

DOCTYPE 标签 – 定义了标准文档的类型

  • DOCTYPE标签是单独出现的
    • 文档类型，会使浏览器使用相应标准加载网页并显示
    • 文档类型定义在HTML文档的第一行，在html标签之前
    • 文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式
  • DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”

HTML DOCTYPE文档类型举例说明

HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签（例如：font、b等），不可以使用框架

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签（例如：font、b）(梦之都就使用了此类型)，不可以使用框架

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5文档类型

1
<!DOCTYPE html>

javascript

Asp.net 动态压缩脚本或样式 (网页加载性能提升)

随着jquery、javascript插件越来越多，一些门户站引用的js文件也越来越多
我们随便打开一个网页，鼠标右键查看源代码会发现head区域了加载了N个js文件，导致网页的加载速度非常慢。

当浏览器遇到一个标签时，会运行里面的javascript代码，然后继续解析，依次往下执行，在此期间下一个脚本是等待下载或等待运行的状态，直到第一个脚本执行完毕，如果引用的是外部文件，浏览器首先会下载外部文件的代码，然后解析并运行代码。试想一下，如果head区域放了很多脚本文件，页面解析和用户交互是被完全阻塞的。

查看更多