整理了一下近期的一个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常用开发功能 雪碧图与文件合并压缩。请参考笔记二(待更新)

Apache中的一个测试小工具

一个不错的 目录中的 ab.exe ,相当简单容易的一个测试小工具。 ab -n 1000 -c 50 http://www.xxx.com/(要测试的网站目录)相当的简单容易。让你初步对服务器的性能有一个简单的了解。
1123

程序员日记五-感谢所有关心我的朋友

现在是北京时间:2014年9月17日2:08:26 。一个人在床上翻来覆去的睡不着,完全不知道在想一些什么样的事情,索性干脆起床继续看看资料和新闻。翻到关于JavaScript中模块化管理的章节,顺势就阅读了AMD的相关规范内容,异常感叹IT技术的更新变革的效率。前端开发的工作已经从最初的Function时代大大跃进到了一个新的领域。异步处理这样的工作方式也将会在服务器端有所作为。

离开拓维的半年时光,过得蛮瞎的。时间和现实在一点点侵蚀着当初的理想和创业的决心。首先感谢最近一直关心我的同事和朋友。感谢你们热心的给我介绍各种各样的工作。感谢在我需要帮助的时候给我这么多的工作机会。感谢能够听我倾诉内心的不愉快以及给我各种各样的建议。在各种聊天的字里行间,其实我内心还是坚定自己出来的信念。在各种技术研讨交流会上,也慢慢的清晰了自己的定位。对自己的职业规划也有一个基本的定型。期间,结识了很多朋友,也收获了很多宝贵的创业经验。我相信现在的不愉快和低落的情绪都会随着时间的推移慢慢磨平。斗志和激情一直都是不会被磨灭,这段时间给我的教训无非也就是那么几句老话,打铁还需自身硬。独立、效率的工作才是靠谱的东西。都说罗马不是一天建成,无非只是看是几个人建还是一个人建,只有踏实的做,“罗马”才会欣欣向荣。

复习Javascript的一些代码(未完待续)

偶尔翻出来以前写的一些小东西。做应用开发久了,久而久之一开始就很注意框架的选择。但是最初写Javascript那种alert逐步调试。写一些通用的工具类的时间仿佛离我很远了。翻了下以前的一些代码,把他贴出来。就权当是复习下吧。

/**
 * author:      可乐加糖
 * description: 呵呵,不知道写什么好,随便吧。
 */

(function (window) {
    //基础类库
    var cola = {
        get_node: function (elem_id) {
            if (elem_id.constructor != String) {
                throw new Error("参数传递错误");
                return false;
            }
            return document.getElementById(elem_id) || null;
        },
        prev: function (elem) {
            do {
                elem = elem.previousElementSibling
            } while (elem && elem.nodeType != 1);
            return elem
        },
        next: function (elem) {
            do {
                elem = elem.nextSibling;
            } while (elem && elem.nodeType != 1);
            return elem
        },
        first_node: function (elem) {
            elem = elem.firstChild;
            return elem && elem.nodeType != 1 ? this.next(elem) : elem;
        },
        last: function (elem) {
            elem = elem.lastChild;
            return elem && elem.nodeType != 1 ? prev(elem) : elem;
        },
        parent: function (elem, num) {
            num = num || 1;
            for (var i = 0; i < num; i++) {
                if (elem != null)
                    elem = elem.parentNode;
                return elem;
            }
        },
        remove: function (elem) {
          if(elem)
            elem.parentNode.removeChild(elem);
        },
        empty: function (elem) {
            while(elem.firstChild)
                elem.removeChild(elem.firstChild)
        }
    }
    window.cola = cola;
})(window)

这是最开始写的一个二级下拉导航条的代码

document.getElementsByClassName = function(clsName){
    if(typeof(clsName)!="string" || clsName.constructor != String){
        throw new Error("className必须是字符串");
        return false;
    }
    var nodes = document.getElementsByTagName("*");
    var nodeArr = new Array();
    for(var i= 0,icount = nodes.length;i<icount;i++){
        if(nodes[i].className == clsName)
            nodeArr.push(nodes[i]);
    }
    return nodeArr;
}
window.onload = function(){
    var nodes = document.getElementsByClassName("has-child");
    for(var i= 0,icount = nodes.length;i<icount;i++){
        nodes[i].onmouseover = function(){
            var child_menu = this.getElementsByTagName("ul");
            child_menu[0].style.display = "block";
        }
        nodes[i].onmouseout = function () {
            var child_menu = this.getElementsByTagName("ul");
            child_menu[0].style.display = "none";
        }
    }
}

还有获取元素的样式表,当初也是在IE下调试了很久才搞定。

function getStyle(elem,name){
    if(elem.style[name])
        return elem.style[name];
    else if(elem.currentStyle)
        return elem.currentStyle[name];
    else if(document.defaultView && document.defaultView.getComputedStyle){
        name = name.replace(/([A-Z])/g,"-$1");
        name = name.toLowerCase();
        var s = document.defaultView.getComputedStyle(elem,"");
        return s && s.getPropertyValue(name);
    }
    else
        return null;
}

写给而立之年的自己

  • 多做,少说。
  • 冲动是魔鬼,但魔鬼起码比唯唯诺诺的小鬼好。
  • 技术是安家之本,并不代表是职业的全部。
  • 效率有时候比什么都重要。
  • 二师兄队友真的很坑。
  • E 文呢?学还是不学,有个不错的老师还在等。
  • 做好 “ 蜻蜓助手” 搞定一家单位,年底没做到!见人发钱!
  • 天时地利人和是条件,但是不代表可以一直等。机会来了,自己没有干货是行不通的。

好了,就这么多吧。

标签云

文章归档

功能