文章列表
林鑫 于 2天前发表 121 0 0
本文采用vue2.0+vuex+localStorage+sass+webpack,实现一个本地存储的记事本。兼容PC端和移动端。在线预览地址: DEMO [http://test.omwteam.com/] 功能说明 * 支持回车添加事件 * 支持事件状态切换 * 添加事件 -> 进入未完成列表 * 未完成 -> 已完成(勾选checkbox) * 未完成 -> 已取消(点击取消按钮) * 已完成 -> 未完成(取消勾选checkbox) * 已取消 -> 未完成(点击恢复按钮) * 支持控制台打印所有事件数据 * 支持筛选事件 * 支持编辑事件 * 支持删除事件 * 支持清空所有事件 * 支持本地化存储 * 支持折叠面板 项目笔记 本项目是使用vue-cli脚手架生成的项目,项目代码可以到我的github上clone下来。clone下来之后可进入文件目录 // 执行 npm install // 安装依赖完成之后再执行 npm run dev
2天前
javascript技术
jaychen 于 15天前发表 331 0 0
[http://7tszky.com1.z0.glb.clouddn.com/FrmeYH8QpSzTaDCZkd_77dWsucBJ] 一、变量 * 使用语义化的变量名称 Bad const yyyymmdstr = moment().format('YYYY/MM/DD'); Good const currentDate = moment().format('YYYY/MM/DD'); -------------------------------------------------------------------------------- * 使用可搜索的名称 通常我们读代码比写得多,所以代码都可读性以及可搜索性非常重要。如果对变量不负于语义化、易理解的名字,代码的阅读者将非常痛苦。buddy.js以及ESLint能够帮助我们定位未命名的常量。 Bad // 86400000 是什么鬼? setTimeout(blastOff, 86400000); Good
15天前
javascript技术
黎清龙 于 25天前发表 274 2 0
DECORATOR 学习小结 1. DECORATOR 是什么 decorator 是装饰者,是 ES7 的语法。 decorator 本质是一个 wrapper,可以动态增强【类】,【实例方法】的能力 被装饰者对于装饰者是毫无感知的 读者如果感兴趣,可以深入学习【装饰者模式】 要注意的是,在 ES7 中,decorator 只是一个语法糖而已,和 class 这些一样 可以参考 babel 转换之后的 ES5 代码 2. DECORATOR 的用法 2.1. 作用在类方法上 decorator 可以在定义类的时候,作用在类方法上,见下面的例子: functionreadonly(target, key, descriptor) { descriptor.writable = false; return descriptor; } classPeople{ @readonly sayName() { console.log(this.name); } } var p = new People();
25天前
javascript技术
aresnliang 于 1个月前发表 1017 0 2
[http://7tszky.com1.z0.glb.clouddn.com/FqtYuU--4FP-FRCrEdh0OtuRfBA1] 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 iView [https://github.com/iview/iview] 项目。 初识 VUE 第一次接触 使用 Vue.js 已经有一年半时间了,在接触 Vue 之前,有写过半年多的 Angular,所以刚了解 Vue 时,与很多开发者一样,认为 Vue 是一个轻量级的或是移动端的 ng,就好比 zepto 之于 jQuery。直到 15 年 10 月,打算用 Vue 开发一个个人项目时,才开始认真地学习它,发现 Vue 的使用方法和 API 设计如此优美简洁,而且中文文档甚是详细,我觉得这也是 Vue 受很多中国开发者喜爱的原因,许多初中级开发者、英文不好的、jQ导向的,在刚接触 MVVM 时,这点很有价值,再者 Vue 的使用和学习门槛相比 ng 和 React 的要求都要低,概念理解起来也容易。
1个月前
javascript技术
结一 于 2个月前发表 609 0 0
在DOM操作时代,tabs的结构一般如下: div.tabs ul.tabs-hd li.hd-tt*n div.tabs-bd div.bd-con*n 然后通过判断 li.hd-tt 的索引值来控制对应的 div.bd-con 的显示隐藏,由此封装成一个非常高效率的组件。 到了以React为代表的数据变化引起UI更新的时代,基于上面方式实现的tabs组件还是非常多的,以Ant Design,IMUI为例,都是这种实现方式。 那么现在我的问题是:在React中,tabs组件是否真的还需要按照这种显示隐藏多个 div.bd-con 的方式? 关于这个问题,这里抛出两个支撑观点: * 在使用tabs组件的时候,需要维护一个state来控制各个tab的切换 * 一般来说各个tab的内容结构多半相似甚至相同,只是数据不同而已 基于这两点,简化版本的tabs其实只需要 ul.tabs-hd 部分,对于内容部分,根本不需要放到tabs里面去封装成组件
2个月前
javascript技术
ouven ,https://ouvens.github.io/ 于 2个月前发表 1269 0 0
2016年结束了,前端技术的发展也将进入到一个新的阶段,那么未来又会给我们带来什么呢?这里就个人发表下意见,欢迎点评。 就前端主流技术框架的发展而言,过去的几年里发展极快,在填补原有技术框架空白和不足的同时也渐渐趋于成熟。未来前端在已经趋向成熟的技术方向上面将会慢慢稳定下来,并进入技术迭代优化阶段,例如语言标准、前端框架等。但这并不代表前端领域技术就此稳定了,因为新的技术方向已经出现,并在等待着下一个风口的到来。那么什么是下一个风口?虚拟现实?人工智能?或者其它的?不管未来如何,就前端应用开发方向来讲,MVVM、Virtual DOM和同构的技术解决方案依然会延续发展一段时间。而且这段时间内前端框架技术的变化将不会像原来一样具有颠覆性。 当 MVVM、Virtual DOM或同构等技术实践都有很成熟高效的框架和方案去实现了。那么对于移动端应用,前端要重点发展的下一步可能就是MNV 的原生NativeView开发,例如使用通用的MNV
2个月前
javascript技术
孙世吉 于 2个月前发表 529 0 0
1. 尾递归 说起 尾递归 就不能不提一下 尾调用(Tail Call) 。 尾调用:在函数的最后一步调用另外一个函数。 functionfunc(){ // ... other codereturn otherFunc();// 尾调用 } 尾递归:在函数的最后一步调用自身 functionfunc(){ // ... other codereturn func();// 尾递归 } 2. 尾调用和非尾调用 说到递归,那就必然要以斐波那契数列为例子 [http://7tszky.com1.z0.glb.clouddn.com/FnBilj1jvdqTOG8EkuDnazoeLKZg] 斐波那契数列(Fibonacci sequence),又称黄金分割数列、因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一个数列:1、1、2、3、5、8、13、21、34、…… 简单的说,斐波那契数列中的每一项都是前两项的和。
2个月前
javascript技术
ShiJianwen 于 2个月前发表 383 0 0
原文链接: https://dotdev.co/clean-up-your-vue-modules-with-es6-arrow-functions-2ef65e348d41#.vkndfgci3 [https://dotdev.co/clean-up-your-vue-modules-with-es6-arrow-functions-2ef65e348d41#.vkndfgci3] 众成翻译地址: http://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev-1872.html [http://www.zcfy.cc/article/clean-up-your-vue-modules-with-es6-arrow-functions-dotdev-1872.html] 最近在重构一个用 Vue1.0 写的项目,我通过使用 ES6 的箭头函数来让代码在不升级 Vue2.0
2个月前
javascript技术
ouven ,https://ouvens.github.io/ 于 3个月前发表 736 0 0
原文链接: http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html [http://jixianqianduan.com/frontend-javascript/2016/11/22/front-end-auto-test.html] 前端测试一直是前端项目开发过程中机器重要的一个环节,高效的测试方法可以减少我们进行代码自测的时间,提高我们的开发效率,如果你的代码涉及的测试用例较多,而且项目需要长期维护,这时就可以考虑使用一下自动化测试了。 一、前端自动化测试 前端自动化测试一般是指是在预设条件下运行前端页面或逻辑模块,评估运行结果。预设条件应包括正常条件和异常条件,以达到自动运行测试过程、减少或避免人工干预测试的目的。在前端自动化测试中,我们通常是通过不同的工具来解决不同场景下不同的问题的。就测试类型来看,主要分为BDD(Bebavior Driven Developement,行为驱动测试)和TDD(Testing Driven
3个月前
javascript技术
否子戈 于 3个月前发表 1583 0 0
ES6标准发布后,module成为标准,标准的使用是以export指令导出接口,以import引入模块,但是在我们一贯的node模块中,我们采用的是CommonJS规范,使用require引入模块,使用module.exports导出接口。 不把require和import整清楚,会在未来的标准编程中死的很难看。 REQUIRE时代的模块 node编程中最重要的思想之一就是模块,而正是这个思想,让JavaScript的大规模工程成为可能。模块化编程在js界流行,也是基于此,随后在浏览器端,requirejs和seajs之类的工具包也出现了,可以说在对应规范下,require统治了ES6之前的所有模块化编程,即使现在,在ES6 module被完全实现之前,还是这样。 node的module遵循CommonJS规范,requirejs遵循AMD,seajs遵循CMD,虽各有不同,但总之还是希望保持较为统一的代码风格。 // a.js// -------- node -----------module.exports = { a : function() {}, b : 'xxx'
3个月前
javascript技术
否子戈 于 4个月前发表 645 0 1
ES6真是颠覆JavaScript的东西,随便翻一个新特性出来,就让自以为是的老古董们傻眼跳楼。在之前接触ember.js的时候,接触到了yield,嫩是半天没明白,yield到底是什么,想要实现什么目的。后来在看ES6的东西的时候,总算好像知道了一点,迫不及待的写出来。 在MDN上,对yield的第一句解释就是: The yield keyword is used to pause and resume a generator function. // yield这个关键字是用来暂停和恢复一个遍历器函数(的运行)的。 这也就是yield的所有解释了,可谓大道至简,然并卵,深层的意思不去挖掘,根本还是没法用它,还是老老实实做老古董。 关键字YIELD 没错,yield是个关键字,不是函数。关键字用来干啥?它的作用是“命令”。和var不同,不是用来声明,但是和return一样,用来告知程序某种状态,return告诉程序要返回什么值(也意味着结束,结束的时候才会返回值嘛),而yield告诉程序当前的状态值,而且你运行到这里给我暂停一下。 因为yield是命令型的关键字,所以它的用法是:
4个月前
javascript技术
zzbozheng 于 5个月前发表 873 0 0
最近听到有同学在讨论关于数据上传遇到离线的问题,因此在这里介绍一下PouchDB。 PouchDB 是一个开源的javascript数据库,他的设计借鉴于Apache CouchDB,我们可以使用他来打造浏览器的离线应用。 如果你要使用PouchDB,那么建议你的远程数据库使用CouchDB,那样的话可以更好地协调起来。 建立数据库 const localDB = new PouchDB('docs'); const remoteDB = new PouchDB('http://localhost:5984/docs'); 同步本地数据到远程数据库 PouchDB API 提供了方法可以让你备份本地数据到服务器: sync。 live: true 表示如果数据一发生变更,就立即同步到远程服务器。 retry: true 表示如果在离线状态下导致同步失败之后,会自动重新尝试重连,直到连接建立成功为止。该选项在 live:true 时生效。代码如下: const sync = localDB.sync(remoteDB, { live: true, retry: true });
5个月前
javascript技术