javascript - 麻烦大家看一段代码哈??
天蓬老师
天蓬老师 2017-04-11 13:30:56
0
3
573

以下是我将平常积累的函数整成类似jquery框架的代码。
麻烦评价下哈。
有多废就直说,哥顶得住!欢迎在回答去畅所欲言哈...谢谢捧场


/*
  * SmallJS
  * 运行环境:IE 9+(包括 IE9) 或同等级别的其他浏览器
  * 借鉴了 jQuery
  * 使用时注意: 前面带有 _ 的属性或方法表示私有或受保护的属性或方法,全都是不允许调用的(虽然实际上是可执行的,但是不赞成调用!因为调用后得到的结果尚未测试....)
*/
(function(){

    "use strict";
    
    /*
     * ********
       变量定义
     * ********
     */
    // 定义调用名称,例如定义 G,那么就可以这么使用: G('#p').getEleW('content-box') // 200
    var defaultApiName   = 'G';

    // 预定义事件类型:支持移动端
    var browser   = getBrowser();
    var click     = browser === 'mobile' ? 'touchstart' : 'click';
    var mouseDown = browser === 'mobile' ? 'touchstart' : 'mousedown';
    var mouseMove = browser === 'mobile' ? 'touchmove'  : 'mousemove';
    var mouseUp   = browser === 'mobile' ? 'touchend'   : 'mouseup';
    
    
    
    /*
     * ********
       构造函数
     * ********
     */
    function SmallJs(selector , context){
        if (this === window || this === undefined) {
            return new SmallJs(selector , context);
        }
        // 使用时注意
        this._curEle = this._getEle(selector , context);
        this.length = this._curEle.length === undefined ? 1 : this._curEle.length;
    }

    /*
     * ************
       构造函数原型
     * ************
     */
    SmallJs.pro = SmallJs.prototype = {

        // 版本
        version: '1.0' ,

        // 构造函数
        constructor: SmallJs ,

        // 当前引用的DOM对象
        _curEle: null ,

        // id 选择器
        _idSelector: function(selector){
            return document.getElementById(selector);
        } ,

        // class 选择器
        _classSelector: function(selector , context){
            return document.getElementsByClassName(selector , context);
        } ,

        // tag 选择器
        _tagSelector: function(selector , context){
            return document.getElementsByTagName(selector , context);
        } ,

        // css 选择器
        _cssSelectorAll: function(selector){
            return document.querySelectorAll(selector);
        } ,
        
        /*
         * 1. 获取 DOM 元素
         * 2. 转换为 SmallJs 对象,并将 _curEle 属性设置为当前元素
         */
        _getEle: function(selector , context){
            //if ()
            var idSelector     = /^#\w+$/;
            var classSelector  = /^\.\w+$/;
            var tagSelector    = /^\w+$/;
            
            if (selector instanceof Object) {
                return selector;
            } 

            if (idSelector.test(selector)) {
                return this._idSelector(selector.substring(1));
            }
            
            if (classSelector.test(selector)) {
                return this._classSelector(selector.substring(1) , context);
            } 

            if (tagSelector.test(selector)) {
                return this._tagSelector(selector , context);
            }    

            return this._cssSelectorAll(selector);
        } ,
        
        // 获取 DOM 元素|集合,可直接使用 Javascript 原生语法
        get: function(){
           return this._curEle;
        } ,

        // 指针移动:第一个元素
        first: function(){
            if (!this._isDOMList(this._curEle)) {
                return this;
            }

            this._curEle = this._curEle[0];
            this.length = 1;
            
            return this;
            //return this._merge(this._curEle , this);
        } ,
        
        // 指针移动:最后一个元素
        last: function(){
            if (!this._isDOMList(this._curEle)) {
                return this._curEle;
            }

            this._curEle = this._curEle[this.length - 1];
            this.length = 1;
            
            return this;
            //return this._merge(this._curEle , this);
        } ,

        /* 
         * 指针移动:指定元素
         * 1. idx 类型不是 number 时,返回 第一个元素
         * 2. idx 的大小 大于等于 总长度时 ,返回最后一个元素
         */
        jump: function(idx){
            if (!this._isDOMList(this._curEle)) {
                return this;
            }

            var idx = SmallJs.getValType(idx) !== 'number' ? 0 : idx >= this.length ? this.length - 1 : idx;
            
            this._curEle = this._curEle[idx];
            this.length = 1;
            
            return this;
            //return this._merge(this._curEle , this);
        } ,
       
        /* 
         * 对象合并(继承),不建议使用!
         * @param1 HTMLElement src
         * @param2 Object      copy
         * ....
         * @return 继承 SmallJs 后的 HTMLElement
         */
        _merge: function(){
            if (this._isDOMList(this._curEle)) {
                throw new Error('当前指针所指向的是一个 DOM 元素集合!不是单一的元素!请设置单一元素后在进行合并!');
            }
            
            var src       = arguments[0];
            var list      = SmallJs.mergeObj.apply(null , SmallJs.toArray(arguments , 1));
            for (var key in list)
                {
                      if (src[key] === undefined) {
                          if (SmallJs.getValType(list[key]) === 'array') {
                              src[key] = [];
                              this._merge(src[key] , list[key]);
                          } else if (SmallJs.getValType(list[key]) === 'object') {
                              src[key] = {};
                              this._merge(src[key] , list[key]);
                          } else {
                              src[key] = list[key];
                          }
                      }
                }
            return src;

        } ,
        
        // 判断当前对象是否是 元素集合
        _isDOMList: function(obj){
            return obj instanceof HTMLCollection || obj instanceof NodeList;
        } ,
        
        // 获取样式值
        getStyleVal: function(attr){
            return window.getComputedStyle(this._curEle , null)[attr];
        } ,

        // 设置元素 css 样式
        css: function(json){
            var json = SmallJs.getValType(json) !== 'object' ? {} : json;

            for (var key in json)
                {
                    this._curEle.style[key] = json[key];
                }
        } ,
        // ....此处大量省略
           
        // 还原全局变量 s,避免冲突
        noConflict: function(){
         if (window['_' + defaultApiName] !== undefined) {
           window[defaultApiName] = window['_' + defaultApiName];
         }
        } ,

        // 重命名对外暴露的 API 接口名称
        renameDefaultApiName: function(name){
         var name = typeof name !== 'string' ? defaultApiName : name;
         this.noConflict();
         defaultApiName = name;
         SmallJs.setApiName();
        }
    };

    /*
     * ***********************************************************************************
       以下是以 SmallJs 作为命名空间的 基础函数库,有先后顺序!所以不能打乱顺序,否则作废!
     * ***********************************************************************************
     */

    /*
     * 正确获取值的类型
     * @param Mixed val 待判断的值
     * @return string number boolean null undefined regexp date function array object
     */
    SmallJs.getValType = function(val){
        if (typeof val !== 'object' || typeof val !== 'function') {
            return (typeof val).toLowerCase();
        }

        var sIdx = '[object '.length;
        var eIdx = -1;

        return Object.prototype.toString.call(val).slice(sIdx , eIdx).toLowerCase();
    };

    /*
     * 判断一个值是否是有效值
     */
    SmallJs.isValidVal = function(val){
        if (val === '') {
            return false;
        }

        if (val === undefined) {
            return false;
        }

        if (val === null) {
            return false;
        }

        return true;
    };

    /*
     * 递归 对象|数组 拷贝
     * @param Object obj 数组 | 对象
     * @return Object 
     */
    SmallJs.copyObj = function(obj , isDeep){...};

    /*
     * 将一个对象转换为数组
     */
    SmallJs.toArray = function(obj , start , end){
        var start = SmallJs.getValType(start) !== 'number' ? 0 : start;
        var end   = SmallJs.getValType(end)   !== 'number' ? undefined : end;
        return Array.prototype.slice.call(obj , start , end);
    };

    /*
     * 普通对象继承 (不支持元素)

     * 第一种模式
     * @param Boolean isOverExistsKey   是否覆盖已有键名的键值
     * @param Boolean isExtends         是否直接在原对象上进行更改
     * @param Boolean isDeep            是否进行深层次递归拷贝
     * @param Object  args3             继承对象
     * @param Object  args4             被继承对象
     * @param Object  args5             被继承对象
     ....
     
     * 第二种模式
     * @param Object args1 继承对象
     * @param Object args2 被继承对象
     * @param Object args3 被继承对象
     ....
     * @return object
     */
    SmallJs.mergeObj = function(){...};
    

    /*
     * ************************************************************************************************************************
       作为对象的中的对象的 构造函数
       意思就是:对象中的某个属性 表示的含义已经超出了值的范围,即单纯使用值已经无法表示该属性的确切含义,因而,将其定义为对象!
     * ************************************************************************************************************************
     */
    function EventHandler(){
        if (this === window || this === undefined) {
            return new eventHandler();
        }
        this._eventList = [];
    }

    EventHandler.prototype = {....};

    SmallJs.mergeObj(SmallJs.pro , new EventHandler());
    
    SmallJs._setApiName = function(){
        if (window[defaultApiName] !== undefined) {
          window[defaultApiName] = SmallJs;
        } else {
          window['_' + defaultApiName] = window[defaultApiName];
          window[defaultApiName]  = SmallJs;
        }
    };

    SmallJs._setApiName();


})();

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(3)
洪涛

感觉不适合发到 sf 社区 ... 或许隔壁 v2ex 更合适 ...

左手右手慢动作

不错的小伙子, 不像老哥我, 混吃等死。

伊谢尔伦

小伙子 看好你哟 这么有冲劲

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template