CDBlog

vue2结合select2,Highcharts

Mar 26, 2017

vue2 中使用Highcharts

stackoverflow 上的有答案 http://stackoverflow.com/questions/38777136/highcharts-in-vue-js-component
因为画布要刷新，涉及到数据销毁, 需要执行 this.target.destroy(); 。
需要注意的是，当数据处于隐藏状态时不能触发 beforeDestroy ，即 <div v-show="isShow"></div>
刷新数据需要销毁之前的画布数据，利用 v-if 进行动态销毁、新增。

<script>
var Highcharts = require('highcharts');
export default {
    name : "Chart",
    props : {
    series : {
        type: Array,
        required: true
    }
    },
    data : function() {
    return {
        target: undefined
    }
    },
    mounted : function() {
    this.target = Highcharts.chart(this.$el, {
        title: {
        text: 'Monthly Average Temperature',
        x: -20 //center
        },
        subtitle: {
        text: 'Source: WorldClimate.com',
        x: -20
        },
        xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
        'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
        title: {
        text: 'Temperature (°C)'
        },
        plotLines: [{
        value: 0,
        width: 1,
        color: '#808080'
        }]
    },
    tooltip: {
        valueSuffix: '°C'
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle',
            borderWidth: 0
    },
    series: this.series
    });
},
beforeDestroy: function() {
    this.target.destroy();
},
}
</script>

vue2 使用select2

...more

jqGrid

Mar 21, 2017

jqGrid 是一个表格插件，拥有排序、翻页、每页大小变化等常见功能等。

$('#tableName').jqGrid({
    url : 'interface_url',
    datatype : "json",
    colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],
    colModel : [ 
                 {name : 'id',index : 'id',width : 55}, 
                 {name : 'invdate',index : 'invdate',width : 90}, 
                 {name : 'name',index : 'name asc, invdate',width : 100, hidden:true}, 
                 {name : 'amount',index : 'amount',width : 80,align : "right"}, 
                 {name : 'tax',index : 'tax',width : 80,align : "right"}, 
                 {name : 'total',index : 'total',width : 80,align : "right"}, 
                 {name : 'note',index : 'note',width : 150,sortable : false} 
               ],
    rowNum : 10,
    rowList : [ 10, 20, 30 ],
    pager : '#pager2',
    sortname : 'id',
    mtype : "post",
    viewrecords : true,
    sortorder : "desc"
})

利用jqGrid进行table定义, 定义之后利用 $('#tableName').trigger("reloadGrid") 触发更新。

...more

get-post区别
Jul 17, 2016
鉴于前几天又看过的一篇关于 “get与post区别的文章”，对于这个老生常谈的问题，我记录下自己的总结。
1. 就浏览器表现来看，get是直接将参数展现在地址栏上，有一定的长度限定，大概2kb?4kb?反正是有较小的长度限定，当然除了传大量数据，一般的get请求是没问题的；而post则将参数放到了request body中，并没有来地址栏中展现，参数内容长度则可以很大，适合传输有大量数据的请求。
2. 就语义化而言，get是直接发一次包进行请求，是幂等的，表示拉取数据，主要是进行读操作；而post则是非幂等，发两次包，一次头部，第二次包含了参数的body，表示数据存在更改，包括新建、更新、删除操作。
3. 就特殊的功用性而言，跨域常用的jsonp本质上就是get请求进行回调；上传文件需要的 multipart/form-data, 就必须是post请求。
4. 编码与转译， get需要对特殊符号进行编码和转译，比如：encodeURIComponent(), 后端才能得到正确的数据；而post则浏览器进行这项操作。
5. get方式可以有页面缓存，可以进行回退/前进操作，而post没有。
...more
加盐密码
Jun 9, 2016
密文存储
数据库中用户的密码一般是密文存储的，作用？
- 防止被脱裤后账号泄露
- 防止内部DBA或者有权限人员直接可以看到用户账号密码
加密hash算法
传统的md5加密，在彩虹表的攻势下已经不再安全，新的加密方法呢？

可以使用
- OpenWall的Portable PHP password hashing framework
- 经过充分测试的加密hash函数，比如SHA256, SHA512, RipeMD, WHIRLPOOL, SHA3等
- 设计良好的key扩展hash算法，比如PBKDF2，bcrypt，scrypt
- crypt的安全版本。($2y$, $5$, $6$)
不要使用
- 过时的hash函数，比如MD5,SHA1
- crypt的不安全版本。($1$, $2$, $2x$, $3$)
- 任何自己设计的算法。
只依靠hash隐患
优秀的hash算法加密可以保障密文的安全，但如果多个企业只用一套”安全的加密算法”会有什么隐患？
...more
html css js 特殊字符
Jun 6, 2016
对于一些不能用输入法直接打出的特殊符号，常用的方法包括字体图标，图片，纯css实现。

字体图标
比如font-awesome font-icon web-font 等，都是引入一些字体库，然后直接调用class，实现图标，
这些图标的大小和颜色由普通字体的css属性控制，如color font-size。

优点是图标可灵活调节，缺点是引入的字体库可能会比较大。。

图片
这个最万能的方法。。。

优点：兼容性方案
缺点：可能会引入较多碎片化的图标，增加了请求数，当然这个可以用雪碧图优化，只不过，色彩变化，大小控制方面灵活性不够

css实现
常见的比如三角形用border-width实现。
缺点就是面对复杂的图形，将会很困难。

其他
canvas webGL svg 等，一个是对低版本浏览器兼容不好，实现也不一定方便。

特殊字符
...more
jquery插件
May 15, 2016
说jQuery插件之前，先看看jQuery的几个关键点。
- jQuery.fn = jQuery.prototype
- jQuery = $
- jQuery.extend() = $.extend()
前两个就别名关系，第三个才是主要要说的。 $.extend(param a, param b) 作用是将参数b的中key值复制到a中，同key的话b将覆盖a的值。。
例如， $.extend({a:111, b:222, c:333}, {a:222, b:333, d:444}) 将得到对象{a:222, b:333, c:333, d:444}。

进入正题， jQuery插件的写法。

$.extend
```
(function($){ 
    $.extend({ 
        functionA: function(){},
        functionB: function(){}
    });
})(jQuery);
```
自执行函数引入jQuery参数，调用 $.extend()，将functionA functionB 复制到jQuery对象中，也就相当于 jQuery这个对象本身有了 functionA 和 functionB 一样。

$.fn.extend
同理, 可以用$.fn.extend() 方法。
```
(function($){ 
        $.fn.extend({ 
            functionA: function(){},
            functionB: function(){}
        });
    })(jQuery);
```
区别是， functionA functionB 复制到了jQuery.fn, 即 jQuery.prototype 上了。

一些技巧
...more

yii2

Apr 13, 2016

前段时间学习了 yii2 这个 php MVC 框架。向同事做了培训，搬运总结到blog上~~~

文档资源：

环境依赖

Yii 2.0 需要 PHP 5.4.0 或以上版本支持
支持php7

Composer安装

win下的安装

下载并安装 Composer-Setup.exe
更新Composer composer self-update
composer global require “fxp/composer-asset-plugin:~1.1.1” 这里是 1.1.1，中文文档这里没更新，有坑，会影响后续yii2-smarty的安装
composer create-project –prefer-dist yiisoft/yii2-app-basic basic

目录结构

basic/                  应用根目录
composer.json       Composer 配置文件, 描述包信息
config/             包含应用配置及其它配置
    console.php     控制台应用配置信息
    web.php         Web 应用配置信息
commands/           包含控制台命令类
controllers/        包含控制器类
models/             包含模型类
runtime/            包含 Yii 在运行时生成的文件，例如日志和缓存文件
vendor/             包含已经安装的 Composer 包，包括 Yii 框架自身
views/              包含视图文件
//modules           可以设置自己的模块
web/                Web 应用根目录，包含 Web 入口文件
    assets/         包含 Yii 发布的资源文件（javascript 和 css）
    // js css img   可以设置文件目录
    index.php       应用入口文件
yii                 Yii 控制台命令执行脚本

...more

关于一个评价星星效果的实现
Apr 3, 2016
同样从一次面试得来的经验。
题目为实现评价星星的思路。

思路1
有一张长图，包含了5个已选择的星星和未选择的星星，用户选择哪个星级评价时，移动整个图片，即改变background-position的值。
HTML如下：
```
<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
```
div的background是图片， span是透明层，用户选择那个时，用于定位，然后移动div，实现效果。
优化思路：去掉span，整个结构只有一个div，根据event.target,offset位置偏移来确认用户选择的评价星级。
...more
关于js声明提前
Apr 3, 2016
在一次笔试中碰到，得到面试官的指导。
题目大概是这样：
```
var a = 10;
function test(){ 
  a = 1;
  console.log(a); 
  var a;
  console.log(a); 
}

test();   // 1  1
console.log(a); // 10
```
在test函数中，先 var a; 单纯的变量声明，会在同级函数中进行声明提前，类似于 function 可以放到执行时的后面一样，所以 test()中 a 声明为了一个局部变量，相当于 var a; a = 1; 操作。

变化与思考：
```
var a = 10;
function test(){ 
  a = 1;
  console.log(a); 
  var a = 20;
  console.log(a); 
}

test();   // 1  20
console.log(a); // 10
```
发现没？ var a = 20 这部分相当于完成了两个操作， 1：声明提前，将 a 设置为局部变量， 2：当执行到var a = 20时，将a赋值为20。

验证：
```
var a = 10;
function test(){ 
  console.log(a); 
  var a;
  console.log(a); 
}

test();   // undefined undefined  
console.log(a); // 10
```
var a 声明提前，但没有赋值，所以 undefined。
```
var a = 10;
function test(){ 
  console.log(a); 
  var a = 1;
  console.log(a); 
}

test();   // undefined 1  
console.log(a); // 10
```
同样的思路：声明提前，a为局部变量，一开始未赋值，为 undefined，后面赋值为 1
...more
fixed与input处理
Mar 27, 2016
在移动端下， fixed有兼容问题，解决如iScroll， input也有兼容问题，挡住了内容无法下滑显示等等，这个就要用js控制或者从css布局处解决了。
那么，两者结合到一起会有怎样的bug？

需求
- 对于没有尺码属性选择的商品，点击加入购物车直接执行
- 有尺码属性选择，则需要在右侧弹出侧边框确认
fixed
加入购物车 fixed
商品内容部分用了固定高度+ overflow: scroll;来布局，已经规避了一些兼容问题了。
底部布局：
```
#main .global-add-cart, .global-quick_buy {
    position: fixed;
    color: #fff;
    width: 49.5%;
    font-weight: bold;
    z-index: 99;
    text-align: center;
    font-size: 24px;
    line-height: 30px;
    bottom: 0;
    right: 0;
    -webkit-transform-style: preserve-3d;
}
```
当点击input时，由于内容部分可以scroll滑动，可以方便的输入信息，不存在问题。
...more

vue2 中使用Highcharts

vue2 使用select2

密文存储

加密hash算法

只依靠hash隐患

字体图标

图片

css实现

其他

特殊字符

$.extend

$.fn.extend

一些技巧

环境依赖

Composer安装

目录结构

思路1

变化与思考：

验证：

需求

fixed

加入购物车 fixed