前言: 原先准备先在之前 Demo上引用 jquery实现一个简单用户UI,使交互页面可以填写翻译、例句等信息。在指导人的推荐下发现一款开源 chrome扩展-划词翻译,好评颇多,加上个人 javascript底子薄,所以决定先读别人优秀代码,先学习再开发。

《划词翻译》最新地址
《划词翻译》初版地址

源码初读及个人策略

个人之前对 javacript的了解,只停留在对 jquery的简单使用和网络资源的改写上,初步看了划词v6.0的程序,作者已经开始重构,并将可复用的模块独立开建立子项目,从工程角度看,这可以使代码精简、分工明确,也便于后期其它项目复用。但是对于我这种新手实在是Hard模式,所以我决定自我降级,转而查看低版本,先从源头看起,策略如下:

  1. 第一步:目前计划是学习页面交互UI的嵌入与显示,通过 manifest.json配置文件初步分析,项目中相关的 js为 com.js与 content.js:其中 com.js相当于一个工具 js,有点 jquery的味道,不同的是主要实现的是项目中一些常用方法的定义,而 content.js完成控制和视图的动作,并对 document的一些事件进行监听,注册相应 function;
  2. 第二步:初步整理出二个 js文件中不明白的地方,逐个击破;(本篇博文主要完成这部分)
  3. 第三步:模仿代码自己”抄袭”一个 demo的页面交互功能;

JavaScript中()()解析

个人日常使用 javacript中,一般都是先直接var关键字直接声明function函数,再使用函数名+()来执行函数。content.js中所有代码都包含在(function($){…}())中,一眼看去,让我感觉有点迷茫:这到底是什么函数用法,做什么用的,有什么好处?查找资料后,有一定的收获:

  1. function($){…}是个匿名函数,用括号包裹是为了将函数声明转换为函数表达式(也可以用+或者!),后面添加一个括号,该表达式就会执行;写成这样:(function($){…})()也可以,貌似用前者多一点,理由就是好看?!所以选谁自己定。
  2. 作用就是:函数的定义和执行合二为一啦!
  3. 好处就是:不会污染全局命名空间(浏览器里的 global对象,如 window),因为 javascript的代码默认在全局环境下执行,在此声明的所有变量都会变成全局变量,而函数会创建属于自己的作用域,官方称谓 IIFE-Immediately Invoked Function Exprssion-立即调用的函数表达式。

看来以后自己写大段复杂逻辑代码还是写到一个匿名函数中比较稳妥。

严格模式

content.js中第一句代码就是”use strict”,这也是我从未用过的,什么意思呢?原来除了正常运行模式,ECMAscript 5添加了第二种运行模式:”严格模式”(strict mode)。顾名思义,这种模式使得 Javascript在更严格的条件下运行,具体可参看:Javascript 严格模式详解。 个人感觉有点强类型语言的味道,具体涉及的:全局变量显式声明、报错级别提升等等,可使个人代码更加规范,是个挺好的约束。

Object.create

com.js中定义了全局变量$,利用 extend方法,创建 inherit方法,其中调用 Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象。

变量和函数声明

JavaScript 中对变量和函数声明的“提前(hoist)”

其它知识点

后续会根据代码阅读持续补全,并动手实践对比。

发表评论

电子邮件地址不会被公开。 必填项已用*标注