我出的面试题中，有一条是问如何避免页面引用JS，出现函数、变量重复、冲突的。

从大的方面讲，应该引入javascript的模块化开发，符合AMD规范之类；

从小的方面说，大概就是限定变量和函数的作用域了，这也涉及到一点大家如雷贯耳的闭包概念。

众所周知，javascript没有类，只有函数。其实它的函数也跟类差不多了，函数里面可以定义函数。而对于.net来说，直到近期出现的C#7，才支持这一点。

所以，我们可以将函数和变量，都定义在一个函数里面，这样即与外部隔绝矣：

<html>

<head></head>

<body></body>

</html>

<script>

(function (){

    function f1(){};

    var v1;

    ....

})();

</script>

在一个页面中这样书写，等价于：

<html>

<head></head>

<body></body>

</html>

<script>

    function f1(){};

    var v1;

    ....

</script>

但封装性就好了许多，避免出现后者这种平铺直白，将方法和变量完全暴露于外界的隐患。并且(function(){})(); 这种方式可以应用到子函数，乃至推广到所有的函数，层层封装，没有止境。并且有闭包属性，不必担心全局的绑定访问不到里层的函数：

(function(){

    function f1(){}

    function f2(){}

    $("#btn1").click(function(){

        f1();

        f2();

    });

}

javascript中提高代码的封装性的更多相关文章

  1. Android 命名规范 （提高代码可以读性）

    android文件众多,根据名称来辨别用途很重要,因此命名要规范 这篇文章可参考:Android 命名规范 (提高代码可以读性) 刚接触android的时候,命名都是按照拼音来,所以有的时候想看懂命名 ...

  2. JavaScript中的代码执行顺序

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  3. Javascript面向对象三大特性（封装性、继承性、多态性）详解及创建对象的各种方法

    Javascript基于对象的三大特征和C++,Java面向对象的三大特征一样,都是封装(encapsulation).继承(inheritance )和多态(polymorphism ).只不过实现 ...

  4. Android 命名规范 （提高代码可以读性） 转

    转自:http://blog.csdn.net/vipzjyno1/article/details/23542617 刚接触android的时候,命名都是按照拼音来,所以有的时候想看懂命名的那个控件 ...

  5. PC-lint集成于SourceInsight 范例以及简单分析;提高代码的健壮性;

    写代码之际突然想起了pc-lint这个"古董级"的代码静态分析工具;   下午机房的服务器歇菜了,没法调试游戏,刚好抽出时间来研究一下pc-lint集成在SourceInsight ...

  6. [转] Android 命名规范 （提高代码可以读性）

    Android命名规范编码习惯 刚接触android的时候,命名都是按照拼音来,所以有的时候想看懂命名的那个控件什么是什么用的,就要读一遍甚至好几遍才知道,这样的话,在代码的 审查和修改过程中就会浪费 ...

  7. javascript中常见的函数封装 ：判断是否是手机，判断是否是微信，获取url地址？后面的具体参数值，毫秒格式化时间，手机端px、rem尺寸转换等

    // 判断是否是手机function plat_is_mobile(){ var sUserAgent = navigator.userAgent.toLowerCase(); var bIsIpad ...

  8. javascript中document.getElementsByClassName兼容性封装方法一

    var getElmsByClsName = function(className, results) { results = results || []; // 判断浏览器是否支持 getEleme ...

  9. javascript中Ajax的简单封装

    GET方式的在线:DEMO POST方式在线:DEMO // 1.封裝AJAX函數 function nativeAjax(option,success,error){ // 定义domain,方便环 ...

随机推荐

  1. hdu 4353 统计点在三角形内的个数

    Finding Mine Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  2. Java-动态规划-最多苹果数量的方法

    平面上有N*M个格子,每个格子中放着一定数量的苹果.你从左上角的格子开始,每一步只能向下走或是向右走,每次走到一个格子上就把格子里的苹果收集起来,这样下去,你最多能收集到多少个苹果. 思路: 解这个问 ...

  3. 【BZOJ2243】染色（树链剖分）

    题意: 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段),如“112221”由 ...

  4. for循环创建对象

    有时候奇怪的发现往list添加数据的时候,一直被最后一个元素覆盖,首先 ,我们得明白原理: 在new 一个对象的时候,对象的ID是唯一确定的:将对象add入list中时,放入list中的其实是对象的引 ...

  5. Linux 虚拟内存和物理内存的理解【转】

    转自:http://www.cnblogs.com/dyllove98/archive/2013/06/12/3132940.html 首先,让我们看下虚拟内存: 第一层理解 1.         每 ...

  6. WEB学习-CSS清除浮动

    浮动的清除 来看一个实验:现在有两个div,div身上没有任何属性.每个div中都有li,这些li都是浮动的. <div> <ul> <li>HTML</li ...

  7. 监听EditText输入完成

    最近有个需求,要在用户输入完快递单号之后,请求快递100接口,拿到快递公司信息.总不能用户输入一个数字就请求一次吧,给服务器造成不必要的压力(虽然不是自家服务器).但是又无法知晓用户何时输入完毕,每家 ...

  8. 小W旅游railway

    对于一家铁路公司,我们可以首先使用 Floyd 算法求出任 意两点 x, y 间只经过属于该家铁路公司铁路的最短路,那么在新 图中我们在 x, y 间加一条 x 到 y 最短路对应的花费为边权的边. ...

  9. Extjs grid 单元格事件

    celldblclick: function (view, td, cellIndex, record, tr, rowIndex, e, eOpts) { //extjs 4.2下,有时出现,多次不 ...

  10. Css实现一个菜单导航

    提要:使用大div定位设置为relative,子div设置为absolute实现菜单下拉 实现代码: <!DOCTYPE html> <html lang="en" ...