jsPlumb学习笔记(2)

目录 Web

完成元素拖动后,接着做连线,连线由几部分组成

  1. Endpoint 端点,默认为圆点
  2. Connector 连接线,默认为贝塞尔曲线
  3. Anchor 锚点,不可见元素,跟Endpoint是绑定的,在动态创建连接线时使用
  4. Overlay 覆盖物,如连线上的箭头,也可以是文字或dom元素

当容器append了一个dom后,调用addEndpoint来增加输出和输入端点,该函数接受3个参数,分别是dom,参数以及附加参数

共用的参数可以写进附加参数,然后参数里相同的属性会进行覆盖 参数详细介绍在这里 addEndpoint

jsPlumb.addEndpoint(n[......]

Read more

jsPlumb学习笔记(1)

目录 Web

jsPlumb是一个DOM连线JS库,采用SVG绘制连线
官网 | GitHub | API

这是前阵子做的DEMO,用来操作沙盘演示用,做得比较粗糙

本文代码均放GitHub,另外学习中参考了网上其他大牛,特别感谢这二位
【看完想不会都难的系列教程】- (3) JQuery+JQueryUI+Jsplumb 实现拖拽模块,流程图风格
jsPlumb的简单使用

下面一步步来玩弄这玩意
首先是页面代码结构,一个source表示原始元素,container表示编辑区画布

<body>
<div class="root">
<di[......]

Read more

UEFI启动那些事

目录 IT

UEFI早在大概05年就推出1.1版了,但是一直没有推广开,直到win7开始支持
我作为一个守旧派不大愿意接受新硬件,也一直坚守Legacy BIOS启动方式(下面简称BIOS)
但是最近换了新电脑,自带WIn10,格掉后重新分区,Ghost了一版Win10后发现无法启动,主板设置居然连硬盘启动都消失了,折腾半天无果,才不得已看了恶补了一下知识
关于BIOS启动和UEFI启动可以看这篇豆芽文
https://wiki.archlinux.org/index.php/Unified_Extensible_Firmware_Interface
简单来说,BIOS启动后从硬盘MBR引导扇区[……]

Read more

ShadowSocks PAC过滤规则说明

目录 Web

SS小飞机文件夹有个pac.txt,打开会发现是一个JS格式的文件,这就是自动代理配置文件
PAC全称Proxy Auto Config File,用于根据URL选择不同代理服务器或是不代理直接访问,相比于传统代理可以加快速度,也减少代理服务器的流量

PAC最早是Ad Block使用的一种规则,用于屏蔽网页各种广告,所以参数除了URL外还支持各种DOM元素,详细参数看这里 https://adblockplus.org/en/filter-cheatsheet
SS小飞机只用了URI部分的规则,完整文件在根目录下pac.txt,如果需要增加规则,则修改user-rule.tx[……]

Read more

vue-cli下解决跨域sessionid问题

目录 Web

项目开始为了方便直接把页面包在Java容器里面,而实际设计应该是前后端分离的
最近在做分离时api请求发现,因为前端web和后端portal不在一个容器,存在跨域,会造成每次ajax请求都生成不同sessionid,而portal是通过session来识别用户,从而控制权限,这将导致登录后依旧无法获取数据,因为sessionid变了,portal认为没有权限并302重定向到首页

网上有不同解决办法,比如通过java去获取sessionid,并在每次请求时通过http带过去
因为之前做过几年的Facebook、Twitter等这类app,他们用的都是token,应该是相当成熟的[……]

Read more

Bower学习笔记

目录 Web

  1. bower是什么
    bower是基于node.js的包管理工具,可以方便的安装和卸载web开发资源,诸如jQuery、bootstrap之类
    而像yeoman和grunt则是在bower基础上的开发工具
  2. bower和npm的区别
    都是包管理工具,但是bower是for web,npm的包依赖是一种独特的嵌套依赖关系树,依赖包层层嵌套树杈非常坑长,打开node_modules可以看到里面密密麻麻的包,但对于前端库来说,这些基本是多余的,往往需要的只是一个未压缩或者压缩后的js和css而已,而bower正是管理js/css/模板的一个工具
    Stack上有相关评论点这里
  3. UTF8_[……]

Read more

Flex布局学习笔记

目录 Web

阮大的教程实战篇

Flex布局的开源库

 

CSS传统布局基于盒子模型,依靠display + position + float属性进行定位,在一些特殊布局显得不灵活

Flex布局,容器内的元素自动成为flex item,容器基于XY轴进行布局

其容器属性有

  • flex-direction X主轴排列方向
  • flex-wrap 元素换行
  • flex-flow 上面2个的简写
  • justify-content 主轴对齐方式
  • align-items Y轴对齐方式
  • align-content 多轴线对齐方式

item属性有

  • order 排列顺序
  • flex-grow 剩余空间膨胀值
  • flex-shrink 空间不足缩小值
  • flex-basis 预分配大小值
  • flex 以上3个的简写
  • align-self 对齐方式

[……]

Read more

ES6箭头函数

目录 Web

第一次见到这箭头=>,我觉得这是很奇葩的写法,因为作为一个老男人来说,会影响阅读和理解代码的速度=_=||
作为ES6新特性之一,箭头函数特点如下
a)简洁
b)this指向
c)rest取代arguments

1. 简洁

var showTips = function(d){
$("#Tip").text(d).show();
}

这段代码换成箭头写法是这样

var showTips = (d) => {$("#Tip").text(d).show()};

因为只有一个参数 d 所以括号可以省去,因为function只有一句所以花括号也可以省去,如下[……]

Read more

grunt入门笔记(1)

目录 Web

1,安装

grunt依赖node.js,需要先安装node.js,官网https://nodejs.org/
安装后敲node -v会打印版本号,则安装成功
接着安装grunt, -g表示全局,不带则安装到当前目录
npm install -g grunt-cli

2,初始化package.json

package.json是node.js项目描述文件,在项目根目录下执行
npm init
根据提示输入即可,生成文件大概是这样子的

{
"name": "grunt-test",
"version": "1.0.0",
"description": "only for[......]

Read more