- 博客(22)
- 收藏
- 关注
RSS订阅原创 webpack VS parcel
webpack VS parcelparcel 最大的特点就是简单，内置常见依赖，默认支持模块热替换和引用 CSS 文件。webpack 4.0 在优化构建性能的同时，也添加了许多默认配置。（重大变化：点我） 特性 webpack parcel 文件名添加 hash 支持 不支持 构建时处理 css 需配置 易 tree-sha...
2018-03-28 20:11:47
1304
原创 前端 MVVM 原理
author: 陈家宾email: [email protected]: 2018/3/1MVVM 背景都说懒惰使人进步，MVVM 的进化史，正印证了这句话，是一步步让开发人员更懒惰更简单的历史： 直接 DOM 操作 -> MVC -> MVP -> MVVM最开始的前端交互，是很直接的 DOM 操作，最出名的这类库当数 jQuery 了，封装...
2018-03-01 15:27:45
3311
原创 AlloyFinger web 手势学习
从 [长按] 开始学习 web 手势在项目开发过程中遇到有虚拟键盘开发的需求（如下图），其中删除键需要实现 长按 删除输入框全部内容，由此展开今天要讨论的 web 手势 开发内容。先放出实现代码：var $input = document.getElementById('input');var $delBtn = document.getElementById('delBtn')...
2018-02-26 18:01:28
1055
原创 JS 实现抛物线动画
author: 陈家宾email: [email protected]: 2018/2/24在做小程序的项目中，需要在添加购物车的时候，增加抛物线小球动画。先给大家看下效果图（其实已经是实现后的效果了，顺便给自己公司打广告了哈哈）分析这种不固定起始位置的动画，自然不能用 gif 图，所以只能用原生代码实现那我们有什么工具来实现动画呢？小程序提供了 JS AP...
2018-02-24 14:29:06
623
原创 为什么选择前端
起源和前端的缘分起始于大学时候的一个创业项目，当时技术比较闭塞，用的是 php 和静态前端的结合开发模式，自此结缘。到踏入社会的前一刻也没想好从事前端，所以实习的时候去两家公司分别尝试了 php 和前端开发。定心一番思索后，才选择了前端。首先，为什么不是 phpphp 一度被业界认为是“最好的语言”（其实现在也是，不过总感觉是一个哏，存粹是玩笑话），但 2016 年的 php ...
2018-02-08 17:15:06
2952
1
原创 2017 年前端开发工作总结
从实习到现在，身为前端开发已有两个年头了，如果以一个词来形容，2016 年是成长，2017 年则是责任。2016 年刚踏入职场那会，什么都是新的，新的圈子，新的技术，新的环境，有大量的东西需要我去学习和适应，成长飞快。2017 年，在技能把握度渐趋成熟后，肩上承担的责任也越来越多，更注重代码质量（缓存 & 优化）和开发效率（自动化），参与一个项目迭代开发的同时，也在年初和年末分别负...
2018-02-08 15:50:51
5680
原创 JavaScript 面向对象
当我们需要创建大量的对象时，字面量创建将会导致过多的重复代码，为了解决这个问题，我们创造了一些设计模式来创建对象创建对象工厂模式function createPerson(name, age, job) { var o = new Object() o.name = name o.age = age o.job = job o.sayName ...
2018-02-02 16:47:11
157
原创 js 闭包
author: 陈家宾([email protected])date: 2018-1-29什么是闭包（closure）在我们最通俗的理解里，闭包就是函数里反回函数，不过自从看了小绿书《JavaScript 权威指南》后，发现这个解释其实是错的 函数对象可以通过作用域链相互关联起来，函数体内部的变量都可以保存在函数作用域内，这种特性在计算机科学文献中称为“闭包”。 从技...
2018-01-29 21:03:54
296
原创 前端自动构建工具 -- fis
date: 2017/11/9author: henry chen为什么需要构建工具在日常开发过程中，会经常遇到以下两个问题更新的代码在用户的浏览器上不能及时清除缓存怎么办啊压缩代码总得一个一个处理好麻烦这个时候构建工具就派上用场了，构建工具除了能快速解决以上问题外，还能有效解决以下问题性能优化资源加载（异步、同步、按需、预加载、依赖管理、合并、内嵌）模块化开...
2017-12-26 11:08:07
514
原创 使用 webpack 引用 zepto
作者：陈家宾日期：2017-12-15背景由于 zepto 库本身不支持 CommonJs 规范，不支持 import/export，所以不能直接以 import 的形式引入，所以这里需要做一些特殊处理处理方法方法一：引用 zepto-webpack 库安装 npm i -D zepto-webpack 引用 import $ from 'zep...
2017-12-15 11:43:18
3601
2
原创 nodejs 爬虫
一个 nodejs 的爬虫示例，此处用于抓取 hexo 所有主题，并排序输出关注（star）排行代码https://github.com/henry-fighting/nodejs-crawler使用方法安装依赖包 npm install执行指令 node server.js到浏览器访问 localhost:3000背景玩 hexo 时苦于找不到好的主题，上知乎...
2017-07-19 11:26:50
494
原创 HTML 5 新特性
兼容性问题IE 6 ~ 8 不支持 HTML 5在中国，微软的IE浏览器排名第二，其份额为27.27%； IE9的份额为11.88%IE8的份额为10.41%IE7的份额为3.17%IE10的份额为1.81%）数据来源于百度统计所覆盖的超过150万的站点IE 的市场份额不算小，故需使用以下文件做兼容处理 The HTML5 Shiv，https://github....
2017-06-20 11:21:13
405
原创 性能优化
图片源压缩（戳我）阿里云对象存储 OSS -> 图片处理图片压缩 & 图片水印 & 图片格式 根据页面需要采用规定大小的图片，避免消耗不必要的流量根据浏览器采用最优图片格式（如 webp）使用方法萌小店商品图片服务域名：img.shopping.vd.cnhttp://img.shopping.vd.cn/online/upload/201610...
2017-05-27 04:14:54
298
原创 针对微信分享限制的解决方案
微信分享限制内容 为规范自定义分享链接功能在网页上的使用，自2017年4月25日起，JSSDK“分享到朋友圈”及“发送给朋友”接口，自定义的分享链接，其域名或路径必须与当前页面对应的公众号JS安全域名一致，否则将调用失败。 参考资料：戳我也就是说，开发者在做分享的时候，把分享链接设为与当前页面不同的其他域名的行为，微信不再允许。为什么需要把分享设成其他域名呢功能需...
2017-04-13 16:28:11
21073
原创 倒计时有三种写法
定时器有三种实现方法setTimeoutsetIntervalquestAnimationFramesetTimeoutvar a = 10;var date = new Date();setTimeout(function () { console.log(a--); if (a>=0) { setTimeout(arguments....
2017-02-17 20:38:41
3465
原创 数组去重
1. indexOffunction unique(arr) { return arr.filter(function (item, index) { return arr.indexOf(item) === index; })}function unique(arr) { var ret = []; arr.forEach(funct...
2017-02-15 15:58:54
229
原创 解决 zepto 中 serialize 方法跳过未选中的 checkbox 问题
背景使用 zepto 的 serialize 方法生成字符串用以表单提交时，发现该方法会跳过未选中的 checkbox 原因： disabled 的表单元素，button，未选中的radio buttons/checkboxs 将会被跳过。结果不包含file inputs的数据。解决方法：后期添加 使用 serialize 方法后，检查 checkbox 是还被选中，若...
2017-01-18 14:38:05
2384
原创 JS 代码中到底加不加分号
背景在写自动执行函数时vm.$watch('datas', function() { console.log(vm.datas);})(function () { console.log('test');})()出现莫名错误： Uncaught TypeError: vm.$watch(…)(…) is not a function解决方法：...
2017-01-16 18:25:35
7885
2
原创 Vue 在购物车场景下的应用
购物车场景需求：商品、店铺、购物车的选择商品删除测试数据var _list = [{ checked: false, goods: [{ name: "商品1", price: 23, checked: false }]}, { checked: false, goods: [{ ...
2017-01-16 18:17:58
1915
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人