1、老项目的构建输出为什么臃肿?

引用:(引自http://www.cnblogs.com/linfangshuhellowored/p/5657285.html)

答:因为使用的是require的rjs进行构建打包的,了解rjs的都知道,它会把项目所有依赖都打包在一个文件里,如果项目中有很多页面依赖这个模块,那么rjs并不会把这个模块提取出来作为公共模块,所以就会有很多复制性的内容,所以项目自然臃肿。

解决方案:使用webpack配合相应的loader,来完成模块加载和构建的工作。

为什么呢?

。。。。

学习:

a.浏览器阻塞问题

现象:

页面在加载的时候从上往下开始加载和渲染的,当页面有很多分散的JS文件的时候,页面会先加载和解析头部的js文件(同步加载),此时页面渲染就被堵塞了

resolution:

我们可以放在底部去加载,把所有JS放在</body>之前去,这样就会解决了游览器堵塞的问题

 b.js依赖问题

现象:

如果js文件之间是有相互依赖关系的,那么我们的js文件引入的顺序需要我们一定要注意,依赖性大的文件一定在最后引入,但是当依赖关系非常复杂的时候,代码的编写和维            护就非常复杂了。

resolution:

  我们可以把所有的JS文件打包成一个JS文件【If,项目小,直接用 grunt 或者 glup 之类的工具,把所有的js代码合并为一个js,每次需要添加新文件的时候,在相关的配置中添加即可;Else,项目大那可以用AMD的方式加载:http://requirejs.org/,也可以用CMD的方式加载:http://seajs.org/docs/

】,但是依赖性(也就是顺序)我们还是没有办法。[怎么就没办法???在js中async=true/false(异步/同步)不就行了吗???]

未完待看:https://blog.csdn.net/hao134838/article/details/51834609     http://www.cnblogs.com/linfangshuhellowored/p/5657285.html

2. Intellij IDEA 与 Webstorm 的区别是什么,哪个更好?

答:首先,它们都是一个公司的,

Intellij IDEA : java + 前端(html,css,js)
    Webstorm : 前端(html,css,js)
    phpstorm : php +前端(html,css,js)

  其次,Intellij idea虽然功能最强,其他软件的功能都可以靠装插件在Intellij idea上实现,但是写前端的页面体验是没有webstrom好的,如果想做到和webstorm类似的手感,需要手动配置很多选项。

3.AngularJS父子cntroller之间如何通信?

引用(引自转载自:https://github.com/tiw/angularjs-tutorial/blob/master/event.markdown)

  事件是解耦良器,angularjs提供了很方便的事件机构。 发送事件可以用

  $scope.$emit('name', 'args');

或者是

  $scope.$broadcast('name', 'args');

要了解两者的差别, 首先要了解angularjs controller的scope的定义。 这里就不叙述了, 简单来说 angularjs controller的scope就是一个像是js的基于prototye的对象继承。

看看下面这个例子.

首先我们定义几个嵌套的controller。 (木有嵌套, 基本上也不会用事件, 当然事件也可 有$rootscope发出, 但这个首先慎用, 其次也是下面的一个特例)

<div ng-controller="ParentCtrl">

   <div ng-controller="SelfCtrl">

     <a class="btn" ng-click="click()">click me</a>
<div ng-controller="ChildCtrl"></div> </div> <div ng-controller="BroCtrl"></div>
</div>

这里我们有四个controller, 层级关系如下:

 ParentCtrl
-> SelfCtrl (*)
-> ChildCtrl
-> BroCtrl

所有的事件都是由 SelfCtrl 发出去的.

broadcast

事件发送的方法:

$scope.$broadcast

值得注意的是发送的主语是 $scope, 因为所有的事件其实都是作用在scope上的。

broadcast 是从发送者向他的子scope发送时间的一个方法。 这里就是SelfCtrl发送, SelfCtrl 和 ChildCtrl 会接受到, 而ParentCtrl是不会收到的

事件的接受只有一个方法

$scope.$on

例子如下:

angular.module('TestApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
})
.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', 'haha');
$scope.$emit('to-parent', 'hehe');
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d);
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
});

点击clickme后, 在console里是看不到“关我毛事“的, 原因嘛就是 “管他毛事啊”

Emit

了解了broadcast之后, emit可以用以此类推解释了。

angular.module('TestApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-parent', function(e, d) {
console.log('we are the parent, I got it', d);
});
})
.controller('SelfCtrl', function($scope) {
$scope.click = function () {
$scope.$broadcast('to-child', 'haha');
$scope.$emit('to-parent', 'hehe');
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-parent', function(e, d) {
console.log('关我毛事');
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-parent', function(e, d) {
console.log('关我毛事');
});
});

Notes

上面的例子可以看到, 事件和事件发生者的兄弟是没有关系的, 怎样都收不到。

验证

1.$scope.$broadcast('to-child', 'haha');   的作用
<div ng-app="myApp" ng-controller="ParentCtrl">
<div ng-controller="SelfCtrl">
<a class="btn" ng-click="click()">{{self_click}}</a>
<div ng-controller="ChildCtrl">
<div ng-controller="GrandChildCtrl"></div>
</div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
<script>
angular.module('myApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
$scope.$on('to-parent',function(e,d){
console.log('I am the parent',d);
})
})
.controller('SelfCtrl', function($scope) {
$scope.self_click="selfClick";
$scope.click = function () {
$scope.$broadcast('to-child', 'haha');
//$scope.$emit('to-parent', 'hehe');
}
})
.controller('GrandChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the grandChild, I got it', d);
});
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d);
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
});
</script>

效果:

说明:selfChild控制器,使用$scope.$broadcast只能将信息向下传递给其孩子控制器和孙子控制器,不能向上传给父控制器,也不能传给兄弟控制器;

2.$scope.$emit('to-child', 'haha'); 的作用

<div ng-app="myApp" ng-controller="ParentCtrl">
<div ng-controller="SelfCtrl">
<a class="btn" ng-click="click()">{{self_click}}</a>
<div ng-controller="ChildCtrl">
<div ng-controller="GrandChildCtrl"></div>
</div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
<script>
angular.module('myApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
$scope.$on('to-parent',function(e,d){
console.log('I am the parent',d);
})
})
.controller('SelfCtrl', function($scope) {
$scope.self_click="selfClick";
$scope.click = function () {
//$scope.$broadcast('to-child', 'haha');
$scope.$emit('to-parent', 'hehe');
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d);
});
})
.controller('GrandChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the grandChild, I got it', d);
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
});
</script>

效果:

说明:SelfCtrl控制器,使用$emit()只能将信息向上传递给父控制器,不能传递给子孙控制器,也不能传给兄弟控制器。

实际应用

1.需求:页面加载后,显示SelfCtrl和ParentCtrl的内容,点击SelfCtrl后,使用上述通信原理,将ParentCtrl的默认内容修改为SelfCtrl的。

2.实现:

<div ng-app="myApp" ng-controller="ParentCtrl">
<p>父控制器:{{parent_p}}</p>
<div ng-controller="SelfCtrl">
<a class="btn" ng-click="click()">我:{{self_click}}</a>
<div ng-controller="ChildCtrl">
<div ng-controller="GrandChildCtrl"></div>
</div>
</div>
<div ng-controller="BroCtrl"></div>
</div>
<script>
angular.module('myApp', ['ng'])
.controller('ParentCtrl', function($scope) {
$scope.parent_p="parentP";
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
$scope.$on('to-parent',function(e,d){
console.log(e);
$scope.parent_p=e.targetScope.self_click;
console.log('I am the parent',d);
})
})
.controller('SelfCtrl', function($scope) {
$scope.self_click="selfClick";
$scope.click = function () {
//$scope.$broadcast('to-child', 'haha');
$scope.$emit('to-parent', 'hehe');
}
})
.controller('ChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the child, I got it', d);
});
})
.controller('GrandChildCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('I\' the grandChild, I got it', d);
});
})
.controller('BroCtrl', function($scope){
$scope.$on('to-child', function(e, d) {
console.log('关我毛事');
});
});
</script>

效果:

Vue之外的杂谈笔记的更多相关文章

  1. 最新 Vue 源码学习笔记

    最新 Vue 源码学习笔记 v2.x.x & v3.x.x 框架架构 核心算法 设计模式 编码风格 项目结构 为什么出现 解决了什么问题 有哪些应用场景 v2.x.x & v3.x.x ...

  2. vue.js初学,笔记1,安装

    最近学习vue.js,下面是笔记: 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事.来自官网:"这 ...

  3. vue.js初始学习笔记&vue-cli

    笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...

  4. vue 2.0使用笔记

    assets被排除在热重载监听目录之外,一些公共样式文件最好不要放在这个目录 webpack默认没有装less-loader,要.vue文件中使用less,需要npm install less les ...

  5. Vue官方文档笔记(二)

    23.$refs是什么东东? 通过在标签上设置ref属性,然后在Vue实例方法中可以通过$refs拿到这些标签,如: <input ref="input"> metho ...

  6. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  7. 两万字Vue.js基础学习笔记(二)

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  8. c#(asp.net)杂谈笔记

    1.js解析json格式的时间 //转换json格式时间的方法 如Date(1340239979000)转换为正常 function ConvertJSONDateToJSDateObject(JSO ...

  9. 从零开始学习Vue.js,学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

随机推荐

  1. 编译原理之LL(1)文法的判断,递归下降分析程序

    1. 文法 G(S): (1)S -> AB (2)A ->Da|ε (3)B -> cC (4)C -> aADC |ε (5)D -> b|ε 验证文法 G(S)是不 ...

  2. 关于jQuery MiniUI

    jQuery MiniUI v3.0 jQuery MiniUI - 专业WebUI控件库.它能缩短开发时间,减少代码量,使开发者更专注于业务和服务端,轻松实现界面开发,带来绝佳的用户体验. http ...

  3. selenium-server-standalone下载网站

    http://selenium-release.storage.googleapis.com/index.html

  4. opencv在VS2017上的环境搭建

    最近开始做一个图像识别的小项目,需要安装opencv,VS里报的错迷的一批,网上教程好多,找了好长时间,终于找的两个解决了问题,在这儿记录一下. 安装很简单,在opencv官网(https://ope ...

  5. 解决RubyMine中puts中文显示乱码的问题

    一个简单的ruby代码,puts一个中文,显示乱码 # -*- coding: utf-8 -*- puts "你好" require_relative 'calc.rb' # r ...

  6. 这几个 Chrome 的 Tab 增强插件你都用上了吗?

    1.OneTab:将无数 Tab 合并在一个页面 很多时候我们在一个窗口打开太多的tab,每一个tab太小不容易管理,这时候使用OneTab能够把所有tab收起放在一个页面,点击就可打开该tab,非常 ...

  7. node http 模块 常用知识点记录

    关于 node,总是断断续续的学一点,也只能在本地自己模拟实战,相信总会有实战的一天~~ http 作为服务端,开启服务,处理路由,响应等 http 作为客户端,发送请求 http.https.htt ...

  8. python-schedule模块(定时任务)基于官方文档总结

    一.模块安装 pip3 install schedule 官方文档 二.常用的使用案例 #基本格式 #创建方法 def func(): print("方法") #创建定时 sche ...

  9. 资深架构师教你String 常量池、 String.itern()

    什么是常量 用final修饰的成员变量表示常量,值一旦给定就无法改变! final修饰的变量有三种:静态变量.实例变量和局部变量,分别表示三种类型的常量. Class文件中的常量池 在Class文件结 ...

  10. 网络协议 3 - 物理层 和 MAC 层

    在上一篇博文中,我们见证了 IP 地址的诞生,机器一旦有了 IP,就可以在网络的环境里和其他的机器展开沟通了.     今天,我们来认识下 物理层 和 MAC 层.     日常生活中,身为 90 后 ...