Night Sun
# JS最佳实践-代码书写时异常情况先行 ## 最佳实践 在书写代码时，优先处理特殊情况或者异常情况，其次再处理正常情况。 ## 好处 这么做的好处就是如果遇到特殊或者异常情况能快速执行完代码，同时书写更清晰。 ## 示例 ```js //原始代码 if(condition){ //中间有100行代码 }else{ //这里只有1行代码！ }; ``` 以上逻辑最好的书写规范是： ```js if(!condition){ //1行代码！ return; }; //剩余100行代码 ``` （全文完）
# JS解惑-那些经常用但是又叫不起名字的知识 ## Vanilla JS 世界上最轻量的 `JavaScript` 框架！ * http://vanilla-js.com/ * https://segmentfault.com/a/1190000000355277 * https://github.com/sunmaobin/sunmaobin.github.io/issues/29 ## 字面量（Literal Syntax） 字面量就是变量创建的一种简写方式。 ```js var test = new String("hello world!"); var test = "hello world!";...
# JS解惑-如何阻止事件冒泡和取消默认行为 ## 什么是事件冒泡？ 要了解事件冒泡，我们就得把它跟事件捕获来一起交代！ ### 一组栗子 ```html Click Here ``` 加入我给如上HTML的三级标签上都加上Click事件： ```js //注意这里的最后一个参数，默认也是false document.getElementById('d1').addEventListener('click',function(e){ console.log('d1'); },false); document.getElementById('p1').addEventListener('click',function(e){ console.log('p1'); },false); document.getElementById('s1').addEventListener('click',function(e){ console.log('s1'); },false); ``` 当点击页面上的 `Click Here` 的文字时，控制台会依次打印： ``` s1...
# JS解惑-Gulp中Babel用法 ES6转ES5的语法，我们使用到了Babel，但是关于Babel的包一大堆，你能分清吗？ ## 基本用法 * gulp-babel * babel-preset-es2015 安装上面的2个基本的Babel组件： ``` npm install --save-dev gulp-babel babel-preset-es2015 ``` 然后在与 `package.json` 同级的目录中新建文件： `.babelrc`，内容如下： ``` { "presets": ["es2015"] } ``` 最后在 `gulpfile.js` 中，按照如下方法使用即可：...
对于JS的闭包（Closure）的概念，以及闭包的作用域具有全局性。我针对我自己的实战感受，这里简单谈谈。 ## 概念 闭包（Closure），是指有权访问另一个函数作用域中的变量的函数。 创建闭包，常见的一种方式就是在一个函数内部创建另一个函数。 > 概念引自：`JavaScript 高级程序设计（第三版）` 中 `7.2 闭包` 一节，`178页`。 ## 示例 举个例子来解释下这个概念： ```js var name = 'window'; function outerFun(){ var name = 'night'; console.log('1',this.name); var innerFun =...
请问以下结果能否在点击button后，延迟3秒打印结果？ ```html Click (function(){ var delayFun = function () { alert("This is sample function"); }; $("#btn").click(function(){ setTimeout("delayFun",3000); }); })(); ``` ## 答案 不能。 ## 原因 由于delayFun在一个匿名函数中定义，外部无法访问。而setTimeout已经脱离了当前执行环境，它的环境是window，所以3S后从window中找不到delayFun。 ## 延伸 如果这里去掉setTimeout，即： ```js...
关于 `require.js` 使用上的一些说明。 ## 常规用法 * 页面仅保留一个 `require.js` 的js文件，并添加属性 `data-main` 关联入口js文件。 ```html My Sample Project My Sample Project ``` > 上面的 `data-main` 是一个入口js文件指向，这个main文件可以写成 `scripts/main.js` 也可以省略 `.js` 后缀。 * 入口文件 `main.js`...
关于 `setTimeout` 的一些理解。 ## 背景 js不像java一样拥有sleep的功能，也就是将当前线程暂停一段时间后执行，因为js是基于事件机制工作的，所以它提供了 `setTimeout` 定时任务。 也就是说，如果你要实现一个sleep的功能，那也就只能将sleep后的任务，放到 `setTimeout` 的异步回调函数中执行吧！ 本文就简单介绍一下 `setTimeout` 的原理，以及实际工作中的作用。 ## 基础 ## JS是单线程 为什么js要搞成单线程？而不像java一样可以并发呢？根源在于js前期是嵌套在浏览器中的，而浏览器是直接跟用户打交道，对于人看到的结果而言，如果一次性并行执行多个任务，人！是会凌乱的。 当然，随着 `node.js` 的出现，js多线程不是梦，因为它的出现让大家知道：js不止能跑在浏览器上，还可以用在服务器端。所以，只要在服务器端，那么多线程的事情，终究会解决。虽然现在 `node.js` 全程异步机制已经很高效了！ ## JS是基于事件驱动的 为什么这么说呢？其实对于js而言，所以的任务，全部都进入队列，只不过它将当前执行的任务，叫做 `主任务`，而在 `主任务` 中产生的附加的动作全部进入...
css中有诸多选择器，运用得当的情况下，能让你少些不少的js，同时从容应对浏览器兼容的烦恼。 ## 手册 大家先看看 `阮一峰` 老师，在2009年总结的css选择器的文章：[css选择器笔记](http://www.ruanyifeng.com/blog/2009/03/css_selectors.html) ## 解惑 ### 一、CSS通用选择器及其优先级 我们知道 `基本选择器` 包括：`通用选择器`、`元素选择器`、`类选择器` 和 `ID选择器`。 这些这是概念，告诉你css有这些选择器，但是你知道他们在实际生产中如何使用，且有哪些规则吗？ #### 1.1 基本用法 1、通用选择器 ```css //对所有元素都生效 *{ padding:0; margin:0; box-sizing:border-box; } ``` 2、元素选择器 ```css...
本文主要说一个容易理解错误的地方，和常见的2种跨域方式。 ## 概念 经常有人会说，如何解决跨域cookie携带的问题，具体指哪里的cookie呢？ 我们知道，既然跨域了，那么前台和后台肯定不在同一个域上，也就是出现了两个域。 比如： 1. 前端的域为：www.page.com 1. 后台的域为：www.back.com 那么，使用www.page.com调用www.back.com的接口时，是携带哪个的cookie呢？ 明确告诉你，是www.back.com。 这个写出来大家可能都知道，但是实际中有时候就搞混了，比如，你通过chrome F12看到当前页面www.page.com下有cookie，但是就是请求后台接口www.back.com的时候没携带上，你就说跨域了，没带cookie有问题。 其实，你应该是去看www.back.com这个域下本身有没有cookie！！！ 对于这个问题，我也犯了一次混。 就是在手机H5页面上，H5是通过Webview打开的，H5所在的域下面手机客户端写了一堆cookie。但是与后台通信的时候，命名配置了跨域处理，而且允许携带cookie了，但是就是没带到后台。现在大家知道为什么了吧？ ## 场景 为什么跨域操作要携带参数给后台，有一种场景可能经常用。 比如：前台后完全分离的系统，前台登录后，后台会写入一些登录的凭证到cookie，以后前台再调用后台接口的时候，如果后台接口的cookie的数据能在请求的时候自动携带上，那么后台就可以校验，请求是否合法。 ## 跨域的2种常见处理 1. 使用CORS跨域处理，参考：[阮一峰-跨域资源共享 CORS 详解](http://www.ruanyifeng.com/blog/2016/04/cors.html) 1. jsonp处理（这个不能带cookie，而且其实全部是get请求） ##...