无言以对

两个月的加班生活,基本上已经昼伏夜出。N久没有好好看书,实在是没有什么好分享的。仅仅希望两个月的工作迭代出来的产品大卖,业绩红火。谨以此文共勉。

国产统计图JavaScript插件

利用一下有限的时间推荐一款非常不错的图表插件  “ECharts” 多种数据混搭,不依赖任何脚本库,功能也非常强大。

提供商业产品常用图表,底层基于ZRender(一个全新的轻量级canvas类库),创建了坐标系,图例,提示,工具箱等基础组件,并在此上构建出折线图、柱状图、散点图、K线图、饼图、雷达图、地图、和弦图、力导向布局图、仪表盘以及漏斗图,同时支持任意维度的堆积和多图表混合展现。

特性介绍:http://echarts.baidu.com/doc/feature.html

实例介绍:http://echarts.baidu.com/doc/example.html
1

 

ExtJS推荐文章一览

最近依然在忙着做后台系统项目,还是使用ExtJS来作为后端主框架。使用的版本依然是ExtJS4.2,快速阅读了Sencha中文站的一些文章介绍,把中间的内容抽取出来提炼一下。

  • Sencha ExtJS 的版本,优缺点。
    现行使用最多的还是4,部分项目使用还是3,最新的版本是6。
  • 版本之间的区别
    ExtJS4 版本之前,几乎就是导入 ext-all.js 然后个个页面写入xx.js,事件与界面几乎是混在一起。到了4的版本之后,能够使用MVC来分离事件与视图层。改进了命名规则,对类名、配置、方法和事件都进行了规范化。
    首次提供了完整的沙盒模式,从ExtJS 4开始,框架不再扩展数组或函数等原生对象,因此,与其它的框架同时加载到页面时,再也不会产生冲突。
    全新的、插件自由的图表库是最激动人心的新功能之一。它基于Web技术(SVG和VML)构建,新图表包是一次编写,不依赖于第三方任意运行的解决方案。

    ExtJS5 在该版本中将触屏设备上功能引入到了桌面应用程序——使用单个代码库。
    使用了MVVM,数据绑定更加容易,支持响应式布局。
    过新鲜出炉的客户端数据会话管理可以有效的减少与服务器端的交互。通过路由的引入可以在应用程序内实现深度链接。随着这些更新,应用程序的开发将会更高效。
    通过使用URL路由方法来将应用程序的URL转换为控制器操作和方法,从而在应用程序内实现深层链接。配置应用程序的路由可以让所请求的URL不用映射到服务器上的物理文件上。URL的#部分(作为片段标识符)为应用程序提供了一种控制浏览器历史记录堆栈而无需重新加载页面的方式。随着散列值的变化,浏览器会触发hashchange事件,以便客户端的应用程序使用。

    ExtJS6 合并Ext JS和Sencha Touch——在Ext JS 6,现在可以从一个单一的代码根基访问所有的Ext JS和Sencha Touch的UI组件,这样就可有为所有设备有选择性地提供适当的用户体验。使用公共代码的好处是,Ext JS 6内Sencha Touch UI组件现在支持MVVM、支持数据绑定,甚至当你想将他们使用在桌面的时候,可获得鼠标和单击的支持。在Ext JS 6中还包含了大量的功能增强,尤其是在可访问性、图表和网格中。
    Sencha Cmd 6——对应每一个主要版本的Ext JS,都会相应的更新Sencha Cmd以便开发人员能更便捷的创建应用程序。在Sencha Cmd 6,添加了一个全新的SASS编译器——Fashion,这是我们自己的运行时Javascript实现,而且消除了对Ruby和Compass的依赖。

  • Sencha CMD工具
    提供了项目创建工程,构建程序,编译脚本等项目常见操作,具体可以参考这里http://extjs.org.cn/node/635
  • 推荐的相关书籍

    详细介绍了ExtJS的版本,以及通过CMD创建工程、创建各个脚手架、MVC分层、打包程序上线的一系列过程。本书使用的版本是4。
  • 参考链接
    ExtJS框架基础:事件模型及其常用功能   http://extjs.org.cn/node/660
    ExtJS创建特定主题的重写   http://extjs.org.cn/node/683
    ExtJSMVC开发模式详解       http://extjs.org.cn/node/742
    ExtJS5版本发布                      http://extjs.org.cn/node/705
    ExtJS5开发教程                      http://docs.sencha.com/extjs/5.0/whats_new/5.0/whats_new.html
    ExtJS6版本发布                      http://extjs.org.cn/node/759

最近的状况

加班,9月份要出版本,所以暂时只能停更了,唉,我的博客也是命运多舛啊。

整理了一下近期的一个JavaScript学习计划

一入前端深似海,从此节操是路人。Ajax,jQuery,AngularJS,前端mvc,前端 mvvm,requireJS,nodeJS ……

好吧,前端工程师彻底逆袭,颠覆的时刻来了。但是~~~~~~学习还是要一步步的来,俗话说,基础打得好,代码写到老。近期的学习计划暂时就这样了。

JavaScript 学习计划

【任性】无关技术,纯粹是为了支持一下暴走漫画

暴走大事件第三季42集,最后一段简直是戳中了内心。特意摘抄下来。以此鼓励同样在努力奋斗着的80,90后,大家一起加油。

王尼玛:前几天我看到一则新闻,一个少年劝导几个成年人,不要在人行道上停车,反被责骂说读书读傻了吧。

少年伤心的哭了。

一直以来,总有人批评80、90后如何思想堕落,如何离经叛道,如何的扶不起来
还有人说他们是道德毁掉的一代人,是“垮掉的一代”

特别的不理解,自顾自跳广场舞扰民的不是他们,不让座就拳脚相加的也不是他们,
碰瓷耍赖的不是他们,炒高房价的不是他们,开黑心食品加工坊的不是他们建小工厂乱排污的更不是他们。

是谁自己道德缺失反过来教育下一代人说这就是现实呢?
是谁自己跌倒了还要反讹把自己扶起来的年轻人?这到底是谁扶不起来?

当然
那些值得尊敬的长辈们,给80,90后树立了榜样让他们不断的成长,不忘自我反省,
于是我们能看到身边大多的80,90后都能够遵守公序良俗。他们会主动让座,
会羞于插队,最坏的行为也就是在电梯里面按亮所有的楼层。

如果要给绝大多数的80,90后一个整体的印象,可以这么说,
他们是刚一就业就被延迟退休,他们是干二十年都买不起房、结不起婚却每天努力工作的一代人,
他们是吃这各种黑心食品长大却每天还在茁壮成长的一代人,他们是等着恶劣的就业环境、
自然环境,顶着高高的房价、住在北上广的出租屋里却没有怨天尤人,每天还在追求自己的理想,
追求自己想要的生活的一代人。

如果谁硬要说他们是“垮掉的一代”那也是被现实压垮的

然而

即使是跪着,前方的路,他们也会一起走完

Gulp中jsLint常见错误翻译

之前的文章写了关于Gulp的一些简单研究,最近刚好项目告一段落有时间来吧Gulp中的功能应用在项目中。jsLint对于提高JavaScript脚本的健壮性是非常有帮助的(jQuery源码也使用了jsLint通过扫描)。使用过程中报了很多错误,为了方便我也从网上直接扒了一份错误代码提示表以供参考。 阅读剩余部分 –

Gulp前端自动化工具

前端日常工作是什么?拿到PSD图,然后开切!首先我们建立一个app的文件夹,然后在app下,我们建立img文件夹,接下来是 css …… 项目终于搞定之后,我们要使用在线压缩工具把样式表进行合并压缩,把所有的大尺寸图片重新导入Ps,保存为 web 格式,然后调整质量 。。。。。。

你就没想过偷懒的办法么?你就是这么把时间耗在没有意义的简单机械的活儿中么?

或者,很多前端都已经开始使用Grunt这样的工具了,自动压缩、自动打包、文件合并、Less,Sass 编译、文件监控、本地文件服务器调试环境。不错,基于Grunt另外推出了非常多的 generate ,类似 angularJS , Ember , Backbone, webapp, bootstrap 等等等等,但是 Grunt 的学习曲线也是非常陡的。虽然能够通过一些通用脚手架来搭建前端工程作为基础架构。一旦需要修改配置,则是异常痛苦。

gulp 的功效和 Grunt 也是异曲同工、插件也是异常丰富。

通过 Grunt 与 gulp 的对比。我个人还是比较喜欢 gulp 的一些操作模式。不管是从词法、编程语义的理解程度来说。gulp 都是优于 Grunt 。官网的介绍谈到了文件流、以及处理速度。因为没有现成的案例,所以不能妄自评论。下面就浅谈一下两者之间的使用细节。

这里引用?http://markgoodyear.com/2014/01/getting-started-with-gulp/ 中的例子:

Grunt

sass: {
  dist: {
    options: {
      style: 'expanded'
    },
    files: {
      'dist/assets/css/main.css': 'src/styles/main.scss',
    }
  }
},

autoprefixer: {
  dist: {
    options: {
      browsers: [
        'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
      ]
    },
    src: 'dist/assets/css/main.css',
    dest: 'dist/assets/css/main.css'
  }
},

grunt.registerTask('styles', ['sass', 'autoprefixer']);

阅读剩余部分 –

前端重构Sass的相关使用(笔记二)

Sass 使用中有一个 Amazing 的功能,配合着 compass 能够做出非常多高效的工作,首当其冲的就是自动化雪碧图工具。

雪碧图自然不用多说,做过前端的开发都知道雪碧图。好处呢在于能够大大节约网络的开销,把Http请求降低。自然在原来的前端开发中,制作的成本也是偏高。环境安装请看这里?http://www.html-js.com/article/CSS-solves-the-installation-and-debugging-of-SASSCompass-scheme

环境Ok之后,通过命令确认安装完毕。

1

创建工程请执行 compass create app

2

Compass自动为我们生成了相关的文件目录。好吧,开搞!进入项目目录,运行 compass watch 来实施监控文件发生的变化。实施编译Sass。 之后写入这样的代码段。 阅读剩余部分 –

前端重构Sass的相关使用(笔记一)

随着Sass与Less的使用越来越多,相比越来越多的前端攻城师都体会到它们的优越性。前端由于一部分工作都是在Html,Css中的编码进行的。好的工具在开发的过程中对效率值的贡献尤为重要。使用Sass有一段时间。在这里也做一个分享。让更多需要的人快乐的编码。

Sass,Less,Scss 都是一些什么东西?

简单的理解来说,它们都属于对原有CSS的扩展。能够更加方便的书写样式规则,强化了Css原有的功能。Sass,Scss 都是来自同一个妈。

Sass 有两种语法规则(syntaxes),目前新的语法规则(从 Sass 3开始)被称为 “SCSS”( 时髦的css(SassyCSS)),它是css3语法的的拓展级,就是说每一个语法正确的CSS3文件也是合法的SCSS文件,SCSS文件使用.scss作为拓展名。

基本语法参考:

c76fd27f54f465484be3c45d06e4cd6d
而Less比较特殊,功能大体上差不多。在前端导入less.js也能在客户端解析link中的.less文件。基于Dom解析与渲染速度,个人不太赞同这种做法。Less也有服务器端版本。因为篇幅原因,在这里就不做介绍了。有兴趣的同学可以去参考这里。 http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

Sass 新语法中添加了很多很有意思的东西,变量、混合、嵌套、样式继承等。辐射到周边的Compass应用能够对生成的样式表文件进行压缩、合并,减小服务器带宽、加速界面响应速度。通过几个简单的例子,介绍一下这些非常实用的功能。

  • 嵌套
    /* 生成代码 */
    nav ul{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    nav li{
      display: inline-block;
    }
    /* SCSS语法 */
    nav {
      ul {
        margin: 0;
        padding: 0;
        list-style: none;
      }
      li { display: inline-block; }
    }
  • 变量定义
    $blue : #1875e7; 
    div {
      color : $blue;
    }
  • 混合
    @mixin border-radius($radius) {
      -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
          border-radius: $radius;
    }
    .box { @include border-radius(10px); }
    
  • 样式继承
    .message {
      border: 1px solid #ccc;
      padding: 10px;
      color: #333;
    }
    
    .success {
      @extend .message;
      border-color: green;
    }
    
    .error {
      @extend .message;
      border-color: red;
    }

进阶功能介绍,Css常用开发功能 雪碧图与文件合并压缩。请参考笔记二(待更新)

标签云

文章归档

功能