【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123820 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123820

// 内容框架
(function (xframe) {
    // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
    xframe.extend({
        /**
         * .html()用为读取和修改元素的HTML标签    对应js中的innerHTML
         * @return {html}
         */
        html: function () {
            var arg = arguments,
                len = arg.length,
                arr = Array.prototype.slice.call(this);
            if (this.length < 1) {
                return this;
            }

            // 分为取值模式和设置模式
            if (len === 0) {
                // 取值模式
                return this[0].innerHTML;
            } else if (len === 1) {
                // 设置模式
                arr.each(function () {
                    this.innerHTML = arg[0];
                });
            }

            return this;

        },
        /**
         * 用于获取文本信息
         * @return {*}
         */
        text: function () {
            var args = arguments,
                len = args.length;

            if (this.length === 0) {
                return this;
            }

            if (len === 0) {
                // 取值模式
                return this[0].innerText;
            } else if (len === 1) {
                // 设置模式
                this.each(function () {
                    this.innerText = args[0];
                });

            }
            return this;
        },
        /**
         * 用于获取表单中的数值(input, form)
         * @return {*}
         */
        val: function () {
            // val();设置或者获取表单字段的值(前提是表单设置了value属性);
            var args = arguments,
                len = args.length;

            if (this.length === 0) {
                return this;
            }

            if (len === 0) {
                return this[0].value;
            } else if (len === 1) {
                this.each(function () {
                    this.value = args[0];
                });
            }

            return this;
        }
    });

    // 不需要参与链式访问的
    xframe.extend(xframe, {});
})(xframe);

 

相关文章
|
4天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
【4月更文挑战第24天】Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它包含中间件系统用于日志、错误处理和静态文件服务,集成多种模板引擎如EJS、Jade、Pug。框架还提供安全中间件提升应用安全,并具有良好的可扩展性,便于项目功能扩展和开发效率提升。
26 3
|
2天前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
2天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
4天前
|
资源调度
在 Next.js 中使用自定义服务器框架进行服务器端渲染
在 Next.js 中使用自定义服务器框架进行服务器端渲染
Next.js 的服务器端渲染框架集成
Next.js 的服务器端渲染框架集成
|
4天前
|
前端开发 网络架构 UED
React Next.js框架
React Next.js 是一个基于 React 的服务器渲染框架,用于构建高性能的现代Web应用。它提供内置的服务器渲染、静态导出、动态路由功能,并自动进行代码拆分。Next.js 还支持热模块替换、CSS-in-JS 和客户端路由,拥有丰富的插件生态系统,简化了开发过程,提升了应用的性能和用户体验。
|
4天前
|
移动开发 JavaScript 前端开发
Phaser和Three.js是两个非常流行的JavaScript游戏框架
【5月更文挑战第14天】Phaser是开源的2D游戏引擎,适合HTML5游戏开发,内置物理引擎和强大的图形渲染功能,适用于消消乐等2D游戏。Three.js是基于WebGL的3D库,用于创建3D场景和应用,支持各种3D对象和交互功能,广泛应用于游戏、可视化等领域。选择框架取决于项目需求,2D选Phaser,3D选Three.js。
15 4
|
4天前
|
JavaScript 前端开发
JS实现网页页面的框架(demo)
JS实现网页页面的框架(demo)
10 1
|
4天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
4天前
|
设计模式 前端开发 JavaScript
AngularJS是一款由Google收购的JavaScript结构框架
【5月更文挑战第2天】AngularJS是Google收购的JavaScript框架,用于构建动态Web应用,基于MVC模式,强调模块化和双向数据绑定。它简化了视图与模型的同步,通过语义化标签和依赖注入提升开发效率。适用于复杂单页面应用(SPA),但不适合DOM操作密集型或性能要求极高的场景。
26 0