JavaScript类库/组件/框架封装的总体结构

最新推荐文章于 2022-10-24 16:00:00 发布
VIP文章 最新推荐文章于 2022-10-24 16:00:00 发布
阅读量3.2k 收藏 4
点赞数 1
分类专栏： Javascript Basic
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neareast/article/details/8036107
版权

之前也有封装过简单的Javascript组件，但是因为没有遵循和参考过好的编码原则，封装的方式有诸多不妥。最近参考了几个框架的源代码解析，加上自己的理解，总结成文供以后参考。

笔者认为，所谓类库（或称框架）通常就是一个闭包，这个闭包可以访问外部宿主函数中定义的一些对外不可见的方法和变量，而对外提供的方法则放在类库的原型prototype中。关于闭包的概念，详见笔者的《深入理解JavaScript闭包》。类库对外提供一个初始化的入口，用于构造实例对象，此时宿主函数就是实例的作用域。由于类库的内部实现对外界是透明的ÿ

最低0.47元/天 解锁文章
NearEast
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js封装组件
j_qin的博客
09-16 1997
1、方式一 创建App.js var App = App || {}; var global = window; App.ns = function (nsStr) { var parts = nsStr.split("."), root = global, max, i; for (i = 0, max = parts.l...
Web组件构建框架Polymer.zip
07-16
在2013年的Google I/O大会上，Google发布了Polymer，它是一个使用Web组件构建Web应用的类库，同时也使用了为Web构建可重用组件的新的HTML 5标准。Polymer为大部分Web组件技术提供了polyfills功能，它能让开发者在所有的浏览器支持新特性前创建自己的可重用组件。此外，Polymer提供了一系列的部件的例子，其中包括天气、时钟、股票行情和线型图。 鉴于许多Web框架通过暴露JavaScript API来构建用户界面，而构建用户界面实际上就是生成一堆div和spans标记，Web 组件是原生浏览器的解决方案因此不依赖于一个完整的框架。因此，与现在的一般依赖某个Javscript框架的HTML组件相比，Web组件希望能减少碎片。尽管Web组件是一项有趣的新技术，但在浏览器们都支持它们（并且大部分用户都开始使用这些浏览器们）之前，其中的大部分功能还派不上用场。解决这个问题的一种方法是使用polyfills（译者注：polyfills原指一种墙面填料）。polyfill指的是一段代码，它能实现期望最终由浏览器自身实现的功能。如果浏览器本身已经实现了该功能，则polyfill什么都不做。否则，它模拟其实现而不依赖API。例如，webshims库实现了HTML5中各种功能，包括canvas、HTML5表格和在某些尚不支持地理位置定位的浏览器中实现地理位置定位功能。Polymer中的polyfills为需要使用Web组件成功构建应用提供了多种Web技术，包括：    HTML imports：种在其他HTML document中引入和重用HTML document的方法。    自定义元素：让开发者定义和使用自定义DOM元素。    Shadow DOM：在DOM中提供的封装。    模型驱动视图（Model Driven Views）：提供象AngularJS的数据绑定。    ·Web动画：实现复杂动画的API。    ·Pointer事件：对鼠标触摸和手写笔事件的封装这些polyfills可以分开使用而不需要使用Polymer的其他部分。此外，Polymer提供：    polymer.js: Polymer的核心运行引擎，能轻易创建自定义属性和事件。    一系列可重用的可视和非可视元素。 标签：Polymer  Web框架
原生js封装table组件
qq_42832151的博客
10-24 1340
使用原生js封装自己的table组件
Javascript高级技术篇(1)：搭建JS框架类库
weixin_33774615的博客
06-27 693
经过了"面向对象的Javascript系列"的预热，让我们再次起航进入Javascript富客户端系列。基于链式调用关于类库的讲解，本讲将一步一步搭建一个属于自己的JS框架类库。在这里，不妨问问大家：一个类库怎样才能算有价值的类库呢？我想不妨从以下几个方面去考量： 1). 避免改变JS固有的基础对象。即如对JS对象Function,String,Array等，不要试图改变这些对象的行为来适应你的...
封装 Vue.js 组件库
qq_32090185的博客
01-27 694
Study Notes 封装 Vue.js 组件库 组件库介绍 开源组件库 Element-UI IView Vant CDD(组件设计文档) 自下而上 从组件级别开始，到页面级别结束 CDD 的好处 组件在最大程度上被重用 并行开发 可视化测试 处理组件边界情况 vue 中处理组件边界情况的 API $root 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。 $parent 父实例，如果当前实例有的话。 $children 当前实例的直接子组件。需要注意 $chil
JS之常用组件封装
efew212efe的博客
05-04 2500
组件封装 一、说明 什么是组件？组件是指Web页面上抽出来一个个包含模板（HTML）、功能（JS）和样式（CSS）的单元 一个好的组件特点： 封装性、正确性、扩展性、复用性。 二、具体 作者：zh_yang 转载：https://www.jianshu.com/p/81f679149a18 1、 封装一个轮播组件 介绍 API：Carousels.init($ct,data) 依赖JQuery 第一个参数为需要展示轮播的容器，自行设置宽度、高度 第二个参数为轮播图片SRC数组，数量自定 预览.
Javascript面向对象特效&框架封装实战
02-22
本套Javascript面向对象课程主要包括以下四大块内容，通过以下内容安排帮助大家掌握用面向对象的方式来写程序，1，掌握面向对象的基本语法 封装 原型与原型链 this 等等2，使用面向对象封装一些特效3，使用面向对象实现一个类似于jQuery的小型框架4，用框架来做特效
封装Vue.js组件库
weixin_38255079的博客
05-06 878
封装Vue.js组件库 常用组件库： ElementUI iView 组件驱动开发 CDD（Component-Driven Development） 自下而上 从组件级别开始，到页面级别结束 处理组件的边界情况 $root : 将共享数据放入根实例，访问根实例获取数据，大部分情况使用vuex $parent / $children $children 获取的是包含多个子组件的数组 $refs 需要在mounted等待组件加载完毕 依赖注入 provide / injec
BootstrapBlazor UI框架-.net
06-14
本项目是利用 Bootstrap 样式进行封装的 UI 组件库。 组件 Blazor应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。 组件是内置到 .NET 程序集的 .NET 类，用来： 1、定义灵活的 UI ...
js代码库,封装经常用到的组件
04-01
control.js platform.js 自己经常用到的
超好用的验证框架 封装js
11-16
很好用的前台验证控制输入的框架 个人写的 不好请见谅！
小程序网络请求封装--http.js
05-06
代码中包含小程序网络请求工具类: 1.将工具类拷贝到项目目录下 2.在要使用的js中引入当前工具类 3.工具类注释中包含请求示例.
GridManager:表格组件GridManager
04-11
内置基础类库jTool, 对原生DOM提供了缓存机制。 支持在原生JS、jQuery、Angular 1.x、Vue、React环境下使用，一套代码多框架运行。 在框架满天飞的时代，助力前端开发人员用更少的API做更多的事情。 实现功能 功能 ...
BootstrapBlazor UI框架
12-17
本项目是利用 Bootstrap 样式进行封装的 UI 组件库。 组件 Blazor应用基于组件。 Blazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。 组件是内置到 .NET 程序集的 .NET 类，用来： 1、定义灵活的 UI ...
jQuery布局插件UI Layout简介
NearEast的专栏
04-03 6492
<!-- p {text-indent:2em} --> UI Layout是一种基于jQuery的布局框架，项目主页http://layout.jquery-dev.net/。该框架的参考原型是ExtJS的border-layout，因此十分适用于将原有使用ExtJS的项目改造成jQuery项目。其核心是一个大小自适应的中心面板（必选），面板的上下左右四个方向可以放置可折叠
JSP表格模板升级（2）-- 动态加载v.s.自定义标签初始化表格
NearEast的专栏
11-30 4337
前文《用JSP创建一个表格模板》中，我们已经创建了一个基本的jsp表格模板。这个模板究竟如何使用呢？本文介绍一下笔者用到的两种方式：调用Ajax动态更新页面，或用自定义标签来初始化。 调用Ajax动态更新：         这是笔者使用的一种基本方式，也是主要方法。前端页面预留一个显示表格的区域或弹框，给用户提供一个触发点，例如一个按钮，点击按钮之后，调用带参数的Ajax请求jsp页面，将正常
技术改变生活--自动签到的脚本
NearEast的专栏
08-31 4215
<!-- p {text-indent:2em} --> 技术的作用，就是用来改造生活。 身为一名程序员，当然要善于用自己的所学，来改造生活；不管大事小事，笔者认为这是一种态度。 公司实习生签到是需要登陆一套内部系统的，出差回来之后，笔者跟师弟相依为命，互相帮忙签到；一个人输两个甚至多个账号甚是麻烦，于是笔者写了一个脚本，自动给两人一键签到，用iframe分栏显示
解决Bootstrap模态对话框嵌套的一个bug
NearEast的专栏
04-29 4051
<!-- p {text-indent:2em} --> Bootstrap不用多说了。Bootstrap自带有模态对话框插件，使用起来很方便，只需按照如下格式定义html，然后用js触发，或者用指定data属性的普通html元素来触发，后者的示例如下： x 对话框标题 One fine body… 关闭
SSM框架与B/S体系结构的关系及应用
最新发布
06-01
SSM框架（Spring + SpringMVC + Mybatis）是一种Java Web开发框架，而B/S体系结构（Browser/Server）是一种网络应用程序的体系结构。它们之间的关系是，SSM框架可以被应用于B/S体系结构的Web应用程序的开发中。 在B...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值