Hibop Yuan
Hibop Yuan
 ```html Custom bottom tooltip. ``` ```css [data-tooltip] { display: inline-block; position: relative; cursor: help; padding: 4px; } /* Tooltip styling */ [data-tooltip]:before { content: attr(data-tooltip); display: none; position: absolute;...
## 内容提要 - **面向对象特征回顾；** - **为什要设计`prototype`: js历史；** - **栗子： 原型、构造函数、实例化机制、原型链；** - **`new Fn()`的实现原理；** - **Object内置属性和函数整理、class语法糖** - **综合实战小练习**; ## 面向对象的三个基本特征是：封装、继承、多态。  > 对于有基于类的语言经验 (如 Java 或 C++) 的开发人员来说，JavaScript 有点令人困惑，因为它是动态的，并且本身不提供一个class实现相关类的继承。全靠一种很奇特的"原型链"（`prototype chain`）模式，来实现类的继承扩展。（在 ES2015/ES6...
## CORS（） ## jsonp > 要点： - 带src的标签具有跨域请求资源的能力 - 客户端定义函数并将函数名传给服务端、服务端调用函数将数据作为实参传回 ``` // client var jsonCallback = (data) => { console.log(data) // 拿到跨域数据 } // server data.js callback({...data}) ``` 一个栗子，调用世界银行开放api [https://api.worldbank.org/region/?format=jsonp&prefix=getData](https://api.worldbank.org/region/?format=jsonp&prefix=getData)...
> 在做web前端开发时， 浏览器兼容性的问题没有少碰到过： 对IE浏览器来说，IE7是个跨度，因为之前的版本更新甚慢，bug甚多。从IE8开始，IE浏览器渐渐遵循标准，到IE9后由于大家都一致认为标准很重要，可以说在兼容性上比较好了，但是在中国来说，由于xp的占有率问题，使用IE7以下的用户仍然很多，所以我们不得不考虑低版本浏览器的兼容。 ## 常用hack 1. 使用meta标签来调节浏览器的渲染方式，告诉浏览器用哪种内核渲染，360双核浏览器就是在ie和chrome之间来回切换，现在使用meta标签来强制使用最新的内核渲染页面： ```html ``` 2. CSS3前缀 ``` -webkit- webkit渲染引擎 chrome/safari -moz gecko引擎 firefox -ms- trident渲染引擎 IE -o- opeck渲染引擎 opera ``` 3. 不支持IE8的属性 - rgba不支持IE8...
## 关于Babel > Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign ）都不会转码。 一般： - npm 依赖安装: babel-pollify、 babel-runtime - npm dev安装: babel core、 bebel-loader(webpack + babel, 1+1>2)、babel-plugin-transform-runtime、babel-preset-env ## babel-polyfill 使用：...
> webpack作为前端全能打包工具，在模块化解决方案上很全能。学习这五种模块化解决方案可以加深我们队前端模块化理解，也可以加深我们对webpack的工作原理的理解。 ## 模块化规范分类： - **commonjs同步加载**：代表nodejs，由于node后台异步操作IO很快，所以同步加载具有很好优势。 require/module.exports - **ADM异步加载**：requirejs ```js define("defineModule", ["dependentModule"], function(dependentModule){ //callback }) require(["module-a", "module-b"], function(a, b) { } ``` - **es6 Module** import&&export ```js export default class...
先从一道简单的面试题说起. 下面代码的输出结果是? ```js setTimeout(function(){console.log("three");}, 0); Promise.resolve().then(function(){ console.log( "two" ); }); console.log("one"); ``` 答案是: one two three! 看似一个简单到不能再简单的面试题, 涉及的知识点很多. 作为面试题短小精悍, 用来摸底候选人, 真的不错. 下面来解析一下涉及的知识点 ## 函数调用栈(Call Stack) 每次当控制器转到可执行代码的时候，就会进入一个执行上下文。执行上下文可以理解为当前代码的 执行环境，它会形成一个作用域。JavaScript中的运行环境大概包括三种情况。 - 全局环境：JavaScript代码运行起来会首先进入该环境 -...
> 趁着还没正式进入需求开发前好好总结总结。这几年的前端开发经验，零零碎碎的接触了很多技术栈，但是静下心来看看从零开始搭个工程，发现还是还是有很多问题的。 > 在后续的工作学习中。打算在工程架构、源码、计算机网络好好系统学习总结一波，捡回曾经遗失的美好。 在新的公司，使用的主要技术栈是Vue+Vuex+webpack/gulp，看了几天的工程代码，有必要先从几个工程构建工具开始入手吧—— ### 回顾下前端工程化历史： 1. **无模块化“面条代码”时代**： 这是前端茹毛饮血的时代，基本上前端页面全部写在html、css、js中，或者更早的全部内嵌到html中，这种代码看起来维护起来有种杀人的冲动，当时偶尔赶上了这趟列车的尾巴； 2. **单例模式原型继承，jquery插件时代**：这个时候初步利用原型、IFFE(立即执行函数)、闭包等思想形成简单模块组织： ```js // IFFE ;(function($, win){ // TODOs.... })(jQuery, window) // 原型 需要new实例化 function Banner(name) { this.name = name;...
## Node.js 1. 安装Node.js - 下载稳定v6.10.3版 ```bash wget https://nodejs.org/dist/v6.10.3/node-v6.10.3-linux-x64.tar.xz ``` 解压并移动到usr/local目录 ```bash tar xvJf node-v6.10.3-linux-x64.tar.xz mv node-v6.10.3-linux-x64 /usr/local/node-v6 ``` - 软链接到/bin npm也软链接过去 ```bash ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm...
## 历史上，计算机语言分为两组：静态语言和动态语言 **静态语言**（例如，Fortran和C，其中变量类型是在编译时静态指定的）和动态语言（例如，Smalltalk和JavaScript，其中变量的类型可以在运行时改变）。静态语言通常编译成目标机器的本地机器代码（或汇编代码）程序，该程序在运行时直接由硬件执行。 **动态语言**由解释器执行，不产生机器语言代码。 当然，事情后来变得复杂得多。**虚拟机（VM）**的概念开始流行，它其实只是一个高级的解释器，用软件模拟硬件设备。虚拟机使语言移植到新的硬件平台更容易。因此，VM的输入语言常常是中间语言。例如，一种编程语言（如Java）被编译成中间语言（字节码），然后在VM（JVM）中执行。 ## 编译器可以分为： 即时（JIT）编译器和AOT编译器 JIT编译器是在程序执行期间运行，即时编译代码。原先在程序创建期间（运行时之前）执行的编译器现在称为AOT编译器。 一般来说，只有静态语言才适合AOT编译为本地机器代码，因为机器语言通常需要知道数据的类型，而动态语言中的类型事先并不确定。因此，动态语言通常被解释或JIT编译。 在开发过程中AOT编译，开发周期（从更改程序到能够执行程序以查看更改结果的时间）总是很慢。但是AOT编译产生的程序可以更可预测地执行，并且运行时不需要停下来分析和编译。AOT编译的程序也更快地开始执行（因为它们已经被编译）。 相反，JIT编译提供了更快的开发周期，但可能导致执行速度较慢或时快时慢。特别是，JIT编译器启动较慢，因为当程序开始运行时，JIT编译器必须在代码执行之前进行分析和编译。研究表明，如果开始执行需要超过几秒钟，许多人将放弃应用。 ## AOT编译和“桥” 预编译的AOT代码比JIT更具可预测性，因为在运行时不需要暂停执行JIT分析或编译。 然而，AOT编译代码还有一个更大的优势，那就是避免了“JavaScript桥梁”。当动态语言（如JavaScript）需要与平台上的本地代码互操作时，它们必须通过桥进行通信，这会导致上下文切换，从而必须保存特别多的状态（可能会存储到辅助存储）。这些上下文切换具有双重打击，因为它们不仅会减慢速度，还会导致严重的卡顿。  注意：即使编译后的代码也可能需要一个接口来与平台代码进行交互，并且这也可以称为桥，但它通常比动态语言所需的桥快几个数量级。另外，由于Dart允许将小部件等内容移至应用程序中，因此减少了桥接的需求。 ## 抢占式调度、时间分片（fiber）和共享资源 大多数支持多个并发执行线程的计算机语言（包括Java、Kotlin、Objective-C和Swift）都使用抢占式来切换线程。每个线程都被分配一个时间分片来执行，如果超过了分配的时间，线程将被上下文切换抢占。但是，如果在线程间共享的资源（如内存）正在更新时发生抢占，则会导致竞态条件。 竞态条件具有双重不利，因为它可能会导致严重的错误，包括应用程序崩溃并导致数据丢失，而且由于它取决于独立线程的时序，所以它特别难以找到并修复。在调试器中运行应用程序时，竞态条件常常消失不见。 解决竞态条件的典型方法是使用锁来保护共享资源，阻止其他线程执行，但锁本身可能导致卡顿，甚至更严重的问题（包括死锁和饥饿）。 Dart采取了不同的方法来解决这个问题。Dart中的线程称为isolate，不共享内存，从而避免了大多数锁。isolate通过在通道上传递消息来通信，这与Erlang中的actor或JavaScript中的Web Worker相似。 Dart与JavaScript一样，是单线程的，这意味着它根本不允许抢占。相反，线程显式让出（使用async/await、Future和Stream）CPU。这使开发人员能够更好地控制执行。单线程有助于开发人员确保关键功能（包括动画和转场）完成而无需抢占。这通常不仅是用户界面的一大优势，而且还是客户端——服务器代码的一大优势。 当然，如果开发人员忘记了让出CPU的控制权，这可能会延迟其他代码的执行。然而我们发现，忘记让出CPU通常比忘记加锁更容易找到和修复（因为竞态条件很难找到）。 ## 编译与执行Dart 创造Dart之前，Dart团队成员在高级编译器和虚拟机上做了开创性的工作，包括动态语言（如JavaScript的V8引擎和Smalltalk的Strongtalk）以及静态语言（如用于Java的Hotspot编译器）。他们利用这些经验使Dart在编译和执行方面非常灵活。...