哈弗兰大的博客

前端技术笔记,以及非前端技术笔记


  • 首页

  • 归档

  • 标签

十行代码实现的一个js模板引擎

发表于 2016-12-30
心血来潮,来写一个模板引擎吧! 功能就不多说了 实现思路 从最简单的开始吧 假设一个模板长这样 <h1><% var world = 'world!'; %> hello <%= world %></h1> 模板转化后应该到这样的: // 假设输出的结果存放在变量p中 p += '<h1>'; var world = 'world!'; p += ' hello '; p += world; p += '</h1>'; 总结一下这个过程,其实就只有三条规则: %>...<% 转换为 %>p += '...';<%, 起始和结束同此, 将内容直接作为输出 <%...%> 转换为 ...;, 逻辑处理, 直接执行 <%=...%> 转换为 p += (...);, 将运算结果作为输出 实现 实现就很简单了把上面的规则写成代码,
阅读全文 »

【翻译】nodejs最佳实践:如何在2017成为更好的开发人员

发表于 2016-12-29
原文地址https://blog.risingstack.com/node-js-best-practices-2017 使用ES2015 Last year we advised you to use ES2015 - however, a lot has changed since. 去年我们就建议你使用ES2015 - 但是还是有太多变化了。 Back then, Node.js v4 was the LTS version, and it had support for 57% of the ES2015 functionality. A year passed and ES2015 support grew to 99% with Node v6. 回到年初,Node.js V4还是LTS版,已经支持了57%的ES2015语法。一年过后,Node V6版本对ES2015支持度已经长到99%了。 If you are on the latest Node.js LTS version you don’t need babel anymore to use the whole
阅读全文 »

svg入门关键点整理

发表于 2016-12-27
本来是想学习一下path的 然后顺便就把svg也都看完了 小整理了一下基础的语法 基本元素 及其属性 { rect: ["x", "y", "rx", "ry", "width", "height"], circle: ["cx", "cy", "r"], ellipse: ["cx", "cy", "rx", "ry"], line: ["x1", "x2", "y1", "y2"], polyline: ["points"], polygon: ["points"], path: ["d"], text: {
阅读全文 »

树莓派从购买到基本输入输出

发表于 2016-12-25
最近比较空 闲的没事 想搞搞硬件 因为是软件工程 硬件硬件相关的不太了解 虽然二级专业是信息工程 有dsp的课程 但是dsp太复杂了。。搞不懂。。。当时学的云里雾里 实验课拿到板子也完全不知道搞啥 而且板子也是相当专业的数字信号处理器 其实有点想学嵌入式专业的一些基础的课程 51开发板啊汇编语言啊什么的 可惜没有机会 于是心血来潮 最近想搞个板子玩玩 自己搞个智能玩具什么的 强烈建议没有linux使用经验先去研究一些linux相关的知识和操作再来 因为本文从安装到使用基本都是在命令行下进行的 购买 板子很多 但是对初学者来说 选择不多 树莓派相比51这些 算是比较容易学习使用的了 51开发板因为没有系统 所以代码写完之后需要编译然后导入到板子上 而且开发的语言选择也不多 而树莓派可以安装平时熟悉的操作系统 所以开发成本降低了非常多 但是树莓派还是有点贵 而且配件也贵 听说国产有个兼容树莓派的 orange pi的。。。 感兴趣的可以试试看 嗯嗯 还有国产龙芯的板子 也可以一试有机会 为了方便 还是直接买树莓派了 买的时候有坑 只有裸板 连电源都没有 另外的配件注意
阅读全文 »

《2016年前端技术观察》读后感

发表于 2016-12-22
《资深Web技术专家曹刘阳:2016年前端技术观察》 花了一点时间看完文章 看前面的时候差点弃了 不过后面的内容还是比较认同的 最近的前端有一种想统一世界的感觉 然后成为了其他各个语言众矢之的 每个人对前端技术圈的看法以及对每个事物的优劣分界线不一样 一个对比 babel与sass 两个工具都是预处理工具 让代码更容易维护 缺点在文章中也说了 但是我看来 sass的优点大于缺点 值得使用 而babel相反 所以前端这些每个人都是可以有自己的想法的 文章的内容激进了一些 全盘都否定了 文章的作者应该是相当保守的 不过总的来说我也是保守派 我用ng2也用vue2 但我知道我是一个保守的前端 大概就是这种感觉 所以啊 要有辩证的思维 辩证的思维啊 有人说马克思哲学为啥是真理呢 因为是辩证的 好的方面和坏的方面都说自包含的说完了 其他人都无话可说 前端这么发展当然是相当好的啊 运气比较好刚好赶上前端这次的发展 前端的发展感觉比较特殊 其他的技术从发展到成熟 基本上都是在整个行业发展水平还不是很高的情况下进行的 而前端是已经在互联网发展相对比较成熟
阅读全文 »

杂七杂八的部分css新特性记录

发表于 2016-12-22
最近这两周被部门没啥事 上周两个会 一个D2 一个 CSS Conf 网上找了一些其他人写的东西看了下 学到了几个东西 有没有用就不知道了 也不是都是新的特性 有几个存在都很久了 但是用的不多 实际上可能还挺好用的 也记录一下 ### 1\. 长度单位: vm, vh, vmin, vmax 这个在移动端非常有用, 感受一下这个[相应式排版](http://codepen.io/airen/pen/Mbwveq) 看到的时候相当震惊 ### 2\. css函数: counter, calc, attr `attr` 暂时没啥用 之直接获取元素的属性 支持度也不高 而且这个属性有点不伦不类 估计我应该不会用 `conter` 一般和`counter-reset`属性一起用 用处也不大 `calc` 这个很早之前就知道了 之前只知道可以做`左边固定宽度,右边填满容器的布局` 但是这个和css变量一起 就相当牛比了 这里还有过题外 很久很久之前 有个学长还是谁和我说 不要用`calc` 忘了啥原因了 然后我就一直对这个函数很抵触 这几天看了好几天
阅读全文 »

ES2015中的 function内的arguments

发表于 2016-05-08
这个其实没啥好写的  前几天出了nodejs6.0,于是今天想看一下更新的东西。。。结果尼玛  你猜怎么着。。。已经更新到6.1了。。。。我。。。。 然后看了下因为主要是更新了v8引擎  所以支持了非常之多的ES2015的内容  具体看这个 http://node.green 几乎所有都支持了 关于函数参数的内容 之前没有注意太多 然后突然发现这个 试了一下运行这个 发现一个有意思的东西 关于arguments变量的 (function (a, b, c = 2) { console.log(a,b,c); console.log(arguments); a = -1; console.log(a,b,c); console.log(arguments); })(0, 1, 2); 以及不包含默认变量的 (function (a, b, c) { console.log(a,b,c); console.log(arguments); a = -1; console.log(a,b,c); console.log(arguments)
阅读全文 »

AngularJS给我带来的关于网站架构设计的感想

发表于 2016-03-20
Angular出了2也有好些日子了 还没有去深入的看 最早接触angular的是13年下半年的时候 还大二上 在工作室跟着某学长做项目 接了一个外包 说用angular 那段时间正好大漠穷秋在翻译那本angular书 于是拿到了第一版的新书 那个外包的甲方还挺牛逼的 虽然后来各种原因项目没有完成 还是第一次接触angular 因为书里很多东西后来看了之后还是感觉挺坑的 。。。说实话 只能看懂小半部分 之前也没了解很多js库 因为我觉得js库大多数都是只是工具 只是把各种复杂的东西封装好 然后给大家方便的使用 比如jquery,underscore,还有各种图形库 , 因此我也就没有了解太多的其他的js库 直到angular的出现  并且它完全改变了我对网站架构的认识 从最开始 网站的开发和客户端的开发给人感觉是不一样的 客户端是这样 而网站是这样 (没有装专业的线框图工具 这个是用glifffy画的 就不要太吐槽了。。。) 这里吧后端分开了 是因为其实后端这里明显分为两部分 一部分处理api的请求 这个是以json(或者其他)作为数据格式进行数据传输的 而另外一部分负责处理浏览器
阅读全文 »

杂七杂八的—— Object instanceof Funcion 与 Object instanceof Function

发表于 2016-02-23
前段时间看到这个  Object instanceof Funcion  与  Object instanceof Function  .   其实也没啥好说的 纯粹就是来忽悠刚刚入门或者非JSer用的   对js了解不多的人第一次看到这个就完全看傻了  其实这个还有好几个的  看下图 造成这个的根本原因就是 在js中 类(Class)和函数(Function)是不区别开的,只能从写代码的逻辑上才能看出来 一个函数是 funcion 还是 class。 例如 下图 Person 既可以是被看作是 一个类 也可以是看做这个类的构造函数 也可以看做为 就只是一个函数, 由于这种多义性,导致了最开始提出的这个问题。有人认为这是js这个语言设计的一个缺陷。 对我个人而已 或者我觉得对有一些开发经验的程序员来说 要完美解释这个 也不难 只要手动吧函数和类区分开来就可以了 很明显 这个不是文中说的鸡生蛋蛋生鸡的问题, 而是js中函数的二义性造成的 es6 中引入了 class 这个内置语法 通过class来定义新的类,在一定程度上改善了上面这种语义混淆的状态, 不过cla
阅读全文 »

杂七杂八的—— HTMLCollection与NodeList、Element与Node、IndexOf与for

发表于 2015-10-25
之前用到某个js的的库,库很简单,大概就几百行代码,主要是用来配置另外两个第三方库的。要命的是,这个库依赖jquery,我其它代码里面都没用到jquery,所以也不想为了这个东西而引入如此庞大的jquery。虽然自己重写这个库也是没有关系的,但是我太懒了,不想看这个代码。于是想,要不自己弄一个类似jquery的吧。并不是要重写一个jquery,那我水平还是太渣,我只是想写几个能够让那个库运行起来的方法而已。比如$方法,css方法。但是jquery是自己完全模拟了一套DOM的东西,很多方法都是运行在jquery对象上,所以呢,我就把这些相同的方法都移到DOM上就可以了。嗯,于是遇到一些东西,觉得挺有趣。 # 一、HTMLCollection与NodeList 这个是为了模仿jquery添加事件发现的问题, ```js // 如果有函数传入,则将这个函数注册到每一个元素 $('#testBtn').click(fn); // 如果没有参数传入,则触发每个元素的click事件 $('#testBtn').click(); ``` 我用了这样的方法
阅读全文 »
1234…6

52 日志
220 标签
RSS
GitHub
© 2026 xjpin