holyzheng
跨域解决方案实践
作者：holyZheng 转载请注明出处 了解几个跨域的方案，并且通过简单实践进行体会。 ## 如何实践？ 但是，我们如何进行实践呢？在哪发请求？向什么服务器发请求？很简单，就在当前网页，打开控制台，输入请求的代码 ```js var url = 'http://127.0.0.1:8888/'; var xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.send(); ``` 那么我们就可以以当前页面url作为origin，向http://127.0.0.1:8888/ ，发送请求GET请求了。 同时在本地创建一个node服务 ``` var http = require('http'); http.createServer(function...
## gulp #### 是什么 gulp是一个自动化构建工具，用来优化前端工作流程，可以帮助我们进行代码编译，压缩，图片压缩，资源合并等工作。 ## webpack #### 是什么 webpack是一个模块化资源打包工具，它支持多种模块化的方案，当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。并且通过对应的 loader ，我们还可以处理其他类型的文件，比如css，image。通过plugins还可以对代码进行压缩等操作。 > ps：loader 类似于其他构建工具中“任务(task)”，用于对模块的源代码进行转换，可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL等等。 ## 使用场景 用途就决定了它的使用场景，当我们想简化工作流程，自动化代码的压缩，编译，图片压缩，资源合并等操作，gulp可以排上用场。 如果是进行模块化开发，并根据模块依赖关系打包代码和资源的话，webpack可以排上用场，并且webpack通过plugins还可以做额外的事情。
作者：holyZheng 转载请注明出处 ## mvc  mvc分为 model，view，controller三个部分 - model 模型层，管理应用程序的数据，以及对数据的一些处理方法，当它改变的时候，会通知它的观察者 - view 视图层，是model的可视化表示，一个view对应着一个model - controller 控制器，是model和view之间的中介，当用户操作view时，复杂更新model ### mvc 几点要注意的地方 1. view与controller之间是一个策略模式关系。 view把控制权移交给了controller，controller执行相关的应用逻辑，并且对来自view的数据进行预处理，调用model对应的接口。 2. controller操作model。model执行业务逻辑对数据进行处理，但不会直接操作view，对view时无知的。 3. view和model同步是通过**观察者模式**进行，而同步操作是view自己请求model数据后对视图进行更新。 缺点： > 1. controller测试困难，因为同步操作是由view发出的。...
> 事件循环出现的前提在于JavaScript是一门单线程，非阻塞的语言。 ## 浏览器中的事件循环 #### 执行栈 JavaScript中执行环境是由一个环境栈来管理，栈的最低部是我们的全局执行环境，在代码执行过程中调用其他函数的时候，就会产生一个新的执行环境，并加入到环境栈中。当一个函数执行完毕后，该函数的执行环境就会弹出环境栈，直到最后回到全局环境。（当栈深度达到一定数量级，可能会发生“栈溢出”的错误） #### 事件队列，微任务（micro task），宏任务（macro task） JavaScript的实一门单线程，非阻塞的语言。当遇到异步任务的时候，为了不阻塞主线程的执行，异步任务会被添加到一个事件队列中。而异步任务又分为微任务和宏任务（宏任务如：setTimeout，setInterval，微任务如：Promise），不同类型的任务加入不同的事件队列中，等到执行栈中的所有任务执行完毕，它会首先去从头开始查看微任务事件队列中是否有异步任务已经得到结果，将第一个已有结果的异步任务的回调函数代码添加到主线程，重复这个操作，直到所有微任务代码执行完毕。再去查看宏任务事件队列，将准备好的异步任务的回调放如主线程中执行，再查看微任务队列是否为空，如果为空，继续在宏任务事件队列中查找，这个过程一致往复直到所有代码执行完毕，这个过程就叫做“事件循环Event Loop” 考验你理解能力的时候到了！下面代码在浏览器输出的顺序是什么呢？ ```js setTimeout(() => { console.log(3) new Promise((resolve, reject) => { console.log(4) resolve(5) }).then(res => { console.log(res)...
## xss跨站脚本攻击（Cross-site scripting） ### 攻击类型 - 反射型，发出请求时，XSS代码出现在URL中，作为输入提交到服务器端，服务器端解析后响应，XSS代码随响应内容一起传回给浏览器，最后解析执行XSS代码。这个过程想一次反射，故叫做反射型XSS - 存储型，与反射型的区别仅在于，提交的代码回存储在服务器端（数据库，内存，文件系统等），下次请求代码时，不需要再提交xss代码。 ### 防范 1. 反射型的防范，通过过滤来实现。对 &，引号，尖括号，斜杠进行转义。 ```js function escape(str) { str = str.replace(/&/g, "&"); str = str.replace(//g, ">"); str = str.replace(/"/g, "&quto;");...
作者：holyZheng 转载请注明出处 ## vue的响应式数据绑定 > 关键词：Object.defineProperty、观察者模式  vue中的响应式数据绑定是通过数据劫持和观察者模式来实现的。当前学习源码为[vue2.0](https://github.com/vuejs/vue/tree/v2.0.0) 源码关键目录 ``` src |---core | |---instance | |---init.js | |---state.js | |---observer | |---dep.js | |---watcher.js ``` 当我们实例化一个vue应用的时候，会伴随着各种的初始化工作，相关的初始化工作代码在init.js文件中 ```js // src/core/instance/init.js Vue.prototype._init...
作者：holyZheng 转载请注明出处 模块化主要体现的是一种分而治之的思想。分而治之是软件工程的重要思想，是复杂系统开发和维护的有效措施。模块化则是前端最流行的分治手段。 > 分而治之：将一个大问题分解成多个较为独立的与原问题性质相同的小问题，将所有的小问题的解答组合起来即可得到大问题的答案。 ### 模块化的意义 模块化的工程意义首先在于分治的思想，对功能进行分治，有利于我们的维护；其次是复用，有利于我们的开发。 ### 为什么需要模块化 - web sites慢慢变成了**web app** - 随着项目的扩大，**代码量**越来越大，代码越来越**复杂** - 对代码、文件的高度**解耦**的要求 - 优化上，希望减少http请求 ### 前端模块化历史和方案 最早的时期，前端的模块化方案很简单，就是通过命名空间，或module模式模拟类提供私有和共有方法来实现模块化，但是这些模块都不是以文件为单位，而是以对象为单位。 1. 命名空间，减少global中的变量，但本质上是对象，一点都不安全 ```js var namespace = {...
作者：holyZheng 转载请注明出处 > 此篇结合我最近造的小轮子[hoz](https://github.com/HolyZheng/Hoz)进行分析，其中的virtual dom算法主要参考[snabbdom](https://github.com/snabbdom/snabbdom)库。 ## virtual dom #### 什么是virtual dom virtual dom的本质是一个用来映射真实dom的JavaScript对象，比如 ```js // hoz库中的 src/vdom/vnode.js class VNode { constructor (sel, tagName, id, className, el, children, data, text, key)...
作者：holyZheng 转载请注明出处 ### iterators（迭代器） > An iterator is an object with a next method that returns { done, value } tuples. 定义就是：一个具有next()方法且该方法返回一个 {done， value}元组的对象，done表示是否遍历完，value表示这次遍历的成员值。原生具有iterator接口的数据结构有 String, Array, TypedArray, Map, 和 Set。...
## 像素和视口 [riskers同学的移动端适配方案上](https://github.com/riskers/blog/issues/17) [riskers同学的移动端适配方案下](https://github.com/riskers/blog/issues/18) ### 像素 1. 设备像素pt（物理像素） 2. css像素px（设备独立像素） 3. 设备像素比（device pixel ratio）`dpr = 设备像素 / CSS像素 window.devicePixelRatio` ### 视口 1. 布局视口 `document.documentElement.clientWidth/Height` 2. 视觉视口 `window.innerWidth/Height` 3. 理想视口，它是对设备来说最理想的布局视口尺寸 ``...