代码难免会有 Bug,每次我们在 Chrome 调试代码时,总是会进入各种各样的库代码(比如 jQuery、Zepto),但实际上很多时候我们并不希望这样,要是能把这些库代码 “拉黑” 多好啊。
广大码农喜闻乐见的事情,隔壁家火狐已经实现了的功能,而且也有人给 Chromium 提了 Issue-407024。自然 Chrome 最终也提供了这个功能--Blackbox。Blackbox 允许屏蔽指定的 JS 文件,这样调试的时候就会绕过它们了。
代码难免会有 Bug,每次我们在 Chrome 调试代码时,总是会进入各种各样的库代码(比如 jQuery、Zepto),但实际上很多时候我们并不希望这样,要是能把这些库代码 “拉黑” 多好啊。
广大码农喜闻乐见的事情,隔壁家火狐已经实现了的功能,而且也有人给 Chromium 提了 Issue-407024。自然 Chrome 最终也提供了这个功能--Blackbox。Blackbox 允许屏蔽指定的 JS 文件,这样调试的时候就会绕过它们了。
这主题主要是早期对 web audio api 的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正。
在这之前,先回顾一下那些年我们一起走过的 web audio:
<bgsound>
在我印象当中,bgsound 是个很古老的东西,接触互联网之后,那时兴起的个人 blog 都有一个增加小组件或者背景音乐的功能,就是允许你贴入一段代码来实现,那是我最早接触 bgsound 的时候;当然那时也只是会 ctrl+c/v ~~
网上翻来些资料,大概是这样的:
早在 1996 年,IE3.0 定义了<bgsound> 的标签,这应该 web 最早的一个能播放音频的标签;但它却从未成为标准,由始至终只有 IE 支持该标签;提供的功能比较有限,简单的后台自动播放,支持.wav|.mid|.ua 格式音频;
前些时候有使用过 AngularJS 一些时间,最大的感受就是 Angular 完全颠覆了我们开发 Web 应用的方式,自己被其许多耳目一新的设计思想所折服。
首先想说的就是依赖注入(DI),这也意味着,你在使用某一个模块时,不需要去手动 require() 一下,你需要的模块会自己注入到的函数所在的作用域中,如:
1 2 3 4 5 |
app.service('PersonService', function ($http) { this.addPerson = function () { return $http.post('url/addPersonAction', {name:'name'}); } }); |
上面的代码中,直接使用了 $http 的 post() 方法。那么问题来了:为什么可以这样?我们知道 JS 函数在调用时,其形参如果没有赋值就会是 undefined。能直接使用 $http 的 post() 方法,就说明 $http 是有对应的实参与之对应的。这是怎么发生的呢?下面,就让我们一起来揭开其中的秘密。
一: 如何在 JS 中实现 DI
在这之前,我们先回顾一下 toString 方法。在 JS 中,除了 null 和 undefined,其它所有的一切值都是有 toString() 方法的。函数也不例外,而且函数的 toString() 方法,是可以拿到函数定义的全部代码,甚至是注释。有了这一前提,我们可以实现一个获取函数形参的方法。
EditorConfig
是一套用于统一代码格式的解决方案,很多项目都有用到,比如 Bootstrap
、jQuery
、Underscore
和 Ruby
等等。官方网站说的很简明,为了方便大家快速上手,我做了简单的翻译。
EditorConfig
可以帮助开发者在不同的编辑器和 IDE 之间定义和维护一致的代码风格。EditorConfig
包含一个用于定义代码格式的文件和一批编辑器插件,这些插件可以让编辑器读取配置文件并依此格式化代码。EditorConfig
的配置文件十分易读,并且可以很好的在 VCS(Version Control System
)下工作。
故事源于某一天,笔者的一位后台同事突然在 RTX 找到了我,然后抛出了一道一看就要跪的题,
以下是他给我的原题:
1 2 3 4 5 6 7 8 |
(function escape(input) { input = input.replace(/[;\\\/<>a-zA-Z]/g, "_").slice(0,1500); return "<script>[][([![]]+[])[++[++[++[[]][+[]]][+[]]][+[]]]+([]+{})[++[[]][+[]]]+([!![]]+[])[++[[]][+[]]]+([!![]]+[])[+[]]]"+input+"</script> "; })('?') 要求可以弹出alert框 |
初略看了一下,感觉这是在逗我么。。。这么搞,js 都 Brainfuck 化了啊。
目前已经有很多 JavaScript MVC 框架了。为什么我们还要创造 React 而为什么你会想使用它呢?
React 是一个用来构建可拼装化的 UI 界面的 js 库。它鼓励创造可复用性的 UI 组件,这些组件的特点之一是当前数据会随着时间发生改变。
习惯上,web 应用的 UI 界面是通过模版或 HTML 指令来搭建的。你可以使用这一整套将页面抽象化了的模版来构造你的 UI 界面。
React 在处理构建 UI 界面的不同之处在于它是以组件形式将 UI 界面阻断。这意味着 React 用的是一门真实的,全能的编程语言去渲染视图(View 层),同时我们也看到了比采用模版更优秀的一些原因:
如果是单纯的运行一个 node 进程,那会比较简单,例如:
1 |
node ./example.js |
但是一般来说,当我们运行一个 node 进程之后,我们可能希望对这个进程进行更多的管理,例如,当 node 程序是一个 server 服务时,我们就有更多的需求。
例如:
1. 服务挂掉的时候自动重启。
2. 列出所有服务,包括服务的信息。
3. 能够重启/终止某个服务。
4. 为服务的运行记录日志。
目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的 script 脚本中引入所用 js 就可以了。
但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以 node 作为后端为例):
1.spa 的应用,需要同时支持服务端直出页面以及客户端 pjax 拉取数据渲染,客户端和服务器公用一套渲染模板并执行大部分类似的逻辑。
2. 一个通过 websocket 对战的游戏,客户端和服务端可能需要进行类似的逻辑计算,两套代码分别用于对用户客户端的展示以及服务端实际数值的计算。
这些情况下,很可能希望我们客户端代码的逻辑能够同时无缝运行在服务端。
假设我们要做一个效果,界面最顶部是一个 ActionBar 并且是半透明的,ActionBar 下面是一个 ListView,在初始状态下,ListView 是 top 是在 ActionBar 的 bottom 位置的,但当 ListView 滚动的时候可以透过 ActionBar 看到下面的 ListView 的内容。如下面两张图所示:
Copyright © 2011-2021 AlloyTeam. All Rights Reserved. Powered By WordPress
粤ICP备15071938号-2