我出的面试题中，有一条是问如何避免页面引用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. aoj 2226 Merry Christmas

    Merry Christmas Time Limit : 8 sec, Memory Limit : 65536 KB Problem J: Merry Christmas International ...

  2. FZOJ Problem 2148 Moon Game

                                                                                                  Proble ...

  3. 【BZOJ1901】Dynamic Rankings（树套树，树状数组，主席树）

    题意:给定一个N个数的序列,要求维护一个数据结构支持以下两种操作: 1:将第X个数改成Y 2:查询第X到第Y个数里第K小的数是多少 n,m<=10000,a[i]<=10^9 思路:单点修 ...

  4. 【CF314C】Sereja and Subsequences（DP，树状数组）

    题意:给定一个N个数的数列,求所有不同不下降子序列的乘积之和,其中不同指的是组成它的数字和长度不完全相同 n (1 ≤ n ≤ 10^5) a[i]<=10^6 思路:考虑DP.设DP[a[i] ...

  5. poj 1410 Intersection 线段相交

    题目链接 题意 判断线段和矩形是否有交点(矩形的范围是四条边及内部). 思路 判断线段和矩形的四条边有无交点 && 线段是否在矩形内. 注意第二个条件. Code #include & ...

  6. 46深入理解C指针之---内存分析

    一.size_t:用于安全表示长度,所有平台和系统都会解析成自己对应的长度 1.定义:size_t类型表示C中任何对象所能表示的最大长度,是个无符号整数:常常定义在stdio.h或stdlib.h中 ...

  7. python读取Excel实例

    1.操作步骤: (1)安装python官方Excel库-->xlrd (2)获取Excel文件位置并读取 (3)读取sheet (4)读取指定rows和cols内容 2.示例代码 # -*- c ...

  8. vs-react-插件

  9. Codeforces Gym101606 E.Education (2017 United Kingdom and Ireland Programming Contest (UKIEPC 2017))

    E Education 这个题有点意思,就是找满足条件的最小价格里的最大值的人数,有点贪心的思想吧,一开始写错了,人群的那个不能排序,而且是最小价格里找能住下人最多的部门,让这个部门去住这个房间.在循 ...

  10. LibieOJ 6170 字母树 （Trie）

    题目链接 字母树 (以每个点为根遍历,插入到trie中,统计答案即可)——SamZhang #include <bits/stdc++.h> using namespace std; #d ...