2.精通前端系列技术之seajs模块化使工作更简单（二）

最新推荐文章于 2024-07-08 12:24:36 发布
最新推荐文章于 2024-07-08 12:24:36 发布
阅读量79 收藏
点赞数
文章标签： 前端 javascript ViewUI
原文链接：http://www.cnblogs.com/kingCpp/p/4830925.html
版权

drag.js

// JavaScript Document

//B开发

define(function(require,exports,module){
    
    function drag(obj){
        var disX = 0;
        var disY = 0;
        
        obj.onmousedown = function(ev){
            
            var ev = ev || window.event;
            disX = ev.clientX - obj.offsetLeft;
            disY = ev.clientY - obj.offsetTop;
            
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                
                var L = ev.clientX - disX;
                var T = ev.clientY - disY;
                
                //L = require('./range.js').range(L , document.documentElement.clientWidth - obj.offsetWidth , 0);
                //T = require('./range.js').range(T , document.documentElement.clientHeight - obj.offsetHeight , 0);
                
                obj.style.left = L + 'px';
                obj.style.top = T + 'px';
            };
            
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
            
            return false;
            
        };
        
    }
    
    exports.drag = drag;
    
});

main.js

// JavaScript Document

//A开发

define(function(require,exports,module){
    
    var oInput = document.getElementById('input1');
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('div2');
    var oDiv3 = document.getElementById('div3');
    
    require('./drag.js').drag(oDiv3);
    
    oInput.onclick = function(){
        
        oDiv1.style.display = 'block';
        
        require('./scale.js').scale(oDiv1,oDiv2);
        
    };
    
});

range.js

// JavaScript Document

define(function(require,exports,module){
    
    function range(val , max , min){
        
        if( val > max ){
            return max;
        }
        else if( val < min ){
            return min;
        }
        else{
            return val;
        }
        
    }
    
    exports.range = range;
    
});

scale.js

// JavaScript Document

//C开发

define(function(require,exports,module){
    
    function scale(obj1,obj2){
        
        var downX = 0;
        var downY = 0;
        var downW = 0;
        var downH = 0;
        
        obj2.onmousedown = function(ev){
            var ev = ev || window.event;
            downX = ev.clientX;
            downY = ev.clientY;
            downW = obj1.offsetWidth;
            downH = obj1.offsetHeight;
            
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                
                var W =  ev.clientX - downX + downW;
                var H = ev.clientY - downY + downH;
                
                W = require('./range.js').range(W , 500 , 100);
                H = require('./range.js').range(H , 500 , 100);
                
                obj1.style.width = W + 'px';
                obj1.style.height = H + 'px';
            };
            
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            };
            
            return false;
            
        };
        
    }
    
    exports.scale = scale;
    
});

index.html

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1{ width:200px; height:200px; background:red; position:absolute; display:none;}
#div2{ width:30px; height:30px; background:yellow; position:absolute; right:0; bottom:0;}
#div3{ width:100px; height:100px; background:blue; position:absolute; right:0; top:0;}
</style>
<script src="../sea/sea.js"></script>
<script>

//A开发

seajs.use('./main.js');

</script>
</head>

<body>
<input type="button" value="弹窗" id="input1">
<div id="div1">
    <div id="div2"></div>
</div>
<div id="div3"></div>
</body>
</html>

 

转载于:https://www.cnblogs.com/kingCpp/p/4830925.html

asd09288917
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
2.精通前端系列技术之JavaScript模块化开发 seajs（一）
asd09288917的博客
09-22 119
在使用seajs模块化开发之前，直接在页面引用js会容易出现冲突及依赖相关的问题，具体问题如下 问题1：多人开发脚本的时候容易产生冲突（比如全局参数冲突，方法名冲突），可以使用命名空间降低冲突，不能完全避免冲突 // JavaScript Document /*var a = 10; function tab(){} function drag(){} ...
2.精通前端系列技术之seajs和gruntJs结合开发（三）
asd09288917的博客
09-22 95
1.我们先来了解下模块化历史 模块化历史 nodeJS的出现（http://nodejs.org/） commonJS规范（http://www.commonjs.org/） 浏览器JS的模块化？ AMD规范（http://wiki.commonjs.org/wiki/Modules/AsynchronousDefinition） requireJS库（http://...
2.精通前端系列技术之JS模块化开发-深入学习seaJs（四）
asd09288917的博客
09-23 77
深入学习seajs 配置信息 alias : 别名配置 paths : 路径配置 vars : 变量配置 map : 映射配置 preload : 预加载项 debug : 调试模式 base : 基础路径 charset : 文件编码 深入学习seajs module id : 模块唯一标识 uri : 模块绝...
2024小白一看就懂的前端学习路线图，零基础到精通
2401_84433570的博客
04-28 812
掌握jQuery常用API的使用方法，并且能够熟悉jQuery的插件开发机制。掌握原生响应式实现机制，能够使用Bootstrap中的栅格式布局和响应式布局进行复杂页面的布局开发。充分理解AJAX原理，掌握JS原生和jQuery方式的AJAX使用。掌握jQueryUI的使用，快速高效实现页面的效果呈现。学会了这些技能，你就能够独立制作电商类、企业类网站，实现常见JS动态效果，并且能够基于jQuery、Bootstrap等框架实现炫酷的效果和复杂的功能啦！掌握HTML5、CSS3在移动端的使用技巧。
2021小白一看就懂的前端学习路线图，零基础到精通
CZ-001的博客
05-07 1687
文章目录一、前端开发入门二、前端开发初级三、前端开发进阶四、前端开发高级 随着互联网的深入发展，前端开发工程师一跃成为市场上非常抢手的人才。很多同学，包括以前做UI的、Java的、或者对于IT完全零基础的同学都想学习前端。下图是网上流传甚广的一张前端学习思维导图，很多初学者表示看到这些密密麻麻的知识点就已经晕了。确实，前端是一门涵盖面很广的学科。但是想学前端的你也不用慌张，内容虽多但有迹可循，只要循序渐进就不怕学不好前端！ 那么前端开发到底需要学什么？应该怎么学？接下来黑马程序员前端学院教你如何从零基础学习
前端之路:工具化与工程化
面向对象的夜猫子
10-24 972
前言 二十载光辉岁月 近年来，随着浏览器性能的提升与移动互联网浪潮的汹涌而来，Web前端开发进入了高歌猛进，日新月异的时代。这是最好的时代，我们永远在前行，这也是最坏的时代，无数的前端开发框架、技术体系争妍斗艳，让开发者们陷入困惑，乃至于无所适从。Web前端开发可以追溯于1991年蒂姆·伯纳斯-李公开提及HTML描述，而后1999年W3C发布HTML4标准，这个阶段主要是BS架构，
前端资料大全
weixin_55356940的博客
04-25 4774
前端资源（一入前端深似海） 前端知识体系http://www.cnblogs.com/sb19871023/p/3894452.html 前端知识结构https://github.com/JacksonTian/fks Web前端开发大系概览https://github.com/unruledboy/WebFrontEndStack Web前端开发大系概览-中文版http://www.cnblogs.com/unruledboy/p/WebFrontEndStack.html We...
前端汇总（转载）
yuanbotao219的博客
01-14 8120
文章目录前端汇总一、概要二、优秀的网站三、前端技术分类综合四、各类前端资源综合类入门类工具类综合效果搜索平台团队Blog开发中心Nodejs综合APIEcmascriptVueAngularjsReactWebpackGulpJs templateHTML5(HTML)CSS3(CSS)移动端APIjQueryD3RequriejsSeajsLess,sassMarkdown兼容性UI相关其它AP......
学习前端好找工作吗？
m0_51567383的博客
05-06 929
前端面试题 1.精通CSS、javaScript，理解w3c盒子模型、熟练使用jquery等，了解HTML5，CSS3规范（加分项：使用less优先）。 2.需要能熟练使用css+div进行web页面布局；需要能熟练编写页面交互js，使用Ajax+JSON等与后台进行数据交互。 3.使用过任何一种Javascript/css框架，如ext,jqueryUI,miniUi,bootstrap,AngularJS等； 4.加分项：使用过nodejs、requirejs、seajs任何一种，有前端分离，模块化开发
JavaScript模块化开发之SeaJS
11-23
  SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架，可以实现JavaScript的模块化开发及加载机制。使用SeaJS可以提高JavaScript代码的可读性和清晰度，解决目前JavaScript编程中普遍存在的依赖关系混乱和代码...
seajs和requirejs模块化简单案例分析
10-16
本文将深入探讨Seajs和RequireJS这两款经典的模块化工具，并通过具体的案例来阐述它们的工作原理和使用技巧。 Seajs是一款基于CMD（Common Module Definition）规范的模块加载器，它允许开发者按需加载模块，避免了...
模仿seajs模块化加载的自行实现练习
12-19
这是自己编写的模仿seajs模块加载的模块加载器，用于学习交流之用。大致模仿seajs的模块化加载实现。
Vuex 核心揭秘：打造高效前端状态库
a3098448071的博客
07-03 1133
状态（State）类似于 Vue 组件的data属性，用于存储组件的响应式数据。在 Vuex 中，state用于存储整个应用的全局状态。Getters类似于 Vue 组件的computed计算属性，它们用于从其他数据派生出新的数据。在 Vuex 中，getters用于从state中派生出一些状态，这些状态可以根据state的变化而缓存或重新计算。Mutations类似于 Vue 组件的methods中的方法，用于改变组件的data。在 Vuex 中，mutations用于改变state。
WHAT - NextJS 的路由系统和 react-router-dom
weixin_58540586的博客
07-04 945
不，Next.js 的路由系统并不基于。Next.js 本身内置了自己的路由系统，并且在其生命周期和工作方式上与有所不同。
Vue前端打包
weixin_63680330的博客
07-04 352
介绍:Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。启动：双击nginx.exe 文件启动，服务器默认占用80端口。官网:https://nginx.org/打包好的dist目录赋值到html下。html静态资源文件目录。conf 配置文件目录。logs日志文件目录。temp临时文件目录。
Haproxy搭建Web群集
最新发布
wkysdhr的博客
07-08 720
Haproxy 是目前比较流行的一种群集调度工具，同类群集调度工具有很多，如LVS 和Nginx。相比较而言，LVS 性能最好，但是搭建相对复杂;Nginx的upstream模块支持群集功能，但是对群集节点健康检查功能不强，高并发性能没有 Haproxy好。
Vue2前端实现数据可视化大屏全局自适应 Vue实现所有页面自适应 Vue实现自适应所有屏幕
weixin_41346436的博客
07-04 170
在Vue.js中创建一个数据大屏，并使其能够自适应不同屏幕大小，通常涉及到布局的响应式设计、CSS媒体查询、以及利用Vue的事件系统来处理窗口大小变化。通过以上步骤，我们创建了一个使用Vuetify布局的响应式数据大屏，它能够根据屏幕宽度动态调整其内容的布局。Vuetify的v-flex组件允许我们轻松地创建响应式的网格布局，而Vuex和全局事件总线则帮助我们在窗口大小变化时更新应用状态和组件布局。在实际项目中，你可能还需要处理更复杂的响应式设计挑战，例如在不同的屏幕尺寸下显示不同的内容或布局。
JS混淆基本类型和原理
朴拙科技的博客
07-06 708
混淆技术为JS代码提供了一定程度的保护，但同时也给代码的维护和逆向工程带来了挑战。了解和掌握这些混淆技术的原理和解析方法，可以帮助开发者更好地保护或理解JS代码。然而，需要注意的是，混淆并不是万无一失的安全措施，它更多的是增加了攻击者理解代码的难度。在进行逆向工程时，应始终遵守法律法规，尊重知识产权，不要用于非法目的。
前端架构体系技术.pdf
12-17
在工具和技术层面，文档介绍了模块加载器如requirejs、modjs和seajs的工作原理，以及loadJs的模块化加载实现。此外，polyfill和shim的概念被提出，它们用于在不支持新特性或API的旧浏览器中提供兼容性解决方案。 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值