yjxf8285@qq.com

转载

JS编码风格

Posted By 刘晓帆 | 132 views

介绍
作者根据Robert C. Martin《代码整洁之道》总结了适用于JavaScript的软件工程原则《Clean Code JavaScript》。
本文是对其的翻译。
不必严格遵守本文的所有原则,有时少遵守一些效果可能会更好,具体应根据实际情况决定。这是根据《代码整洁之道》作者多年经验整理的代码优化建议,但也仅仅只是一份建议。
软件工程已经发展了50多年,至今仍在不断前进。现在,把这些原则当作试金石,尝试将他们作为团队代码质量考核的标准之一吧。
最后你需要知道的是,这些东西不会让你立刻变成一个优秀的工程师,长期奉行他们也并不意味着你能够高枕无忧不再犯错。千里之行,始于足下。我们需要时常和同行们进行代码评审,不断优化自己的代码。不要惧怕改善代码质量所需付出的努力,加油。
变量
使用有意义,可读性好的变量名
反例:

JavaScript

1

var yyyymmdstr = moment().format(‘YYYY/MM/DD’);


Read More

HTML/CSS

HTML标签-英文全称对照表

Posted By 刘晓帆 | 226 views

HTML标签
英文全称
中文释义

a
Anchor

abbr
Abbreviation
缩写词

acronym
Acronym
取首字母的缩写词

address
Address
地址

dfn
Defines a Definition Term
定义定义条目

kbd
Keyboard
键盘(文本)

samp
Sample
示例(文本

Read More

Plugins/Tools

浏览器文本复制到剪贴板

Posted By 刘晓帆 | 759 views

github上面的这个复制功能如何实现的呢?

 
 
 
解决方案: clipboardjs插件
插件官网:https://clipboardjs.com/
使用方法:
HTML
<div className="testtitle copy-btn btn" data-clipboard-text="http://www.baidu.com">copy</div>

JS
var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);

Read More

OS

win10下磁盘100%的解决方案

Posted By 刘晓帆 | 422 views

升级到win10后发现系统经常会有卡顿的感觉,原因主要是以下2点
1 oneDrive
2 家庭组
上面两个功能会十分频繁的读写硬盘,所以还得禁用掉比较。
1 oneDrive的禁用方法比较简单,直接右键图标退出即可。
2 家庭组需要禁用掉系统服务,步骤如下:
进入计算机管理-服务,找到“HomeGoup Listener”与“HomeGroup Provider”两项服务,右键单击进入“属性”,停止运行后设置启动类型为“禁用”。

Read More
  • win10下磁盘100%的解决方案已关闭评论
  • 7 months ago

Plugins/Tools

Material Design在线配色工具

Posted By 刘晓帆 | 747 views

工具地址:http://www.materialpalette.com/
之前对比过很多配色工具,Material Design提供的方案还是很漂亮的,非常喜欢这种风格。
Material Design 的一些重要功能包括 系统字体Roboto的升级版本 ,同时颜色更鲜艳,动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架,从而让所有应用就有统一的外观,就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计,包括安卓和网页端的Gmail和Calendar。大家可能还会记得,看到过有关这些变动的文章, 有些博客 已经掌握了外泄截屏,显示经过了重新设计的Gmail,界面更干净、更简约。在安卓平台上,这种新界面被称为Material,支持各种新动画效果,具有内置的实时UI阴影,以及可在不同屏幕之间切换的hero元素。

Read More
  • Material Design在线配色工具已关闭评论
  • 9 months ago

Plugins/Tools

HTML to JSX 转换工具

Posted By 刘晓帆 | 1,199 views

提供一个html转jsx的在线工具。
地址:http://liuxiaofan.com/tojsx/
说明:
场景,进行react代码重构的时候,要把之前写好大量的html代码复制到js文件里面。因为jsx的一些语法规则导致了要修改很多HTML标签属性名称,诸如class变成className之类的。这时候你可能会想,如果有一个能够一键转换的工具就好了。把普通的html代码复制到左边的框框里面,然后右边的窗口就会出现转译好的jsx代码……

Read More

Plugins/Tools

HTML5 Sortable – jQuery拖放排序插件使用方法

Posted By 刘晓帆 | 722 views

插件下载地址:http://liuxiaofan.com/download/html5sortable.tar.gz
特点

很轻量,压缩后体积小于1KB
基于HTML5原生的darg和dorp方法
支持列表和网格风格布局2种布局
文档类似于jQuery UI的sortable插件
兼容IE 5.5+, Firefox 3.5+, Chrome 3+, Safari 3+, and Opera 12+

如何使用?
基本的DOM结构和运行脚本。
<ul class="sortable">
<li>Item 1
<li>Item 2
<li>Item 3
<li>Item 4
</ul>
<script src="jquery.sortable.js"></script>
<script>
$('.sortable').sortable();
</script>
使用了2种样式用于区别拖拽中.sortable-dragging和拖放占位.sortable-placeholder。
使用

Read More
  • HTML5 Sortable – jQuery拖放排序插件使用方法已关闭评论
  • 9 months ago

JavaScript

直接事件和委托事件

Posted By 刘晓帆 | 1,201 views

有人问过我一个问题,如下

$(‘ul li’).on(‘click’, function () {
//todo
});
$(‘ul’).on(‘click’,’li’, function () {
//todo
});

上面这2段代码的区别是什么?
其实jquery的官网文档中有详细的解释,第1段的意思是把事件直接绑定在li上面,如果有1000个li,那么就相当于绑定了1000次li。而且只能绑定到文档中已经存在的Li上面,后续添加的li是绑定不上的,比如通过ajax添加进去的新的li。 这就是直接事件绑定。
第2段是委托事件,也叫代理事件,只绑定了一次事件到li上面,也可以监听到后续添加的li。

Read More

Plugins/Tools

iScroll 5 API 中文版

Posted By 刘晓帆 | 1,279 views

前言
最近项目上需要使用iScroll,在中文圈里找了找,只找到了iScroll 4的中文版API。加上最近开始使用github(准确说,github账号是很多年前注册的,一直在企业应用里摸爬滚打,荒废了账号很长时间,是理由吗?是理由吗?),出于对开源社区的敬意,我突然觉得应该做点啥,于是先挑一个简单点儿的,把iScroll 5的API翻译一下,方便中文用户使用。
搭后语
iScroll对于我来讲典型的应用场景位于移动设备的App,基于Cordova/Phonegap + JQM + iScroll开发移动设备上的App,对于以数据呈现为主体的企业应用来讲无疑是一个多快好省的解决方案。这三驾马车前两个可以堂而皇之的称之为开发框架,iScroll只能称之为工具,尽管如此,iScroll带来的强大的滚动功能,能节省我们在项目开发上的部分时间(这也是开源社区的力量),所以也值得我花时间理解作者的代码和文档。如果您认同这种功劳苦劳,请到github上给我一个star。由于才疏学浅,在翻译过程中难免会有错误或者瑕疵,请在issure中提出,我会及时更正。

Read More

HTML/CSS

CSS3 点击放大动画实例

Posted By 刘晓帆 | 1,606 views

需求:点击商品图片右上的收藏按钮触发放大动画;
技术重点css3:@keyframes animation

<!DOCTYPE html>
<head>
<style type="text/css">
@keyframes myfirst {
0% {

Read More