文档章节

基于前端Js模块化规范的粗浅应用

BoomGred
 BoomGred
发布于 2017/09/07 21:24
字数 262
阅读 17
收藏 0

前言

  • 之前做项目时,由于刚起步,所以很多同事在Js的规范上写的很凌乱。又刚好自己在慕课网上接触了Js模块化的概念,顿时觉得怎么会有这么规范的写法。所以特别写篇博客,记录下。

Js架构如下

整个JS架构如图

   var JsName = {

	    //这里统一管理初始化的方法
	   	init:function(){

	   		//调用当前js的内部类方法时,如下
	   		JsName.class1.funtion1();

	   		//形式为JsName+方法名,如
	   		JsName.modual
	   	},

	   	//方法1,可以自定义方法
	    modual:function(){
	    	//
	    },

	    //内部类1
	    class1:{
	     	funtion1:function(){

	     	}
	    }

   }

具体实现·

var JsName = {
    //这里统一管理初始化的方法
   	init:function(){

   	},

   //存放当前js涉及到的url
   	url:{

   	   url1:function(){
   	   		return 'url';
   	   },

   	   .........

   	   	//其余自己按当前页面需求添加
   	},

   	.........

   	//其余自己按当前页面需求添加
   }

tips

  • 一定在调用的jsp页面底部调用该JS的init 初始化方法

Js模块规范整体说明

© 著作权归作者所有

共有 人打赏支持
BoomGred
粉丝 5
博文 36
码字总数 35331
作品 0
泉州
ES6新特性:使用export和import实现模块化

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具, 更多有关AMD和CMD...

克虏伯
今天
0
0
RequireJS与SeaJS模块化加载示例

web应用越变的庞大,模块化越显得重要,尤其Nodejs的流行,Javascript不限用于浏览器,还用于后台或其他场景时,没有Class,没有Package的Javascript语言变得难以管理,于是出现CommonJS项目...

nosand
2014/05/04
0
10
【CSS模块化之路2】webpack中的Local Scope

CSS是一门几十分钟就能入门,但是却需要很长的时间才能掌握好的语言。它有着它自身的一些复杂性与局限性。其中非常重要的一点就是,本身不具备真正的模块化能力。 1. 面临的问题 你可能会说,...

AlienZHOU
06/15
0
0
【原创】如何管理你的 Javascript 代码

今天不聊技术的问题,咱们来聊聊在前端开发中如何管理好自己的 Javascript 代码。首先,咱们先来说说一般都有哪些管理方式?我相信 、 对于前端开发者而言都不陌生,不错它们都是前端代码模块...

Mr.Zheng
2015/03/13
0
3
webpack4.0各个击破(5)—— Module篇

webpack4.0各个击破(5)—— Module篇 作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高。本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以...

大灰狼的小绵羊哥哥
09/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

请在移动端使用 先选择画笔

先选择画笔 请在移动端使用 https://lxz096.github.io/Canvas-/画板.html

壹峰
10分钟前
0
0
getSupportFragmentManager().beginTransaction().add报错cannot resolve method 'add'

getSupportFragmentManager().beginTransaction().add报错cannot resolve method 'add' 是导包的问题,所有包要保持一致,有app下的包,要保证都为app下的包 v4的包要保证都为v4的包...

lanyu96
24分钟前
0
0
linux 安装redis

Redis的安装 http://redis.io/download 官方安装例子 $ wget http://download.redis.io/releases/redis-4.0.11.tar.gz $ tar xzf redis-4.0.11.tar.gz $ cd redis-4.0.11 $ make //启动 $ sr......

苏牧影子
26分钟前
1
0
图(graph)

图(graph) 图是非线性数据结构,是一种较线性结构和树结构更为复杂的数据结构,在图结构中数据元素之间的关系可以是任意的,图中任意两个数据元素之间都可能相关。 1、概念 1.定义 图(g...

星汉
30分钟前
1
0
好用的vue组件

http://elickzhao.github.io/2017/08/vue%E4%B8%80%E4%BA%9B%E7%89%B9%E5%88%AB%E6%9C%89%E7%94%A8%E7%9A%84%E6%8F%92%E4%BB%B6/...

Littlebox
46分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部