前端必懂概念

日期:2015-4-15 13:51 | 标签: 概念 | 阅读:742

概念是对现实世界的抽象,可以是符号、词组。一般有利于人联想到某个现象或者事物,可惜俺是中国人,每当看到前端的有些英文概念有点不知所云,所以我将在这里做一些简短的记录,当然,一些重要中文概念这里也会囊括,这里的记录大都来自知乎、知道、百科等地方的一些精辟回答或者摘抄自一些博文。

SSR

SERVER SIDE RENDER.

Beancons

这项技术非常类似脚本注入,使用javascript创建一个新的image对象,并把src设置为服务器脚本上的url,可以使用该方式向服务端传送数据,而服务端无需向客户端返回任何信息。优点是消耗小,不受服务端错误影响,代码类似于

// parames为参数数组
(new Image().src = url + '?' + parames.join('&'));

当然,如果要接收服务端返回的数据还是有办法的,我们知道,带src属性的基本上有一个onload方法,可以使用这个hack

beancon.onload = function(){
    // x代表服务器返回图片宽度值
    if(this.width == x){
         // do something
    }
}

Web Components

web组件,目的是为了复用,这让我想起了.Net拖控件模式,那些控件不就是一个个组件么,只不过微软过于封闭,组件和服务端结合过于紧密。如今,已有Web Componnts标准定义如何开发这些部件(专注前端)。一个Web组件通常有四个部分:

  1. 模板
  2. Shadow DOM
  3. 自定义元素
  4. 打包

ps: Shadow DOM没有语义
介绍

  1. http://mobile.51cto.com/web-440534.htm
  2. http://www.ituring.com.cn/article/177461

案例参考: http://jiongks.name/demos/webcomponents/

Shim & Polyfill

  1. shim
    将不同 api 封装成一种,比如 jQuery 的 $.ajax 封装了 XMLHttpRequest 和 IE 用 ActiveXObject 方式创建 xhr 对象;
  2. polyfill
    特指 shim 成的 api 是遵循标准的,其典型做法是在IE浏览器中增加 window.XMLHttpRequest ,内部实现使用 ActiveXObject。
    作者:李靖威
    链接:https://www.zhihu.com/question/22129715/answer/21242550
    来源:知乎
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    

FOUC

无样式内容闪烁

Flash of unstyled content

HTML5shiv

主要解决HTML5提出的新的元素不被IE6-8识别

Reset.css & Normalize.css

参考链接:http://www.yxxme.com/1034.html

  1. reset.css
    简单粗暴的重置,如margin在各个浏览中默认值不同,则统一设为
    margin:0
    
  2. normalize.css 改良派,保留浏览器的默认样式,平滑的进行过渡。

AST

抽象语法树,现代框架用其发现不被使用的代码并去除,以提高代码压缩率。

SystemJS

可能成为主流的前端模块管理器,目前仍处于草案阶段。

WebAssembly

由 Google , Microsoft , Mozilla , Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目,缩写是".wasm",注意区分以下项目:

比如微软的 TypeScript 和Google的 Dart ,或是加快 JavaScript的执行速度,例如 Mozilla 的 asm.js 项目和Google的 PNaCI 。

参考: http://www.tuicool.com/articles/2euQRf3

BigPipe

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。

REST API

摘录自:ruanyf/jstraining

REST 是浏览器与服务器通信方式的一种设计风格。它的全称是“REpresentational State Transfer”,中文意为”表现层状态转换“。


REST 的核心概念


URL 设计

URL 是资源的唯一识别符。


查询字符串

查询字符串表示对所请求资源的约束条件。


HTTP 动词

操作 SQL方法 HTTP动词
CREATE INSERT POST
READ SELECT GET
UPDATE UPDATE PUT/PATCH
DELETE DELETE DELETE
GET /v1/stores/1234
PUT /v1/stores/1234
POST /v1/stores
DELETE /v1/stores/1234

Javascsript hook

函数劫持,一般用于分析函数调用次数或者调用之前的一些准备工作。当然不仅仅如此。
可以参考:http://www.freebuf.com/articles/7310.html
文章中hook的关键代码如下,其中hookFunc为hook函数,realFunc为被hook函数,_funcName为正则匹配到的函数名称,

...
eval('_context[_funcName] = function '+_funcName+'(){\n'+
                'var args = Array.prototype.slice.call(arguments,0);\n'+
                'var obj = this;\n'+
                'hookFunc.apply(obj,args)\n'+
                'return _context[realFunc].apply(obj,args);\n'+
                '};');
            _context[_funcName].prototype.isHooked = true;
            return true;
...

柯里化

且听听百科的解释:

柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术

放眼望去,看不懂,且听听@张鑫旭是怎么解释的:
http://www.zhangxinxu.com/wordpress/2013/02/js-currying/
小小的总结一下:

  1. 有三个作用
    • 参数复用
    • 提前返回
    • 延迟计算/运行
  2. 在事件注册上的应用(提前返回)

    var addEvent = (function(){
     if (window.addEventListener) {
         return function(el, sType, fn, capture) {
             el.addEventListener(sType, function(e) {
                 fn.call(el, e);
             }, (capture));
         };
     } else if (window.attachEvent) {
         return function(el, sType, fn, capture) {
             el.attachEvent("on" + sType, function(e) {
                 fn.call(el, e);
             });
         };
     }
    })();
    
  3. 做道题试试
    封装一个count函数,能实现如此调用:count(a)(b)(c)(d)(e)… 并且返回的值为参数连乘的结果,即abcde*…。如count(1)(3)(2),得到6。
    update @2016-11-11,小胡子出了一道题,一时做着玩玩,把第二题的答案贴这里了


var fn123 = function (a, b, c) {
    return a + b + c;
}
// 原始方法
function currying(fn) {
    var paramNum = 0;
    var args = [];
    return function () {
        var newArg = Array.prototype.slice.call(arguments, 0);
        if (newArg && newArg.length == 1){
            paramNum += 1;
            args.push(newArg[0]);
        }else{
            console.log('param error!');
            return;
        }
        if(paramNum < 3){
            return arguments.callee;
        }else if(paramNum == 3){
            return fn.apply(this, args)
        }
    }
}

// ES6
const currying = fn123 => arg1 =>arg2 =>arg3 => fn123(arg1, arg2, arg3)
var g = currying(fn123);
g(1)(2)(3);

关于科里化封装使用可以参考:https://segmentfault.com/a/1190000006096034

Mixin

Mixin是JavaScript中用的最普遍的模式,几乎所有流行类库都会有Mixin的实现,从提供的接口来看,有的是对对象的操作,有的是对类的操作。对类的操作又称为掺元类(Mixin classes)。
有兴趣?参考:http://www.cnblogs.com/snandy/archive/2013/05/24/3086663.html

前后端分离

这个概念伴随着前端的雄起而日益得到重视

响应式与适配

区别:https://www.quora.com/What-is-the-difference-between-responsive-and-adaptive-design

函数节流

这个一般用于优化滚动条、resize、mousehover等事件,避免执行过频导致的性能问题,如ie低版本会直接卡死。
参考:http://www.admin10000.com/document/1124.html

BEM

BEM的意思就是块(block)、元素(element)、修饰符(modifier), 由Yandex团队提出。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。
用法如:

.block{}
.block__element{}
.block--modifier{}

参考:https://segmentfault.com/a/1190000000391762

stylus/sass/css

让你写css更爽

AMP

谷歌开源的网页加速方案,让你的网页秒加载。
参考:https://www.ampproject.org/docs/get_started/about-amp.html

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式