2014/11/20

前端模块化开发的价值

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

恼人的命名冲突

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

function each(arr) {
  // 实现代码
}

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

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

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

2014/11/13

jquery

动态更换网页背景

// 创建一个图片数组
var images = [
	"test1.jpg",
	"test2.jpg",
	"test3.jpg",
	"test4.jpg"
];
// 编辑数组为每个图片附上src路径  
$(images).each(function () {
	$('<img/>')[0].src = this;
});

// 用来标识是否为目前显示的图片
var index = 0;
//默认初始化函数
$.backstretch(images[index], { speed: 500 },test);

function test() {
	$("#p_result").html("我是回调函数输出的结果 :"+index+"");
}
$("#btnChange").click(function () {
	index = Math.floor((Math.random()*images.length)); 
	$.backstretch(images[index], { speed: 500 },test);
});
$("#btnChange2").click(function () {
	// 定时切换调用
	setInterval(function () {
		index = (index >= images.length - 1) ? 0 : index + 1;
		$.backstretch(images[index], { speed: 500 },test);
	}, 3000);
});

DEMO 地址：点我查看

2014/11/05

Highcharts

highchart 之放大显示的几种方式

可能大家对highchart的api不是很熟，分享几个higchart 放大化显示的几种方法，对api熟悉可以忽略本篇文章了。

第一种方式通过设置渲染DIV的宽带来调整图表的大小

var chart=new Highcharts.Chart(option); //假设这是我们初始化的图表
$('#container').width(500);//这里重新设置container这个DIV的宽度
//接着我们调用chart对象的reflow()方法即可重新渲染图表的大小
chart.reflow();

2014/10/30

Highcharts

highchart 导出excel By Asp.net

为了照顾小伙伴，用asp.net 写了份highchart简单导出excel的例子，希望对大家有所帮助

highchart导出 excel，主要用到了内部的getCSV，将数据post到服务端，至于服务端怎么处理大家就可以可显神通了，我所指知道的一般可以用 POI、NPOI、aspose、微软com+组件等等

前端HTML

 <div>
    <div class="main">
        <div class="chart-container">
            <div id="chart1" class="chart">
            </div>
        </div>
        <p>
            <input type="button" value="Export Excel" id="btnDownLoad" />
        </p>
    </div>
</div>

2014/10/20

Highcharts

Highcharts 扩展之多张图表合并生成一张图

在highchart的导出需求中，我们做过单个图表的导出，生成单个图片，也做过多个图表同时导出，生成多张图片。但很少遇到这样一种情况，需要将客户端的图表同时导出，并合并生成在一张图片上。

今天为大家来highchart一个扩展，原理就是在一键导出的时候，根据highchart现有的API方法去获取每个图表的SVG图片信息，然后拼接好合并成一个svg，最后提交给后台进行处理，这个功能即可将多个图表生成在一张图片上，也可以一次请求到后台生成多个图片，但需要自己在后台做svg拆分，一个一个生成。

步入正题，首先引入扩展部分的javascript代码到head标签区域，或者单独建一个js文件

Highcharts.getSVG = function (charts) {
        var svgArr = [],
            top = 0,
            width = 0;
 
        $.each(charts, function (i, chart) {
 
            var svg = chart.getSVG();
            svg = svg.replace('<svg', '<g transform="translate(0,' + top + ')" ');
            svg = svg.replace('</svg>', '</g>');
            //svg = svg.replace('<svg', '<zg ct=' + chart.options.chartype);
            //svg = svg.replace('</svg>', '</zg>');(这段注释的代码用来生成多个图片)
 
            top += chart.chartHeight;
            width = Math.max(width, chart.chartWidth);
 
            svgArr.push(svg);
        });
 
        return '<svg height="' + top + '" width="' + width + '" version="1.1" xmlns="http://www.w3.org/2000/svg">' + svgArr.join('') + '</svg>';
};

2014/10/16

Highcharts

highchart通用配置文件及使用说明

使用 highcharts 已经有好几年的时间了，用过很多图表插件！例如 funsionchart、dhtmlxChart、jqPlot、JS Charts、Open Flash Chart、Flot，在到国产最近比较好的 echarts ，这里面有基于javascript的，也有基于flash的，但最喜欢的还是 highcharts，这些图表插件基本的图表功能大部分都能满足，但区别在于图表的功能可扩展性及浏览器兼容性上，highcharts 有明显的优势。

配置文件介绍

下面步入正题，给大家分享一个 highcharts 全局配置文件，其实也没什么，无非就是将通用api里的参数放在了一个方法里，这样初始化图表就不用每次都去写一大串配置，而是用到什么参数就写什么参数，具体请看下面这段javascript代码
查看更多

2014/10/15

phantomjs

.NET 利用phantomjs javascript引擎抓取网页快照

phantomjs 它是个javascript引擎库，基于webkit内核，能够动态解析html及脚本
详细介绍请查看官网点击此处

下载phantomjs包，这次我们介绍的是用它截取网页快照，其实只用到了它js类库中的一个文件
rasterize.js，先看看这个js里面的代码

var page = require('webpage').create(),
    address, output, size;
if (phantom.args.length < 2 || phantom.args.length > 3) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    phantom.exit();
} else {
    address = phantom.args[0];
    output = phantom.args[1];
    page.viewportSize = { width: 600, height: 600 };
    if (phantom.args.length === 3 && phantom.args[1].substr(-4) === ".pdf") {
        size = phantom.args[2].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], border: '0px' }
                                           : { format: phantom.args[2], orientation: 'portrait', border: '1cm' };
    }
    page.open(address, function (status) {
        if (status !== 'success') {
            console.log('Unable to load the address!');
        } else {
            window.setTimeout(function () {
                page.render(output);
                phantom.exit();
            }, 200);
        }
    });
}

根据phantomjs的语法创建一个page对象，设置相关的参数然后发起一个请求，成功后渲染生成图片。
接着看看后端如何调用这个js文件，这里我使用的C# winform 调用phantomjs.exe 程序，这个程序动态加载需要执行的js文件，其他语言也有相关的调用方法。

private void GenerateImage(string url)
{
     string links = url.IndexOf("http://") > -1 ? url : "http://" + url;
     Process p = new Process();
     p.StartInfo.FileName = Environment.CurrentDirectory + "//phantomjs.exe";
     p.StartInfo.WorkingDirectory = Environment.CurrentDirectory + "//pic//";
     p.StartInfo.Arguments = string.Format("--ignore-ssl-errors=yes --load-plugins=yes " + Environment.CurrentDirectory + "//rasterize.js  " + links + " " + url + ".png");
     p.StartInfo.CreateNoWindow = true;
     p.StartInfo.WindowStyle = ProcessWindowStyle.Hidden;
     if (!p.Start())
     {
         throw new Exception("无法启动Headless测试引擎.");
     }         
 }

效果图如下：
phantomjs 生成的快照图片

2014/10/14

jquery

教你如何在kindeditor中扩展图片裁剪的功能

本文介绍如何在kindeditor中扩展一个自定义按钮，并实现对应的功能

首先我们看下目录结构，目录包含 attached、editor、script、tools 四个文件夹
attached 用来存放上传的图片，可以在tools里upload_json.ashx 代码里修改上传的路径
editor 编辑器所用到的基本文件都放在此文件夹
script 文件里引入了 artDialog 弹出插件（ps:本人最喜欢的弹窗插件）
tools 处理上传图片、管理图片、裁剪图片的类和文件都放在此文件夹

编辑器的具体配置，先删除lang文件夹下无用的语言包配置文件，留下en.js、zh-CN.js、zh-TW.js 即可。分别打开三个文件在source节点上面加上 cutthumbs: ‘裁剪’, 这里我只在zh-CN.js加了，实际上三个都加才算合适。

2014/09/27

jquery

TimelineJs 的使用及应用

最近做项目，需要展示一个事件的发展历程，于是用到了 TimelineJs 这个东西，效果还不错，于是拿出来与大家分享下！

先下载资源包，上面TimelineJs 已经提供了GitHub的源地址 https://github.com/NUKnightLab/TimelineJS

新建页面，引入相关的文件，然后初始化代码

<html>
<head runat="server">
    <title>时间轴插件--展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- HTML5 shim, for IE6-8 support of HTML elements-->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="timeline-embed">
        </div>
        <script type="text/javascript" src="/js/storyjs-embed.js"></script>
        <script type="text/javascript">
            function InitTimeline() {    
                createStoryJS({
                    type: 'timeline',
                    width: '100%',
                    height: "100%",
                    lang: 'zh-cn',
                    source: 'example_json.json',
                    embed_id: 'timeline-embed'
                });
            }
            InitTimeline();
        </script>
    </div>
    </form>
</body>
</html>

大功告成，可以查看效果了，哈哈（ps:一定要将对应的css和js文件放到指定的目录下，如果没有请参照下面这段代码初始化）

<div id="timeline-embed"></div>
<script type="text/javascript">
        var timeline_config = {
            width:              '100%',
            height:             '600',
            source:             'path_to_json',//数据来源
            embed_id:           'timeline-embed',//初始化的DOM ID
            lang:               'zh-cn',   //语言版本
            css:                'path_to_css/timeline.css',     //css路径
            js:                 'path_to_js/timeline-min.js'    //js路径
        }
</script>
<script type="text/javascript" src="/js/storyjs-embed.js"></script>

####最后来张效果图

下载地址：点击此处下载DEMO

2014/09/12

jquery

myPagination 使用说明及介绍

在写这篇文章之前，先感谢下myPagination的作者 LinApex 无私的贡献。最近，看到群里总有人问 mypagination 的使用及相关DEMO，其实作者提供的 API和下载文档中已经写的很详细了，细心的人多看、多试几遍应该问题不大，为了照顾那些懒惰的小伙伴，还是写个比较通用的吧

我目前用的是myPagination 6.0 版本，这个版本也有些BUG，我看下了源码做了下细微的调整(例如增加了总记录数的显示等，我分享的下载包里 mypagination.js 即修改后的)

引入js和css文件

1 2	<script src="Scripts/myPagination/mypagination.js" type="text/javascript"></script> <link href="Scripts/myPagination/page.css" rel="stylesheet" type="text/css" />

前端HTML

注：这里html自己就随便写啦，可以是table或者自己定义的任何形式，但是一定要有一个DIV用来渲染page。

<div id="content">
</div>
<div class="pagelist" style="float: left; width: 100%">
</div>

Peng8 | 鹏吧

do one thing at a time and do well

前端模块化开发的价值

恼人的命名冲突

动态更换网页背景

highchart 之放大显示的几种方式

第一种方式通过设置渲染DIV的宽带来调整图表的大小

highchart 导出excel By Asp.net

前端HTML

Highcharts 扩展之多张图表合并生成一张图

highchart通用配置文件及使用说明

配置文件介绍

.NET 利用phantomjs javascript引擎抓取网页快照

教你如何在kindeditor中扩展图片裁剪的功能

TimelineJs 的使用及应用

myPagination 使用说明及介绍

引入js和css文件

前端HTML

恼人的命名冲突

第一种方式 通过设置渲染DIV的宽带来调整图表的大小

前端HTML

配置文件介绍

引入js和css文件

前端HTML

第一种方式通过设置渲染DIV的宽带来调整图表的大小