文章列表
王少飞 于 1年前发表 2212 3 0
-------------------------------------------------------------------------------- react的核心思想:组件封装。 页面的所有元素都是可以封装成组件 react包含以下几个概念 1 组件 2 JSX 3 Virtual DOM 4 Data Flow 组件 react应用都是构建在组件之上的。页面上,和用户有交互的结构、动态的元素、可以复用的结构,都可以封装成组件。这个组件就是继承react子类的一个类,提供jsx和数据实例化后,通过这个类的api,就可以使用。好处就是,灵活控制。 JSX 直接的表现就是:在js代码中写html代码。这样做的原因就是,比如你要引入一个组件时(比如用户信息木块),直接引入组件js,不用关心html模板,但还是要考虑css。写在js中的html,也并不是直接放到线上页面的,而是经过react处理后,再放到页面的。 VIRTUAL DOM 虚拟dom是react为提升页面渲染性能实现的技术,我们使用react开发时并不需要另外注意什么。 DATA FLOW
1年前
javascript技术
ouven ,https://ouvens.github.io/ 于 1年前发表 1443 1 1
【原译】JAVASCRIPT中的正确错误处理 A Guide to Proper Error Handling in JavaScript [http://www.sitepoint.com/proper-error-handling-javascript/] 这是关于JavaScript中异常处理的故事。如果你相信 墨菲定律 [https://en.wikipedia.org/wiki/Murphy's_law] ,那么任何事情都可能出错,不,一定会出错!这篇文章中我们来看下JavaScript中的出错处理。文章会覆盖异常处理使用的正反例,然后看下ajax的异步处理。 JavaScript的事件驱动机制让JavaScript更加丰富,浏览器好比就是一个事件驱动的机器,错误也是一种事件。当一个错误发生时,一个事件就在某个点抛出。理论上,有人会说错误是Javascript中的简单事件。如果你觉得是这样,那你就要好好去看看了。另外这篇文章只关注浏览器端的JavaScript的情况。 这篇文章将在《 Exceptional Exception Handling in JavaScript
1年前
javascript技术
devinran ,唯封建与迷信难养也 于 1年前发表 3487 1 0
VUE.JS笔记——指令 跟ng的指令系统类似,vue也拥有一套指令系统。 所谓 指令 ,其实本质就是在模板中出现的特殊标记,根据这些标记让框架知道需要对这里的 DOM 元素进行什么操作。 简单示例 <pv-text="msg"></p> 这里v是vue的前缀(如果是Q.js就是q前缀= =),text是指令ID,msg是expression。msg作为viewModel,当它的值发生改变时,就触发指令text,重新计算标签的textContent(innerText)。 这里expression可以使用内联方式,在任何依赖的属性变化时都会触发指令更新。 <pv-text="'hello ' + user.name + ', ' + time"></p> 内联表达式中只能访问当前上下文的vue实例的属性和方法 内联表达式只能是单一语句 对于某些指令需要在表达式之前添加参数,比如事件绑定: <spanv-on="click:openComment"></span> 使用逗号分割绑定多重指令
1年前
javascript技术
张颖 ,认真认真 于 1年前发表 1353 1 0
不管是什么项目,总有一些基本的功能函数默默的躺在你的工具库中,为你遮挡bug,提升性能,一起来复习下! DEBOUNCE 当监听一些scroll,resize事件时,如果我们什么都不限制,srcoll事件在滚动过程中会一直触发,极大的影响性能,这个时候,就需要节流函数debounce。debounce函数返回一个函数,在给定的时间间隔下,连续被调用将不会触发。 /* 事件停止被触发N秒后才会再次触发回调 * @param {Function} func - 回调执行函数 * @param {String} wait - 触发间隔 * @param {Boolean} immediate - 是否延时执行 */functiondebounce(func, wait, immediate) { var timeout; returnfunction() { var context = this, args = arguments; var later = function() { timeout = null;
1年前
javascript技术
闻七 于 1年前发表 853 1 0
小伙伴们: 晚上好!节假日后上班头一天,你们的心情不知道是否和我一样,有点疲惫有点累呢? 休假第一天,公司团建去了某某水库BBQ,我们吹着河风烤着土豆茄子人生惬意的不得了,5点回来倒头就睡 休假第二天,约了闺蜜探访北京最具优雅气息的书店——中途外文书店,后边配图哈,真的是美的不要不要的,8点回来倒头就睡 休假第三天,陪个熊孩子大早上的冲进北京欢乐谷,可是为嘛坐个海盗船我都觉得快歇菜了,难道我真的老了emoticon,9点回来倒头就睡 以上是我的休假,我不会告诉你们休假第一天我倒头就睡后9点醒来准备回公司补上当天的分享,后面我一咬牙,觉得不能给大伙这么大压力,大家都在休假呢,我这么忙活不是非让大家抽出时间来浏览一下我这天的心得么!哎呀,作为一个全宇宙中心地带旁边一点儿生长着的善良孩子,我决定给大伙放三天假,然后接着倒头就睡~ 接下来是今天的分享:今天我只做了一件事——筛选
1年前
javascript技术
黎清龙 于 1年前发表 1203 2 0
数据字段防卫探索 这个标题不知道怎么取,估计没人看得懂,还是直接看背景吧 -_-!! 背景 某天,小Y借到一个需求:页面这里要展示一个列表,cgi数据字段是xxxlist 太简单了,几分钟的事情: DB.getData({ // ... succ: function(data) { for (var i = 0, l = data.result.xxxlist.length; i < l; ++i) { showItem(data.result.xxxlist[i]); } } }); 自测,免测发布,完美! 但是,没过多久,客服接到一堆的用户投诉,xxx页面打开白屏! 小Y吓了一跳,怎么可能,刚刚那个代码那么简单,绝对不会出错的! 用用户投诉的页面,打开控制台一看: 发现报了一个错: [http://7tszky.com1.z0.glb.clouddn.com/Fp33F0Do4j8brOAfHCWUkjTeiaIh] 排查之后发现,原因是 data.result.xxxlist 是 undefined
1年前
javascript技术
谢华良 于 1年前发表 1985 4 0
最近看了一篇文章,“30行代码实现Javascript中的MVC”,原文链接: http://www.jqsite.com/notes/1603205925.html [http://www.jqsite.com/notes/1603205925.html] ,受益良多,在此记录下学习的心得。 提到MVC,基本都会从一些框架开始,比如angularJs之类的,要在短时间内透过复杂的框架看到某一种设计模式并非是一件容易的事情。那么如何通过最简单的代码实现一个简单的MVC呢? 1. MVC的基础是观察者模式,这是实现Model与View同步的关键。 functionModel(value){ this._value = typeof value === 'undefined' ? '' : value; this._listeners = []; } Model.prototype.set = function(value){ var self = this; self._value = value;
1年前
javascript技术
link ,除了分享,也是知识管理。 于 1年前发表 7028 5 4
WHY REGULAR EXPRESSION 我们先来看看,我们干哈要学正则表达式这玩意儿: * 复杂的字符串搜寻、替换工作,无法用简单的方式(类似借助标准库函数)达成。 * 能够帮助你进行各种字符串验证。 * 不止应用于编程语言中: JavaScript、JAVA、Perl、PHP、C#... * 也应用于许多操作系统的主流指令中: Linux/Unix、Mac、Windows PowerScript 在我们常用的开发工具中,如Fiddler Willow、WebStorm、Vim,正则表达式也能帮助我们方便的进行Find>Replace的工作。 由于正则表达式的流派很多,这篇文章主要是描述JavaScript中的正则表达式。 介绍点语法 定义 所谓正则表达式,就是一种描述字符串结构模式的形式化表达方法。 这是 《精通正则表达式》 [https://book.douban.com/subject/2154713/] 对于它的定义,反正我看了这句话还是不知道正则表达式是干嘛用的,不过没关系,下面我们先来看一下JavaScript的正则表达式中一些常用的语法。 创建方式
1年前
javascript技术
forsigner 于 1年前发表 860 0 0
碎碎念 这是一篇早就应该写的文章,但是由于过年前项目紧张,一直没有时间,这个周末决定把这笔债换了。这个项目开始于两个月前,也是花了比较多时间的一个项目,不像前段时间写的 Hexo 主题 fexo [https://github.com/forsigner/fexo] ,灵感一现,两个晚上就大体出来了。这也是一个比较有意思的项目,因为它不是一个可以直接用的前端UI组件,它是一个基础UI类库,要更好的使用它,你需要再它基础上去实现一些可用的前端组件。 这个DOM元素位置引擎是什么? 说成一个引擎,实在有些装逼,其实它就是控制 DOM 元素位置的一个 JavaScript Library,在前端交互中,怎样给 DOM 元素定位是一个经常遇到的问题,所以我把可以通用的部分抽象出来,这样可以更方便的给元素定位。 这个类库我给它取名叫做 beside [https://github.com/forsigner/beside] ,意思是【在旁边】,这也是 beside [https://github.com/forsigner/beside] 的核心功能,让一个元素放置于另一个元素旁边。
1年前
javascript技术
json 于 1年前发表 1800 1 1
this是javascript语言的一个关键字。它可以是全局对象、当前对象或者任意对象,这完全取决于函数的调用方式。下面我们将按照调用方式的不同,分别讨论 this 的含义。 作为普通函数调用 functiontest(){ this.x = 1; alert(this.x); } test(); // 1 对于这个函数, this关键字指向谁呢?我们知道定义在全局的函数, 函数的所有者就是当前页面, 也就是window对象.因此我们可用通过函数名直接调用, 也可用通过window.方法名来调用, 这个时候, 方法中的this关键字指向它的所有者:window对象. 查看window对象的test属性: functiontest() { this.x = 1; alert(this.x); } console.log(window.test); /* 结果: function test() { this.x = 1; alert(this.x);
1年前
javascript技术
link ,除了分享,也是知识管理。 于 1年前发表 6440 4 3
2014年一月以来,自己接触web前端开发已经两年多了,记录一下自己前端学习路上看过的,以及道听途说的一些书,基本上按照由浅入深来介绍。 JAVASCRIPT 入门 《JavaScript权威指南(第六版)》 ★★★★★ JavaScript权威指南(第六版) [http://img3.douban.com/lpic/s8958854.jpg] 淘宝前端团队翻译的,看译者列表都是一堆大神。这本书又叫犀牛书,号称javascript开发者的圣经,网上对此书评价很多,大概意思都是说这本书是一本JavaScript文档手册,没有完整看过一遍此书的都不能算是一名合格的前端工程师。 我也是从这本书开始接触前端开发的,当时还是华章出版社的校园大使,免费申请到了这本书,可惜的是两年来我一直把它作为一本cookbook来查阅,一直没有好好通读一遍。个人感觉这本书还是写得枯燥了些,不过内容绝对是五颗星,无可挑剔! 《JavaScript高级程序设计》 ★★★★★ JavaScript高级程序设计 [http://img3.douban.com/lpic/s8958650.jpg]
1年前
javascript技术
coverguo 于 1年前发表 4796 3 1
Object.defineProperty ,顾名思义, 为对象定义属性 。在js中我们可以通过下面这几种方法定义属性 // (1) define someOne property name someOne.name = 'cover'; //or use (2) someOne['name'] = 'cover'; // or use (3) definePropertyObject.defineProperty(someOne, 'name', { value : 'cover' }) 从上面看,貌似使用Object.defineProperty很麻烦,那为啥存在这样的方法呢? 带着疑问,我们来看下 Object.defineProperty的定义。 -------------------------------------------------------------------------------- WHAT IS OBJECT.DEFINEPROPERTY
1年前
javascript技术