作者: admin

  • 获取函数中所有参数

    [].slice.call(arguments).join(" ")

    已知里面传了3个参数的情况下

    <a ms-click="test(2,22,nan)">点击</a>

    如果我们在未知传递了多少个参数的情况下又需要获取所有的参数并封装到数组里的话我们可以:

    test:function(){
      abc.status=[].slice.call(arguments).join(" ");
     }

    红色代码会自动获取所有参数的值并封装到数组里

  • avalon.js怎么改造成seajs的cmd模块

    define("avalon", function(require, exports, module){
       /* avalon.js 或avalon.mobile源码......................*/
       avalon.config({
          loader: false
       })
    
       if (typeof module !== "undefined" && typeof module !== "function") {
         module.exports = avalon;
       } else if (typeof define === "function") {
         define(avalon);
       } 
    })
  • js面向对象的私用属性方法和对外接口

    JavaScript面向对象编程中私有成员、静态成员的实现要比Java、ActionScript、Python要复杂的多,现在摘抄一些《JavaScript设计模式》中的代码来做演示。

    私有属性和方法

    var Book = function(newName){
    // 私有属性
    var name;

    // 私有方法
    function checkName(name){
    // …
    }

    // 特权方法
    this.getName = function(){
    return name;
    };

    // 特权方法
    this.setName = function(newName){
    name = newName || ‘No Name’;
    };

    // 构造代码
    this.setName(newName);

    };

    var book01 = new Book(‘name01’);
    console.log(book01.getName()); // 输出 ‘name01’
    book01.setName(‘newName01’);
    console.log(book01.getName()); // 输出 ‘newName01’

    在本例中用var声明私有变量,这意味着它们只存在于Book构造器,checkName函数也是用同样的方法声明的,因此成了一个私有属性。

    要想访问这些私有属性和方法的函数只需声明在Book中即可,这些方法称为特权方法(privileged method),它们是公有方法,为了能够在对象外部访问这些特权函数,它们的前面都要加上关键字this。其它任何不需要直接访问私有属性的方法都可以放在像Book.prototype中声明。

    静态属性和方法

    var Book = (function(){
    // 私有静态属性
    var numOfBook = 0;

    // 构造函数
    var cotr = function(argument){
    // 私有属性
    var name;

    // 私有方法
    function checkName(name){
    // …
    }

    // 特权方法
    this.getName = function(){
    return name;
    };

    numOfBook++;
    };

    // 特权静态方法
    cotr.getNumOfBook = function(){
    return numOfBook;
    };

    // 返回构造函数
    return cotr;

    })();

    // 公有静态方法
    Book.display = function(){
    // …
    };

    var book01 = new Book();
    var book02 = new Book();
    console.log(Book.getNumOfBook()); // 输出 2

    在这里私有成员和特权成员仍然被声明在构造函数中,但原来的那个构造函数却从一个普通的函数变成了一个内嵌函数,并且被作为包含它的函数的返回值赋给变量Book。这就创建了一个闭包,可以把静态的私有成员声明在里面。位于外层函数声明之后的一对空括号很重要,其作用是代码一载入就立即执行这个函数。这个函数的返回值是另一个函数,它被赋给Book变量,Book因此成了一个构造函数。在实例化Book时,所调用的是这个内层函数,外层那个函数只是用于创建一个可以用来存放静态私有成员的闭包。

    shejimoshi

    http://julabs.com/blog/private-static-in-javascript-oop/

  • 快速上手seajs模块化以及案例

    JS本身是没有模块化的概念,有了seajs就有了模块化的思想,为了快速上手使用这里一切以案例为主。

    这里以一个jquery.fancybox.pack.js灯箱效果插件介绍如何运用到seajs中。

    传统的调用JS我们可以看到加载JS要按先后顺序进行加载,例如图:

    fancybox

    以上是首页调用JS的内容,一旦项目不断的做大加载的JS数量会更多页面看着也不好维护。如果我们使用seajs,页面就会变得简洁如图:

    seajs1

    效果是一样的,就是减少了首页代码的代码量。

    步骤:

    1,先加载sea.js

    <script type="text/javascript" src="js/sea.js"></script>

    2,定义模块,要搞清楚js之间的依赖关系。

    定义一个模块:
    define(function(require,exports,moudle){
      //我们的代码都会些在模块中
    });
    //main.js
    
    define(function(require,exports,moudle){
        $= require('./lib/jquery-1.8.3.min.js'); //这样就引入了jq,不加var的话就是全局变量了其他模块可以直接使用
    
      var pack = require('./source/jquery.fancybox.pack.js')($); //说明jquery.fancybox.pack.js这个文件依赖jquery
    
      require('./source/helpers/jquery.fancybox-buttons.js')(pack); //说明jquery.fancybox-buttons.js文件同时依赖jquery和jquery.fancybox.pack.js
    
    
     var init = function(){ 
         $(function(){
                  //依赖关系部署好,这里就些调用的代码了,就跟我们平时写jq一样
         });
     } 
    
    
    exports.init2 = init;//以上的变量和方法都是此模块私有,我们要在其他模块调用必须要提供对外的接口,以后对外的接口要使用的话直接就调用init2即可。
    
    });

    3,调用模块

     seajs.use(['./js/1','./js/main'],function(m,n){ 
        m.init(); 
        n.init2(); 
     });
    
    如果是调用多个模块可以用数组+参数1.js对应m对象,main.js对应n。
    之前的例子我们写的是main.js,还记得对外的接口吗?
    exports.init2,这里调用就直接n.init2(),这里就调用了main.js代码。

    这里注意:在seajs中引入jquery,由于直接使用require的话seajs是找不到jquery的如果我们需要修改下jquery文件,方法如下:

    define(function(){
       //jQuery代码
    return $.noConflict();
    });

    如果依赖于jquery的插件同样修改源代码添加代码如下:

    define(function(require){
       return function(jquery){
       //代码
    }});

    4,seajs.config配置加载器

    官方介绍https://github.com/seajs/seajs/issues/262

    案例下载

    基本用法就是这样这里提供案例源文件。还有其他的用法待更新。。

    seajs不同版本功能还需要不通的扩展插件支持http://seajs.org/docs/#docs

     

     

  • responsiveslides.min.js响应式且兼容IE6/7/8轮播幻灯片

    幻灯片 兼容IE6 焦点图 响应式

    responsiveslides

    http://pan.baidu.com/s/1dDD5rbj

     

    兼容IE7/8幻灯片同时也支持手机手势幻灯片https://sdeno.com/?p=4828