传统的 MVC 是将模板放在其他地方，比如
script 标签或者模板文件，再在 JS 中通过某种手段引用模板。按照这种思路，想想多少次我们面对四处分散的模板片段不知所措？纠结模板引擎，纠结模板存放位置，纠结如何引用模板……下面是一段 React 官方的看法：
We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and
javascript 查看更多
文章目录
对比
为什么使用 JSX
JSX 是 Javascript 代码里直接写XML的语法
JSX (Javascript XML syntax transform) 是使用XML语法编写Javascript的一套解析工具；
X代表XML；也可以理解为扩展(eXtension)，因为实现JSX功能本身就是使用Javascript；
React建议使用JSX（但非必要）
实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码
React 官方推荐使用JSX， 当然你想直接使用纯Javascript代码写也是可以的，只是使用JSX
javascript 查看更多
关于 lodash 和 underscore 的对比看这篇帖子
今天分享一个关于 lodash 的排序小方法
_.sortBy([1, 2, 3], function(n) {
return Math.sin(n);
});
上面是官方示例
默认排序方式是正序排列
如果你的数组是一个对象组合
var arr=
[
{"key":"key1","value":"value1","createTime":"124573216"},
{"key":"key2","value":"value2","createTime":"124593216"},
{"key":"key3","va
javascript 查看更多
redis如何处理客户端连接
redis 连接建立
Redis Redis 通过监听一个 TCP 端口或者 Unix socket 的方式来接收来自客户端的连接，当一个连接建立后，Redis 内部会进行以下一些操作：
首先，客户端 socket 会被设置为非阻塞模式，因为 Redis 在网络事件处理上采用的是非阻塞多路复用模型。
然后为这个socket 设置 TCP_NODELAY 属性，禁用 Nagle 算法
然后创建一个 readable 的文件事件用于监听这个客户端 socket 的数据发送
当客户端连接被初始化后，
会查看目前的连接数，然后对比配置好的 maxclients
javascript 查看更多
在 linux 下你可以很方便的使用 tree 命令来查看当前目录下的目录树机构.
但是在 mac 下,至少你需要安装一个工具.
开始,我从网上找到了一个shell 命令打印 tree 结构的方法.
find . -print | sed -e 's;[^/]*/;|____;g;s;____|; |;g'
你可以在你的终端下,直接输入上面的shell 命令来查看当前目录的结构树
如何把它变成一个 命令,直接使用呢
我们想到了 alias 指定别名的方法
alias tree="find . -print | sed -e 's;[^/]*/;|____;g;s;___
javascript 查看更多
javascript 中对于时间类型的处理 如何把日期字符串如“2015-09-19 09:48:46”转换为Date对象
第一种方法: 我们可以按下面的方法来拆分上面的时间字符串
var str="2015-09-19 09:48:46";
var strArray=str.split(" ");
var strDate=strArray[0].split("-");
var strTime=strArray[1].split(":");
var time=new Date(strDate[0],(strDate[1]-parseInt(1)),strDate[2],strTime[0]
javascript 查看更多
上一篇博客中和大家分享了关于 字符串转时间类型
这一篇顺便整理下 javascript 中 Date 类型的一些方法
var time = new Date();
var year=time.getYear(); //获取当前年份(2位)
var year1=time.getFullYear(); //获取完整的年份(4位,2015-????)
var moonth=time.getMonth(); //获取当前月份(0-11,0代表1月)
time.getDate(); //获取当前日(
javascript 查看更多
javascript 中 new Array() 和 var arr=[ ] 创建数组到底有何不同?
今天就探讨一个 JavaScript 中很常见的问题.
var arr=[]
这是一种字面量定义数组的方法
var arr=new Array()
这是调用数组构造函数生成的数组
上面的2种定义数组的方法到底一样不一样
目前我们大致的认同是下面这样的
用new 关键字去内存开辟一个存储地址比较耗资源,耗内存. 而字面量方式直接在内存开辟一个存储字段相对简单,不耗资源.
我们首先不去否定上面的结论对不对.
首先从功能上来说 var =arr=[] 和 var arr= new
javascript 查看更多
现在的二维码相当火,借着移动互联网的风口也快飞起来了.现在各种语言的各种开源包,基本都有对应的生成二维码的源码.但是今天我们分享的不是服务器生成二维码,而是前端页面如果用 javascript 来生成一个二维码.这种动态生成二维码的需求越来越多.如果都要依靠服务器端赖生成,第一:面临资源紧缺的状况,如果在大的并发环境,这种cpu密集型计算必定导致一个问题,就是请求排队,那就不用谈了.用户不会一直在傻傻的等你.第二:就算你顺利生成了二维码,还面临一个网络传输带宽的压力,虽然它很小很小,但是当在一个并发压力大的环境下,依然面临带宽被占的问题.这样说来,如果能在客户端生成二维码,貌似是最好的解决方案
javascript 查看更多
去年12月，多位重量级Node.js开发者不满Joyent对Node.js的管理，自立门户创建了io.js。io.js的发展速度非常快，先是于2015年1月份发布了1.0版本，并且很快就达到了2.0版本，社区非常活跃。而最近io.js社区又宣布，这两个项目将合并到Node基金会下，并暂时由“Node.js和io.js核心技术团队联合监督”运营。本文将聊一聊Node.js项目的一些历史情况，与io.js项目之间的恩怨纠葛，他们将来的发展去向。希望能从历史的层面去了解这个开源项目在运营模式上是如何演变和发展的Node.js项目的由来自从JavaScript被Brendan Eich创造出来后，
javascript 查看更多
今天发现一个问题,当我在微信内置浏览器访问一介布衣博客时 ,竟然展示了广告...这当然很惊奇:一. 我在投放广告的时候选择了移动端不展示.二.我的blog 是响应式布局,就因为一个横条广告,彻底毁了. (在移动端浏览器不显示广告,但是微信内置浏览器显示blog底部横幅广告)所以,必须要解决掉.首先我需要准备一个公共方法,来判断当前浏览器是不是微信内置浏览器 ,正好用的了我之前写到的一篇blog .我们直接在公共的地方把此方法定义下:functionisWeiXin(){
varua=window.navigator.userAgent.toLowerCase();
if(ua.match(/M
javascript 查看更多
这几天宅在家里享受胜利日的假期,连续2天下雨,出不去....无聊之时会玩一玩 zsh ,确实是个好东东,作为一个攻城狮的你,必须要去玩转一下.之前介绍了如何配置利用oh-my-zsh 来配置你的zsh 及 zsh 通过修改配置文件,皮肤模板来定制化属于你的shell上面的传送链接你可以直接点击查看 (这句话好像是废话,忽略吧)今天分享几个 zsh 使用小技巧:如果你不知道该如何使用 zsh ,那么你之前如何使用的 bash ,现在就怎么使用.没错,这就是一个技巧.zsh 360°无死角全兼容 bash ,之前怎么写,现在就怎么写. 这才叫酸爽!按 tab 键补全之前在 bash 环境下.如果我
javascript 查看更多
由于微信的种种封闭,导致在微信内置浏览器打开的页面,会把外部链接全部屏蔽掉.所以通用的做法是,判断是微信浏览器打开的时候做一种处理方式.非微信浏览器打开时做另外一种处理方式.类似你想在微信打开页面里点击下载按钮,一定是不成功的.我们会友好的跳出一张引导图.那么要做出这样的逻辑判断,我们就需要获取当前页面所在的环境是不是微信内置浏览器,如何判断?functionisWeiXin(){
varua=window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=='micromessenger'){
javascript 查看更多
使用html5 开发一个手机端页面如何能像app一样实现下拉刷新,或者上推刷新.我们试图用html5+css+javascript 来实现一下,没有用到任何第三方插件或者开源js包.先看下效果:这是微信内置浏览器打开后的效果,再看下从顶部按住下拉刷新的效果首先有一个目标div这个 div 用来监听 touchstart ,touchmove ,touchend 三个事件.这3个 事件分别表示 手指触摸屏幕开始, 手指在屏幕移动 , 手指触摸结束那么这个 目标div 一旦被监听后,你的手指放在此div内,就会触发上面的事件. 2. 当触发某个事件时,我们希望看到上面一个下拉的拉伸效果,并且提示
javascript 查看更多
手写的纯javascript 实现xmlhttprequest .屛弃了所有第三方javascript 包,这样做的目的主要是节省空间,现在很多第三方框架动辄几十K,上百k 等.如果我们只用到其中一个很小的 ajax 功能,完全没有必要这样做.而且当前的应用环境是手机端的展示,所以对于流量的考虑至关重要.看下代码实现:functionajax(option,callback){
//option参数必须是对象,里面包括(type请求方式,url请求路径,param请求参数)
if(typeofoption==='object'){
//option没有定义请求url,直接返回错
javascript 查看更多
前面分3篇博文介绍了 Ecmascript 5.1 数组扩展方法ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(一)ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(二)ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(三)今天和大家分享数组中关于归并的2个扩展方法 reduce , reduceRight我们逐一简绍reduce 此扩展函数相比其他方法略繁琐一点.reduce(callbak(previous, current, index, array, [initialValue])[in
javascript 查看更多
前面分2篇博文介绍了 Ecmascript 5.1 数组扩展方法中的迭代方法:ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(一)ECMAScript 5.1 版本下对 javascript 数组元素的扩展方法(二)今天和大家分享数组中关于索引的2个扩展方法indexOflastIndexOf依次看下:1. indexOfindexOf(searchItem,[fromIndex])第一参数 searchItem 是查询的目标元素第二参数 fromIndex 是查询的起始位置 (可选参数,为空表示从索引0处开始查找)数组查询按照从左到右的顺序,从 fromIn
javascript 查看更多
接着上一篇的ECMAScript 6 数组扩展方法数组元素迭代方法还剩下 filter , some , every3. filter过滤数组,将数组元素迭代,依次调用回调函数array.filter(callback);实例:我们遍历迭代a数组,然后每个元素对2整除,符合条件的返回.vara=[1,2,3];
varb=a.filter(function(item,index,a){
returnitem%2==0;
});
console.log(b);filter 第一个参数是回调函数function(item,index,a)item 是当前迭代元素index 当前迭代元素所在索引a
javascript 查看更多
2011年发布了 ECMAScript 5.1 ,到现在普及程度也不高.如今马上要 ECMAScript 6 马上要发布标准了,何年何月才能普及到.从2013年 各大浏览器开始支持 ECMAScript 5.1包括:Chrome 24，Firefox 19，IE 10.0，Opera 12，Safari 6 等浏览器及更高版本得到支持.今天介绍ECMAScript 5.1 中数组新增的方法:先推荐一位朋友的博客 IT笔录 ,涉及到开发,系统,运维方方面面,各位攻城狮可以去赏脸拜读一下!操作数组元素的迭代方法:forEach() , map(), filter(), every(), some(
javascript 查看更多
javascript中闭包的作用我们之前专门聊过一次,点击查看闭包的形成环境先从javascript的简史说起:javascript 这门充满缺陷和坑的语言,在各大浏览器厂商的支持下,web大势所趋的形势下发展成一家独大的浏览器宿主语言,非常不容易,有兴趣的可以查阅下它的发展背景,当初创建javascript的作者Brendan Eich 在网景公司高层压力下,10天内写成的这门语言的第一个初版,他自己感觉非常不满意,用他自己的话说是这样的:"与其说我爱Javascript，不如说我恨它。它是C语言和Self语言一夜情的产物。十八世纪英国文学家约翰逊博士说得好：‘它的优秀之处并非原创
javascript 查看更多
随着前端项目越来越复杂,随便引入几个第三方javascript脚本库貌似已经习以为常,但是随着越来越多的包被引入,开发人员维护起来也是一件相当头疼的事,比如第三方库的版本更新,安装,卸载等.twitter推出了一个前端包管理器 bower 帮我们解决了这些头疼的事情.bower 完全借鉴了npm构思和实现原理,所以后面你会看到它的使用几乎和npm是一模一样.当然,bower 是运行在node.js 基础上,所以你的当前环境确保已经安装 node.js .bower 的基础功能是什么?1.注册模块每个包需要确定一个唯一的 ID 使得搜索和下载的时候能够正确匹配2.文件存储把文件存储在一个有效的网
javascript 查看更多
node.js 开发的站点,如果你也是用了nginx实现反向代理.那么在服务端可以轻松实现 gzip 压缩,让站点浏览更顺畅.前提条件: node.js + nginx 反向代理node.js 需要做的工作:express 4.0以下版本:app.use(express.compress());//主要是这句
app.use(express.json());
app.use(express.urlencoded());
app.use(express.bodyParser());
app.use(express.methodOverride());
app.use(express.cookie
javascript 查看更多
目前还处于人口红利期的移动互联网发展的大红大紫,不断侵蚀传统pc份额,所以做一个全终端自动适配的站点已经成了主流.我的博客也是因为之前对于移动浏览器兼容太差,有些朋友提意见说UI体验也不太好,百度m站的UI亮瞎双眼......所以决定换换UI,因为页面结构大变,已经做好了被搜索引擎惩罚的准备.但是移动端考虑到网络环境,抛开wifi不谈,4G普及率不高,3G应该目前移动端网名主流实用的网络制式,2.5G和2G的用户就悲剧了,站点再优化貌似对这部分人来说加载几十K,几百K甚至上几M都是 wait , wait , wait ,loading....所以3G用户在浏览加载过程中,能节省几百K,加载速
javascript 查看更多
你有没有认认真真写过package.json 文件?其中 package.json 里的依赖配置项是非常重要的."dependencies":{
"MD5":"^1.2.1",
"async":"^0.9.0",
"body-parser":"^1.9.2",
"cluster":">=0.7.7",
"commander":"^2.6.0",
"compres
javascript 查看更多
Promise是commonjs规范中的内容.现已经纳入了ES6，并且高版本的chrome、firefox浏览器都已经原生实现了Promise，只不过和现如今流行的类Promise类库相比少些API.这里说的是指Promise/A+ 规范.Promose 主要用于异步调用规范,它有三种状态， 等待（pending）、已完成（fulfilled）、已拒绝（rejected）等待 --> 已完成 / 等待 --> 已拒绝 但是已完成和已拒绝状态不可能互相转化.为什么要出现 Promose 规范:一直以来,对于javascript的异步回调,我们祖祖辈辈都是用callback方式 (貌似
javascript 查看更多
此篇博文其实是上一篇的一个小细节,单独拿出来说一下,否则上一篇叉开的分支太多,太乱.因为上一篇和大家分享了node.js 中使用util.inherits实现继承 我们单独给出一个小demo ,_base.js 父类继承了 events.EventEmitter 类.varevents=require('events');
varutil=require('util');
function_base(){
this.emitter=newevents.EventEmitter(this);
};
util.inherits(_base,events.Even
javascript 查看更多
前天写了一篇关于匿名函数的原型链和集成的文章(点击链接查看),里面蜻蜓点水式的把实例,原型对象和构造函数带过去了.这种抽象的东西不是很好记忆,我们通过一个示例来说明可能更好了解.functionPerson(name){
this.name=name;
}在javascript中,你可以把上面的代码看做一个函数,一个类,一个方法,都没有问题.但是你又能看到其他静态语言的一些身影, 比如: this.name=name; 这是标准的初始化内部属性/变量的语句,第一反应这应该是构造函数.其实,在javascript中,任何一个函数你都可以把它看做是构造函数,它没有明显的特征.那什么时候它就明显了呢
javascript 查看更多
javascript中函数成为一等公民后,导致很多其他语言函数所没有的功能,也正是这些特性让javascript更加灵活.函数可以是一个变量,可以是一个参数,可以是一个返回值,可以是一个类,可以是一个方法.....够灵活吧.其中高阶函数是javascript中闭包的实现基础,而闭包又是javascript高度灵活的体现.今天和大家分享的是一种特殊的函数,匿名函数.如其名一样,就是没有名字的函数,这种匿名函数用到的地方很多,比如jquery 的大部分实现都用了匿名函数.为什么要这样用? 因为javascript语言本身的缺陷使得它是一门没有私有作用域的语言,它不像一些高级语言一样,有命名空间或者
javascript 查看更多
如何从数据组里查找一个元素所在的位置有2种应用场景:一:把一个新元素插入到指定数组 (数组元素按序排列)二:找出数组是否包含某个元素,找到他的位置第一种情况必须要求元素是按序排列的,否则我们无法给预定元素找到它的位置.vara=[1000,2000,2018,2909,3000,4000,4210,4390,5000];
varb=4500;思路:假设数组元素升序排列我们只需要找到第一个大于插入值的元素即可,目标元素就在此元素前一个位置.方法:遍历元素,找到第一个大于或者等于插入值的元素位置.下面实现了一个通用的遍历数组元素比较方法functioncommonFind(arr,aim){
va
javascript 查看更多
上一篇博客已经说了关于javascript中的封装,其中也说了javascript中本来是没有类的,我们上一篇的封装也是用javascript中的函数去模拟一个类,最后我们还模拟了一个构造函数.那么今天和大家分享的关于继承,同样不是真正严格意义上面向对象的继承,而是通过javascript中的原型链关系实现函数之间的属性,方法共享.下面简单分享几种封装的方法.既然说到继承,我们必须有一个基类functionPerson(){
this.eat=function(){
return'吃食物';
}
}
Person.prototype.sport=function(){
javascript 查看更多