江小湖Laker

江小湖Laker 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织 laker.me 编辑
编辑

进击的程序媛快去创造奇迹~
欢迎交换友链:http://laker.me/

个人动态

江小湖Laker 发布了文章 · 3月13日

用CSS Flex 布局绘制柱状图 Bar chart

关于flex布局,可以看我这篇 图解Flex布局

image.png

本文基于的框架:微信小程序、uniapp(Vue.js)、SCSS。原理是一样的,我就不转换成原生的Vue.js和css了。

原理:
WechatIMG150.jpeg

模板:

v-for="i in 5" 循环显示5个bar

:style="{ 'height': readingHoursHeight[i] + 'px' 根据readingHoursHeight的数据动态设置bar的高度

{{ readingHours[i] }} 显示数字标签

<view class="container">
    <!-- 循环显示5个bar -->
    <view v-for="i in 5" :key="i" class="bar-item-box">
    {{ readingHours[i] }}
    <view class="bar-item" :style="{ 'height': readingHoursHeight[i] + 'px' }"></view>
    </view>
</view>

JS:

模拟数据

data () {
  return {
    bookId: '',

    // 模拟每日读书时长
    readingHours: [10, 30, 20, 100, 49],

    // 计算时长的高度
    readingHoursHeight: []
  }
},

计算每个时长对应的bar高度

// 计算bar的高度
computeBarHeight: function () {
  // 先备份this,待会在uni的方法里会被覆盖
  var _this = this

  // box的高度
  var boxHeight = 0

  // 获取最长的时长,作为最大的高度
  var max = this.maxHours(this.readingHours)

  // uniapp的方法,可以改为vuejs的方法
  uni.getSystemInfo({
    success: function (res) { // res - 各种参数
      let info = uni.createSelectorQuery().select('.bar-chart-box')

      info.boundingClientRect(function (data) { // data - 各种参数
        // 获取box元素高度
        boxHeight = data.height - 20

        // 计算每个时长占最大高度的比例来设置高度
        for (let i = 0; i < _this.readingHours.length; i++) {
          let h = _this.readingHours[i] / _this.readingHours[max] * boxHeight

          // 把计算好的高度push到readingHoursHeight数组里
          _this.readingHoursHeight.push(h)
        }
      }).exec()
    }
  })
},

// 获取最大时长
maxHours: function (arr) {
  var max = 0

  for (let i = 1; i < arr.length; i++) {
    if (arr[i] > arr[max]) {
      max = i
    }
  }
  return max
}

SCSS:

.bars {
  display: flex;
  flex-grow: 1;
  justify-content: space-around;
  align-items: flex-end;
  border-bottom: #efefef 2rpx solid;
  margin-bottom: 20rpx;

  .bar-item-box {
    flex: 0.1;
    text-align: center;
    color: #9b9b9b;
  }
}
Exchange blogroll: http://laker.me/blog
Github:https://github.com/younglaker
查看原文

赞 2 收藏 1 评论 0

江小湖Laker 发布了文章 · 2018-05-23

自开发的EasyCanvas绘图库实践、Pixeler项目开发小结

EasyCanvas绘图库实践

欢迎交换友链: laker.me--进击的程序媛
Github:https://github.com/younglaker
V信: lakerHQ (请注明‘来自博客’)

涉及的两个项目

Pixler:一个用于设计像素图片(拼豆)的应用。

Easycanvas.js: Canvas 绘图库

v

开发背景

我对拼豆感兴趣,在做拼豆前要设计图纸,类似画像素图。我试用了网上能搜到的几个拼豆图纸设计的应用,但是没有适合我的,我就想着自己开发一个。

拼豆

算法原理

拼豆图纸就类似于像素图,我刚开始构思如何开发的时候,想着它有点像下棋。所以我参考了五子棋的下棋原理。我在五子棋的算法上优化了鼠标点击时落脚的位置的计算方法,即鼠标点击时,获取点击位置,计算出它处于哪个方格中,在那个方格中画上一个像素点,用一个二维数组记录方格中已绘制的位置。这就完成了初步的拼豆像素图的算法设计。

在以往的开发中,我都要求每一步都精益求精,导致整体进度缓慢,常常停留在初步阶段,就把自己绕晕。所以在此次开发中,尝试了小步快跑、快速迭代的方法。

第一版:快速开发

第一版本开发的时候,我尽量减少对性能、代码优化的思考,在最快的速度完成基本功能,也就是如何绘制像素点和删除像素图。

这样没有束缚的情况下,只需要集中精力完成功能的算法,很快就实现基本功能。

当然,代码也是很简单粗暴的,就需要第二版的完善。

第二版:性能和代码优化

首先,把画布分为两层,一层是参考线画布,一层是绘图画布。参考线画布在初始化后就不需要修改,所有操作只需要在绘图画布上进行,减少了绘图时候的工作量。

然后,把通用功能的代码封装成公共函数,减少冗余。

第三版:封装绘图库,并在应用中不断完善

Pixler 主要代码是 Canvas 绘图,所以可以把 Canvas 主要绘图功能封装一下,单独成一个绘图库,减少主代码冗余,也方便在其他项目中引用。

在大学期间,我研究 jQuery 的时候就仿着写了一个链式结构的 JavaScript 框架 Oct.js,加上第一、第二版本对 Canvas 接口的熟悉,所以开发起来并不困难。但在接口设计上重复弄了几次,这部分的经验我也写了一篇文章 《EasyCanvas:连续画图的一些总结》 记录了一下。

开发 Easycanvas.js,不仅是在 JavaScript 开发、Canvas 运用上的提升,还是一个开源项目的完整实践。期间有一个小伙伴加入参与了合作,可惜没参与太多功能就退出了,但还是一次很好的开源项目的体验。

在开发代码的过程中,还编写了相关的文档。接口不断优化修改,文档也不断的调整,就连文档格式也做了多次调整,工作量是不小,但也不厌其烦。

由于时间原因,在开发完 Easycanvas.js 基础版本后就去做别的项目。间隔一段时间回来再看,基本没有有最初开发时候的熟悉感,这就得靠我之前写的文档了。所以,好的文档是项目的开门钥匙。

就这样,我像一个刚接触这个绘图库的用户一样,参照文档,把 Easycanvas.js 重构了 Pixler 的绘图代码。同时,在应用的过程中发现了 Easycanvas.js 的不足,又反过来进行完善。两个项目相辅相成。

Easycanvas.png

小结

相比之前开发的 Oct.js,只有开发和单元测试,并没有大规模地应用到实际项目中(我也尝试过,但一旦项目做大,就涉及到 jQuery 插件 ,就不得不引入 jQuery,就和 Oct.js 重复了,就只好把 Oct.js 删掉)。

所以,这次 Pixler 和 Easycanvas.js 的开发,从0到1再到100,是一个很好的经历。不仅是编程技能上的提升,还是项目管理上积累了经验。

至此 Pixler 和 Easycanvas.js 完成了一个较为稳定的版本,但还有很大的提升空间,我都一一记录在 Todolist 上了,等我一一突破。

查看原文

赞 2 收藏 1 评论 0

江小湖Laker 发布了文章 · 2017-04-27

Ionic+Angular 开发移动应用一:环境搭建

环境搭建

欢迎交换友链: Laker's Blog--进击的程序媛
Github:https://github.com/younglaker
V信: lakerHQ (请注明‘来自博客’)

介绍

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术,比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。
ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic 特点

  • ionic 基于Angular语法,简单易学。

  • ionic 是一个轻量级框架。

  • ionic 提供了适合移动APP的UI设计

  • ionic 性能优越,运行速度快。

准备

在有点windows、linux安装环境的经验和已配好一部分环境的情况下,这次环境安装还是耗费了一天,现在前端开发真是越来越多准备工作,安装一次就再也不想动了。

本文讲叙述在win7和ubuntu下的配置过程。

安装ionic

$ npm install -g
$ ionic info
******************************************************
 Dependency warning - for the CLI to run correctly,
 it is highly recommended to install/upgrade the following:

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`

******************************************************

Your system information:

 You have been opted out of telemetry. To change this, run: cordova telemetry on.
6.5.0

Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
ios-deploy version: Not installed //mac下再装 npm install ios-deploy -g
ios-sim version: Not installed  //mac下再装 npm install ios-sim -g
OS: Windows 7
Node Version: v7.6.0
Xcode version: Not installed


******************************************************
 Dependency warning - for the CLI to run correctly,
 it is highly recommended to install/upgrade the following:

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`

******************************************************

cordova

$ npm install -g  cordova
$ cordova -v  // 必须运行一下,待会会问是否匿名跟踪日志,必须回答才能生效
? May Cordova anonymously report usage statistics to improve the tool over time? (t/n)

安卓SDK

为了打包成安卓APP

下载地址: http://tools.android-studio.o...
备用下载: http://pan.baidu.com/s/1bYhyai 密码: m3rg

windows:

先下载java jdk安装 java 环境,1.8以上版本,添加java环境变量:

  • 系统变量添加(不是“Administrator的用户变量”):

    JAVA_HOME=C:\Program Files\Java\jdk1.8.0_121
    # 安装地址,之前有配过其他版本java,直接改这里JAVA_HOME的地址,path就不用管了

    CLASSPATH=.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
    # %JAVA_HOME% 前面有个 .;
  • PATH添加:

    %JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

解压android-sdk压缩包,放到一个空间较大的磁盘,找到SDK Manager更新SDK Manager,安装默认选择的13个包,再点击每个包变成打钩状态,再install。安装很久,有十几G。

windows.png

windows.png

添加环境变量:

  • 系统变量添加(不是“Administrator的用户变量”):

    ANDROID_HOME=C:\android-sdk-windows // 压缩包解压地址
  • PATH添加:

    %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

tools目录运行android命令,platform-tools目录运行adb命令

ubuntu

参考 https://gist.github.com/wenzh...

安装java环境

$ sudo apt-get install openjdk-8-jre-headless
# $ java -version
# 安装andoid-sdk用

$ sudo apt-get install openjdk-8-jdk
# javac -version
# 打包android应用用

解压安卓SDK压缩包,进入tools文件,运行(要安装很久):

android update sdk --no-ui

添加环境变量,命令行输入:

$ vi ~/.bashrc

vim命令: crtl+end-到底部,i-输入,ESC-退出输入,:x -保存退出,:q! -不保存退出vim, :w -保存文档,但不退出vim

添加:

# andoid
export ANDROID_HOME=/home/laker/Downloads/android-sdk-linux #前面压缩包解压地址
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
$ source ~/.bashrc

Ionic Lab

Ionic Lab 是桌面版的开发环境,如果你不喜欢使用命令行操作,可以用 Ionic Lab 编译,运行,和模拟运行Ionic的应用程序。
支持Window、Mac OS X、Linux。已于16年12月停止维护。
备用下载: http://pan.baidu.com/s/1i4GYflV 密码: ac14

查看原文

赞 1 收藏 3 评论 0

江小湖Laker 赞了回答 · 2016-07-27

解决oracle 数据库匹配中文

update 表名 
set 字段= regexp_replace(字段, '[' || unistr('\0391') || '-' || unistr('\9fa5') || ']','')

就可以了,oracle不支持\u或\x

关注 4 回答 2

江小湖Laker 提出了问题 · 2016-07-16

解决oracle 数据库匹配中文

请教一下,Oracle 数据库utf -8,有个表的字段,有中文英文数字符号,如何把中文删除。数据如图。

clipboard.png

我用如下代码测试无效。测试了具体文字可以替换,但是字符集不行。朋友在mysql下用这个字符集测试成功。网上没查到其他办法,有没有人知道什么问题?

update 表名 
set 字段= regexp_replace(字段, '[\\u4e00-\\u9fa5]','')

关注 4 回答 2

江小湖Laker 发布了文章 · 2016-04-12

HTML5上传图片文件(含拖拽、预览、上传、美化)

欢迎交换友链 Laker's Blog--进击的程序媛
Github:https://github.com/younglaker
微博: 江小湖Laker


HTML5上传图片文件.png

上篇文章讲了如何上传文件。本文讲细分讲述图片上传、预览等。

关于接口

File API

  • File - 独立文件;提供只读信息,例如名称、文件大小、mimetype 和对文件句柄的引用。

  • FileList - File 对象的类数组序列(考虑多文件上传或者从桌面拖动目录或文件)。

  • Blob - 可将文件分割为字节范围。

  • FileReader - 读取File或Blob

  • URL scheme

检测浏览器是否支持

// 检测是否支持File API
if (window.File && window.FileReader && window.FileList && window.Blob) {
  //  支持
} else {
  alert('不支持');
}

基本代码

选取一张图片,并预览:
Demo1

<input id="img_input" type="file" accept="image/*"/>
<label for="img_input"></label>
<div class="preview_box"></div>

.preview_box img {
  width: 200px;
}

$("#img_input").on("change", function(e){

  var file = e.target.files[0]; //获取图片资源

  // 只选择图片文件
  if (!file.type.match('image.*')) {
    return false;
  }

  var reader = new FileReader();

  reader.readAsDataURL(file); // 读取文件

  // 渲染文件
  reader.onload = function(arg) {

    var img = '<img class="preview" data-original="' + arg.target.result + '" alt="preview"/>';
    $(".preview_box").empty().append(img);
  }
});

上传到服务器

var form_data = new FormData();
var file_data = $("#img_input").prop("files")[0];

// 把上传的数据放入form_data
form_data.append("user", "Mike");
form_data.append("img", file_data);

$.ajax({
    type: "POST", // 上传文件要用POST
    url: "",
    dataType : "json",
    crossDomain: true, // 如果用到跨域,需要后台开启CORS
  processData: false,  // 注意:不要 process data
  contentType: false,  // 注意:不设置 contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});

拖拽上传

三个相关事件:

  • dragenter

  • dragover

  • drop

原生JavaScript:

Demo2

<div id="drop_zone">Drop files here</div>
<ul id="list"></ul>


// 必须阻止dragenter和dragover事件的默认行为,这样才能触发 drop 事件
function fileSelect(evt) {

  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.dataTransfer.files; // 文件对象
  var output = [];

  // 处理多文件
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate.toLocaleDateString(), '</li>');
  }
  // 显示文件信息
  document.getElementById('list').innerHTML = output.join('');
}

function dragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy';
}

// 监听器
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', dragOver, false);
dropZone.addEventListener('drop', fileSelect, false);

jQuery:

其他代码可以不变,注意监听事件的时候的,由于jQuery的封装,数据存放的字段有变,传参是e.originalEvent而不是e

$("#drop_zone").on('dragover', function(e){
  e.stopPropagation();
  e.preventDefault();
  handleDragOver(e.originalEvent);
});

$("#drop_zone").on('drop', function(e){
  e.stopPropagation();
  e.preventDefault();
  handleFileSelect(e.originalEvent);
});

美化上传框

方法一: 在隐藏的文件输入框上调用click()方法

隐藏掉默认的的文件输入框<input>元素,使用自定义的界面来充当打开文件选择对话框的按钮。要使用样式display:none把原本的文件输入框隐藏掉,然后在需要的时候调用它的click()方法就行了。

<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">选择文件</a>

var fileSelect = document.getElementById("fileSelect"),
  fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();  // jQuery可以使用 trigger()
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

方法二:用label

隐藏input,把样式写到label上,点击label就是对input进行操作。

Demo3

<input id="img_input2" type="file" accept="image/*"/>
<label for="img_input2" id="img_label2">选择文件
    <i class="fa fa-plus fa-lg"></i>
</label>
<div id="preview_box2"></div>


#img_input2 {
  display: none;
}
#img_label2 {
  background-color: #f2d547;
  border-radius: 5px;
  display: inline-block;
  padding: 10px;
}
#preview_box2 img {
  width: 200px;
}
查看原文

赞 35 收藏 150 评论 2

江小湖Laker 回答了问题 · 2016-03-29

解决sublime设置标签栏字体大小的问题

这是一直未解决的BUG,大于12就会被截断
https://forum.sublimetext.com/t/increase...

关注 3 回答 2

江小湖Laker 回答了问题 · 2016-03-28

win7下安装sass失败,提示ruby证书不对?

遇到同样问题,按照https://gist.github.com/fnichol/867550 的步骤执行后顺利通过(需要注销机子)。
不过我是添加到系统变量,不知道是不是这个原因。

clipboard.png

clipboard.png

关注 4 回答 4

江小湖Laker 发布了文章 · 2016-03-04

HTML5+Ajax上传文件

欢迎交换友链 Laker's Blog--进击的程序媛
Github:https://github.com/younglaker
微博: 江小湖Laker


HTML5+Ajax上传文件

HTML

input类型设为file

<label for="img_input"></label>
<input id="img_input" type="file"/>

如果想上传多文件,可添加multiple

<input type="file" name="img" multiple="multiple" />

accept="MIME_type"限制提交的文件类型,用逗号隔开的 MIME 类型列表(服务器端也要最好类型检测双保险),如:

<input type="file" accept="image/gif, image/jpeg" />
<input type="file" accept="image/*"/>

获取文件内容

JavaScript:

var file = document.getElementById('fileToUpload').files[0];

jQuery:

var file = $("#img_input").prop("files")[0];

上传

XMLHttpRequest Level 2添加了一个新的接口FormData。利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件。比起普通的Ajax,使用FormData的最大优点就是我们可以异步上传一个二进制文件。

// 创建
var form_data = new FormData();

// 获取文件
var file_data = $("#img_input").prop("files")[0];

// 把所以表单信息
form_data.append("id", "001");
form_data.append("name", "test");
form_data.append("img", file_data);

$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    processData: false,  // 注意:让jQuery不要处理数据
    contentType: false,  // 注意:让jQuery不要设置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});

多文件上传

方法一 :一次性上传多个文件

如果后台接口允许多文件上传,就把文件存到一个变量后上传。

方法二 :一次性上传多个文件

如果后台接口要求单个文件,就循环获取文件信息提交,Ajax使用同步上传async: false

跨域

JSONP是使用GET方法,无法发送文件。可以让后台开启CORS,Ajax也使用跨域crossDomain: true即可。

$.ajax({
    type: "POST",
    url: "....",
    dataType : "json",
    crossDomain: true,
    processData: false,  // 注意:让jQuery不要处理数据
    contentType: false,  // 注意:让jQuery不要设置contentType
    data: form_data
}).success(function(msg) {
    console.log(msg);
}).fail(function(msg) {
    console.log(msg);
});
查看原文

赞 7 收藏 85 评论 2

江小湖Laker 发布了文章 · 2016-01-05

如何看源码之Ruby China搜索框动画实现

欢迎交换友链 Laker's Blog--进击的程序媛
Github:https://github.com/younglaker
微博: 江小湖Laker

如何看源码之Ruby China搜索框动画实现.png

不要脸的自恋一下——我觉得我看源码的能力越来越强了,2333~

想看到 Ruby China 搜索框动画效果很不错,想试着实现一下。最初我的想法是用jQuery的animate:

$('input').animate({width: 'toggle'});

题外话,toggle值意味着宽度在0和原本宽度之间切换.

如果这样用的话,input就要设为display: none; 并且给input一个初始的长度。

例如 Demo (只做了输入框的显示隐藏)。

但是看 Ruby China 源码没有设置display: none;,有两个属性引起我的注意:width: 0px;transition: all .3s;, 可以猜测这个动画的实现由 transition 实现 width 的渐变。

在不断点击搜索和取消搜索中可以看到,form 上在增加、删除 .active,所以搜索是否被触发的标记绑定在 form 上。

form.png

再看CSS,发现搜索框、查询按钮、关闭按钮都在动画触发后有个新的样式出现,名字如.header .form-search.active .XXX,看到这个.form-search.active就确定他们的动画是通过 form 上的 .active 来标记的。

然后我抠出以下主要代码:

本例中将会用到JavaScript触发 CSS transition ,详细介绍请看我的另一篇文章《花式使用CSS3 transition》

HTML:

    <div class="header">
      <div class="search-block">
        <form class="navbar-form form-search" action="/search/all" method="get">
          <div class="form-group">
            <input class="form-control search-box" name="searchKey" type="text" value="" placeholder="搜索本站内容">
          </div>
          <i class="fa btn-search fa-search"></i>
          <i class="fa btn-close fa-times-circle"></i>
        </form>
      </div>
    </div>

CSS:

.header {
  width: 250px;
  height: 50px;
  position: relative;
  display: block;
}
.search-block {
  float: right;
}
.header .form-search .fa {
    color: #333;
}
.header .form-search {
    font-size: 14px;
    position: relative;
    margin-top: 13px;
    margin-right: 10px;
    padding: 0 15px;
    width: auto;
}
.header .form-search .form-control {
  font-size: 12px;
  border: none;
  width: 0px;
  height: 100%;
  padding: 6px 1px 4px 1px;
  margin-left: 4px;
  background: transparent;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
  box-sizing: border-box;
  color: #333;
}

//输入框的动画部分
.header .form-search.active .form-control {
    width: 150px !important;
    cursor: text;
}
.fa-search:before {
    content: "\f002";
}
.header .form-search .fa-search {
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 0;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

// 搜索按钮的动画部分
.header .form-search.active .fa-search {
  left: 0;
  right: auto;
}
.header .form-search .btn-close {
  position: absolute;
  top: 6px;
  right: 0px;
  cursor: pointer;
  -webkit-transform: scale(0, 0);
  -moz-transform: scale(0, 0);
  transform: scale(0, 0);
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  transition: all .3s;
}

// 取消搜索的动画部分
.header .form-search.active .btn-close {
  -webkit-transform: scale(1, 1);
  -moz-transform: scale(1, 1);
  transform: scale(1, 1);
}

JavaScript:

  $('.btn-search').on('click', function() {
    $('.form-search').addClass('active');
  });

  $('.btn-close').on('click', function() {
    $('.form-search').removeClass('active');
  });

View Demo

小结

我也不是一眼就看出来的,抠这个效果花了大半天,也是蛮菜的。

分享自己一点点小经验:

  • 长期写代码的经验积累

  • 多猜测多尝试,不断重复原网站的效果,看看代码有什么变化

  • 把想到的关键词就google一下,也许能得到启发

  • 多看源码,刚开始很累,后来就习惯的。我经常会看各种网站源码,框架也大致看过jQuery、Framework 7。前端这块的源码还是比较容易看的。

  • 多模仿多练习。光看别人的代码不够,试着用自己的方式写写,然后对照别人的代码比对不足。我仿jQuery写了Octjs,仿jCanvas写了EasyCanvas(我从初学开始就有个毛病,如果不能理解一个框架、插件的原理,我用着心里就不踏实 >_<)。

想起老博客里写过读豆瓣源码的文章,是我大三时候写的,当时也比较稚嫩,算是第一次看复杂源码,毕竟文件多、代码已压缩混淆。以供参考:《豆瓣绑定事件的方法初探》 (大学时候的博客真是蛮逗比的,哈哈)

查看原文

赞 0 收藏 2 评论 2

认证与成就

  • 获得 573 次点赞
  • 获得 16 枚徽章 获得 0 枚金徽章, 获得 3 枚银徽章, 获得 13 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

  • Pixeler

    设计像素图片(拼豆)的应用。主要用到HTML 5 Canvas,主要功能有:绘制/删除像素点、更换像素颜色/形状、自定义画布。技术难点是像素点的定位和计算。还在持续完善。

  • EasyCanvas

    Canvas 绘图库。原生JavaScript,不依赖其他库,主要功能:绘制线条、矩形、正方形、弧线、曲线、圆、文字等。比其他Canvas库更方便连续绘图。

  • OctJs

    仿jquery链式结构的JavaScript框架。基本功能:选择器、修改/获取样式、检测浏览器、事件绑定、Ajax等。还在持续完善。

注册于 2013-10-23
个人主页被 2.8k 人浏览